菜鸟教程网站分析
Okay,第一遍大致浏览了前端网页的功能、特性、语言等等,现在进入下一个环节,即是“再读和实例分析”,这里采用先两者同步进行的方式,即通过分析网页来查漏补缺。
今天需要剖析的是什么呢?
——不妨就拿菜鸟教程的网页看看吧!
网址:https://www.runoob/html/html-tutorial.html
输入上述网址,所见即为下图:
根据网页布局来看,可能是用div区块实现的。遂用F12看看网页源码,如下:
不管脚本、链接,先将有关网络布局的部分抽离出来,做一步的时候建议下载网页,然后用Notepad++打开(不过在网页上F12有个好处就是可以看到代码对应的区块)。
何谓“抽离”?
——即是将与目标——网页布局无关的的代码全部删掉,只留下主干。
Head
这个部分主要是一些属性值,见下:
其中:
**meta:**元数据,值数据的数据信息。如:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
上述代码就是指明数据类型为HTML,编码格式为UTF-8。剩下的选项有:
**link:**链接,定义与外部的链接。可选项如下:
代码中的“canonical”只是该网页希望被收录的网页(针对搜索引擎)。
**scipt:**JavaScript脚本。
Body
从上往下分析,先是头部“横幅”。
头部
这部分代码定义了搜索栏的属性,建立了一个txt文本表单。
导航栏
上面这部分代码,利用列表实现了导航栏。
正文页
上面这部分代码,定义了网页正文:左中右的区域及属性,见下:
其中,左边部分就是以一系列链接建立的,如下:
中间部分同样,值得注意的是底部新建笔记这个地方,调用了php和JavaScript脚本:
底部
总结,这个网页的布局中规中矩,但确实是一个值得新手学习的材料。另外,一开始的不需要这么多的外链接,大道至简,从简单的入手。
更多推荐
前端网页手册(2)--菜鸟教程网站分析
发布评论