HTML head 头标识详尽详细介绍

HTML head 头顶部分的标识、元素有许多，涉及到到访问器对网页页面的3D渲染，SEO 这些，而各个访问器核心和各个中国访问器厂商都一些自身的标识元素,这就导致了许多差别性。挪动互联网技术时期，head 头顶部构造，挪动端 meta 元素，显得更加关键。掌握每一个标识的实际意义，写出考虑自身要求的 head 头标识，是本文的目地。本篇以1丝的文章内容为基本，开展拓展总结详细介绍常见的 head 中各个标识、元素的实际意义和应用情景。

DOCTYPE

DOCTYPE(Document Type)，该申明坐落于文本文档中最前面的部位，处在 html 标识以前，此标识告之访问器文本文档应用哪样 HTML 或 XHTML 标准。

DTD(Document Type Definition) 申明以 <!DOCTYPE> 刚开始，不区别尺寸写，前面沒有任何內容，假如有别的內容(空格以外)会使访问器在 IE 下打开奇异方式(quirks mode)3D渲染网页页面。公共性 DTD，名字文件格式为申请注册//机构//种类 标识//語言,申请注册指机构是不是由国际性规范化机构(ISO)申请注册，+表明是，-表明并不是。机构即机构名字，如：W3C。种类1般是 DTD。标识是特定公布文字叙述，即对所引入的公布文字的唯1叙述性名字，后边可附带版本号号。最终語言是 DTD 語言的 ISO 639 語言标志符，如：EN 表明英文，ZH 表明汉语。XHTML 1.0 可申明3种 DTD 种类。各自表明严苛版本号，过渡版本号，和根据架构的 HTML 文本文档。

●HTML 4.01 strict

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
●HTML 4.01 Transitional

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
●HTML 4.01 Frameset

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
●全新 HTML5 推出更为简约的撰写，它向前向后适配，强烈推荐应用。

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  

在 HTML中 doctype 有两个关键目地。

●对文本文档开展合理性认证。

它告知客户代理商和校检器这个文本文档是依照甚么 DTD 写的。这个姿势是处于被动的，每次网页页面载入时，访问器其实不会免费下载 DTD 并查验合理合法性，仅有当手动式校检网页页面时才开启。

●决策访问器的展现方式

针对具体实际操作，通告访问器载入文本文档时用哪样分析优化算法。假如沒有写，则访问器则依据本身的标准对编码开展分析，将会会比较严重危害 html 排版合理布局。访问器有3种方法分析 HTML 文本文档。

●非奇异（规范）方式
●奇异方式
●一部分奇异（近乎规范）方式 有关IE访问器的文本文档方式，访问器方式，严苛方式，奇异方式，DOCTYPE 标识，可详尽阅读文章方式？规范！的內容。

charset

申明文本文档应用的标识符编号，

XML/HTML Code拷贝內容到剪贴板
  1. <meta charset="utf⑻">  

html5 以前网页页面中会这样写：

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻">  

这两个是等效的，实际可移步阅读文章：<meta charset='utf⑻'> vs <meta http-equiv='Content-Type'>，因此提议应用较短的，易于记忆力。

lang特性

　　简体汉语 

XML/HTML Code拷贝內容到剪贴板
  1. <html lang="zh-cmn-Hans">  

　　繁体汉语

XML/HTML Code拷贝內容到剪贴板
  1. <html lang="zh-cmn-Hant">    

　　为何 lang="zh-cmn-Hans" 而并不是大家一般写的 lang="zh-CN" 呢，请移步阅读文章: 页头顶部的申明应当是用 lang="zh" 還是 lang="zh-cn"。

优先选择应用 IE 全新版本号和 Chrome

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  

　　360 应用Google Chrome Frame

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="renderer" content="webkit">  

　　360 访问器就会在载入到这个标识后，马上切换对应的极速核。 此外以便商业保险起见再添加

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  

　　这样写能够做到的实际效果是假如安裝了 Google Chrome Frame，则应用 GCF 来3D渲染网页页面，假如沒有安裝 GCF，则应用最高版本号的 IE 核心开展3D渲染。

　　有关连接：访问器核心操纵 Meta 标识表明文本文档

百度搜索严禁转码

　　根据百度搜索手机上开启网页页面时，百度搜索将会会对你的网页页面开展转码，脱下你的衣服，往你的身上贴狗皮膏药的广告宣传，为此可在 head 内加上 

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="Cache-Control" content="no-siteapp" />  

　　有关连接：SiteApp 转码申明


SEO 提升一部分

网页页面题目<title>标识(head 头顶部务必)

XML/HTML Code拷贝內容到剪贴板
  1. <title>your title</title>  

网页页面重要词 keywords

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="keywords" content="your keywords">   


网页页面叙述內容 description

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="description" content="your description">  

界定网页页面作者 author

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="author" content="author,email address">  

界定网页页面检索模块数据库索引方法，robotterms 是1组应用英文逗号「,」切分的值，一般有以下几种赋值：none，noindex，nofollow，all，index和follow。

XML/HTML Code拷贝內容到剪贴板

  1. <meta name="robots" content="index,follow">  

有关连接：WEB1038 - 标识包括失效的值

viewport

　　viewport 可让合理布局在挪动访问器上显示信息的更好。 一般会写

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

width=device-width 会致使 iPhone 5 加上到主屏后以 WebApp 全屏方式开启网页页面时出現黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 主要参数：

width viewport 宽度(标值/device-width)
height viewport 高宽比(标值/device-height)
initial-scale 原始放缩占比
maximum-scale 最大放缩占比
minimum-scale 最少放缩占比
user-scalable 是不是容许客户放缩(yes/no)
minimal-ui iOS 7.1 beta 2 中新增特性，能够在网页页面载入时最少化左右情况栏。这是1个布尔运算值，能够立即这样写：

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">  

而假如你的网站并不是回应式的，请不必应用 initial-scale 或禁用放缩。

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="viewport" content="width=device-width,user-scalable=yes">  

有关连接：非回应式设计方案的viewport

　　兼容 iPhone 6 和 iPhone 6plus 则必须写：

XML/HTML Code拷贝內容到剪贴板

  1. <meta name="viewport" content="width=375">  
  2. <meta name="viewport" content="width=414">  

绝大多数 4.7~5 寸的安卓系统机器设备的 viewport 宽设为 360px，iPhone 6 上确是 375px，绝大多数 5.5 寸安卓系统设备（例如说3星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

　　ios 机器设备

　　加上到主屏后的题目（iOS 6 新增）

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="apple-mobile-web-app-title" content="题目"> <!-- 加上到主屏后的题目（iOS 6 新增） -->  


是不是开启 WebApp 全屏方式

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是不是开启 WebApp 全屏方式 -->  

设定情况栏的情况色调

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />    
  2. <!-- 设定情况栏的情况色调，仅有在 `"apple-mobile-web-app-capable" content="yes"` 时起效 -->  

仅有在 "apple-mobile-web-app-capable" content="yes" 时起效

　　content 主要参数：

default 默认设置值。
black 情况栏情况是黑色。
black-translucent 情况栏情况是黑色半全透明。 假如设定为 default 或 black ,网页页面內容从情况栏底部刚开始。 假如设定为 black-translucent ,网页页面內容填满全部显示屏，顶部会被情况栏遮挡。

严禁数据识全自动别为电話号码

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="format-detection" content="telephone=no" /> <!-- 严禁数据识全自动别为电話号码 -->  

iOS 标志

　　rel 主要参数： apple-touch-icon 照片全自动解决成圆角和高光等实际效果。 apple-touch-icon-precomposed 严禁系统软件全自动加上实际效果，立即显示信息设计方案原图。 iPhone 和 iTouch，默认设置 57x57 像素，务必有


拷贝编码
编码以下:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon⑸7x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认设置 57x57 像素，务必有 -->

　　iPad，72x72 像素，能够沒有，但强烈推荐有


拷贝编码
编码以下:

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon⑺2x72-precomposed.png" /> <!-- iPad，72x72 像素，能够沒有，但强烈推荐有 -->

　　Retina iPhone 和 Retina iTouch，114x114 像素，能够沒有，但强烈推荐有


拷贝编码
编码以下:

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon⑴14x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，能够沒有，但强烈推荐有 -->

　　Retina iPad，144x144 像素，能够沒有，但强烈推荐有


拷贝编码
编码以下:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon⑴44x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，能够沒有，但强烈推荐有 -->

　　IOS 标志尺寸在iPhone 6 plus上是180×180，iPhone 6 是120x120。 兼容iPhone 6 plus，则必须在中再加这段


拷贝编码
编码以下:

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

iOS 起动画面

官方文本文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
参照文章内容：http://wxd.ctrip.com/blog/2013/09/ios7-hig⑵4/

iPad 的起动画面是不包含情况栏地区的。

　　iPad 竖屏 768 x 1004（规范辨别率）


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen⑺68x1004.png" /> <!-- iPad 竖屏 768 x 1004（规范辨别率） -->

　　iPad 竖屏 1536x2008（Retina）


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen⑴536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->

　　iPad 横屏 1024x748（规范辨别率）


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait⑴024x748.png" /> <!-- iPad 横屏 1024x748（规范辨别率） -->

　　iPad 横屏 2048x1496（Retina）


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen⑵048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->

　　iPhone 和 iPod touch 的起动画面是包括情况栏地区的。

　　iPhone/iPod Touch 竖屏 320x480 (规范辨别率)

拷贝编码
编码以下:

<link rel="apple-touch-startup-image" href="/splash-screen⑶20x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (规范辨别率) -->

　　iPhone/iPod Touch 竖屏 640x960 (Retina)


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen⑹40x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

　　iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen⑹40x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

　　加上智能化 App 广告宣传条 Smart App Banner（iOS 6+ Safari）


拷贝编码
编码以下:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 加上智能化 App 广告宣传条 Smart App Banner（iOS 6+ Safari） -->

　　iPhone 6对应的照片尺寸是750×1294，iPhone 6 Plus 对应的是1242×2148 。


拷贝编码
编码以下:

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

Windows 8
　　Windows 8 磁贴色调


拷贝编码
编码以下:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴色调 -->

　　Windows 8 磁贴标志


拷贝编码
编码以下:

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴标志 -->

　　rss定阅


拷贝编码
编码以下:

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 加上 RSS 定阅 -->

　　favicon icon


拷贝编码
编码以下:

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 加上 favicon icon -->

较为详尽的 favicon 详细介绍可参照https://github.com/audreyr/favicon-cheat-sheet

挪动端meta

XML/HTML Code拷贝內容到剪贴板

  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />  
  2. <meta name="apple-mobile-web-app-capable" content="yes" />  
  3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
  4. <meta name="format-detection"content="telephone=no, email=no" />  
  5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />  
  6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删掉iPhone默认设置的专用工具栏和工具栏 -->  
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设定iPhone专用工具栏色调 -->  
  8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽视网页页面中的数据鉴别为电話，忽视email鉴别 -->  
  9. <!-- 开启360访问器的极速方式(webkit) -->  
  10. <meta name="renderer" content="webkit">  
  11. <!-- 防止IE应用适配方式 -->  
  12. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  13. <!-- 对于手持机器设备提升，关键是对于1些老的不鉴别viewport的访问器，例如黑莓 -->  
  14. <meta name="HandheldFriendly" content="true">  
  15. <!-- 微软的旧式访问器 -->  
  16. <meta name="MobileOptimized" content="320">  
  17. <!-- uc强制性竖屏 -->  
  18. <meta name="screen-orientation" content="portrait">  
  19. <!-- QQ强制性竖屏 -->  
  20. <meta name="x5-orientation" content="portrait">  
  21. <!-- UC强制性全屏 -->  
  22. <meta name="full-screen" content="yes">  
  23. <!-- QQ强制性全屏 -->  
  24. <meta name="x5-fullscreen" content="true">  
  25. <!-- UC运用方式 -->  
  26. <meta name="browsermode" content="application">  
  27. <!-- QQ运用方式 -->  
  28. <meta name="x5-page-mode" content="app">  
  29. <!-- windows phone 点一下无高光 -->  
  30. <meta name="msapplication-tap-highlight" content="no">  
  31. <!-- 融入挪动端end -->  


这是来自 toobug 的共享总结。

　　更多的 meta 标识参照

  • COMPLETE LIST OF HTML META TAGS
  • 18 Meta Tags Every Webpage Should Have in 2013

　　参照文章内容：

  • 常见的 HTML 头顶部标识
  • html5_header
  • amazeui css
  • DOCTYPE
  • WEB 工程项目师和设计方案师必学的 10 个 IOS 8 新鮮更改