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复制内容到剪贴板

  ●HTML 4.01 Transitional

  XML/HTML Code复制内容到剪贴板

  ●HTML 4.01 Frameset

  XML/HTML Code复制内容到剪贴板

  ●最新 HTML5 推出更加简洁的书写,它向前向后兼容,推荐使用。

  XML/HTML Code复制内容到剪贴板

  在 HTML中 doctype 有两个主要目的。

  ●对文档进行有效性验证。

  它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载 DTD 并检查合法性,只有当手动校验页面时才启用。

  ●决定浏览器的呈现模式

  对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。

  ●非怪异(标准)模式

  ●怪异模式

  ●部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE 标签,可详细阅读模式?标准!的内容。

  charset

  声明文档使用的字符编码,

  XML/HTML Code复制内容到剪贴板

  html5 之前网页中会这样写:

  XML/HTML Code复制内容到剪贴板

  这两个是等效的,具体可移步阅读: vs ,所以建议使用较短的,易于记忆。

  lang属性

  简体中文

  XML/HTML Code复制内容到剪贴板

  繁体中文

  XML/HTML Code复制内容到剪贴板

  为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"。

  优先使用 IE 最新版本和 Chrome

  XML/HTML Code复制内容到剪贴板

  360 使用Google Chrome Frame

  XML/HTML Code复制内容到剪贴板

  360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入

  XML/HTML Code复制内容到剪贴板

  这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。

  相关链接:浏览器内核控制 Meta 标签说明文档

  百度禁止转码

  通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加

  XML/HTML Code复制内容到剪贴板

  相关链接:SiteApp 转码声明

  SEO 优化部分

  页面标题标签(head 头部必须)</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  页面关键词 keywords</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  页面描述内容 description</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  定义网页作者 author</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  相关链接:WEB1038 - 标记包含无效的值</p> <p>  viewport</p> <p>  viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p> <p>  content 参数:</p> <p>  width viewport 宽度(数值/device-width)</p> <p>  height viewport 高度(数值/device-height)</p> <p>  initial-scale 初始缩放比例</p> <p>  maximum-scale 最大缩放比例</p> <p>  minimum-scale 最小缩放比例</p> <p>  user-scalable 是否允许用户缩放(yes/no)</p> <p>  minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  相关链接:非响应式设计的viewport</p> <p>  适配 iPhone 6 和 iPhone 6plus 则需要写:</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。</p> <p>  ios 设备</p> <p>  添加到主屏后的标题(iOS 6 新增)</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  是否启用 WebApp 全屏模式</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  设置状态栏的背景颜色</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  只有在 "apple-mobile-web-app-capable" content="yes" 时生效</p> <p>  content 参数:</p> <p>  default 默认值。</p> <p>  black 状态栏背景是黑色。</p> <p>  black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。</p> <p>  禁止数字识自动别为电话号码</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  iOS 图标</p> <p>  rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-icon-precomposed" href="http://www.jb51.net/apple-touch-icon-57x57-precomposed.png" /> </p> <p>  iPad,72x72 像素,可以没有,但推荐有</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.jb51.net/apple-touch-icon-72x72-precomposed.png" /> </p> <p>  Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.jb51.net/apple-touch-icon-114x114-precomposed.png" /> </p> <p>  Retina iPad,144x144 像素,可以没有,但推荐有</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.jb51.net/apple-touch-icon-144x144-precomposed.png" /> </p> <p>  IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://www.jb51.net/web/retinahd_icon.png"></p> <p>  iOS 启动画面</p> <p>  官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html</p> <p>  参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</p> <p>  iPad 的启动画面是不包括状态栏区域的。</p> <p>  iPad 竖屏 768 x 1004(标准分辨率)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="768x1004" href="http://www.jb51.net/splash-screen-768x1004.png" /> </p> <p>  iPad 竖屏 1536x2008(Retina)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="1536x2008" href="http://www.jb51.net/splash-screen-1536x2008.png" /> </p> <p>  iPad 横屏 1024x748(标准分辨率)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="1024x748" href="http://www.jb51.net/Default-Portrait-1024x748.png" /> </p> <p>  iPad 横屏 2048x1496(Retina)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="2048x1496" href="http://www.jb51.net/splash-screen-2048x1496.png" /> </p> <p>  iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p> <p>  iPhone/iPod Touch 竖屏 320x480 (标准分辨率)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" href="http://www.jb51.net/splash-screen-320x480.png" /> </p> <p>  iPhone/iPod Touch 竖屏 640x960 (Retina)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="640x960" href="http://www.jb51.net/splash-screen-640x960.png" /> </p> <p>  iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" sizes="640x1136" href="http://www.jb51.net/splash-screen-640x1136.png" /> </p> <p>  添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)</p> <p>  复制代码代码如下:</p> <p>  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </p> <p>  iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。</p> <p>  复制代码代码如下:</p> <p>  <link rel="apple-touch-startup-image" href="http://www.jb51.net/web/launch6.png" media="(device-width: 375px)"></p> <p>  <link rel="apple-touch-startup-image" href="http://www.jb51.net/web/launch6plus.png" media="(device-width: 414px)"></p> <p>  Windows 8</p> <p>  Windows 8 磁贴颜色</p> <p>  复制代码代码如下:</p> <p>  <meta name="msapplication-TileColor" content="#000"/> </p> <p>  Windows 8 磁贴图标</p> <p>  复制代码代码如下:</p> <p>  <meta name="msapplication-TileImage" content="icon.png"/> </p> <p>  rss订阅</p> <p>  复制代码代码如下:</p> <p>  <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.jb51.net/rss.xml" /> </p> <p>  favicon icon</p> <p>  复制代码代码如下:</p> <p>  <link rel="shortcut icon" type="image/ico" href="http://www.jb51.net/favicon.ico" /> </p> <p>  比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet</p> <p>  移动端的meta</p> <p>  XML/HTML Code复制内容到剪贴板</p> <p>  这是来自 toobug 的分享总结。</p> <p>  更多的 meta 标签参考</p> <p>  参考文章:</p> <div class="art_xg"> <b>您可能感兴趣的文章:</b> <ul> <li><a href="/shangbei/5399.html" title="CF 11月周末痛快玩活动进行中 好礼送不停" target="_blank">CF 11月周末痛快玩活动进行中 好礼送不停</a></li> <li><a href="/shangbei/28287.html" title="DNF魔笛套和夏日套哪个好 魔笛套和夏日套属性对比分析" target="_blank">DNF魔笛套和夏日套哪个好 魔笛套和夏日套属性对比分析</a></li> <li><a href="/xianan/3623.html" title="boox viewer(pdg阅读器) v1.0b3 免费绿色汉化版" target="_blank">boox viewer(pdg阅读器) v1.0b3 免费绿色汉化版</a></li> <li><a href="/houfang/23124.html" title="小米6值不值得买?小米6全面深度评测图解" target="_blank">小米6值不值得买?小米6全面深度评测图解</a></li> <li><a href="/houfang/30310.html" title="深入分析MySQL数据类型 DECIMAL" target="_blank">深入分析MySQL数据类型 DECIMAL</a></li> <li><a href="/xianan/13873.html" title="三国战纪3 简体中文免安装版" target="_blank">三国战纪3 简体中文免安装版</a></li> <li><a href="/shangbei/35138.html" title="Google相机官方版(拍照相机软件) v9.1.098.575362725.29 安卓手机版" target="_blank">Google相机官方版(拍照相机软件) v9.1.098.575362725.29 安卓手机版</a></li> <li><a href="/houfang/35671.html" title="花店名字简洁大气" target="_blank">花店名字简洁大气</a></li> <li><a href="/qianyuan/26338.html" title="独特新颖的保健品店名字" target="_blank">独特新颖的保健品店名字</a></li> <li><a href="/houfang/26994.html" title="新潮好听的美发店名字" target="_blank">新潮好听的美发店名字</a></li> </ul> </div> </div> <!--endmain--> <div class="tags clearfix"> <i class="icon-tag"></i> </div> <div id="shoucang"></div> <div class="xgcomm clearfix"> <h2>相关文章</h2> <ul> <!--预留空位--> <li><a href="/shangbei/36702.html" title="HTML 5 <table> border 属性" target="_blank">HTML 5 <table> border 属性</a></li> <li><a href="/youdong/14988.html" title="在html文件里include文件内容的方法小结" target="_blank">在html文件里include文件内容的方法小结</a></li> <li><a href="/shangbei/36758.html" title="html editor编辑器 v4.0.3 最新安卓版" target="_blank">html editor编辑器 v4.0.3 最新安卓版</a></li> <li><a href="/shangbei/36733.html" title="HTML DOM lineHeight 属性" target="_blank">HTML DOM lineHeight 属性</a></li> <li><a href="/houfang/7025.html" title="webpack打包后index.html引用文件地址问题小结" target="_blank">webpack打包后index.html引用文件地址问题小结</a></li> <li><a href="/shangbei/36698.html" title="HTML 5 <option> 标签" target="_blank">HTML 5 <option> 标签</a></li> <li><a href="/xianan/3.html" title="(jsp/html)网页上嵌入播放器(常用播放器代码整理)" target="_blank">(jsp/html)网页上嵌入播放器(常用播放器代码整理)</a></li> <li><a href="/houfang/22556.html" title="实现音乐播放器的代码(html5+css3+jquery)" target="_blank">实现音乐播放器的代码(html5+css3+jquery)</a></li> <li><a href="/youdong/7427.html" title="XHTML教程,简单认识XHTML基础知识" target="_blank">XHTML教程,简单认识XHTML基础知识</a></li> <li><a href="/shangbei/36709.html" title="HTML clearfix清除浮动讲解" target="_blank">HTML clearfix清除浮动讲解</a></li> </ul> </div> <div class="lbd clearfix mt5"> <!--预留空位--> </div> </div> <!--endborder--> </div> <!--end fl--> <div class="main-right"> <div id="sidebar-right"> <div class="r300 clearfix"><span id="side_up" class="jbTestPos"><div class="_tzgwhtanot"> <!--预留空位--></div></span></div> <div class="sidebox-recomm"></div> <div class="sidebox bor-blue"> <div class="bor-default pb10"> <h4 class="blue">大家感兴趣的内容</h4> <ul class="newsList newList-in"> <li><a href="/shangbei/36772.html" title="HTML head 头标签详细介绍" target="_blank">HTML head 头标签详细介绍</a></li> <li><a href="/shangbei/36767.html" title="html form表单基础入门案例讲解" target="_blank">html form表单基础入门案例讲解</a></li> <li><a href="/shangbei/36763.html" title="HTML embed标签使用方法和属性详解" target="_blank">HTML embed标签使用方法和属性详解</a></li> <li><a href="/shangbei/36758.html" title="html editor编辑器 v4.0.3 最新安卓版" target="_blank">html editor编辑器 v4.0.3 最新安卓版</a></li> <li><a href="/shangbei/36755.html" title="HTML DOM Textarea 对象" target="_blank">HTML DOM Textarea 对象</a></li> <li><a href="/shangbei/36752.html" title="HTML DOM setInterval() 方法" target="_blank">HTML DOM setInterval() 方法</a></li> <li><a href="/shangbei/36748.html" title="HTML DOM Radio 对象" target="_blank">HTML DOM Radio 对象</a></li> <li><a href="/shangbei/36744.html" title="HTML DOM minHeight 属性" target="_blank">HTML DOM minHeight 属性</a></li> <li><a href="/shangbei/36741.html" title="HTML DOM marginRight 属性" target="_blank">HTML DOM marginRight 属性</a></li> <li><a href="/shangbei/36737.html" title="HTML DOM marginBottom 属性" target="_blank">HTML DOM marginBottom 属性</a></li> </ul> </div> </div> <div class="r300 clearfix mt10"><span id="idctu" class="jbTestPos"><div class="_o39regrbj5h"> <!--预留空位--></div> </span></div> <div class="sidebox bor-blue"> <div class="bor-default pb10"> <h4 class="blue">最近更新的内容</h4> <ul class="newsListA"> <li><a href="/houfang/36773.html" title="诛仙好听六字网名" target="_blank">诛仙好听六字网名</a></li> <li><a href="/shangbei/36772.html" title="HTML head 头标签详细介绍" target="_blank">HTML head 头标签详细介绍</a></li> <li><a href="/youdong/36771.html" title="黑月手游官方版 for Android v2.7.0 安卓手机版" target="_blank">黑月手游官方版 for Android v2.7.0 安卓手机版</a></li> <li><a href="/zuoxi/36770.html" title="用js实现trim()的解决办法" target="_blank">用js实现trim()的解决办法</a></li> <li><a href="/houfang/36769.html" title="诛仙3游戏情侣名字" target="_blank">诛仙3游戏情侣名字</a></li> <li><a href="/zuoxi/36768.html" title="用iTunes恢复时,未能恢复iPhone发生未知错误(-1)的解决方法" target="_blank">用iTunes恢复时,未能恢复iPhone发生未知错误(-1)的解决方法</a></li> <li><a href="/shangbei/36767.html" title="html form表单基础入门案例讲解" target="_blank">html form表单基础入门案例讲解</a></li> <li><a href="/youdong/36766.html" title="黑手党最终版十二项修改器(无限生命/一击必杀) v1.0 风灵月影" target="_blank">黑手党最终版十二项修改器(无限生命/一击必杀) v1.0 风灵月影</a></li> <li><a href="/houfang/36765.html" title="诛仙3新手怎么快速升级_诛仙3新手快速升级攻略心得" target="_blank">诛仙3新手怎么快速升级_诛仙3新手快速升级攻略心得</a></li> <li><a href="/zuoxi/36764.html" title="用Go获取短信验证码的示例代码" target="_blank">用Go获取短信验证码的示例代码</a></li> </ul> </div> </div> <div class="sidebox bor-blue"> </div> </div> </div> <!--end fr--> </div> </div> <!--share start--> <div id="right-share" class="lefts" style="display: block;"> <a class="rshare-top" onclick="javascript:;"></a> </div> <!--share end--> <!-- 目录容器 --> <div class="AutoCatelog"> <div class="AutoCatelogLlist" id="CatelogList" style=""></div> </div> </div> <!--end content--> <div id="footer"> <div class="footer-bottom"> <p> </p> </div> </div> <!--end footer--> <link type="text/css" rel="stylesheet" href="./2024/extend.css"> <script type="text/javascript" src="/2024/extend.js.下载"></script> <script type="text/javascript" src="/2024/arc2019.js.下载"></script> <script type="text/javascript" src="/2024/viewer.min.js.下载"></script> <div id="tongji"> <script type="text/javascript" src="/2024/tongji.js.下载"></script><script src="/2024/hm(1).js.下载" language="JavaScript"></script> </div> <script id="bs-cm" src="/2024/cm.js.下载" async="async" defer="defer"></script> </body></html>