现在我们来回忆一下 第七章 基本模板 中的基础模板，当时我们讲的非常粗略，因为那时候大家对标签的认识还非常少。现在我们对标签已经有了一个初步的了解，那么再回来解释一下这些代码吧：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body></html>第一行，<!DOCTYPE html>，这是对当前文档类型的声明。网上很多文档会告诉我们，它不是一个标签。然后下面又告诉我们，它没有结束标签……这种说法让人很尴尬。在我看来，它的结构更像一个注释，只是这个注释更多的是给浏览器去阅读。
第二行，<html>，这个要和最后一行的 </html> 放在一起看。我们发现这对标记几乎标记了整个文档的内容，那么就是说，被它所标记的这部分内容，是我们这个 HTML 文档中的所有东西。如果结合第一句，这个结构就很清晰，先说这是什么类型，然后说都有哪些内容。
lang="en" 我们已经说过了，是用来说明页面主要语言的。事实上，如果页面涉及到多种语言，我们也可以在其它元素上标记语言属性。
然后 html 标签里面的内容我们可以分为两个部分: head 和 body。这两个单词大家应该都认识，就是“头”和“身体”的意思。我们比较粗略的去说，那么 head 就是用来说明这个页面的一些信息的，这些信息基本不在页面中显示，但我们还是很有必要把它规定出来。与之相对 body 里面放的主要就是用来在页面中显示的内容了。
<title>Document</title>，我们已经知道了，这个是文档的标题，显示在浏览器的标签页上。当然如果搜索引擎过来查看你的页面，它也会把这个信息当做这个页面的标题。
然后 head 里面有一种 meta 标签，这个标签是“元数据”，解释起来非常拗口，元数据是用来描述数据的数据。其实你知道这个标签是对页面的一些深入说明就行了。以上面代码中的为例进行说明：
<meta charset="UTF-8">，是说页面中的字符（char）的编码得设置（set）是 “UTF-8”。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 这一句有点长，不过现在我们已经知道，去查看标签中的各个属性了。那么它有两个属性，第一个属性是 name，元数据的 name 属性也有很多种选择，用来表示这一条数据说的是什么事情，比如：name="description" 就是对这个页面的描述；name="author" 就是这个页面的作者，而后面 content 则是这条数据的具体内容。例如下面的代码：
＜meta name="author" content="稻米鼠"＞就是在说，页面的作者是稻米鼠。理解这点之后，我们再来看刚才的代码。
viewport，这就是把两个单词连在了一起，翻译过来可能叫做“视口”，一个让人很难望文生义的翻译。其实，就是网页的可视区域。但这不是很绝对化的，我们用浏览器打开一个网页，可以看到的区域有多大，viewport 就有多大？并不一定，我们还可以通过一些设置对 viewport 进行调整。这一点在小屏幕的移动设备上尤其重要。
这样再说下去就有些复杂了，那么我们来看一下当前的设置，其实一共也没有几个单词，很容易就能够理解它的意思：width=device-width 是说宽度等于设备的宽度，当然第一个指的是 viewport 的宽度了。initial-scale=1.0 是说初始缩放比例是 1.0，就是不进行缩放。
那么意思理解了，它有什么用呢？这个主要是为我们后面写响应式，或者说自适应网页而准备的。就是我们的网页，可以根据当前显示区域的宽窄，自动进行布局的调整，以达到更好的显示效果，在小屏幕设备上打开也不需要进行缩放了。所以就和浏览器说：设备是多宽，你就给我怎样的宽度，然后不进行任何缩放直接显示，其余的问题，我的网页会处理好的。所以现在我们看到的许多网页，在电脑上显示很好，在手机上显示也很好，再也不会像过去那样，用手机查看一个电脑端的网页，看到的完全是电脑中的那种排版，还需要不断的进行缩放，才能查看全部的内容。
最后还有一句 <meta http-equiv="X-UA-Compatible" content="ie=edge">，这个我们不做深入分析，只是说一下它的意思。这一句就是给 IE 浏览器看的，因为 IE 浏览器版本众多（其实并不，但下一句才是真正的问题），版本间的特性差异又比较大，网络上一些古老的网站，可能只适用于低版本的 IE 浏览器。所以就产生了一系列尴尬的问题，比如为了兼容，IE 的高版本是可以以低版本内核去渲染页面的，这就是所谓的兼容模式。那么现在它遇到你的页面，它应该以何种方式进行渲染，这就是一个问题。而这句代码就是告诉 IE 应该以怎样的方式去渲染当前页面。其中的 ie=edge 是说以最新的内核进行渲染，这样对 HTML5 和 CSS3 中的新特性支持比较好。
暂无评论内容