html head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，seo 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。
3 d% }8 O; M. P; O$ ?: D9 jdoctype
7 K: r: m5 w5 ^+ T0 L, adoctype(document type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 html 或者 xhtml 规范。
( |6 x* |& t- V1 P. `% }dtd(document type definition) 声明以 <!doctype> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 ie 下开启怪异模式(quirks mode)渲染网页。公共 dtd，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(iso)注册，+表示是，-表示不是。组织即组织名称，如：w3c。类型一般是 dtd。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 dtd 语言的 iso 639 语言标识符，如：en 表示英文，zh 表示中文。xhtml 1.0 可声明三种 dtd 类型。分别表示严格版本，过渡版本，以及基于框架的 html 文档。" `/ u$ @3 K, y; \& P
●html 4.01 strict
$ k2 T! S0 M5 Fxml/html code复制内容到剪贴板
2 [0 W5 n3 Y2 u+ j5 e0 o<!doctype html public -//w3c//dtd html 4.01//en >
6 @! { P B2 q7 k●html 4.01 transitional. S1 G" I& v) e
xml/html code复制内容到剪贴板+ N% }. V: l5 O. _; B
<!doctype html public -//w3c//dtd html 4.01 transitional//en >. e! k, h3 X0 P2 a
●html 4.01 frameset
! W4 S& r! P2 a5 q! q! T$ Exml/html code复制内容到剪贴板
' e. b3 ~+ i$ U" _' n2 p<!doctype html public -//w3c//dtd html 4.01 frameset//en >$ c$ H1 F# ]9 S
●最新 html5 推出更加简洁的书写，它向前向后兼容，推荐使用。
5 K3 s' p- F# j: ?xml/html code复制内容到剪贴板8 r0 }' ]1 J* s3 S& u9 Y% T+ Q! }
<!doctype html>
5 R9 K, k: D( i, f在 html中 doctype 有两个主要目的。8 S' k. o( N( W' C3 U9 j0 V
●对文档进行有效性验证。
; F o g- W* ^7 f& m- r0 Y它告诉用户代理和校验器这个文档是按照什么 dtd 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 dtd 并检查合法性，只有当手动校验页面时才启用。: A/ R: K W# @2 m W+ g
●决定浏览器的呈现模式& Z9 h q, H2 ^9 R
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 html 文档。' Y. j9 p# A, v( M; l2 r5 \6 i9 E: q
●非怪异（标准）模式! v7 N& r9 a6 ?( W' e% w
●怪异模式
F O8 Z) Y; ^●部分怪异（近乎标准）模式 关于ie浏览器的文档模式，浏览器模式，严格模式，怪异模式，doctype 标签，可详细阅读模式？标准！的内容。
6 ]! A9 b" ~0 X( ~' d* e) G+ y" Zcharset
2 G9 |4 x) b: F1 c7 p! X声明文档使用的字符编码，" Z- O$ ^0 W; d# E
xml/html code复制内容到剪贴板
; m: [% M9 w/ N7 B; a4 Y" J7 s/ M<meta charset=utf-8>5 C- l3 t9 n' K. M1 j' h
html5 之前网页中会这样写：
* S9 a9 k1 k6 P6 ixml/html code复制内容到剪贴板
- ]3 H$ g1 i5 \/ N! g9 B<meta http-equiv=content-type content=text/html; charset=utf-8>( n, a: ]% a+ q
lang属性$ b- z6 Y) H; P( x c: ?0 ]3 S
简体中文0 k. x1 p" g0 l, ?# O; N9 J' C
xml/html code复制内容到剪贴板
) v1 k; R4 ^" I8 s' L) H. b<html lang=zh-cmn-hans>
7 |) d- d5 T% h" B! ]繁体中文 w- z7 D) d; |5 A. H; O" H
xml/html code复制内容到剪贴板
* O" `" ?0 k; V) S. r9 ?<html lang=zh-cmn-hant>
c+ r# n% {' e8 T4 [为什么 lang=zh-cmn-hans 而不是我们通常写的 lang=zh-cn 呢
3 b! E7 A. S% j1 C$ \$ u; T优先使用 ie 最新版本和 chrome
" @+ u' r5 V2 V% k9 m. L9 f8 U7 Ixml/html code复制内容到剪贴板3 W1 O) F" |# U2 x. s& C+ r, Q
<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1 />5 i8 K% E) ^. Y! M( }; z9 }& `
360 使用google chrome frame
# ^- b5 F- K+ m' l$ N/ {' ?xml/html code复制内容到剪贴板
" M" K9 V* U6 K* C# E. o) n<meta name=renderer content=webkit>1 T0 r# M5 `6 ^$ |
360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入' J0 I2 |- X0 L# G! C& N
xml/html code复制内容到剪贴板
$ ]. q" C& C/ N, x. b<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1>
5 M8 v+ _4 W; c这样写可以达到的效果是如果安装了 google chrome frame，则使用 gcf 来渲染页面，如果没有安装 gcf，则使用最高版本的 ie 内核进行渲染。
. r2 b7 v0 Y1 i" U" ?4 j9 E9 X: }7 C" n' d/ m+ l
百度禁止转码
; B( ?. i9 f! T+ P; X4 {通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
% f- @9 D3 \& [( `. B/ Z$ {2 Cxml/html code复制内容到剪贴板0 o4 |0 _! [* s. }
<meta http-equiv=cache-control content=no-siteapp />6 `" x# t. {8 r4 m1 I
# |" c5 \3 B) q8 |2 C* v+ w. xseo 优化部分# V. j" H+ y+ \* x" }
页面标题<title>标签(head 头部必须)
$ N% {8 x% S0 k7 ?- \6 E/ [xml/html code复制内容到剪贴板
: y9 }6 S* T7 f1 K<title>your title</title>1 O' X" S @) d" E* J& \1 H& Z! M1 V
页面关键词 keywords
3 T' n* ^3 Q1 x1 Hxml/html code复制内容到剪贴板9 M" k1 w, [. o. B8 ?
<meta name=keywords content=your keywords>5 u# ]9 g3 z& x# j! Z
页面描述内容 description4 T! y' a0 R8 k7 C
xml/html code复制内容到剪贴板
' M4 s" ^9 U7 V( l4 y9 C<meta name=description content=your description>
% J" f; v+ T. T3 e$ D定义网页作者 author3 r8 V; R' \$ W! n; m
xml/html code复制内容到剪贴板
: P/ t2 z' {% V# M2 `<meta name=author content=author,email address>
f" M5 `. k) u+ m7 Y: z) k定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
* c. i; z" R8 Z: Hxml/html code复制内容到剪贴板
0 {, m, o, U8 L) L" `<meta name=robots content=index,follow>
2 G+ h9 M. I+ b* b( T% J( Cviewport m7 U% R& x: e8 S% S4 U! E
viewport 可以让布局在移动浏览器上显示的更好。 通常会写* s; G7 {! S) R
xml/html code复制内容到剪贴板
0 u& N7 ~0 A, n+ _<meta name=viewport content=width=device-width, initial-scale=1.0>
& W& k- f: ^$ k6 Q1 Wwidth=device-width 会导致 iphone 5 添加到主屏后以 webapp 全屏模式打开页面时出现黑边
+ i% o7 k. H0 A& \9 I3 Lcontent 参数：
+ a9 N* n y; c% Wwidth viewport 宽度(数值/device-width)$ X/ Y# S1 N/ b& L8 r; E- R8 m/ r
height viewport 高度(数值/device-height)
* v x% p" q) Q5 uinitial-scale 初始缩放比例
* `8 v: J8 L% _) y7 W; `6 F( Hmaximum-scale 最大缩放比例
5 w, L p. X+ g- V, pminimum-scale 最小缩放比例
( Z! T7 d. N# [! vuser-scalable 是否允许用户缩放(yes/no)4 u! Y' g( K! X0 i+ P+ f8 R# X9 Q1 I
minimal-ui ios 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：/ ~4 A |( e7 y6 A
xml/html code复制内容到剪贴板
" s- p; s8 [8 K0 _6 O<meta name=viewport content=width=device-width, initial-scale=1, minimal-ui>
' B0 ^9 ]5 z, i' f4 l而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。% f" N! T D) \* L9 v
xml/html code复制内容到剪贴板" R( d8 x4 g5 o9 m
<meta name=viewport content=width=device-width,user-scalable=yes>- q* z2 B. w# l t/ C" G
适配 iphone 6 和 iphone 6plus 则需要写：2 v6 s" J) m% e5 o# f( {, ^ B
xml/html code复制内容到剪贴板/ x% [- h: m! I
<meta name=viewport content=width=375>
- R# [6 Z3 k {5 ^) p<meta name=viewport content=width=414>( Y7 N: r1 v. H& r
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iphone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 note）的 viewport 宽为 400，iphone 6 plus 上是 414px。2 K& P# o6 `* B: ^4 n/ m
ios 设备
O( R( m' L0 G; X8 X: r添加到主屏后的标题（ios 6 新增）
; G( Y- k; R3 c( U) R( q, lxml/html code复制内容到剪贴板
: I4 N( ~- j9 \) V2 X<meta name=apple-mobile-web-app-title content=标题> <!-- 添加到主屏后的标题（ios 6 新增） -->" R8 Q0 K0 S9 f" z* W
是否启用 webapp 全屏模式; p1 J& ?' ]9 ]. Y1 g
xml/html code复制内容到剪贴板
& X" l2 [3 N/ a<meta name=apple-mobile-web-app-capable content=yes /> <!-- 是否启用 webapp 全屏模式 -->1 F p3 Q& v! i) d
设置状态栏的背景颜色
8 f' }$ W0 u) \- T: K, m; W% Jxml/html code复制内容到剪贴板 G y+ ^2 s# t% C- t. {
<meta name=apple-mobile-web-app-status-bar-style content=black-translucent />0 P b" ~$ |. x1 C0 x, M$ n8 B
<!-- 设置状态栏的背景颜色，只有在 `apple-mobile-web-app-capable content=yes` 时生效 -->! s- e% w3 Y* s
只有在 apple-mobile-web-app-capable content=yes 时生效9 P+ [3 F* D5 u& @/ X$ f
content 参数：
8 n( f5 q" t, C/ odefault 默认值。/ q% |- l$ _( y+ i" y
black 状态栏背景是黑色。
0 V2 L) v2 ?4 W. ^8 u* iblack-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。2 a: u! s; O( r& n
禁止数字识自动别为电话号码
1 M1 Q* o: ?; W p( Fxml/html code复制内容到剪贴板
- i3 v1 U8 X/ {<meta name=format-detection content=telephone=no /> <!-- 禁止数字识自动别为电话号码 -->
& p! j1 s; l7 _+ l+ h3 C5 u0 R" _ios 图标
# l7 `; X! d$ ]- m! D6 drel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iphone 和 itouch，默认 57x57 像素，必须有
& b7 O! y8 L" U5 C3 I, s, _4 h4 c代码如下:* L' n9 ^0 I0 U/ u
<link rel=apple-touch-icon-precomposed href=/apple-touch-icon-57x57-precomposed.png /> <!-- iphone 和 itouch，默认 57x57 像素，必须有 -->6 t, x% v7 d F& s, S/ b+ a
ipad，72x72 像素，可以没有，但推荐有9 Y; q' `" O w) C" K5 Z
代码如下:, U m) @, x1 H2 ?3 J
<link rel=apple-touch-icon-precomposed sizes=72x72 href=/apple-touch-icon-72x72-precomposed.png /> <!-- ipad，72x72 像素，可以没有，但推荐有 -->, Y2 b' ~1 }: I" ^" M
retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有* L% @3 u# G& P C- o6 g3 o2 `$ W
代码如下:
/ j% |: e: i$ s) b+ R<link rel=apple-touch-icon-precomposed sizes=114x114 href=/apple-touch-icon-114x114-precomposed.png /> <!-- retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有 -->: ^) V2 ^$ V1 s, H h; j- t
retina ipad，144x144 像素，可以没有，但推荐有. ?: M/ `" }$ `$ l/ i% m$ ~
代码如下:8 c# w- ~( ]* V8 x7 h
<link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png /> <!-- retina ipad，144x144 像素，可以没有，但推荐有 -->/ ^2 [) n4 b+ ?" b* H5 J
ios 图标大小在iphone 6 plus上是180×180，iphone 6 是120x120。 适配iphone 6 plus，则需要在中加上这段( G( K m/ n4 ?' d$ m/ V2 Z% ~
代码如下:" X/ Z9 X4 C4 F; ?7 X6 X' v
<link rel=apple-touch-icon-precomposed sizes=180x180 href=retinahd_icon.png>
1 ?+ g v! E+ x1 f0 i- X0 Hios 启动画面4 B, ^ s2 w1 Z0 Q& N
ipad 的启动画面是不包括状态栏区域的。
0 _' K( o& [) s2 o! X7 U' K8 [+ n, |ipad 竖屏 768 x 1004（标准分辨率）5 a/ k& v, Y9 P" v" T, g+ L
代码如下:1 ~9 g" i; Y! Y/ j& z! n
<link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png /> <!-- ipad 竖屏 768 x 1004（标准分辨率） -->
/ c8 n6 M, h- l7 ripad 竖屏 1536x2008（retina）
7 G7 ]7 _2 ]+ Z# w代码如下:: F) O. ^- Z6 v/ t! x1 G0 r
<link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png /> <!-- ipad 竖屏 1536x2008（retina） -->5 i/ z( l/ i* [8 `8 b" v6 ?
ipad 横屏 1024x748（标准分辨率）
* Q( z. T, ]4 U% M+ E1 ?0 h7 h X代码如下:+ s" a7 M5 z7 C0 C0 R
<link rel=apple-touch-startup-image sizes=1024x748 href=/default-portrait-1024x748.png /> <!-- ipad 横屏 1024x748（标准分辨率） -->/ E5 c8 H& C1 }/ a0 V) r
ipad 横屏 2048x1496（retina）
+ @. @$ i9 D& e, B8 M+ b" h代码如下:7 ]! O+ U3 }& l. o' o6 N6 p( N
<link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png /> <!-- ipad 横屏 2048x1496（retina） -->
1 O& {* L" M* W* C6 g) yiphone 和 ipod touch 的启动画面是包含状态栏区域的。$ k; u% i3 z0 |- z+ v1 t! G
iphone/ipod touch 竖屏 320x480 (标准分辨率), {# w1 J6 o$ G7 Y- L* c, p) N. I% S6 Z
代码如下:
: l, x0 |) Q4 j j% { F; J6 T<link rel=apple-touch-startup-image href=/splash-screen-320x480.png /> <!-- iphone/ipod touch 竖屏 320x480 (标准分辨率) -->$ J r+ W6 X& d% f: | t* ]
iphone/ipod touch 竖屏 640x960 (retina)
0 _7 F' t: o0 V! }+ c- q# {代码如下:
8 I+ v# s! D3 ?4 B8 |6 T<link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png /> <!-- iphone/ipod touch 竖屏 640x960 (retina) -->3 N! \. ?6 ?9 b. K/ `+ |1 `
iphone 5/ipod touch 5 竖屏 640x1136 (retina)
; c/ [; _2 z( M( l) a4 \- ^2 ~代码如下:
- f @& u% ~! h, M! f; G; E; M- e<link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png /> <!-- iphone 5/ipod touch 5 竖屏 640x1136 (retina) -->! j6 Z! n* u+ J. Q9 q" ~: @
添加智能 app 广告条 smart app banner（ios 6+ safari）$ b: i. m1 L7 q3 ~% G! H9 G
代码如下:. j5 j! g$ q6 v3 O, b
<meta name=apple-itunes-app content=app-id=myappstoreid, affiliate-data=myaffiliatedata, app-argument=myurl> <!-- 添加智能 app 广告条 smart app banner（ios 6+ safari） -->
6 [. s4 L5 I" u* q; |iphone 6对应的图片大小是750×1294，iphone 6 plus 对应的是1242×2148 。! i# B w! a' ?8 ]* G
代码如下:
. C3 P1 u ~+ d<link rel=apple-touch-startup-image href=launch6.png media=(device-width: 375px)>
5 j' G0 s4 k8 u" F* e( T2 g# o<link rel=apple-touch-startup-image href=launch6plus.png media=(device-width: 414px)>
; F( x1 b2 A3 D3 u- ~) p( Awindows 8
0 R$ W) F( a' g$ Z# cwindows 8 磁贴颜色
?( ^" D' ]3 ]) I" ~代码如下:
" W7 G; o6 b% \ m X<meta name=msapplication-tilecolor content=#000/> <!-- windows 8 磁贴颜色 -->& N4 Q. Y, r7 b$ y
windows 8 磁贴图标( }* C+ B' d' r4 O( v6 x
代码如下:$ M) H9 D3 V: `+ Y: B! I
<meta name=msapplication-tileimage content=icon.png/> <!-- windows 8 磁贴图标 -->" B+ O$ R0 {8 U8 |/ A/ r6 d/ N }5 E
rss订阅
" S! O4 p4 [ D代码如下:: J1 b2 B R! B' T: V0 J0 q
<link rel=alternate type=application/rss+xml title=rss href=/rss.xml /> <!-- 添加 rss 订阅 -->
& f8 O* h9 y9 v% x- i, H/ {; g/ V& ^favicon icon f1 d" s; l! q$ _1 ]6 a. L
代码如下:
T* f( J, m& R4 w/ z( b<link rel=shortcut icon type=image/ico href=/favicon.ico /> <!-- 添加 favicon icon -->
% ~1 z# }* ^1 r" l8 [8 L+ q移动端的meta) s, H9 w. y; v: t
xml/html code复制内容到剪贴板
8 q2 ^1 y7 C5 U<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />
" j9 |7 O& @' P4 N, R. n<meta name=apple-mobile-web-app-capable content=yes />
+ H8 [2 f7 ?# e: B& H<meta name=apple-mobile-web-app-status-bar-style content=black />$ `6 e2 u" x: R* F, {
<meta name=format-detectioncontent=telephone=no, email=no />
9 W0 D7 g4 c8 ~) v3 B Y<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />2 V: i+ a+ w' s$ H
<meta name=apple-mobile-web-app-capable content=yes /><!-- 删除苹果默认的工具栏和菜单栏 -->
) P1 ~7 U; D" w<meta name=apple-mobile-web-app-status-bar-style content=black /><!-- 设置苹果工具栏颜色 -->
, d! |8 C: N% R* Y$ G, T<meta name=format-detection content=telphone=no, email=no /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
4 u; L1 b/ c8 c" [5 N<!-- 启用360浏览器的极速模式(webkit) -->1 e3 a8 z4 Z' m* j k$ B
<meta name=renderer content=webkit>) _5 U" |9 D& O: v* W* q
<!-- 避免ie使用兼容模式 -->6 ]/ W3 h( R! L4 `2 z
<meta http-equiv=x-ua-compatible content=ie=edge>" R/ N/ ^7 | h7 m3 |1 v2 L
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
7 K( ^1 l$ s; w9 \<meta name=handheldfriendly content=true>( k- o" T6 K) r, D
<!-- 微软的老式浏览器 -->. t& }! U( K% W1 v' ]1 X4 B
<meta name=mobileoptimized content=320>
: Y* F/ k' f& v+ t: Y+ C# z<!-- uc强制竖屏 -->
% O4 V. x8 h" S<meta name=screen-orientation content=portrait>
7 E$ Z) W; y3 ^<!-- qq强制竖屏 -->
1 p. n0 L3 p: x' E D# s) s<meta name=x5-orientation content=portrait>5 R, [: R8 ?3 ^
<!-- uc强制全屏 -->. h; q- d( P; z1 A
<meta name=full-screen content=yes>0 S' f& X. M! L8 y
<!-- qq强制全屏 -->1 }4 E M) `8 t
<meta name=x5-fullscreen content=true>
0 T+ a2 y8 L* y5 R0 x/ ]<!-- uc应用模式 -->
$ @% ~8 _1 k( w<meta name=browsermode content=application>- G" A8 A: o. W2 l2 @
<!-- qq应用模式 -->* ]- K; V e/ E/ }8 B6 k
<meta name=x5-page-mode content=app>
; X) u0 d0 r( M( N5 o1 M) R<!-- windows phone 点击无高光 -->" ^7 F% a8 X( |/ c1 s
<meta name=msapplication-tap-highlight content=no>
' |$ \) h- e; A$ m9 c& L; \, t) H<!-- 适应移动端end -->' T p1 d1 P7 ^+ B+ h* x. Z
; I# G6 f v7 N, _1 y
更多网页制作信息请查看： 网页制作 |
|
外卖新店开业第一周开推广，十家九家亏0打酱油
Ai优选商家寻找本地地推合作伙伴5256求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增1616网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡