һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[ת] ƶǰ˲ò˽html5 head ͷǩ

[]
23392 websjy 2015-1-13 12:07:46
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
Ҫһ˿ijõ HTML ͷǩٶFEXHTML head ͷǩ

ƶ˵ĹѾԽԽΪǰ˹ҪݣƽĿHTML ͷǩܣرmetaǩԵ÷dzҪ

DOCTYPE

DOCTYPE(Document Type)λĵǰλã html ǩ֮ǰ˱ǩ֪ĵʹ HTML XHTML 淶

ʹ HTML5 doctypeִСд
  1. <!DOCTYPE html> <!-- ʹ HTML5 doctypeִСд -->
ƴ


charset

ĵʹõַ룬

   
  1. <meta charset="utf-8">
ƴ



html5 ֮ǰҳлд

   
  1. <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



   
  1. <html lang="zh-cmn-Hans"> <!-- ӱ׼ lang д http://zhi.hu/XyIa -->
ƴ





  1. <html lang="zh-cmn-Hant"> <!-- ӱ׼ lang д http://zhi.hu/XyIa -->
ƴ



Ҫӵ룬ͨΪǿͬʹò죬磺

  1. <p lang="zh-cmn-Hans">
  2. <strong lang="zh-cmn-Hans-CN"></strong><strong lang="zh-cmn-Hant-TW">P</strong>ʵͬһˮֻǴ½̨νͬ¼¡һijνҲDzͬģ֮Ϊ<strong lang="zh-cmn-Hans-SG"></strong>
  3. </p>
ƴ


Ϊʲô lang="zh-cmn-Hans" ͨд lang="zh-CN" أƲĶ: ҳͷӦ lang=zh lang=zh-cn


ʹ IE °汾 Chrome

   
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
ƴ



360 ʹGoogle Chrome Frame
  1. <meta name="renderer" content="webkit">
ƴ



360 ͻڶȡǩлӦļٺˡ Ϊ˱ټ

   
  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
ƴ



дԴﵽЧװ Google Chrome Frameʹ GCF Ⱦҳ棬ûаװ GCFʹ߰汾 IE ں˽Ⱦ

ӣں˿ Meta ǩ˵ĵ

ٶȽֹת

ͨٶֻҳʱٶȿܻҳת룬·ƤҩĹ棬Ϊ˿ head

   
  1. <meta http-equiv="Cache-Control" content="no-siteapp" />
ƴ

ӣSiteApp ת

SEO Ż

    ҳǩ(head ͷ)
  1. <title>your title</title>
ƴ

    ҳؼ keywords

      
  1. <meta name="keywords" content="your keywords">
ƴ



    ҳ description
  1. <meta name="description" content="your description">
ƴ

    ҳ author

      
  1. <meta name="author" content="author,email address">
ƴ



    ҳʽrobotterms һʹӢĶš,ֵָͨ¼ȡֵnonenoindexnofollowallindexfollow
  1. <meta name="robots" content="index,follow">
ƴ

ӣWEB1038 C ǰЧֵ

Ϊƶ豸 viewport

viewport òƶʾĸá ͨд
  1. <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 ѾɾҳʱС״̬һֱֵд
  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
ƴ



վӦʽģ벻Ҫʹ initial-scale ߽š

  
  1. <meta name="viewport" content="width=device-width,user-scalable=yes">
ƴ

ӣӦʽƵviewport

iPhone 6 iPhone 6plus Ҫд
  1. <meta name="viewport" content="width=375">
  2. <meta name="viewport" content="width=414">
ƴ



󲿷 4.7~5 İ׿豸 viewport Ϊ 360pxiPhone 6 ȴ 375px󲿷 5.5 簲׿˵ Note viewport Ϊ 400iPhone 6 plus 414px

ios 豸

ӵı⣨iOS 6

  1. <meta name="apple-mobile-web-app-title" content=""> <!-- ӵı⣨iOS 6 -->
ƴ



Ƿ WebApp ȫģʽ

  1. <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Ƿ WebApp ȫģʽ -->
ƴ



״̬ıɫ
  1. <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 ,ҳݳĻᱻ״̬ڵ

ֹʶԶΪ绰

  1. <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 أ

  1. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone iTouchĬ 57x57 أ -->
ƴ



iPad7272 أûУƼ

  1. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad72x72 أûУƼ -->
ƴ



Retina iPhone Retina iTouch114114 أûУƼ

  1. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone Retina iTouch114x114 أûУƼ -->
ƴ


Retina iPad144144 أûУƼ

  1. <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Ҫм

   
  1. <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׼ֱʣ

   
  1. <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 768 x 1004׼ֱʣ -->
ƴ



iPad 15362008Retina
  
  1. <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 1536x2008Retina -->
ƴ

iPad 1024748׼ֱʣ
  1. <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 1024x748׼ֱʣ -->
ƴ

iPad 20481496Retina

  1. <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 2048x1496Retina -->
ƴ


iPhone iPod touch ǰ״̬ġ

iPhone/iPod Touch 320480 (׼ֱ)

  1. <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 320x480 (׼ֱ) -->
ƴ


iPhone/iPod Touch 640960 (Retina)

  
  1. <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)
  1. <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
  1. <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

  1. <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
  2. <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

687474703a2f2f757064617465732e68746d6c35726f636b732e636f6d2f6173736574732f7468656d652d636f6c6f722d73732d39393530666431336130633532623332623662643538303330396435356136622e706e67.png

   
  1. <meta name="theme-color" content="#db5945">
ƴ

Windows 8


Windows 8 ɫ
   
  1. <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 ɫ -->
ƴ

Windows 8 ͼ

   
  1. <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 ͼ -->
ƴ



rss

   
  1. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- RSS -->
ƴ



favicon icon

   
  1. <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- favicon icon -->
ƴ


Ƚϸ favicon ܿɲοhttps://github.com/audreyr/favicon-cheat-sheet

رchrome·

Щʱоchrome·ܷˣͨĴ

  
  1. <meta name="google" value="notranslate" />
ƴ

A70DF5F6-374B-448D-B433-EB99081A9F13.png


ƶ˵ͷǩmeta

  
  1.     <!DOCTYPE html> <!-- ʹ HTML5 doctypeִСд -->
  2.     <html lang="zh-cmn-Hans"> <!-- ӱ׼ lang д http://zhi.hu/XyIa -->
  3.     <head>
  4.     <!-- ĵʹõַ -->
  5.     <meta charset='utf-8'>
  6.     <!-- ʹ IE °汾 Chrome -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  8.     <!-- ҳ -->
  9.     <meta name="description" content="150ַ"/>
  10.     <!-- ҳؼ -->
  11.     <meta name="keywords" content=""/>
  12.     <!-- ҳ -->
  13.     <meta name="author" content="name, email@gmail.com"/>
  14.     <!-- ץȡ -->
  15.     <meta name="robots" content="index,follow"/>
  16.     <!-- Ϊƶ豸 viewport -->
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18.     <!-- `width=device-width` ᵼ iPhone 5 ӵ WebApp ȫģʽҳʱֺڱ http://bigc.at/ios-webapp-viewport-meta.orz -->
  19.      
  20.     <!-- iOS 豸 begin -->
  21.     <meta name="apple-mobile-web-app-title" content="">
  22.     <!-- ӵı⣨iOS 6 -->
  23.     <meta name="apple-mobile-web-app-capable" content="yes"/>
  24.     <!-- Ƿ WebApp ȫģʽɾƻĬϵĹͲ˵ -->
  25.      
  26.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  27.     <!-- App Smart App BanneriOS 6+ Safari -->
  28.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  29.     <!-- ƻɫ -->
  30.     <meta name="format-detection" content="telphone=no, email=no"/>
  31.     <!-- ҳеʶΪ绰emailʶ -->
  32.     <!-- 360ļģʽ(webkit) -->
  33.     <meta name="renderer" content="webkit">
  34.     <!-- IEʹüģʽ -->
  35.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  36.     <!-- ֳ豸ŻҪһЩϵIJʶviewportݮ -->
  37.     <meta name="HandheldFriendly" content="true">
  38.     <!-- ΢ʽ -->
  39.     <meta name="MobileOptimized" content="320">
  40.     <!-- ucǿ -->
  41.     <meta name="screen-orientation" content="portrait">
  42.     <!-- QQǿ -->
  43.     <meta name="x5-orientation" content="portrait">
  44.     <!-- UCǿȫ -->
  45.     <meta name="full-screen" content="yes">
  46.     <!-- QQǿȫ -->
  47.     <meta name="x5-fullscreen" content="true">
  48.     <!-- UCӦģʽ -->
  49.     <meta name="browsermode" content="application">
  50.     <!-- QQӦģʽ -->
  51.     <meta name="x5-page-mode" content="app">
  52.     <!-- windows phone ޸߹ -->
  53.     <meta name="msapplication-tap-highlight" content="no">
  54.     <!-- iOS ͼ begin -->
  55.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  56.     <!-- iPhone iTouchĬ 57x57 أ -->
  57.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  58.     <!-- Retina iPhone Retina iTouch114x114 أûУƼ -->
  59.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  60.     <!-- Retina iPad144x144 أûУƼ -->
  61.     <!-- iOS ͼ end -->
  62.      
  63.     <!-- iOS begin -->
  64.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  65.     <!-- iPad 768 x 1004׼ֱʣ -->
  66.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  67.     <!-- iPad 1536x2008Retina -->
  68.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  69.     <!-- iPad 1024x748׼ֱʣ -->
  70.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  71.     <!-- iPad 2048x1496Retina -->
  72.      
  73.     <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
  74.     <!-- iPhone/iPod Touch 320x480 (׼ֱ) -->
  75.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  76.     <!-- iPhone/iPod Touch 640x960 (Retina) -->
  77.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  78.     <!-- iPhone 5/iPod Touch 5 640x1136 (Retina) -->
  79.     <!-- iOS end -->
  80.      
  81.     <!-- iOS 豸 end -->
  82.     <meta name="msapplication-TileColor" content="#000"/>
  83.     <!-- Windows 8 ɫ -->
  84.     <meta name="msapplication-TileImage" content="icon.png"/>
  85.     <!-- Windows 8 ͼ -->
  86.      
  87.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  88.     <!-- RSS -->
  89.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  90.     <!-- favicon icon -->
  91.      
  92.     <title></title>
  93.     </head>
ƴ

meta ǩο
ο£
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fafafa51 2015-7-20 23:03:35
| ʾȫ¥
2F
һƽ̨
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2016-12-1 23:43:33
| ʾȫ¥
3F
˼
APP http://www.zcyke.com
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-5-21 11:25

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б