|
ϵ½עᣬύѣøܣϴزIJޣ
Ҫ ¼ ſػ鿴ûʺţ¼ע
x
Ҫһ˿ijõ HTML ͷǩٶFEXHTML head ͷǩ
ƶ˵ĹѾԽԽΪǰ˹ҪݣƽĿHTML ͷǩܣرmetaǩԵ÷dzҪ
DOCTYPE
DOCTYPE(Document Type)λĵǰλã html ǩ֮ǰ˱ǩ֪ĵʹ HTML XHTML 淶
ʹ HTML5 doctypeִСд- <!DOCTYPE html> <!-- ʹ HTML5 doctypeִСд -->
ƴ
charset
ĵʹõַ룬
html5 ֮ǰҳлд
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ƴ
ǵЧģƲĶ<meta charset='utf-8'> vs <meta http-equiv='Content-Type'> Խʹý϶̵ģڼ䡣
lang
ӱ lang д http://zhi.hu/XyIa
- <html lang="zh-cmn-Hans"> <!-- ӱ lang д http://zhi.hu/XyIa -->
ƴ
- <html lang="zh-cmn-Hant"> <!-- ӱ lang д http://zhi.hu/XyIa -->
ƴ
Ҫӵ룬ͨΪǿͬʹò죬磺
- <p lang="zh-cmn-Hans">
- <strong lang="zh-cmn-Hans-CN"></strong><strong lang="zh-cmn-Hant-TW">P</strong>ʵͬһˮֻǴ½̨νͬ¼¡һijνҲDzͬģ֮Ϊ<strong lang="zh-cmn-Hans-SG"></strong>
- </p>
ƴ
Ϊʲô lang="zh-cmn-Hans" ͨд lang="zh-CN" أƲĶ: ҳͷӦ lang=zh lang=zh-cn
ʹ IE °汾 Chrome
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
ƴ
360 ʹGoogle Chrome Frame
- <meta name="renderer" content="webkit">
ƴ
360 ͻڶȡǩлӦļٺˡ Ϊ˱ټ
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
ƴ
дԴﵽЧװ Google Chrome Frameʹ GCF Ⱦҳ棬ûаװ GCFʹ߰汾 IE ں˽Ⱦ
ӣں˿ Meta ǩ˵ĵ
ٶȽֹת
ͨٶֻҳʱٶȿܻҳת룬·ƤҩĹ棬Ϊ˿ head
- <meta http-equiv="Cache-Control" content="no-siteapp" />
ƴ
ӣSiteApp ת
SEO Ż
ҳǩ(head ͷ)
- <title>your title</title>
ƴ
ҳؼ keywords
- <meta name="keywords" content="your keywords">
ƴ
ҳ description
- <meta name="description" content="your description">
ƴ
ҳ author
- <meta name="author" content="author,email address">
ƴ
ҳʽrobotterms һʹӢĶš,ֵָͨ¼ȡֵnonenoindexnofollowallindexfollow
- <meta name="robots" content="index,follow">
ƴ
ӣWEB1038 C ǰЧֵ
Ϊƶ豸 viewport
viewport òƶʾĸá ͨд
- <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` ᵼ iPhone 5 ӵ WebApp ȫģʽҳʱֺڱ http://bigc.at/ios-webapp-viewport-meta.orz -->
ƴ width=device-width ᵼ iPhone 5 ӵ WebApp ȫģʽҳʱֺڱ(http://bigc.at/ios-webapp-viewport-meta.orz)
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 ԣע⣺iOS8 ѾɾҳʱС״̬һֱֵд
- <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
ƴ
վӦʽģ벻Ҫʹ initial-scale ߽š
- <meta name="viewport" content="width=device-width,user-scalable=yes">
ƴ
ӣӦʽƵviewport
iPhone 6 iPhone 6plus Ҫд
- <meta name="viewport" content="width=375">
- <meta name="viewport" content="width=414">
ƴ
4.7~5 İ豸 viewport Ϊ 360pxiPhone 6 ȴ 375px 5.5 簲˵ Note viewport Ϊ 400iPhone 6 plus 414px
ios 豸
ӵı⣨iOS 6
- <meta name="apple-mobile-web-app-title" content=""> <!-- ӵı⣨iOS 6 -->
ƴ
Ƿ WebApp ȫģʽ
- <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Ƿ WebApp ȫģʽ -->
ƴ
״̬ıɫ- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- ״̬ıɫֻ `"apple-mobile-web-app-capable" content="yes"` ʱЧ -->
ƴ
ֻ apple-mobile-web-app-capable content=yes ʱЧ
content
default Ĭֵ
black ״̬Ǻɫ
black-translucent ״̬Ǻɫ Ϊ default black ,ҳݴ״̬ײʼ Ϊ black-translucent ,ҳݳĻᱻ״̬ڵ
ֹʶԶΪ绰
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- ״̬ıɫֻ `"apple-mobile-web-app-capable" content="yes"` ʱЧ -->
ƴ
iOS ͼ
rel apple-touch-icon ͼƬԶԲǺ߹Ч apple-touch-icon-precomposed ֹϵͳԶЧֱʾԭͼ iPhone iTouchĬ 5757 أ
- <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone iTouchĬ 57x57 أ -->
ƴ
iPad7272 أûУƼ
- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad72x72 أûУƼ -->
ƴ
Retina iPhone Retina iTouch114114 أûУƼ
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone Retina iTouch114x114 أûУƼ -->
ƴ
Retina iPad144144 أûУƼ
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad144x144 أûУƼ -->
ƴ
IOS ͼСiPhone 6 plus180180iPhone 6 120120 iPhone 6 plusҪм
- <link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
ƴ
iOS
ٷĵhttps://developer.apple.com/library/ios/qa/qa1686/_index.html ο£http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
iPad Dz״̬ġ
iPad 768 x 1004ֱʣ
- <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 768 x 1004ֱʣ -->
ƴ
iPad 15362008Retina
- <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 1536x2008Retina -->
ƴ
iPad 1024748ֱʣ- <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 1024x748ֱʣ -->
ƴ
iPad 20481496Retina
- <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 2048x1496Retina -->
ƴ
iPhone iPod touch ǰ״̬ġ
iPhone/iPod Touch 320480 (ֱ)
- <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 320x480 (ֱ) -->
ƴ
iPhone/iPod Touch 640960 (Retina)
- <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 640x960 (Retina) -->
ƴ
iPhone 5/iPod Touch 5 6401136 (Retina)- <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 640x1136 (Retina) -->
ƴ
App Smart App BanneriOS 6+ Safari
- <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- App Smart App BanneriOS 6+ Safari -->
ƴ
iPhone 6ӦͼƬС7501294iPhone 6 Plus Ӧ12422148
- <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
- <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
ƴ
Android
Android Lollipop е Chrome 39 theme-color meta ǩѡɫ
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
- <meta name="theme-color" content="#db5945">
ƴ
Windows 8
Windows 8 ɫ
- <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 ɫ -->
ƴ
Windows 8 ͼ
- <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 ͼ -->
ƴ
rss
- <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- RSS -->
ƴ
favicon icon
- <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- favicon icon -->
ƴ
Ƚϸ favicon ܿɲοhttps://github.com/audreyr/favicon-cheat-sheet
رchrome·
Щʱоchrome·ܷˣͨĴ
- <meta name="google" value="notranslate" />
ƴ
ƶ˵ͷǩmeta
- <!DOCTYPE html> <!-- ʹ HTML5 doctypeִСд -->
- <html lang="zh-cmn-Hans"> <!-- ӱ lang д http://zhi.hu/XyIa -->
- <head>
- <!-- ĵʹõַ -->
- <meta charset='utf-8'>
- <!-- ʹ IE °汾 Chrome -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- <!-- ҳ -->
- <meta name="description" content="150ַ"/>
- <!-- ҳؼ -->
- <meta name="keywords" content=""/>
- <!-- ҳ -->
- <meta name="author" content="name, email@gmail.com"/>
- <!-- ץȡ -->
- <meta name="robots" content="index,follow"/>
- <!-- Ϊƶ豸 viewport -->
- <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
- <!-- `width=device-width` ᵼ iPhone 5 ӵ WebApp ȫģʽҳʱֺڱ http://bigc.at/ios-webapp-viewport-meta.orz -->
-
- <!-- iOS 豸 begin -->
- <meta name="apple-mobile-web-app-title" content="">
- <!-- ӵı⣨iOS 6 -->
- <meta name="apple-mobile-web-app-capable" content="yes"/>
- <!-- Ƿ WebApp ȫģʽɾƻĬϵĹͲ˵ -->
-
- <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
- <!-- App Smart App BanneriOS 6+ Safari -->
- <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">
- <!-- ֳ豸ŻҪһЩϵIJʶ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">
- <!-- iOS ͼ begin -->
- <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
- <!-- iPhone iTouchĬ 57x57 أ -->
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
- <!-- Retina iPhone Retina iTouch114x114 أûУƼ -->
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
- <!-- Retina iPad144x144 أûУƼ -->
- <!-- iOS ͼ end -->
-
- <!-- iOS begin -->
- <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
- <!-- iPad 768 x 1004ֱʣ -->
- <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
- <!-- iPad 1536x2008Retina -->
- <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
- <!-- iPad 1024x748ֱʣ -->
- <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
- <!-- iPad 2048x1496Retina -->
-
- <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
- <!-- iPhone/iPod Touch 320x480 (ֱ) -->
- <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
- <!-- iPhone/iPod Touch 640x960 (Retina) -->
- <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
- <!-- iPhone 5/iPod Touch 5 640x1136 (Retina) -->
- <!-- iOS end -->
-
- <!-- iOS 豸 end -->
- <meta name="msapplication-TileColor" content="#000"/>
- <!-- Windows 8 ɫ -->
- <meta name="msapplication-TileImage" content="icon.png"/>
- <!-- Windows 8 ͼ -->
-
- <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
- <!-- RSS -->
- <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
- <!-- favicon icon -->
-
- <title></title>
- </head>
ƴ
meta ǩο
ο£
|
|