html head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，seo 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。
- \* F- Q' b& g n. Fdoctype
! o8 D8 C! V: m$ }doctype(document type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 html 或者 xhtml 规范。
5 H9 e' h( [- N7 {, s! ndtd(document type definition) 声明以 <!doctype> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 ie 下开启怪异模式(quirks mode)渲染网页。公共 dtd，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(iso)注册，+表示是，-表示不是。组织即组织名称，如：w3c。类型一般是 dtd。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 dtd 语言的 iso 639 语言标识符，如：en 表示英文，zh 表示中文。xhtml 1.0 可声明三种 dtd 类型。分别表示严格版本，过渡版本，以及基于框架的 html 文档。. q: {) f% k1 j5 X5 f K; M
●html 4.01 strict
6 F4 ]" s9 a. p% Q' S3 N9 g" S) exml/html code复制内容到剪贴板& U2 y+ T& `& z
<!doctype html public -//w3c//dtd html 4.01//en >
2 r: P6 x4 k/ o7 V; n' g- b ?3 @●html 4.01 transitional0 V$ J; U# I- U3 {2 k
xml/html code复制内容到剪贴板
9 i& D& z' _# y& f% X<!doctype html public -//w3c//dtd html 4.01 transitional//en >
$ \* \/ m1 _9 L F1 [$ T" m●html 4.01 frameset
# `$ h" b0 s6 b8 `xml/html code复制内容到剪贴板3 g" V" U; ?1 ?! N
<!doctype html public -//w3c//dtd html 4.01 frameset//en >6 _& f- i& f* Y2 _9 Z) D7 D
●最新 html5 推出更加简洁的书写，它向前向后兼容，推荐使用。( T, y% p1 w! B% ]& X
xml/html code复制内容到剪贴板
1 k/ J& o3 J$ r- I! d4 i) z<!doctype html>
: U) C( H! n; k在 html中 doctype 有两个主要目的。& j* V) h- H! P* }' J
●对文档进行有效性验证。+ l' V5 n, \, f$ w
它告诉用户代理和校验器这个文档是按照什么 dtd 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 dtd 并检查合法性，只有当手动校验页面时才启用。
& T5 [; K7 n( Y2 p●决定浏览器的呈现模式
/ J8 v$ k `( _9 w& `对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 html 文档。
& K7 h$ R5 g2 ]! U7 G●非怪异（标准）模式
& ? J1 K/ j4 J/ C* w% O●怪异模式) q: V" C8 i' u1 d) d3 o E. |
●部分怪异（近乎标准）模式 关于ie浏览器的文档模式，浏览器模式，严格模式，怪异模式，doctype 标签，可详细阅读模式？标准！的内容。
6 p' I6 B! N5 K `$ Ucharset% `# h0 }3 ?2 e8 t% e! j2 V
声明文档使用的字符编码，' u! v) j$ r$ \/ G
xml/html code复制内容到剪贴板
1 m- U0 n, F% r<meta charset=utf-8>
9 l; V; g2 n0 x/ a5 D; w$ Xhtml5 之前网页中会这样写：
: W2 q! H3 O1 v" W7 l6 I! Bxml/html code复制内容到剪贴板+ T" ?* Q4 q' {% V# _
<meta http-equiv=content-type content=text/html; charset=utf-8>
, p; h( a) F) E/ X6 clang属性; D! ]1 |8 \7 C& b: J
简体中文( C e' ?1 s0 {
xml/html code复制内容到剪贴板 D" i$ Z: j" {) V* ~" y2 T) B
<html lang=zh-cmn-hans>
e- Q& t4 F2 j( ^5 I# ?% I繁体中文3 E% i; b- C+ A5 }1 Z8 J
xml/html code复制内容到剪贴板
6 V8 i/ A+ `) a" M4 S; ]& ^) O<html lang=zh-cmn-hant>' @8 q" m0 z* A, s+ l/ h3 x
为什么 lang=zh-cmn-hans 而不是我们通常写的 lang=zh-cn 呢
) g) Z" ]8 u u* D" `优先使用 ie 最新版本和 chrome
C: M; j S' N, F9 ~2 Uxml/html code复制内容到剪贴板9 f6 ^6 N) I2 d$ v+ o
<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1 />
4 z0 ]7 j# M6 U- K+ l- j) @360 使用google chrome frame' J9 y6 D* K3 l. Q7 G9 k
xml/html code复制内容到剪贴板
: }& q, z1 e& k8 U5 f<meta name=renderer content=webkit>
8 n7 B$ ~, d/ B q' r360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入
9 Q5 W# {: u: U5 ^xml/html code复制内容到剪贴板! G1 B, o0 ]+ o" C8 z: h
<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1>% W+ k2 h& c; t0 |) T
这样写可以达到的效果是如果安装了 google chrome frame，则使用 gcf 来渲染页面，如果没有安装 gcf，则使用最高版本的 ie 内核进行渲染。
- h! ]3 h* C: R+ m! t! O3 m+ z! k
百度禁止转码: Y" K9 J, n* \' i5 ^; o# Q! w
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
* j5 W: S6 p/ v, j1 a9 axml/html code复制内容到剪贴板$ \- w; [: v. Q% e3 N9 C# e! }
<meta http-equiv=cache-control content=no-siteapp />
5 M( V! r9 }1 U* j; Q) z2 [ 1 @' B! V' ^' z1 P' y
seo 优化部分
' t. g( Y! q/ Z6 \# f) R页面标题<title>标签(head 头部必须) K" ]+ p. L B3 Q1 d
xml/html code复制内容到剪贴板
7 n0 ]; w! N% E+ W: p3 _ J! N7 [<title>your title</title>$ G4 y* m, R" p4 @
页面关键词 keywords
! f( D3 i3 d$ Z+ m/ `, hxml/html code复制内容到剪贴板2 m" W! a( N9 N
<meta name=keywords content=your keywords>& q- ` C% o5 H+ y4 K
页面描述内容 description
. q& z* l9 i, y4 g" s0 T* Vxml/html code复制内容到剪贴板
* ]% a8 } |' O. m; }<meta name=description content=your description>
* k/ b; Z- u4 Q5 j& f3 I3 e3 m7 |定义网页作者 author
% |( r5 n" ~% sxml/html code复制内容到剪贴板5 C( v/ H, W) k6 E
<meta name=author content=author,email address>
# F& ^( w/ o4 [" M. n定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。$ T% g$ r9 I( R
xml/html code复制内容到剪贴板
; j$ L7 @( v; ^# ]; f0 K* x/ J0 \<meta name=robots content=index,follow>
[. z3 \: x$ q% N7 [ cviewport5 U- `, ~# {' z' I% P' B& J
viewport 可以让布局在移动浏览器上显示的更好。 通常会写
& e3 @7 q! g& `. K) Fxml/html code复制内容到剪贴板3 W7 @+ R" F+ V! b
<meta name=viewport content=width=device-width, initial-scale=1.0>
/ y2 A8 u0 O# m. b9 L% Q9 r5 Iwidth=device-width 会导致 iphone 5 添加到主屏后以 webapp 全屏模式打开页面时出现黑边
: _! [% l3 p0 h. G$ Ncontent 参数：9 |6 c7 d o3 v: b6 D# [/ V
width viewport 宽度(数值/device-width)
( ~6 M9 `& P0 T x6 S, l2 uheight viewport 高度(数值/device-height)- k% W, Z" O+ B" y: K/ p
initial-scale 初始缩放比例
r' P5 T+ h; w2 ?2 O/ {maximum-scale 最大缩放比例$ i6 j% U- }% s
minimum-scale 最小缩放比例
/ z$ \; h9 S% ]user-scalable 是否允许用户缩放(yes/no)
% Z9 p% Q1 l2 q8 _. G1 r6 sminimal-ui ios 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
! p/ S; b7 k' y9 k( \8 Nxml/html code复制内容到剪贴板# d# y4 ^ U8 j
<meta name=viewport content=width=device-width, initial-scale=1, minimal-ui>9 H- k! K0 U, R- E! k7 z
而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。! k P2 n1 a( y' e
xml/html code复制内容到剪贴板
& A: i: U; ^8 w* l: o<meta name=viewport content=width=device-width,user-scalable=yes>0 U& U8 U% @2 k ]4 m1 m) b
适配 iphone 6 和 iphone 6plus 则需要写：
* i- b; d: q! a( |( @2 uxml/html code复制内容到剪贴板
O1 v* B/ u" H. X! w/ c<meta name=viewport content=width=375>- G2 T6 Z/ y* r7 M
<meta name=viewport content=width=414>
! q* N3 t; f' i9 ?9 Z; t大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iphone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 note）的 viewport 宽为 400，iphone 6 plus 上是 414px。6 n ]6 q0 S+ c* ?3 q% y7 ^$ u
ios 设备3 j' r5 O1 u1 A- _* ~0 |- I
添加到主屏后的标题（ios 6 新增）; t; _# P; v" Q! x% c; C
xml/html code复制内容到剪贴板5 F. ^/ e' Q& R3 F" f5 J
<meta name=apple-mobile-web-app-title content=标题> <!-- 添加到主屏后的标题（ios 6 新增） -->
) h+ r$ ?. Y- z8 O7 x是否启用 webapp 全屏模式- V2 \1 a9 E& H! [2 R* v, I7 O
xml/html code复制内容到剪贴板7 M" l4 t# `; E$ c; ?. A/ p' o! h
<meta name=apple-mobile-web-app-capable content=yes /> <!-- 是否启用 webapp 全屏模式 -->
- r* V$ d9 f+ i4 R8 ^* Y9 r& L设置状态栏的背景颜色; \# t) m) W! |% \
xml/html code复制内容到剪贴板
# d: _8 Q# Y! B( o% D<meta name=apple-mobile-web-app-status-bar-style content=black-translucent />- X2 {) x$ s" w, d9 B0 b H9 Q
<!-- 设置状态栏的背景颜色，只有在 `apple-mobile-web-app-capable content=yes` 时生效 -->- e! V3 e7 J4 g- f r& L5 p
只有在 apple-mobile-web-app-capable content=yes 时生效4 _3 B3 a- d8 x
content 参数：/ }1 ~+ X! A$ H& c
default 默认值。
1 w$ P0 R9 T4 wblack 状态栏背景是黑色。% g5 F" U; @& H. W# b: Q2 n8 s1 K
black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
- Q. k8 x9 b- l+ ]禁止数字识自动别为电话号码
% F% Z9 `/ M1 T) }5 ^+ Rxml/html code复制内容到剪贴板
: E; H- q: d- m- X: h<meta name=format-detection content=telephone=no /> <!-- 禁止数字识自动别为电话号码 -->
5 F4 \! Y) N0 a) e! s0 P2 S6 _# A" N7 yios 图标
: N9 e- i( V( R0 Y, P& `, u- Wrel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iphone 和 itouch，默认 57x57 像素，必须有9 P- q# T6 t9 T" k6 p) y1 P: G
代码如下:
% h- H2 h7 u8 t M" k& n<link rel=apple-touch-icon-precomposed href=/apple-touch-icon-57x57-precomposed.png /> <!-- iphone 和 itouch，默认 57x57 像素，必须有 -->
+ B# T& \' N! O6 Wipad，72x72 像素，可以没有，但推荐有% }" N) ^! Z* `: ?) _
代码如下:; }: f" H' l8 v7 [- v$ a
<link rel=apple-touch-icon-precomposed sizes=72x72 href=/apple-touch-icon-72x72-precomposed.png /> <!-- ipad，72x72 像素，可以没有，但推荐有 -->% i; K8 h4 O# n2 E8 q- t/ E
retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有
0 r! Y4 A8 A) L1 N0 ?代码如下:
2 h0 u# O. ?# s! d( R<link rel=apple-touch-icon-precomposed sizes=114x114 href=/apple-touch-icon-114x114-precomposed.png /> <!-- retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有 -->7 R/ L1 P( C+ }
retina ipad，144x144 像素，可以没有，但推荐有
0 u0 K/ y: h) Y' M! s9 U- l代码如下:+ U9 U$ I: b+ b3 S/ ^! P
<link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png /> <!-- retina ipad，144x144 像素，可以没有，但推荐有 -->; |+ ^# c$ y F$ B7 {* A
ios 图标大小在iphone 6 plus上是180×180，iphone 6 是120x120。 适配iphone 6 plus，则需要在中加上这段2 [) x; F# ?. Z9 V
代码如下:8 [5 U! f5 E5 |9 D [8 K
<link rel=apple-touch-icon-precomposed sizes=180x180 href=retinahd_icon.png>
) c1 C8 O) Q/ c( Vios 启动画面
) |. ?/ D6 ]( Y, J) Oipad 的启动画面是不包括状态栏区域的。
, o T, n: Y: ~$ y, Ripad 竖屏 768 x 1004（标准分辨率）7 ^% _4 c! y" u( V6 ?9 |8 O, ]
代码如下:
`0 x! q2 R2 r3 M<link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png /> <!-- ipad 竖屏 768 x 1004（标准分辨率） -->0 o Z8 N1 e$ P% H
ipad 竖屏 1536x2008（retina）
$ K. v9 _! {& {) p" ^代码如下:3 d8 E& z! Y; f+ d& H( P# }- A
<link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png /> <!-- ipad 竖屏 1536x2008（retina） --> o( B: _1 F$ `) O# z. e. ^( N
ipad 横屏 1024x748（标准分辨率）& h/ w2 ^3 W) ?! g! D9 `! R0 D
代码如下:& `% P0 m4 X# N+ \
<link rel=apple-touch-startup-image sizes=1024x748 href=/default-portrait-1024x748.png /> <!-- ipad 横屏 1024x748（标准分辨率） -->. \3 d' {) X9 ^, ^: ^' N- A
ipad 横屏 2048x1496（retina）# d2 j1 k/ O8 S6 U2 d
代码如下:6 ]+ d. ` r* d
<link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png /> <!-- ipad 横屏 2048x1496（retina） -->- f( M d- \/ o
iphone 和 ipod touch 的启动画面是包含状态栏区域的。
) t3 g6 L' N: Q: S- hiphone/ipod touch 竖屏 320x480 (标准分辨率)4 c6 y" i, Z" L6 W9 g" C& j
代码如下:
1 P$ n' U2 Z( i& w" ]- \<link rel=apple-touch-startup-image href=/splash-screen-320x480.png /> <!-- iphone/ipod touch 竖屏 320x480 (标准分辨率) -->
" O `3 u o' ]8 V# {iphone/ipod touch 竖屏 640x960 (retina)
?. l% I8 i8 o# ^' o' Q代码如下:3 e+ S0 B0 I% R$ Z2 u
<link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png /> <!-- iphone/ipod touch 竖屏 640x960 (retina) -->
6 T8 O" D) W2 L: Q2 K1 k# b: [4 E- Riphone 5/ipod touch 5 竖屏 640x1136 (retina)4 O$ A) n' a+ x% g
代码如下:0 e' C& h# Z$ }& J' D
<link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png /> <!-- iphone 5/ipod touch 5 竖屏 640x1136 (retina) --> P# o! u6 r( U$ n6 q1 R
添加智能 app 广告条 smart app banner（ios 6+ safari）) r2 C9 `# R* \/ i
代码如下:( E5 X: T# ?) k
<meta name=apple-itunes-app content=app-id=myappstoreid, affiliate-data=myaffiliatedata, app-argument=myurl> <!-- 添加智能 app 广告条 smart app banner（ios 6+ safari） -->
# `5 P8 A' ]9 y: |7 oiphone 6对应的图片大小是750×1294，iphone 6 plus 对应的是1242×2148 。: A6 s4 }5 \. H) s) ?
代码如下:3 w! k# u& x5 m9 z# E9 T, v; C3 f
<link rel=apple-touch-startup-image href=launch6.png media=(device-width: 375px)> E: V0 p& z, D/ o$ @: ?
<link rel=apple-touch-startup-image href=launch6plus.png media=(device-width: 414px)>
' P9 P% x! A- R n5 gwindows 8. n) W( l$ j' {8 c
windows 8 磁贴颜色
+ W x/ `, C; Z. M代码如下:
) u+ x& w9 x9 B @; ~<meta name=msapplication-tilecolor content=#000/> <!-- windows 8 磁贴颜色 -->7 ^% w, m- |, T6 h
windows 8 磁贴图标( B) s1 R' Z. l; }' V
代码如下:4 Z. H7 Y- y* I& Z
<meta name=msapplication-tileimage content=icon.png/> <!-- windows 8 磁贴图标 -->
. `$ i& A( S! d. o7 u6 C3 {+ ]. Nrss订阅
+ X$ O0 h- o' z3 A. ^ b* h" y代码如下:
) l# b6 ^1 K- W<link rel=alternate type=application/rss+xml title=rss href=/rss.xml /> <!-- 添加 rss 订阅 -->, ^9 R d; w" [6 o
favicon icon% H% A8 u: _& @7 q6 ~9 g
代码如下:% w, u2 S/ o. k$ R$ c
<link rel=shortcut icon type=image/ico href=/favicon.ico /> <!-- 添加 favicon icon -->
6 w% z" t" P5 z1 ]# [* r移动端的meta
, t) U# o/ Y& u7 Xxml/html code复制内容到剪贴板
# O4 u7 }. x6 w' u! {* \<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no /># r8 U+ }+ R; H" y$ z& U; i
<meta name=apple-mobile-web-app-capable content=yes />
; } z" i7 M% O: f<meta name=apple-mobile-web-app-status-bar-style content=black />- A% h' z, h8 m
<meta name=format-detectioncontent=telephone=no, email=no />
9 f4 |' N3 j1 E* D<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />
7 N3 s$ R8 a4 j* M8 C$ S. [<meta name=apple-mobile-web-app-capable content=yes /><!-- 删除苹果默认的工具栏和菜单栏 -->
7 | z% L" D8 ~+ I, f- Q) ]3 @<meta name=apple-mobile-web-app-status-bar-style content=black /><!-- 设置苹果工具栏颜色 --># K1 R$ r( B# K. b4 F5 B% A z
<meta name=format-detection content=telphone=no, email=no /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->1 e+ h+ b6 G) P+ c9 ^/ ?
<!-- 启用360浏览器的极速模式(webkit) -->
" L3 P5 B. y( D& ^0 v3 N3 G<meta name=renderer content=webkit>: h7 B+ v% |! {1 f( E3 |
<!-- 避免ie使用兼容模式 -->
$ \4 f7 k7 J: v( m<meta http-equiv=x-ua-compatible content=ie=edge>3 _. N' G+ E3 ^- D5 F
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->/ w- H7 r% n7 _
<meta name=handheldfriendly content=true>
( X0 _# V9 ^4 g4 s: A5 D% i. _4 p<!-- 微软的老式浏览器 -->6 r( J; S' k5 B$ ~/ w, i
<meta name=mobileoptimized content=320>& p' T# h+ L6 h- w. Q
<!-- uc强制竖屏 -->
1 s" e8 q+ r' g/ L3 P; F0 l<meta name=screen-orientation content=portrait>' B# v: Y' K O0 o6 m
<!-- qq强制竖屏 -->* X& P3 k- ^7 [
<meta name=x5-orientation content=portrait>
6 v9 \' T3 p( v<!-- uc强制全屏 -->
- k# m, \' n$ }/ f4 ~' i<meta name=full-screen content=yes>) f2 `- }* t+ h7 m( J; u/ [
<!-- qq强制全屏 -->
" G7 r1 r; @* n6 v<meta name=x5-fullscreen content=true>
2 K* c' U3 h' {9 }6 Y8 }, f0 `<!-- uc应用模式 -->
/ K1 l1 Z- A+ S+ ?4 ?' E<meta name=browsermode content=application>
! [0 b' t9 q& j# ]% B<!-- qq应用模式 -->
" \# I& U; `4 ]<meta name=x5-page-mode content=app>" M1 l% k, t% \5 @1 v7 |3 D" m
<!-- windows phone 点击无高光 -->
. N6 j1 {5 t$ c) C6 O$ o, ?$ L<meta name=msapplication-tap-highlight content=no>
9 Y! l- y$ ?; K5 M3 w' A5 t<!-- 适应移动端end -->
* Q" M+ m1 t3 @; N" e
, m% y0 w% l! w; F& `0 V2 K( t" i更多网页制作信息请查看： 网页制作 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
