平时我撸代码的时候，对<head>部分忽视得有点严重，觉得，<head>里面就一个<head>，<link>一下CSS文件，还有<script>，移动端<meta>里面加一下viewport什么的，其他的属性或者标签就真的了解不太多了。所以今天总结一下，head里面的常用标签，以及常用的属性。
综述
<head>并没有我们想得这么简单，一个好的，合理的<head>可以让网页的性能提高不止一个层次。这是我看了<head>之后的感受，下面让我们来一起复习一下<head>。
<head>里的标签：
-
<base>：在我看<head>之前，都不知道有这个属性，好吧，是我孤陋寡闻了。顾名思义，这个标签的作用是基于的意思，举个例子比如在<head>里面有一个<base href="http://www.123.com">，然后在<body>里面的<a href="aaa">的跳转，就是基于<base href="http://www.123.com">的跳转，也就是说，点击<a href="aaa">，会跳转到http://www.123.com/aaa。同理，这个标签的意义就是这样，让你的网站的所有链接，跳转地址都基于<base>里面的地址，当然，如果有一个是<a href="http://www.1234.com/aaa">这样的，那么<base>规定的就会无效，点击<a>标签，会跳转到http://www.1234.com/aaa。 -
<title>：这个标签就不多说了，规定一个标题。 -
<script>：这个标签也没得说，在这个标签内部可以写JavaScript，但是尽量不要加在<head>里面，而是加在<body>标签下面。为什么？这个和浏览器渲染有关，超出了本次讨论的范畴，只能说，后者渲染页面会快一点，只是一点。 -
<link>：这个也无需多言，外部引入一个文件，一般是CSS文件，要比用@import引入CSS好很多，为什么？首先<link>标签没有兼容性，然后<link>里面的CSS是和HTML一起解析的，也就是说，不会出现HTML结构显示在浏览器上了，而CSS样式还没加载出来，整个网站就会特别丑的情况（不知道是我网速太慢还是什么，火狐首页有时候就会出现这种问题，可能就是用的@import而不是<link>）。 -
<style>这个就不多说了，内部写CSS样式。多说一点，在这里写CSS和<link>引用写CSS相比，没有任何不同的地方，权重什么的和这个没有半毛线关系。 -
<meta>：最简单，也是最复杂的一个标签。这个标签本身并不难，内部的属性就像键值对的感觉。
一个name，一个content，或者一个http-equiv，一个content。
首先，从我们平时用得多一点的viewport入手吧。
例如<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个也是我们做手机端常用的一个<meta>标签。
我们都知道，不同的手机屏幕大小，像素比，都是不太一样的，通过修改viewport里的属性值，就能匹配各种手机屏幕，当然，这个只是其中的一个用法，viewport远不是如此，比如还可以限制用户缩放网页什么的。有一款叫做hotcss的插件，就是通过动态修改viewport的值，保证不同用户看到的页面效果相同，具体的计算方式这里就不说了，有兴趣的话可以去github上看一下源码，也就100多行代码。
viewport中具体的content值如下：
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
在 <meta>标签中，有一些是和SEO有关的，比如name="keywords",name="description",name="author"，一个是关键字，一个是详细描述，一个是作者，在content="巴拉巴拉巴拉"中写下对应的内容。
还有一个name="robots"，这个是规定了搜索引擎的索引方式，具体content值如下：
all：文件将被检索，且页面上的链接可以被查询
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索
follow：页面上的链接可以被查询
noindex：文件将不被检索
nofollow：页面上的链接不可以被查询
可以有多个值，用,隔开。
name的就差不多了，下面来说一下http-equiv:
首先，有<meta http-equiv="refresh" content="0;url="123" />这个是用来刷新，重定向用的，content里面的数字，就是多少秒之后刷新的意思，url可以不写，如果写了并且不为空，就是重定向。
然后是告诉浏览器，优先使用什么内核来解析，比如我们的360浏览器是有2个内核的，一个webkit，一个ie。所以我们可以
<meta name="renderer" content="webkit|ie-comp|ie-stand">
来告诉浏览器，优先使用webkit。当然，还可以使用：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
告诉浏览器，使用最新版们的ie或者谷歌。
网友评论