html head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，seo 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。- v% l9 M3 O8 a0 b5 L; n' E# d
doctype
# I+ O! ^- Y# q3 r2 m$ o" x, Sdoctype(document type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 html 或者 xhtml 规范。
% W0 |! i* ~5 v) K/ ndtd(document type definition) 声明以 <!doctype> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 ie 下开启怪异模式(quirks mode)渲染网页。公共 dtd，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(iso)注册，+表示是，-表示不是。组织即组织名称，如：w3c。类型一般是 dtd。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 dtd 语言的 iso 639 语言标识符，如：en 表示英文，zh 表示中文。xhtml 1.0 可声明三种 dtd 类型。分别表示严格版本，过渡版本，以及基于框架的 html 文档。
5 T. O8 m" g. j& y1 ^% M●html 4.01 strict5 D' l0 K J$ t
xml/html code复制内容到剪贴板8 F2 ~" I. v) |# j
<!doctype html public -//w3c//dtd html 4.01//en >4 ~0 q) H. ?$ Z
●html 4.01 transitional" M) E+ X! f9 F; q+ `- q
xml/html code复制内容到剪贴板1 _7 D; J7 W- N6 K
<!doctype html public -//w3c//dtd html 4.01 transitional//en >
& O5 z N9 U( w4 q. q+ t●html 4.01 frameset
% |; T* d8 R# d1 gxml/html code复制内容到剪贴板* k# A7 E+ a8 c2 ^
<!doctype html public -//w3c//dtd html 4.01 frameset//en >$ j" U0 R# l# }1 O! |3 i& h7 G/ W
●最新 html5 推出更加简洁的书写，它向前向后兼容，推荐使用。' T" R+ v$ {( o" b
xml/html code复制内容到剪贴板
1 Q- q/ d! A* I3 V9 n; {<!doctype html>4 N7 k* l8 n0 A( b k8 J
在 html中 doctype 有两个主要目的。
! `% Q7 {7 b- x, X+ A+ ^# _% o●对文档进行有效性验证。4 ?& a! N5 s3 \5 U9 l
它告诉用户代理和校验器这个文档是按照什么 dtd 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 dtd 并检查合法性，只有当手动校验页面时才启用。5 f1 }/ I2 }: g- A
●决定浏览器的呈现模式
8 m6 l* R R" Y6 f3 Q( m对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 html 文档。
$ T3 ^, B$ G! y9 D( f; t8 ?# r●非怪异（标准）模式: c6 w& h: x3 C" P; u' c1 S
●怪异模式- k# ^* H+ U, d* [# H- m: o
●部分怪异（近乎标准）模式 关于ie浏览器的文档模式，浏览器模式，严格模式，怪异模式，doctype 标签，可详细阅读模式？标准！的内容。9 f; Q* U$ {( x# J) H' N
charset
" C+ ?" U; e( y声明文档使用的字符编码，
' Q/ M; _# M' P- H) g# Lxml/html code复制内容到剪贴板
9 o* H# [. |: ~/ F, g0 o6 k; H4 s<meta charset=utf-8>
4 h2 ~2 [( B, I" K2 Uhtml5 之前网页中会这样写：$ z3 v- T# Z, d- q( o) |7 @$ f C( |
xml/html code复制内容到剪贴板9 ~* U* A. L. K' b6 J2 C3 t# [
<meta http-equiv=content-type content=text/html; charset=utf-8>( n, u5 n3 a: k1 ?' k8 t
lang属性
. y# D9 V; G+ l3 J/ ^( u简体中文7 z9 Y1 W/ I- B9 f( Y# C/ N2 O* ]) s
xml/html code复制内容到剪贴板
. w7 s! u8 V8 k! g3 l3 h<html lang=zh-cmn-hans> O4 C, n7 a- K4 K, |- V8 j
繁体中文
. x2 F) X2 R, T# ixml/html code复制内容到剪贴板; i9 `8 m0 w0 m
<html lang=zh-cmn-hant>
6 M0 o3 i2 z% D6 r7 r, {: C为什么 lang=zh-cmn-hans 而不是我们通常写的 lang=zh-cn 呢8 s% p" J& v7 m
优先使用 ie 最新版本和 chrome
& Z5 p/ b/ A5 B. wxml/html code复制内容到剪贴板% D* I$ d9 u" p2 E/ L q0 d4 a k
<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1 />
2 V" p) e0 v2 K5 R) `% M8 e360 使用google chrome frame ]% B' q1 f. M3 k Q& U, x
xml/html code复制内容到剪贴板
B! b! Q- @: @! U3 Z<meta name=renderer content=webkit># F/ Y/ f; i' }
360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入) z- b; m7 R" n, ]! [: Z
xml/html code复制内容到剪贴板
0 p' Z+ B5 X1 s0 X2 Q<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1>% ~- K: \( S4 i3 E) I$ E, X
这样写可以达到的效果是如果安装了 google chrome frame，则使用 gcf 来渲染页面，如果没有安装 gcf，则使用最高版本的 ie 内核进行渲染。7 F0 O h: b# e) z3 B
- n. L2 `* ?; @4 H/ E6 g$ r百度禁止转码
! o2 \" L- B8 Y& k通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加4 }' Q0 C0 k- g7 z
xml/html code复制内容到剪贴板3 M) m6 \6 y, ~6 D. ?- W( Y
<meta http-equiv=cache-control content=no-siteapp />) k5 [/ m) \0 w V. z- g# P& e
S0 `* v- H, W+ q
seo 优化部分
; U) ?% E' Z- y# L- M+ U* H页面标题<title>标签(head 头部必须)
6 u- S% l6 b& u" E2 S9 Mxml/html code复制内容到剪贴板" s0 Z" s+ E' n. _9 x
<title>your title</title>
" R" K/ j7 q! y8 ^" J页面关键词 keywords
) Q2 ^" {# H' P3 qxml/html code复制内容到剪贴板2 k" q( e& W/ O. h* _
<meta name=keywords content=your keywords>2 m& l" I$ d8 p& Z/ Z3 y; Y
页面描述内容 description
& Z) u5 N S! x5 C/ r, hxml/html code复制内容到剪贴板
: S- O7 g3 R, v- @2 U8 Z<meta name=description content=your description>
0 `8 i! d4 D8 u5 h定义网页作者 author! p+ `$ [0 z- Q# l( Z4 [
xml/html code复制内容到剪贴板
& O# h) X# C! ]5 `" V3 \9 d<meta name=author content=author,email address>
) ~! |' n+ L2 v, Z# n( {/ k: l定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。% H) o% o! d4 O7 Z2 K9 j
xml/html code复制内容到剪贴板
5 Y8 O6 p! d: w5 ?9 J8 h' u& R0 h! U<meta name=robots content=index,follow>* o: p% ?$ \" e3 _+ X5 b4 S
viewport$ c7 f9 E8 c( u: t0 Y: ?0 z8 H8 j, i
viewport 可以让布局在移动浏览器上显示的更好。 通常会写3 @: o- G$ T2 x; I
xml/html code复制内容到剪贴板
D; a" Z' E# w/ }& D5 N<meta name=viewport content=width=device-width, initial-scale=1.0>
/ A2 b( I( X% ]1 Iwidth=device-width 会导致 iphone 5 添加到主屏后以 webapp 全屏模式打开页面时出现黑边+ p0 ^2 h, L1 F9 R$ ^+ i' e% g
content 参数：; X0 z. Q# D3 M3 }% U" B [
width viewport 宽度(数值/device-width): e L1 E6 r* n" T6 \. `
height viewport 高度(数值/device-height)- n1 R% h- T( S7 _
initial-scale 初始缩放比例* D4 m$ W; i% Y! R
maximum-scale 最大缩放比例
( X) K; `/ |3 S' e0 z6 }! V) fminimum-scale 最小缩放比例
; Y9 w9 T0 o1 S7 e& z$ R& Cuser-scalable 是否允许用户缩放(yes/no)
5 L# w% S# [% _6 Fminimal-ui ios 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：) I# {. b$ m$ b
xml/html code复制内容到剪贴板, J. Y0 ` r @% }' |8 k, c
<meta name=viewport content=width=device-width, initial-scale=1, minimal-ui>
: }. s- |) c% p而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。0 D: |5 B/ `- D& B
xml/html code复制内容到剪贴板
6 B. v9 A8 Z: \9 d. [8 ^( k/ z<meta name=viewport content=width=device-width,user-scalable=yes>
Y8 j: N& ]* l. Z% I适配 iphone 6 和 iphone 6plus 则需要写：+ [2 Y/ c3 c) E( e# d
xml/html code复制内容到剪贴板! ?' y; _2 n0 c" f0 S8 s
<meta name=viewport content=width=375>
' @" q5 X% ~5 j<meta name=viewport content=width=414>
- c. M4 ?+ B# m9 ?4 e大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iphone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 note）的 viewport 宽为 400，iphone 6 plus 上是 414px。2 K2 P9 t' o" I# e' Y6 q
ios 设备
1 A- T" X/ Z" G P$ G3 O% v添加到主屏后的标题（ios 6 新增）8 C5 j: x9 |! w% i, m |
xml/html code复制内容到剪贴板
8 x2 ?* O3 |7 }) P6 n1 L<meta name=apple-mobile-web-app-title content=标题> <!-- 添加到主屏后的标题（ios 6 新增） -->
0 ]# n- T1 e/ f+ t是否启用 webapp 全屏模式
8 {9 Y2 _, Z0 Q$ p Kxml/html code复制内容到剪贴板5 O" I- L6 K* N% K7 ?! _
<meta name=apple-mobile-web-app-capable content=yes /> <!-- 是否启用 webapp 全屏模式 --># d/ T3 W" m/ ?" { V
设置状态栏的背景颜色
# S8 F7 M, w; u7 Z9 y5 M$ \2 V# u% cxml/html code复制内容到剪贴板
8 H7 E; `- T- f' @4 _/ Q<meta name=apple-mobile-web-app-status-bar-style content=black-translucent />, A, O" i& i, u6 R
<!-- 设置状态栏的背景颜色，只有在 `apple-mobile-web-app-capable content=yes` 时生效 -->
0 i6 a% Y' C+ r! I只有在 apple-mobile-web-app-capable content=yes 时生效
c' m: @' p( P/ N; rcontent 参数：
( q- [. i& d+ p$ r. n. adefault 默认值。6 f/ a+ l. f3 e6 Z6 v
black 状态栏背景是黑色。
8 k+ K' i- L6 {# A5 n! ]& h8 oblack-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。- s U, B" k F m: {* D
禁止数字识自动别为电话号码
2 n! X+ p) ~! B' X7 ?$ ?* lxml/html code复制内容到剪贴板- J8 w& }; ?' F. [( f
<meta name=format-detection content=telephone=no /> <!-- 禁止数字识自动别为电话号码 -->: J6 s8 A& n0 ]4 C
ios 图标4 x4 A% _: l2 @
rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iphone 和 itouch，默认 57x57 像素，必须有
: ]8 B9 E6 H7 L代码如下:
" Z8 }- s/ N' }<link rel=apple-touch-icon-precomposed href=/apple-touch-icon-57x57-precomposed.png /> <!-- iphone 和 itouch，默认 57x57 像素，必须有 -->+ u+ g& q9 H, q. }) s/ v
ipad，72x72 像素，可以没有，但推荐有
# i' I! D7 B3 ]代码如下:
3 ?/ \ r+ Q4 D1 Y& ?; a/ i3 T9 Q<link rel=apple-touch-icon-precomposed sizes=72x72 href=/apple-touch-icon-72x72-precomposed.png /> <!-- ipad，72x72 像素，可以没有，但推荐有 --> S9 p) T) S- Q) G$ K$ @& G/ x; y
retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有 h t& }8 h* m/ k$ ^( k/ M6 E
代码如下:, h2 Q0 u/ Y& r& m
<link rel=apple-touch-icon-precomposed sizes=114x114 href=/apple-touch-icon-114x114-precomposed.png /> <!-- retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有 -->
3 ^7 g. G, ^2 b5 R# ]retina ipad，144x144 像素，可以没有，但推荐有0 g; ?% z. x' U% Z
代码如下:7 r4 D& V6 F& j6 U7 T( H0 Q
<link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png /> <!-- retina ipad，144x144 像素，可以没有，但推荐有 -->& _, O' k5 Q2 X& ^9 g
ios 图标大小在iphone 6 plus上是180×180，iphone 6 是120x120。 适配iphone 6 plus，则需要在中加上这段 f' K5 \& ~& I
代码如下:3 h% }% `) u# h. O. s/ O
<link rel=apple-touch-icon-precomposed sizes=180x180 href=retinahd_icon.png>3 _* p( Z' Q. L: A3 s; Z; r
ios 启动画面( |. m) i w% x
ipad 的启动画面是不包括状态栏区域的。
) g) s9 N \1 n C m$ i' kipad 竖屏 768 x 1004（标准分辨率）
5 {: y( i4 z7 u8 I' U代码如下:
' U3 o0 p _7 j6 d<link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png /> <!-- ipad 竖屏 768 x 1004（标准分辨率） -->
. }6 J/ ]+ H% c ]' U& ?ipad 竖屏 1536x2008（retina）
7 e/ x$ i6 c3 H$ W% A* M) @; G代码如下:) \0 D8 b" q3 \7 f* Q6 }
<link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png /> <!-- ipad 竖屏 1536x2008（retina） -->8 K% ]& P7 i; E1 \( V) c
ipad 横屏 1024x748（标准分辨率）
2 O- f, T' ~0 ]. C, _代码如下: R8 [; S \0 j# F8 o
<link rel=apple-touch-startup-image sizes=1024x748 href=/default-portrait-1024x748.png /> <!-- ipad 横屏 1024x748（标准分辨率） -->
; F( {7 ?- v8 \" J( vipad 横屏 2048x1496（retina）2 i7 d" o6 r: s$ O
代码如下:
8 Y( ?1 p1 m$ [4 G% `$ S<link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png /> <!-- ipad 横屏 2048x1496（retina） -->. E& v" Z9 R; F' P) }% _
iphone 和 ipod touch 的启动画面是包含状态栏区域的。
( ~0 x' E! K4 m- d- c5 Wiphone/ipod touch 竖屏 320x480 (标准分辨率)) o, ~: F8 S: v" J* s1 d+ E
代码如下:" N! C4 X' x9 t; f. m& @+ K
<link rel=apple-touch-startup-image href=/splash-screen-320x480.png /> <!-- iphone/ipod touch 竖屏 320x480 (标准分辨率) -->3 d# C0 S* d, h' j
iphone/ipod touch 竖屏 640x960 (retina), [! V3 y+ ?- O4 f' D* r
代码如下:5 |% |) e- u5 s) \' F! F: x0 W
<link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png /> <!-- iphone/ipod touch 竖屏 640x960 (retina) -->
- L/ E% Z; v* b, Fiphone 5/ipod touch 5 竖屏 640x1136 (retina)3 B% G* w, j$ `1 _, F* b7 _+ l
代码如下:5 A) q. b' N* V0 w+ L
<link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png /> <!-- iphone 5/ipod touch 5 竖屏 640x1136 (retina) -->5 F* g/ u; \& i' Q" x( {
添加智能 app 广告条 smart app banner（ios 6+ safari）: w' x1 z% x( n5 `
代码如下:
l) u+ L0 B2 n. Y4 O<meta name=apple-itunes-app content=app-id=myappstoreid, affiliate-data=myaffiliatedata, app-argument=myurl> <!-- 添加智能 app 广告条 smart app banner（ios 6+ safari） -->
" F; q4 R; G2 Z$ A/ ^ B" ]iphone 6对应的图片大小是750×1294，iphone 6 plus 对应的是1242×2148 。
- E. P9 V& o2 y$ X代码如下:
+ \) D/ b2 ^7 ? @' S<link rel=apple-touch-startup-image href=launch6.png media=(device-width: 375px)>
+ B7 p7 r/ Y" ]$ F9 p. G, [<link rel=apple-touch-startup-image href=launch6plus.png media=(device-width: 414px)>
" ?% L' d$ I, swindows 8
6 H* D- B: G1 p. Hwindows 8 磁贴颜色
1 z2 [) s8 Q1 L K, ]( X( c+ V代码如下:
3 H2 `; k. A: ]+ {0 i<meta name=msapplication-tilecolor content=#000/> <!-- windows 8 磁贴颜色 -->3 {9 o* j! \2 [
windows 8 磁贴图标: V0 E W0 _+ G% E+ C, W; p
代码如下:6 f% m }, l' [2 ^: ]
<meta name=msapplication-tileimage content=icon.png/> <!-- windows 8 磁贴图标 -->
$ \. u# @5 C: p9 O. e' _9 n2 srss订阅. o: b. x- q. L
代码如下:) A- [% e# {4 w3 V+ k# M
<link rel=alternate type=application/rss+xml title=rss href=/rss.xml /> <!-- 添加 rss 订阅 -->5 W: O8 J1 g( j
favicon icon
! ^) S9 R! @/ C2 m9 z6 S代码如下:
1 ^- ^( v1 _& b& `) {+ X<link rel=shortcut icon type=image/ico href=/favicon.ico /> <!-- 添加 favicon icon -->2 m% A5 n F) l+ ^! M/ E! y1 U
移动端的meta
[0 g2 `* G/ K( Xxml/html code复制内容到剪贴板
/ \( }- Q- t5 T& n<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />7 ~8 n5 E2 h% e+ N
<meta name=apple-mobile-web-app-capable content=yes />
7 O$ _/ @0 J# q x4 s- B3 w<meta name=apple-mobile-web-app-status-bar-style content=black />
6 X7 I7 O/ M; f! S9 H. T7 z<meta name=format-detectioncontent=telephone=no, email=no />
\0 X& p3 A6 g' v2 t/ h, g<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />
0 r+ J5 d! j' C, W7 ~" ~<meta name=apple-mobile-web-app-capable content=yes /><!-- 删除苹果默认的工具栏和菜单栏 -->. J+ E% N) A. o4 W2 g4 m5 _
<meta name=apple-mobile-web-app-status-bar-style content=black /><!-- 设置苹果工具栏颜色 -->
( H9 f' O! W& p$ R<meta name=format-detection content=telphone=no, email=no /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
. `% t- W: @6 D O; E<!-- 启用360浏览器的极速模式(webkit) -->
! D1 M& |2 H4 p) @<meta name=renderer content=webkit>
6 D- w2 ~- n8 ~- a, j<!-- 避免ie使用兼容模式 -->
/ D: c) P2 | X0 }/ [. a! y6 Z<meta http-equiv=x-ua-compatible content=ie=edge>4 y% o; x- c/ b
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
7 p1 B+ ?4 {$ H- ~<meta name=handheldfriendly content=true>' j* b" \. \& F; H" h S
<!-- 微软的老式浏览器 -->
3 [& \; ?, j! k5 Q4 V+ }<meta name=mobileoptimized content=320>( Y! D" E% v$ z( c
<!-- uc强制竖屏 -->+ w- E: j% k: H& B' _
<meta name=screen-orientation content=portrait>
5 N* [% D2 @3 ]<!-- qq强制竖屏 -->/ ?( y$ ?! P6 x1 R+ L$ n
<meta name=x5-orientation content=portrait> W( m8 E2 {* o* j+ _
<!-- uc强制全屏 -->6 @* ]1 L8 m C& S; e8 T/ u/ k: O+ ]
<meta name=full-screen content=yes>- D( i; a% o5 Y) P- R: C I
<!-- qq强制全屏 -->
: A# }. A1 r+ x7 T: b+ E<meta name=x5-fullscreen content=true>7 z. U; y1 }% ?- r
<!-- uc应用模式 -->
3 x4 C: S" F1 X2 ^: J% S+ h9 E4 @. b<meta name=browsermode content=application>! B. O* [" ]- d$ j+ M
<!-- qq应用模式 -->
1 }$ R; Q. u; X# ], ^$ s<meta name=x5-page-mode content=app>
4 w( ^7 Y' X) G2 T& Q<!-- windows phone 点击无高光 -->
; m$ i6 |' i6 J W' j* }- L5 k<meta name=msapplication-tap-highlight content=no>
2 C" I+ b; T. b" w* Q<!-- 适应移动端end -->
0 ~0 z3 l6 t' v
: W$ A0 M% \6 N更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴202求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增707网络资讯
GEO优化如何让企业流量翻倍？707网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡