html head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，seo 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。+ z. p+ }+ P6 C: b# V; b, a
doctype
& `1 j3 P0 t6 x/ Hdoctype(document type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 html 或者 xhtml 规范。% n) |+ b/ ?- G3 \
dtd(document type definition) 声明以 <!doctype> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 ie 下开启怪异模式(quirks mode)渲染网页。公共 dtd，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(iso)注册，+表示是，-表示不是。组织即组织名称，如：w3c。类型一般是 dtd。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 dtd 语言的 iso 639 语言标识符，如：en 表示英文，zh 表示中文。xhtml 1.0 可声明三种 dtd 类型。分别表示严格版本，过渡版本，以及基于框架的 html 文档。9 u5 g8 s' \) Q% J$ n
●html 4.01 strict- h3 Q' D: K* B }' V% \' F
xml/html code复制内容到剪贴板
6 L8 C; _) M3 M/ S$ l) t<!doctype html public -//w3c//dtd html 4.01//en >% i2 g4 |! B: y7 f0 H
●html 4.01 transitional
0 k7 `* l$ {' T S+ Wxml/html code复制内容到剪贴板9 F! B+ V) }0 O. O0 e
<!doctype html public -//w3c//dtd html 4.01 transitional//en >6 f4 R; V+ G+ Q/ |* t; R# F* L
●html 4.01 frameset6 I( `* k; }$ y% h: q* V
xml/html code复制内容到剪贴板+ v% R1 R0 }% o4 w- N: \. F! o
<!doctype html public -//w3c//dtd html 4.01 frameset//en >0 j4 [; U; l, k/ b+ L2 g( F
●最新 html5 推出更加简洁的书写，它向前向后兼容，推荐使用。5 C. G& I) w( C, o: [+ g+ O5 {
xml/html code复制内容到剪贴板. o* j2 }1 J8 ]- O" ?2 B
<!doctype html>
7 s$ @7 Y0 w( C/ L6 y# j在 html中 doctype 有两个主要目的。' G: S j7 o7 h0 X& Z% v3 ]( k
●对文档进行有效性验证。
' d# p) \' @2 Y4 K& o7 V% h它告诉用户代理和校验器这个文档是按照什么 dtd 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 dtd 并检查合法性，只有当手动校验页面时才启用。
2 B @# n) k) w●决定浏览器的呈现模式) B- ?. f+ ~+ M+ u0 x/ E
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 html 文档。
9 P8 h; r5 j. T# S% |●非怪异（标准）模式1 F1 D/ a6 F) g. a
●怪异模式
$ G9 G* z) Y& b& X4 m●部分怪异（近乎标准）模式 关于ie浏览器的文档模式，浏览器模式，严格模式，怪异模式，doctype 标签，可详细阅读模式？标准！的内容。
- R: ? Q. _* s7 g8 D L3 `charset
$ u3 w. \* p7 p2 z, r1 O声明文档使用的字符编码，$ C, W- o$ q# t4 Q, a: x9 D
xml/html code复制内容到剪贴板
, H$ e+ E* T) O0 ]* W# u<meta charset=utf-8>$ j" @0 ?& `# p
html5 之前网页中会这样写：
. Y8 J3 B2 F. c6 R& I7 pxml/html code复制内容到剪贴板
: F7 P2 R4 V- G3 L* ]4 D" I0 ]<meta http-equiv=content-type content=text/html; charset=utf-8>9 q* r- t1 S1 I- r+ t/ D9 y
lang属性
' @6 |6 t7 a/ D! w* n. M简体中文# K! @4 r5 f6 B4 O* k: f
xml/html code复制内容到剪贴板6 E* z6 o5 F5 Z: Q
<html lang=zh-cmn-hans>
" x) m6 _" e2 f R繁体中文( I, O2 e) b3 M1 J% q6 a# B0 T
xml/html code复制内容到剪贴板8 o/ r w1 a# R4 c* Q e
<html lang=zh-cmn-hant>
0 k. }& o0 P2 r为什么 lang=zh-cmn-hans 而不是我们通常写的 lang=zh-cn 呢
. q0 Z, `7 c. w优先使用 ie 最新版本和 chrome+ O0 T1 X" b1 n7 H7 _) u: J
xml/html code复制内容到剪贴板
( e* T1 v) `) L0 R<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1 />
/ c! }* }+ s) J, M, T360 使用google chrome frame3 u$ }! J* h S/ @% r
xml/html code复制内容到剪贴板5 m2 B6 v, s2 e! G$ B4 f& {
<meta name=renderer content=webkit>
6 _$ _) X4 O9 F$ f( |360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入
5 w! L3 Y/ M9 j6 h' sxml/html code复制内容到剪贴板, h5 o6 W3 B0 Q3 o* \9 a
<meta http-equiv=x-ua-compatible content=ie=edge,chrome=1>1 H" A: I3 k' g* M( d
这样写可以达到的效果是如果安装了 google chrome frame，则使用 gcf 来渲染页面，如果没有安装 gcf，则使用最高版本的 ie 内核进行渲染。
6 P+ U, z0 h8 n: L3 O, T& k: w4 \7 t$ F
百度禁止转码1 ?; s4 c& y2 g. q' t% M# `4 C
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
' j8 ?4 \. r, Hxml/html code复制内容到剪贴板4 ?/ e: ]+ K& @! O! s9 e
<meta http-equiv=cache-control content=no-siteapp />
; r/ T. k4 u" B9 E( T' v [
$ x3 l" s6 c# U1 p3 Wseo 优化部分
+ X4 h* |/ _$ ~% Z1 ?页面标题<title>标签(head 头部必须)) p2 H4 i9 R: C9 _3 p9 w
xml/html code复制内容到剪贴板4 {2 V/ ~* T* H6 a( g- n
<title>your title</title>
1 @' @, |3 d# }& M. J* G页面关键词 keywords, j6 h* H1 _' F6 d3 C0 q( L
xml/html code复制内容到剪贴板
+ q* F9 }* H. E5 m8 T$ j+ |<meta name=keywords content=your keywords>
/ I/ N( }$ I/ a页面描述内容 description' `2 @# E. p# U" F
xml/html code复制内容到剪贴板
3 a4 R! o+ O9 f: x, y. t<meta name=description content=your description>- B, X9 O8 g' I+ r0 b9 u4 x$ M5 A
定义网页作者 author: F' G2 }& \! o$ i! W. u
xml/html code复制内容到剪贴板
4 Y% g d! b( p( u, ]2 Q& a<meta name=author content=author,email address>
" B: n9 @( j7 F& t9 D) w' Q定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
8 R3 w% I; v0 fxml/html code复制内容到剪贴板0 C9 y" J( L# w( `$ [, y' ~
<meta name=robots content=index,follow>
* x7 L" f3 B# [" aviewport2 j6 D7 E n% [8 g- f: K
viewport 可以让布局在移动浏览器上显示的更好。 通常会写
% ^1 `- d& I, k5 x, Oxml/html code复制内容到剪贴板6 b+ G. d1 ~# D M: z$ K& U
<meta name=viewport content=width=device-width, initial-scale=1.0>
5 n! T. I( h. B4 P8 i6 x% xwidth=device-width 会导致 iphone 5 添加到主屏后以 webapp 全屏模式打开页面时出现黑边
. e' u3 Y7 y' o4 w/ |3 K# E* gcontent 参数：
1 h) M( u9 ~. t; `. o3 pwidth viewport 宽度(数值/device-width)
/ ?5 [/ V0 A% b9 eheight viewport 高度(数值/device-height)/ N5 S, ^1 a" N7 Q0 `" N
initial-scale 初始缩放比例4 o, l; k. f6 O2 r% D7 e* z0 O7 R
maximum-scale 最大缩放比例) j. R6 Q% ]7 _1 m5 a) I0 N9 M! A4 n
minimum-scale 最小缩放比例/ Y2 e; I o) l
user-scalable 是否允许用户缩放(yes/no)7 G# M+ z5 ^- X: }' e# C# N
minimal-ui ios 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：: c. @0 J- t, o4 s! s0 f
xml/html code复制内容到剪贴板
7 J4 j' w: C) W5 y' k. V<meta name=viewport content=width=device-width, initial-scale=1, minimal-ui>+ v. F4 U: A3 e9 `
而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
( E a1 |" f! W+ u/ lxml/html code复制内容到剪贴板
. b- ^+ c4 S. f" H( k<meta name=viewport content=width=device-width,user-scalable=yes>
9 E& \2 F, c0 S适配 iphone 6 和 iphone 6plus 则需要写：
) o) M; _( V6 @( a8 pxml/html code复制内容到剪贴板
/ Z+ [3 s9 m3 m0 S; h2 z2 g c<meta name=viewport content=width=375>, U/ f. e# [6 ]! q- c* `& Z N
<meta name=viewport content=width=414>6 p/ ?, N2 u' o
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iphone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 note）的 viewport 宽为 400，iphone 6 plus 上是 414px。* G1 l$ Y( m3 z- E9 V
ios 设备
, b& h# F( Q4 N; ]添加到主屏后的标题（ios 6 新增）
# L3 e, a K4 b2 a5 K yxml/html code复制内容到剪贴板
9 U: |4 H$ a6 _<meta name=apple-mobile-web-app-title content=标题> <!-- 添加到主屏后的标题（ios 6 新增） -->
; P/ g& X8 G# z% q% Z+ c是否启用 webapp 全屏模式
/ u9 g$ n4 `3 [; ~xml/html code复制内容到剪贴板
! t4 j0 ~% P! ~6 p/ h<meta name=apple-mobile-web-app-capable content=yes /> <!-- 是否启用 webapp 全屏模式 -->
3 ^- s* y/ C6 }2 s. \设置状态栏的背景颜色' p; z7 `3 P! x9 P% Z
xml/html code复制内容到剪贴板
) V' I- {8 C- o' U# @<meta name=apple-mobile-web-app-status-bar-style content=black-translucent />- j0 |, \) {: {8 U1 p% t
<!-- 设置状态栏的背景颜色，只有在 `apple-mobile-web-app-capable content=yes` 时生效 -->5 v/ W* J( h& q( [
只有在 apple-mobile-web-app-capable content=yes 时生效
8 J4 z/ D$ i) {& w! K4 xcontent 参数：7 G, F q8 i; M1 y0 C
default 默认值。% e1 n( d6 c) C8 ]# s. e
black 状态栏背景是黑色。( Z8 u4 g% X* L( @
black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
- Y% L) a- u# X) \- s" o禁止数字识自动别为电话号码
5 ~" ?" s/ F! {- O$ X" \xml/html code复制内容到剪贴板
( H) @' V8 v" n( H. W<meta name=format-detection content=telephone=no /> <!-- 禁止数字识自动别为电话号码 -->. j# Q) t' P2 d, w7 K* f
ios 图标* O$ e( v7 o! N; G5 l4 W9 q8 q4 F8 K
rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iphone 和 itouch，默认 57x57 像素，必须有
7 Q2 Y, d8 R2 m% `6 K代码如下:8 G! x0 v% H2 V3 p
<link rel=apple-touch-icon-precomposed href=/apple-touch-icon-57x57-precomposed.png /> <!-- iphone 和 itouch，默认 57x57 像素，必须有 -->
" p i' Y# a" F2 C% N0 s8 g- wipad，72x72 像素，可以没有，但推荐有
9 W t% U2 n0 x7 h* I代码如下:8 Q2 B5 o' c* p+ L* O( C
<link rel=apple-touch-icon-precomposed sizes=72x72 href=/apple-touch-icon-72x72-precomposed.png /> <!-- ipad，72x72 像素，可以没有，但推荐有 -->( o" Y8 Q. M( V" V% {' |
retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有
+ K5 E5 @) P1 g代码如下:9 t7 h4 h N% ?
<link rel=apple-touch-icon-precomposed sizes=114x114 href=/apple-touch-icon-114x114-precomposed.png /> <!-- retina iphone 和 retina itouch，114x114 像素，可以没有，但推荐有 --> Z( @, W/ ~9 W7 |" n/ M @1 x
retina ipad，144x144 像素，可以没有，但推荐有+ t6 z# L, a: \
代码如下:4 j z; {2 k( e1 @. ]
<link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png /> <!-- retina ipad，144x144 像素，可以没有，但推荐有 -->& p1 d' K3 m" h% K- }2 d
ios 图标大小在iphone 6 plus上是180×180，iphone 6 是120x120。 适配iphone 6 plus，则需要在中加上这段
' j, j: k& T* I! |- Y' z代码如下:) H9 f' M8 z6 _( _
<link rel=apple-touch-icon-precomposed sizes=180x180 href=retinahd_icon.png>
6 U" l# P. T; qios 启动画面
# Z* {5 K$ z% B0 I& A( x' eipad 的启动画面是不包括状态栏区域的。
- A! x9 o% h" \, Z5 y! D9 T' e3 Jipad 竖屏 768 x 1004（标准分辨率）2 f; i0 x/ f9 w4 Z* a: q
代码如下:) ^/ |, N4 H: C& S1 R& j
<link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png /> <!-- ipad 竖屏 768 x 1004（标准分辨率） -->4 V% H+ b3 I4 Q, Y8 j! J
ipad 竖屏 1536x2008（retina）4 }5 a: o" O9 u: b6 b1 l9 p( L8 e- I
代码如下:( |/ u) N T. @; I/ C
<link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png /> <!-- ipad 竖屏 1536x2008（retina） -->5 A3 `8 W4 b% A. v
ipad 横屏 1024x748（标准分辨率）6 m1 |) a: Y$ a4 Q# H/ ~! K% y) A$ [( g
代码如下:0 f* f3 M! o) ?6 `2 G9 J
<link rel=apple-touch-startup-image sizes=1024x748 href=/default-portrait-1024x748.png /> <!-- ipad 横屏 1024x748（标准分辨率） -->2 i3 L' d* D* m1 J& ^- Y
ipad 横屏 2048x1496（retina）
' q0 N @# o6 W9 h, y$ G' i代码如下:' O7 Y- \3 A1 T* j! I0 t. `2 p$ E0 q. U
<link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png /> <!-- ipad 横屏 2048x1496（retina） -->
D1 d* H0 _# M* T7 H- Qiphone 和 ipod touch 的启动画面是包含状态栏区域的。
$ g/ o4 U8 \% `* ~0 a( Jiphone/ipod touch 竖屏 320x480 (标准分辨率)4 e! e8 w& O! v$ B: c$ z- H: L
代码如下:; a# u- y$ r/ e+ K' V
<link rel=apple-touch-startup-image href=/splash-screen-320x480.png /> <!-- iphone/ipod touch 竖屏 320x480 (标准分辨率) --># e% S, W) \8 A8 a7 |6 Q& L
iphone/ipod touch 竖屏 640x960 (retina)1 \$ m0 k/ \9 m+ O1 Q: ?; z, z, A
代码如下:( I& K' K$ ^0 P! k/ e
<link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png /> <!-- iphone/ipod touch 竖屏 640x960 (retina) -->0 j O1 L$ T4 ]5 G( ]+ n" A9 m1 U
iphone 5/ipod touch 5 竖屏 640x1136 (retina) j. `$ l0 ]0 e/ `3 J( Q" k) [* i O
代码如下:
4 e5 l! u! V- e$ f1 q<link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png /> <!-- iphone 5/ipod touch 5 竖屏 640x1136 (retina) -->
+ B3 @- H5 U& g添加智能 app 广告条 smart app banner（ios 6+ safari）
$ B% Y3 p$ p, P: ^# w代码如下: n c8 }5 W- {( u- k! Z+ ~% ~& ^$ }0 z
<meta name=apple-itunes-app content=app-id=myappstoreid, affiliate-data=myaffiliatedata, app-argument=myurl> <!-- 添加智能 app 广告条 smart app banner（ios 6+ safari） -->* q9 j. E7 d" z5 E( m$ B3 ^. A
iphone 6对应的图片大小是750×1294，iphone 6 plus 对应的是1242×2148 。$ }: i) n" L" S Q; P
代码如下:
: ~+ C( C- [8 ~( \! x8 K8 i& x<link rel=apple-touch-startup-image href=launch6.png media=(device-width: 375px)>
9 a M) n6 J- Z, H) K<link rel=apple-touch-startup-image href=launch6plus.png media=(device-width: 414px)>
8 U- \5 Z; e; o2 e' ^5 |( y( R. twindows 8" c& u7 ]" f% i
windows 8 磁贴颜色- Z& V7 r) E: a+ P' n- c3 T. J" x
代码如下:
K$ a) J% t4 f7 m( ^; D3 v5 B<meta name=msapplication-tilecolor content=#000/> <!-- windows 8 磁贴颜色 -->8 [5 [, [: @, y7 x( x$ N' z
windows 8 磁贴图标* s" f+ r3 C: G7 z( q& l+ O$ s) {$ H* j
代码如下:4 ?0 ?" v8 J$ e- N
<meta name=msapplication-tileimage content=icon.png/> <!-- windows 8 磁贴图标 -->
9 @+ c E+ W; {9 G3 O* w2 G. c8 L4 V! Zrss订阅 ~0 L( r+ e {, q
代码如下:
: d; }5 F# U& q) ]) e<link rel=alternate type=application/rss+xml title=rss href=/rss.xml /> <!-- 添加 rss 订阅 -->$ z: M# {/ f% J+ N+ J! b, r2 d
favicon icon& P% E1 \! L( C9 U$ D; x7 }
代码如下:2 Q2 @8 u0 O" I
<link rel=shortcut icon type=image/ico href=/favicon.ico /> <!-- 添加 favicon icon -->& K) W$ ]: {' q/ _ `8 @
移动端的meta4 N6 R/ `* ^, B! T% m
xml/html code复制内容到剪贴板! g" `: P+ E# _+ M' f& D) q- ~5 b
<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />+ d* e; j% a+ Z- f
<meta name=apple-mobile-web-app-capable content=yes />
- D' f: U6 J" r2 K<meta name=apple-mobile-web-app-status-bar-style content=black />
! a' }3 c5 J9 ?8 {9 e<meta name=format-detectioncontent=telephone=no, email=no />
* H' y( q6 T* d6 h; w<meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no />
2 Y0 I1 z4 M( ?0 x K9 q9 L<meta name=apple-mobile-web-app-capable content=yes /><!-- 删除苹果默认的工具栏和菜单栏 -->
$ X: h8 |; |" m! f3 z; n; X, }<meta name=apple-mobile-web-app-status-bar-style content=black /><!-- 设置苹果工具栏颜色 -->
# d+ d4 d* E; u/ S% e<meta name=format-detection content=telphone=no, email=no /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
@* A4 [9 V- p7 ~<!-- 启用360浏览器的极速模式(webkit) -->; S" ? r! a0 ?3 Z5 M& B# X
<meta name=renderer content=webkit>
& X& C6 J1 T [0 V<!-- 避免ie使用兼容模式 -->
" T' h$ h) W0 k ]<meta http-equiv=x-ua-compatible content=ie=edge>& V' h$ U+ R: f- Z) v* v1 J Q
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->' C N* ~8 E) d5 k1 X- g
<meta name=handheldfriendly content=true>
% n9 J0 q* ?0 Q$ T<!-- 微软的老式浏览器 -->; d; D) p3 K9 F1 `' f+ t8 m; V# C
<meta name=mobileoptimized content=320> k" s- \% T4 ]: L4 V* i0 J
<!-- uc强制竖屏 -->7 Y+ z# q b4 f! E, W! \& N
<meta name=screen-orientation content=portrait>7 K/ v+ U9 R7 S. z$ A
<!-- qq强制竖屏 -->
. ^/ S: u x4 Q+ W7 l/ T+ ?<meta name=x5-orientation content=portrait>) m1 W1 H7 c3 D2 {
<!-- uc强制全屏 -->
D3 l. ^8 p9 T. U<meta name=full-screen content=yes>% {' o5 {2 d7 }) u Q
<!-- qq强制全屏 -->
& Y0 y3 t; J! K. M8 W<meta name=x5-fullscreen content=true>
% M9 T# h4 q8 Q0 g! n<!-- uc应用模式 -->
! }! {5 F9 `. C: W: F9 d<meta name=browsermode content=application>' r; b3 {2 Z0 N4 @* t- O6 _! S
<!-- qq应用模式 -->
1 z" {5 J& @* n0 m<meta name=x5-page-mode content=app>
# x/ e0 \% I! v j, I# T3 z<!-- windows phone 点击无高光 -->! m& _; B3 e$ V( R$ F
<meta name=msapplication-tap-highlight content=no>
: N" f S+ o" k<!-- 适应移动端end -->& \: g/ s! t7 x e/ c4 O
# t5 W2 O4 ?4 K; P
更多网页制作信息请查看： 网页制作 |
|
外卖新店开业第一周开推广，十家九家亏0打酱油
Ai优选商家寻找本地地推合作伙伴5256求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增1616网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡