head 元素
- HTML meta 标签总结与属性使用介绍
- MDN中meta讲解
- 移动端重构系列2——新建空白页面
可用于元素内的元素有: </code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><base></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><link></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><style></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><meta></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><script></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><noscript></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><command></code></span></code></h1>
<p><br></p>
<h1><code style="font-weight:normal;"><head></code><span style="font-size:16px;font-weight:normal;">元素用于定义网页的常规信息和元数据，虽然在网页中不可见，但是也是非常的重要。</span></h1>
<p>总得来说其里面的子元素大概分为三类，分别是：描述网页基本信息的，指向渲染网页需要其他文件链接的，各大厂商根据自己需要定制的。</p>
<h2>网页基本信息</h2>
<p>一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。</p>
<ul>
<li>文档标题（浏览器标签中显示的文本）：<code><title>深入了解 head 元素 编码格式：gb2312格式，不过不建议使用），如果你的页面出现乱码，那一般就是编码格式不对
视窗设置：
搜索引擎优化相关内容：
IE浏览器版本渲染设置：
其他文件链接
一个完整的网页光有 HTML 结构是非常简陋的，就如一个毛坯房。有了结构之后，我们还需要加入样式与行为为网页增添色彩。
- CSS 文件：
- JavaScript 文件：
厂商定制
比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-stand">
<meta name="renderer" content="ie-comp">
同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容（具体参阅：腾讯移动WEB开发平台）。
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
还有IOS也定制了一些移动开发设置如下：
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-startup-image" href="/startup.png">
</code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><base></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><link></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><style></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><meta></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><script></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><noscript></code><span style="font-family:arial, 'x-locale-body', sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;">,<span> </span></span><code style="font-style:inherit;border:0px;font-weight:inherit;font-family:consolas, 'Liberation Mono', courier, monospace;"><command></code></span></code></h1>
<p><br></p>
<h1><code style="font-weight:normal;"><head></code><span style="font-size:16px;font-weight:normal;">元素用于定义网页的常规信息和元数据，虽然在网页中不可见，但是也是非常的重要。</span></h1>
<p>总得来说其里面的子元素大概分为三类，分别是：描述网页基本信息的，指向渲染网页需要其他文件链接的，各大厂商根据自己需要定制的。</p>
<h2>网页基本信息</h2>
<p>一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。</p>
<ul>
<li>文档标题（浏览器标签中显示的文本）：<code><title>深入了解 head 元素 gb2312格式，不过不建议使用），如果你的页面出现乱码，那一般就是编码格式不对其他文件链接
一个完整的网页光有 HTML 结构是非常简陋的，就如一个毛坯房。有了结构之后，我们还需要加入样式与行为为网页增添色彩。
- CSS 文件：
- JavaScript 文件：
厂商定制
比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：
<meta name="renderer" content="webkit">
<meta name="renderer" content="ie-stand">
<meta name="renderer" content="ie-comp">
同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容（具体参阅：腾讯移动WEB开发平台）。
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
还有IOS也定制了一些移动开发设置如下：
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-startup-image" href="/startup.png">