Dark Wing-HTML head标签

HTML head标签下使用的标签和元素有很多，本文通过归纳总结head中各个标签和元素的意义以及使用的场景，最终达到达到了解每个标签、正确使用每个标签的目的
手机端可左右滑动查看代码

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。

公共 DTD，名称格式为注册//组织//类型标签//语言

注册：指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。
组织：即组织名称，如：W3C。
类型：一般是 DTD。
标签：标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。
语言：语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。

具体DTD模型

HTML 4.01 strict
严格：包含所有HTML元素和属性，但不包括展示性的和弃用的元素（font）,不允许框架集（Framesets）
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
过渡：包含所有HTML元素和属性，包括展示性的和弃用的元素，不允许框架集，现在90%都使用这个
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
框架：等同于HTML 4.01Transitional，但允许框架集内容
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
包含所有HTML元素和属性，包括展示性的和弃用的元素，不允许框架集，必须以格式正确的XML来编写标记
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5
html5当中只是用一种类型的DOCTYPE，现在大部分网站都使用HTML5的DOCTYPE
1
<!doctype html>

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

对文档进行有效性验证。

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

决定浏览器的呈现模式

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

非怪异（标准）模式
怪异模式
部分怪异（近乎标准）模式 *

charset

声明文档使用的字符编码

1	<meta charset="utf-8">

html5 之前网页中会这样写：

1	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

这两个是等效的，推荐使用第一个，因为比较短，好记也好写……

lang属性

简体中文

1	<html lang="zh-cmn-Hans">

繁体中文

1	<html lang="zh-cmn-Hant">

为什么 lang=”zh-cmn-Hans” 而不是我们通常写的 lang=”zh-CN” 呢

书写方法

language-extlang-script-region-variant-extension-privateuse
参考资料：W3C-Language tags in HTML and XML

标签ISO标准
IANA registry
其中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%%
Type: language
Subtag: zh
Description: Chinese
Added: 2005-10-16
Scope: macrolanguage
%%
Type: extlang
Subtag: cmn
Description: Mandarin Chinese
Added: 2009-07-29
Preferred-Value: cmn
Prefix: zh
Macrolanguage: zh
%%
Type: script
Subtag: Hans
Description: Han (Simplified variant)
Added: 2005-10-16

使用浏览器版本

优先使用IE最新版本和Chrome

1	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360浏览器使用谷歌浏览器内嵌框架(Google Chrome Frame, GCF)

1	<meta name="renderer" content="webkit" />

为了保险起见再加入

1	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这样如果安装了GCF，则使用GCF来渲染页面，如果没有安装，则使用最新版本的IE内核来进行渲染

禁止百度转码

通过百度手机打开网页时，百度有可能会对你的网页进行转码，因此可以加入

1	<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO优化

页面标题<title>标签

1	<title>your title</title>

页面关键词keywords

1	<meta name="keywords" content="your keywords">

页面描述内容description

1	<meta name="description" content="your description">

定义网页作者author

1	<meta name="author" content="author">

定义网页搜索引擎索引方式，通常有如下几种取值

follow：跟踪链接并分析目标网页。这是默认行为，并且可忽略。
index：将网页编入索引。这是默认行为，并且可忽略。
noodp：不使用 Open Directory Project 来创建内容描述。
noydir：不使用 Yahoo Directory 来创建内容描述。
noarchive：不允许搜索引擎显示内容的缓存版本。
cache：允许搜索引擎显示内容的缓存版本。
nocache：不允许搜索引擎显示内容的缓存版本。

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

viewport

viewport 可以让布局在移动浏览器上显示的更好。通常会写

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

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
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px
大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px
因此适配 iPhone 6 和 iPhone 6plus 则需要写：

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

移动端的 meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

这里来自 toobug 总结