现在我们来回忆一下 第七章 基本模板 中的基础模板,当时我们讲的非常粗略,因为那时候大家对标签的认识还非常少。现在我们对标签已经有了一个初步的了解,那么再回来解释一下这些代码吧:

<!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 标签里面的内容我们可以分为两个部分: headbody。这两个单词大家应该都认识,就是“头”和“身体”的意思。我们比较粗略的去说,那么 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 中的新特性支持比较好。

【本章助记卡片:卡片 for 第二十三章