HTML head 头标签详细介绍
HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。
DOCTYPE
DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
DTD(Document Type Definition) 声明以 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。
●HTML 4.01 strict
XML/HTML Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板标签(head 头部必须) <br /><br /></p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3566')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>your title</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>页面关键词 keywords <br /><br /></p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5916')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"keywords"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your keywords"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p><br />页面描述内容 description <br /></p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8699')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"description"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your description"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>定义网页作者 author <br /></p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2733')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"author"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"author,email address"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <br /><br /><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1191')">复制内容到剪贴板</span></p>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"robots"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"index,follow"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>相关链接：<a target="_blank" href="https://www.iwyv.com/d/files/20220204/xyuzy5y1yqg.aspx">WEB1038 - 标记包含无效的值</a> <br /><br /><strong>viewport</strong></p>
<p> viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2172')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(<a href="https://www.iwyv.com/d/files/20220204/cmmsrelzmks.orz">https://www.iwyv.com/d/files/20220204/cmmsrelzmks.orz</a>)</p>
<p>content 参数：</p>
<p>width viewport 宽度(数值/device-width)<br />height viewport 高度(数值/device-height)<br />initial-scale 初始缩放比例<br />maximum-scale 最大缩放比例<br />minimum-scale 最小缩放比例<br />user-scalable 是否允许用户缩放(yes/no)<br />minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：</p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4407')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8954')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span><span> </span></span></li>
</ol>
<p>相关链接：<a target="_blank" href="http://www.qianduan.net/non-responsive-design-viewport.html">非响应式设计的viewport</a> <br /><br /> 适配 iPhone 6 和 iPhone 6plus 则需要写： <br /><span class="lantxt"><br />XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4250')">复制内容到剪贴板</span></p>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=375"</span><span class="tag">></span><span> </span></span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=414"</span><span class="tag">></span><span> </span></li>
</ol>
<p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。 <br /><br /><strong> ios 设备 <br /><br /></strong> 添加到主屏后的标题（iOS 6 新增） </p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7738')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-title"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"标题"</span><span class="tag">></span><span> </span><span class="comments"><!-- 添加到主屏后的标题（iOS 6 新增） --></span><span> </span></span></li>
</ol>
<p><br />是否启用 WebApp 全屏模式</p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5148')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- 是否启用 WebApp 全屏模式 --></span><span> </span></span></li>
</ol>
<p>设置状态栏的背景颜色</p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5979')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black-translucent"</span><span> </span><span class="tag">/></span><span> </span></span></li>
<li><span></span><span class="comments"><!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --></span><span> </span></li>
</ol>
<p>只有在 "apple-mobile-web-app-capable" content="yes" 时生效 <br /><br /> content 参数： <br /><br />default 默认值。 <br />black 状态栏背景是黑色。 <br />black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 <br /><br /><strong>禁止数字识自动别为电话号码</strong></p>
<span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3828')">复制内容到剪贴板</span>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telephone=no"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- 禁止数字识自动别为电话号码 --></span><span> </span></span></li>
</ol>
<p>iOS 图标</p>
<p> rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --><br /></p>
<p> iPad，72x72 像素，可以没有，但推荐有</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 --><br /></p>
<p> Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --><br /></p>
<p> Retina iPad，144x144 像素，可以没有，但推荐有</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --><br /></p>
<p> IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"><br /></p>
<p><strong>iOS 启动画面<br /><br /></strong>官方文档：<a target="_blank" href="https://developer.apple.com/library/ios/qa/qa1686/_index.html">https://developer.apple.com/library/ios/qa/qa1686/_index.html</a> <br />参考文章：<a target="_blank" href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/">http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</a> <br /><br />iPad 的启动画面是不包括状态栏区域的。</p>
<p> iPad 竖屏 768 x 1004（标准分辨率）</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --><br /></p>
<p> iPad 竖屏 1536x2008（Retina）</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --><br /></p>
<p> iPad 横屏 1024x748（标准分辨率）</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --><br /></p>
<p> iPad 横屏 2048x1496（Retina）</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --><br /></p>
<p> iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p>
<p> iPhone/iPod Touch 竖屏 320x480 (标准分辨率)<br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --><br /></p>
<p> iPhone/iPod Touch 竖屏 640x960 (Retina)</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --><br /></p>
<p> iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --><br /></p>
<p> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --><br /></p>
<p> iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><br /><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"><br /></p>
<p><strong>Windows 8<br /></strong> Windows 8 磁贴颜色</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><br /></p>
<p> Windows 8 磁贴图标</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --><br /></p>
<p> rss订阅</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 --><br /></p>
<p> favicon icon</p>
<p><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下:<br /><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon --><br /></p>
<p>比较详细的 favicon 介绍可参考<a target="_blank" href="https://github.com/audreyr/favicon-cheat-sheet">https://github.com/audreyr/favicon-cheat-sheet<br /></a><br /><strong>移动端的meta <br /><br /></strong><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8641')">复制内容到剪贴板</span></p>
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span> </span></span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span> </span></li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>="format-detection"</span><span class="attribute-value">content</span><span>="</span><span class="attribute">telephone</span><span>=</span><span class="attribute-value">no</span><span>, </span><span class="attribute">email</span><span>=</span><span class="attribute-value">no</span><span>" </span><span class="tag">/></span><span> </span></li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 删除苹果默认的工具栏和菜单栏 --></span><span> </span></li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 设置苹果工具栏颜色 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telphone=no, email=no"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 忽略页面中的数字识别为电话，忽略email识别 --></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"renderer"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"webkit"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">"X-UA-Compatible"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"IE=edge"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"HandheldFriendly"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"true"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- 微软的老式浏览器 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"MobileOptimized"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"320"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- uc强制竖屏 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"screen-orientation"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"portrait"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- QQ强制竖屏 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-orientation"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"portrait"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- UC强制全屏 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"full-screen"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- QQ强制全屏 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-fullscreen"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"true"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- UC应用模式 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"browsermode"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"application"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- QQ应用模式 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-page-mode"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"app"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- windows phone 点击无高光 --></span><span> </span></li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"msapplication-tap-highlight"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"no"</span><span class="tag">></span><span> </span></li>
<li class="alt"><span></span><span class="comments"><!-- 适应移动端end --></span><span> </span></li>
</ol>
<p><br />这是来自 <a href="https://www.iwyv.com/d/files/20220204/rt05iu500m2" target="_blank">toobug</a> 的分享总结。</p>
<p> 更多的 meta 标签参考</p>
<ul>
<li><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/" target="_blank">COMPLETE LIST OF HTML META TAGS</a></li>
<li><a href="http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013" target="_blank">18 Meta Tags Every Webpage Should Have in 2013</a></li>
</ul>
<p> 参考文章：</p>
<ul>
<li><a href="https://github.com/yisibl/blog/issues/1" target="_blank">常用的 HTML 头部标签</a></li>
<li><a href="https://gist.github.com/paddingme/6182708733917ae36331" target="_blank">html5_header</a></li>
<li><a href="http://amazeui.org/css/" target="_blank">amazeui css</a></li>
<li><a href="http://www.douban.com/note/170560091/" target="_blank">DOCTYPE</a></li>
<li><a href="https://www.iwyv.com/d/files/20220205/gq2eq5pa2bt" target="_blank">WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变</a></li>
</ul>
<span id="art_bot" class="jbTestPos"></span>
</div>
<div class="pagebar"> </div>
<div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div>
<div class="mbd_ad">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5850285417076520"
data-ad-slot="9825815134"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="rights">
<h5>版权声明</h5>
<p>本文仅代表作者观点，不代表本站立场。<br>
本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/HTML/71118.html</p>
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script>
</div>
<div class="r-pn-post">
<div class="shang"><a title="通过html为FLASH加链接的实现代码(div层)" href="/web/HTML/71117.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> 通过html为FLASH加链接的实现代码(div层)
</a></div>
<div class="xia"><a href="/web/HTML/71120.html" rel="bookmark" class="next_p"><span>下一篇 :</span> HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法</a></div>
<div class="clear"></div>
</div>
</div>
<div class="related">
<h4>相关文章</h4>
<ul>
<li> <a href="/jtjc/win10/126360.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201604/20160430120607303.jpg" alt="win2008下网站首页后面的index.html如何去掉?"></div>
<p>win2008下网站首页后面的index.html如何去掉?</p>
</a> </li><li> <a href="/3Dsheji/166435.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201606/20160607140926289.jpg" alt="Maya建模:从cube到head"></div>
<p>Maya建模:从cube到head</p>
</a> </li><li> <a href="/Hardware/diannaochangshi/160867.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201406/2014060316175794.jpg" alt="文件格式 html版是什么？文件格式 html版解决方法"></div>
<p>文件格式 html版是什么？文件格式 html版解决方法</p>
</a> </li><li> <a href="/Hardware/diannaochangshi/160860.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201406/201406040928316.jpg" alt="使用百度搜索关键词列表显示文件格式HTML版怎么回事"></div>
<p>使用百度搜索关键词列表显示文件格式HTML版怎么回事</p>
</a> </li><li> <a href="/PMsheji/PS/157209.html">
<div class="img"><img src="https://img.jbzj.com/do/upimg/080906/1220A92202T401J95.gif" alt="Photoshop做简单的xhtml+css网页"></div>
<p>Photoshop做简单的xhtml+css网页</p>
</a> </li><li> <a href="/PMsheji/PS/156774.html">
<div class="img"><img src="https://img.jbzj.com/do/uploads/allimg/090916/1704530.jpg" alt="PhotoShop分割图片并通过Html组合显示"></div>
<p>PhotoShop分割图片并通过Html组合显示</p>
</a> </li><li> <a href="/websafe/yejie/149951.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015925104031825.jpg?2015825104041" alt="HTML5安全风险之CORS攻击详解"></div>
<p>HTML5安全风险之CORS攻击详解</p>
</a> </li><li> <a href="/websafe/yejie/149948.html">
<div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592694628148.jpg?201582694643" alt="HTML5安全风险之Web Storage攻击详解"></div>
<p>HTML5安全风险之Web Storage攻击详解</p>
</a> </li> </ul>
</div>
<div class="post_comments">
<div id="comment">
<link href="/skin/ecmspl/css/pl.css" rel="stylesheet">
<div class="showpage" id="plpost">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;">
<tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr>
</table>
<script>
function CheckPl(obj)
{
if(obj.saytext.value=="")
{
alert("您没什么话要说吗？");
obj.saytext.focus();
return false;
}
return true;
}
</script>
<form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<script src="/e/pl/loginjspl.php"></script>
<textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea>
<script src="/d/js/js/plface.js"></script>
<table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'>
<tr>
<td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" />
</td>
<td width="20%" height="40" bgcolor="#FFFFFF">
<input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;">
<input name="id" type="hidden" id="id" value="71118" />
<input name="classid" type="hidden" id="classid" value="46" />
<input name="enews" type="hidden" id="enews" value="AddPl" />
<input name="repid" type="hidden" id="repid" value="0" />
<input type="hidden" name="ecmsfrom" value="/web/HTML/71118.html">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></form>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" id="infocommentarea"></td>
</tr>
</table>
<script src="/e/extend/infocomment/commentajax.php?classid=46&id=71118"></script>
</div>
</div>
</div>
<div class="pcd_ad"><script src=/d/js/acmsd/thea18.js></script></div>
<div class="mbd_ad">
<!-- 手机广告位-评论底部广告位新 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5850285417076520"
data-ad-slot="9383780240"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script type="text/javascript" src="//gg.iwyv.com/production/mh_g/i/static/wi_djn.js"></script> </div>
</div>
<!--@ mainl-->
<div class="mainr">
<div class="widget widget_ad">
<script src=/d/js/acmsd/thea14.js></script>
</div>
<div class="widget widget_hotpost">
<h4>热门文章</h4>
<ul>
<li><i class="red">1</i><a href="/web/HTML/2021-04-21/55976.html" target="_blank">帝国CMS添加百度地图标注方法</a></li>
<li><i class="red">2</i><a href="/web/HTML/2021-04-19/55157.html" target="_blank">HTML5 简介</a></li>
<li><i class="red">3</i><a href="/web/HTML/70950.html" target="_blank">HTML的a标签href属性指定相对路径与绝对路径的用法讲解</a></li>
<li><i>4</i><a href="/web/HTML/70393.html" target="_blank">HTML中利用div+CSS实现简单的箭头图标的代码 游戏攻略</a></li>
<li><i>5</i><a href="/web/HTML/71374.html" target="_blank">关于HTML中的滚动条/去掉滚动条问题</a></li>
<li><i>6</i><a href="/web/HTML/71957.html" target="_blank">HTML网页各种字体格式的细节修饰</a></li>
<li><i>7</i><a href="/web/HTML/72283.html" target="_blank">XHTML标签都有一个结束标记</a></li>
<li><i>8</i><a href="/web/HTML/70215.html" target="_blank">纯html+css实现奥运五环的示例代码 游戏攻略</a></li>
<li><i>9</i><a href="/web/HTML/71735.html" target="_blank">HTML 几种特别分割线特效</a></li>
<li><i>10</i><a href="/web/HTML/71815.html" target="_blank">基础 HTML之目录问题(相对路径和绝对路径区别)</a></li>
</ul>
</div>
<div class="widget widget_ad">
<script src=/d/js/acmsd/thea10.js></script>
</div>
<div class="widget widget_previous">
<h4>最近发表</h4>
<ul>
<li><a href="/ITzixun/178187.html">日本雷蛇官网实习生上错价了？游戏本只卖15950日元？</a></li>
<li><a href="/youxi/175574.html">《原神》物归原主又归原主世界任务指南 游戏攻略</a></li>
<li><a href="/youxi/175631.html">《原神》振晶的研究第三天试用角色2000分攻略 游戏攻略</a></li>
<li><a href="/youxi/175559.html">《原神》2.6版全旋曜玉帛点位说明_蒙德 游戏攻略</a></li>
<li><a href="/youxi/175547.html">《原神》2.6版深渊11-1守护镇石技巧 游戏攻略</a></li>
<li><a href="/youxi/175604.html">《原神》神里绫华装备搭配推荐 游戏攻略</a></li>
<li><a href="/youxi/175516.html">《原神》云堇突破材料获取方法 游戏攻略</a></li>
<li><a href="/youxi/175494.html">《原神》世界任务他乡迷失客攻略 游戏攻略</a></li>
<li><a href="/youxi/175497.html">《原神》神里绫华全面培养指南 神里绫华技能详解与出装建议 游戏攻略</a></li>
<li><a href="/youxi/175460.html">《原神》神里绫人平民向大世界配队思路 游戏攻略</a></li>
</ul>
</div>
<div class="widget widget_ad">
<script src=/d/js/acmsd/thea11.js></script>
</div>
<div class="widget widget_tags">
<h4>标签列表</h4>
<ul>
<li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C">开放世界</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%B2%99%E7%9B%92">沙盒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win10">win10</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=3D%E8%AE%BE%E8%AE%A1">3D设计</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=PS">PS</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E9%AC%BC%E8%B0%B7%E5%85%AB%E8%8D%92">鬼谷八荒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win7">win7</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%89%8B%E6%B8%B8">手游</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%9B%A2%E9%98%9F%E7%AB%9E%E6%8A%80">团队竞技</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%8E%9F%E7%A5%9E">原神</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E4%BA%8C%E6%AC%A1%E5%85%83%E6%B8%B8%E6%88%8F">二次元游戏</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AD%96%E7%95%A5">策略</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%94%B5%E8%84%91%E5%B8%B8%E8%AF%86">电脑常识</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80">王者荣耀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%85%A7%E7%89%87%E5%A4%84%E7%90%86">照片处理</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=MySQL">MySQL</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%90%83%E9%B8%A1">吃鸡</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AC%94%E8%AE%B0%E6%9C%AC">笔记本</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F%E5%A4%A7%E9%80%83%E6%9D%80">绝地求生大逃杀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%B0%84%E5%87%BB%E7%AB%9E%E4%BA%89">射击竞争</a></li> </ul>
</div>
<div class="widget widget_ad">
<script src=/d/js/acmsd/thea12.js></script>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// JavaScript Document
function goTopEx(){
var obj=document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=value;
}else{
document.body.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";
var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight;
obj.style.bottom=0+"px";
if(h<350){
obj.style.bottom=340+"px";
obj.style.top="auto";
}
}
obj.onclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
</script>
<!--向上 -->
<div id="jz52top" > <span>
<DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV>
</span>
<SCRIPT type=text/javascript>goTopEx();</SCRIPT>
<span>
<ul id="navmenu">
<li><a title="QR Code" class="jzqr" ><b>QR Code</b></a>
<ul>
<div id="jzqrn"> <img src="/skin/ecms172/images/weixin.png" width="228" height="228" />
<p>打开手机扫描上面的二维码</p>
</div>
</ul>
</li>
</ul>
</span> </div>
<!--向上完 -->
<!-- 底部广告-->
<!-- 底部广告-->
<!--底部信息 -->
<div class="ft_wp">
<div id="ft" class="wp cl ftddd" >
<div class="ft_info" >
<div class="ft_z1">
<p>潘少俊衡</p>
<h3 class="ft_z_zdxx_zx">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<span class="pipe"> | </span>
桂ICP备2023010378号-4 </h3>
<h2 class="ft_z_zdxx_zx">
<p style="font-size:12px;">Powered By <a href="https://www.iwyv.com/" title="潘少俊衡" target="_blank">EmpireCMS</a> </p>
</h2>
</div>
<div class="ft_z2">
</div>
<div class="ft_z2">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMBHZNTEL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XFMBHZNTEL');
</script>
<p><a target="_blank" href="https://www.iixiang.com/">爱享小站</a></p>
<p><a target="_blank" href="https://www.sdzdyn.com/">中德益农</a></p>
<p><a target="_blank" href="https://www.guujie.com">谷姐神农</a></p>
<p><a target="_blank" href="https://huanyafeiliao.com/">环亚肥料</a></p>
</div>
<div class="ft_z2">
<p><a target="_blank" href="https://beian.miit.gov.cn/Integrated/index">桂ICP备2023010378号-4</a></p>
<p><a href="https://beian.miit.gov.cn" title="桂公网备 45012202000125号" target="_blank">桂公网备 45012202000125号</a></p>
</div>
<div class="ft_z2">
<p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">联系我们</a></p>
</div>
<div class="ft_z2">
<p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">商业合作</a></p>
<p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">广告投放</a></p>
<p><a target="_blank" href="/tgxz/">投稿须知</a></p>
</div>
<div class="ft_bx"style="left:335px;"> </div>
<div class="ft_bx ft_t1"> </div>
<div class="ft_bx ft_t2"> </div>
<div class="ft_bx ft_t3"> </div>
<div class="ft_bx ft_t4"> </div>
<div class="ft_z3">
<dd> <span><img src="/skin/ecms172/images/weixin.png" width="75" height="72.2" /></span>
<p>
<!-- 引用官方图标 -->
<!-- 引用官方图标百度统计 -->
</p>
<p>使用手机软件扫描微信二维码</p>
<p>关注我们可获取更多热点资讯</p>
<p>感谢潘少俊衡友情技术支持</p>
</dd>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!--底部信息完 -->
<script src="/skin/ecms172/js/common.min.js" type="text/javascript"></script>
<script></script>
</body>
</html>
DOCTYPE
DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
DTD(Document Type Definition) 声明以 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。
●HTML 4.01 strict
XML/HTML Code复制内容到剪贴板
- >
XML/HTML Code复制内容到剪贴板
- >
XML/HTML Code复制内容到剪贴板
- >
XML/HTML Code复制内容到剪贴板
- >
在 HTML中 doctype 有两个主要目的。
●对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。
●决定浏览器的呈现模式
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。
●非怪异（标准）模式
●怪异模式
●部分怪异（近乎标准）模式 关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。
charset
声明文档使用的字符编码，
XML/HTML Code复制内容到剪贴板- <meta charset="utf-8">
html5 之前网页中会这样写：
XML/HTML Code复制内容到剪贴板- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
这两个是等效的，具体可移步阅读： vs ，所以建议使用较短的，易于记忆。
lang属性
简体中文
- <html lang="zh-cmn-Hans">
繁体中文
XML/HTML Code复制内容到剪贴板- <html lang="zh-cmn-Hant">
为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"。
优先使用 IE 最新版本和 Chrome
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360 使用Google Chrome Frame
XML/HTML Code复制内容到剪贴板- <meta name="renderer" content="webkit">
360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入
XML/HTML Code复制内容到剪贴板- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。
相关链接：浏览器内核控制 Meta 标签说明文档
百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
- <meta http-equiv="Cache-Control" content="no-siteapp" />
相关链接：SiteApp 转码声明
SEO 优化部分
页面标题