菜鸟教程网站分析
Okay，第一遍大致浏览了前端网页的功能、特性、语言等等，现在进入下一个环节，即是“再读和实例分析”，这里采用先两者同步进行的方式，即通过分析网页来查漏补缺。
今天需要剖析的是什么呢？
——不妨就拿菜鸟教程的网页看看吧！
网址：https://www.runoob.com/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脚本：
底部
总结，这个网页的布局中规中矩，但确实是一个值得新手学习的材料。另外，一开始的不需要这么多的外链接，大道至简，从简单的入手。
