【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

HTML5 新手入门教程手把手教你使用记事本编写第一个网页

放大字体  缩小字体 发布日期:2020-04-22 07:40:05    浏览次数:26
导读

  趁着处于学生狗时代又是在暑假期间,我们刚刚好利用这个时间来学习一下另一个对于我现在还没接触过的领域,那就是网页编程。虽然说我想做一名Android工程师,但是现在Android开发的跨平台性使得Android编程不再仅仅局限于原生开发。我个人学习Android已经将近一年了,记得从去年的暑假,自己拿了学校讲课的书一边敲一边

  趁着处于学生狗时代又是在暑假期间,我们刚刚好利用这个时间来学习一下另一个对于我现在还没接触过的领域,那就是网页编程。虽然说我想做一名Android工程师,但是现在Android开发的跨平台性使得Android编程不再仅仅局限于原生开发。我个人学习Android已经将近一年了,记得从去年的暑假,自己拿了学校讲课的书一边敲一边学习Android基础。后来因为书内容有限,自己又买了

  因为对于Android的兴趣比较高,自己也想以后可以从事Android开发这个工作,所以在Android领域花了所有的时间来学习安卓编程知识。学了一年以后呢,发现Android水平已经很难进步了,这也是我们Android初级开发应需要过的一道坎。

  在这段时间,我买了几本网上推荐的Android进阶的书籍。例如:《Android开发进阶,从小工到专家》、《Android群英传》、《Android开发艺术探索》等。可是这些书籍毕竟是进阶的书,《Android群英传》这本会比其它略好懂一点。虽然有学过一年的Android代码,但是读起这几本书,以我的感觉来看还是偏理论了一点。虽然书中有一些代码解释例子,但进阶的知识毕竟无法以偏概全,想要深入理解,还需要我们自己的深入研究。

  可能有点离题了,但是这是我一个月以来的一些学习内容以及我们推荐给大家几本Android学习书籍。网上有挺多的相关书籍推荐的,但是这几本是本人读过的,虽然有些知识我这个阶段很难理解,但是之后的学习生涯我会慢慢克服这些困难。

  不得不承认一个事实,程序猿这个职业真的是活到老学到老!现在好多招Android的可能会偏向于有Android + H5混合开发经验的程序猿。H5即是HTML5(超文本标签语言)。这种标签语言的简直像我们Android XML文件,所谓同一个爸妈生的,总归有点类似。

  C/S:即是Client/Server(客户端/服务器,例如:QQ、网易云音乐、有道词典等)

  以我们的QQ客户端为例子,我们在Windows环境需要开发一个Windows版;Linux环境需要开发一个Linux版;而Mac需要开发一个Mac版;Android、IOS、WindowsPhone等同理。这就给我们的软件投入使用大大增加的难度。我们需要招很多工程师来开发不同的版本,成本当然就多出了。

  这样看来,我们的网页就体现出它的巨大优势。我们在任何一个平台运行浏览器它显示出来的结果基本没差别。我们在Windows、Android、Mac、IOS等平台打开[百度]基本没差别。

  HTML经历我们好几个版本的历程,现在我们基本统一在使用的HTML5。HTML语言称为超文本标签语言。

  那何为超文本呢?超过文本的限制,我们文本(常用的记事本)只能输入/显示文字。而超文本既能显示文字,也能够显示图片、链接、动态图等等。

  CSS既是CSS样式表,装饰着我们的HTML主题骨架,比如:我们给字体换颜色、大小、位置等。它必须与我们的HTML语言解耦,一般不会写在HTML语言中,通常以标签引入我们的CSS样式表。

  这个没什么好介绍的,我们网页肯定都会有一定的行为。例如:点击事件、输入、弹框等等。这种赋予网页行为的我们称为动态网页,而没有行为的我们称为静态网页,就像死的一样。

  说了这么多理论知识,其实这个还是挺有作用的,我们从它的思想上就可以发现,它的三分部其实没什么联系,要说真没联系,那不可能的。只是抽离了它使其分成了三个部分内容,实际上就是为了解耦。其中最难的就是Javascript。我们放在最后学习。

  讲了这么多,我们还是看一下代码吧。首先,我们看一下最基本的HTML骨架,这个也是最有必要的,以这个骨架为基础,一层一层的开发出我们漂亮的网页。

  今天呢,我们的Hbuidler先不用,我们拿最简单的记事本来写一个网页吧,以便于记忆标签。代码如下:

  在这里面写再多的代码浏览器也无法显示出效果,这是给开发者或搜索引擎使用的,通常配置一些HTML属性,例如我们的CSS样式。

  这个标题显示的位置是我们浏览器的标题栏里,其主要作用:例如,百度第一个时候搜索引擎会去遍历title是否含有此内容。

  这个非常重要,charset指定了字符集编码,有常用的ASCll(美国使用的编码)、GBK(中国使用的编码)、UTF-8(万国码)。只要我们在地球开发,我们就用UTF-8。

  这里总共6个标题级别,大小依次缩小,我们常用的一般到h3级别,h4之后就很少用的到了。

  alt 属性一定记得写。例如我们搜索引擎会遍历alt属性,我们写个猫,那么搜索猫图片的时候就会显现出来,即使图片不是猫。

  这个标签还附带width、height属性,用于指定图片大小(px像素)。如果只指定一个width/height,便以宽、高等比例缩放;指定两个便以指定的大小缩放。不理解的可以自己尝试一下。

  既然提到图片格式,我们有多种可选。比如.jpg、.png、.gif等,我们来看一下这三种的区别和优先选择哪个吧。

  gif区别其它两种,是动态图片。它虽然支持透明,但只是简单的线性透明,比如图像复杂度高的,它便无法透明并且支持的颜色比较少。

  我们开发者需要根据我们的需求情况,做出相应的选择。例如:图片显示效果一致,我们选择占用内存最小的;如果显示效果好的,我们当然选择显示效果优先,为了增加用户体验。

  标签属性我们先介绍到这里,大家不妨可以把我们的代码拷贝到记事本中,然后后缀改成.html文件即可看到效果,我们顺便贴出我们的网页效果吧。

  根据我们刚学的一些标签,现在我们就来实战一个网页吧。为了方便,我就用了李白的两首诗来充当我们的网页内容,可以预览一下我们的网页效果。

  这一个简单的例子,涵盖了我们刚刚学的几个知识点,所谓活学活用就是要这样。这个是我们纯HTML没有任何CSS样式,看起来有点丑。但介于初学者,也可以凑合学习了。下面看一下我们的网页源码,自己好好琢磨琢磨,熟悉一下我们的标签吧。

  这是我的第一个网页,后面继续学习CSS后将会结合CSS样式,写出更好看的页面。运行这段代码很简单,复制我们的代码到你的记事本中,另存为.html文件。最后打开就可以看到效果了。

  大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频...博文来自:帅地

  今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。目录:你以为的人生 一次又一次的伤害 猎头界的真...博文来自:启舰

  文章目录Pillow模块讲解一、Image模块1.1 、打开图片和显示图片1.2、创建一个简单的图像1.3、图像混合(1)透明度混合(2)遮罩混合1.4、图像缩放(1)按像素缩放(2)按尺寸缩放1.5...博文来自:ZackSock的博客

  相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢?我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果:搜索一下:产品经理猝死,只有400万条的搜索结果,从搜...博文来自:曹银飞的专栏

  每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。”今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老...博文来自:沉默王二

  很遗憾,这个春节注定是刻骨铭心的,新型冠状病毒让每个人的神经都是紧绷的。那些处在武汉的白衣天使们,尤其值得我们的尊敬。而我们这些窝在家里的程序员,能不外出就不外出,就是对社会做出的最大的贡献。有些读者...博文来自:沉默王二

  职场和学校最大的不同就是:你在学校,老师给一本书,然后你考试。如果没有通过,就要补考。你在职场,领导给你一个问题,然后你来解决。如果解决不了,就要滚蛋走人。为此,你需要每半年更新一次简历......博文来自:微信公众号:猴子聊人物

  之前做过不到3个月的外包,2020的第一天就被释放了,2019年还剩1天,我从外包公司离职了。我就谈谈我个人的看法吧。首先我们定义一下什么是有前途 稳定的工作环境 不错的收入 能够在项目中不断...博文来自:dotNet全栈开发

  哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!!最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视...博文来自:九章算法的博客

  我有个学弟,在一家小型互联网公司做Java后端开发,最近他们公司新来了一个技术总监,这位技术总监对技术细节很看重,一来公司之后就推出了很多政策,比如定义了很多开发规范、日志规范、甚至是要求大家统一...博文来自:HollisChuangs Blog

  字节跳动创立于2012年3月,到目前仅4年时间。从十几个工程师开始研发,到上百人,再到200余人。产品线由内涵段子,到今日头条,今日特卖,今日电影等产品线。一、产品背景今日头条是为用户提供个性化资讯客...博文来自:作一个独立连续的思考者

  亲测全部都很好用,自己开发都离不开的软件,如果你是学生可以看看,提前熟悉起来。...博文来自:敖丙

  我是一名程序员,从正值青春年华的 24 岁回到三线城市洛阳工作,至今已经 6 年有余。一不小心又暴露了自己的实际年龄,但老读者都知道,我驻颜有术,上次去看房子,业务员肯定地说:“小哥肯定比我小,我今年...博文来自:沉默王二

  今天下午在朋友圈看到很多人都在发github的羊毛,一时没明白是怎么回事。后来上百度搜索了一下,原来真有这回事,毕竟资源主义的羊毛不少啊,1000刀刷爆了朋友圈!不知道你们的朋友圈有没有看到类似的消息...博文来自:dotNet全栈开发

  从来没讲过运维,因为我觉得运维这种东西不需要太多的知识面,然后我一个做了运维朋友告诉我大错特错,他就是从3K的运维一步步到40K的,甚至笑着说:我现在感觉自己什么都能做。既然讲,就讲最重要的吧。监控是...博文来自:Leo的博客

  loonggg读完需要2分钟速读仅需 1 分钟今天刷爆朋友圈和微博的一个 IT 新闻,估计有很多朋友应该已经看到了。程序员删库跑路的事情又发生了,不是调侃,而是真实的事情。微盟官网发布公......博文来自:非著名程序员

  老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才!上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有...博文来自:宜春

  昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“...博文来自:沉默王二

  视频:正普数字化校园宿舍管理系统是为学校宿管科老师方便管理学生住宿情况设计的信息管理系统,通过宿舍管理系统可实时掌握学校...博文来自:张晨光老师的播客

  互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都......博文来自:纯洁的微笑

  loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时......

  为了提高 Java 编程的技艺,我最近在 GitHub 上学习一些高手编写的代码。下面这一行代码(出自大牛之手)据说可以征服你的朋友,让他们觉得你写的代码很 6,来欣赏一下吧。IntStream.ra...

  前言对于会PhotoShop的人来说,弄一张证件照还是非常简单的,但是还是有许多人不会PhotoShop的。今天就给你们带来一个非常简单的方法,用Python快速生成一个证件照,照片的底色随你选。实现...

  最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收...

  昨天看到一档综艺节目,讨论了两个线)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨......

  提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥……然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生!不论是简...

  文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql...

  有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点......

  私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了...

  一个HashMap能跟面试官扯上半个小时关注 安琪拉的博客 1.回复面试领取面试资料 2.回复书籍领取技术电子书 3.回复交流领取技术电子书前言HashMap应该算是Java后端工程师面试的必问...

  即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。想问大家:如果我刚入职这个组就被裁了怎么办呢?大家都是什么时候知...

  如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。...

  有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去?俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1...

  虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。目录:技术氛围 内部晋...

 
关键词: html5教程做页面
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-156804.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4