菜鸟教程网站分析

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脚本：

​

底部

​

总结，这个网页的布局中规中矩，但确实是一个值得新手学习的材料。另外，一开始的不需要这么多的外链接，大道至简，从简单的入手。