Basic label
☆ Use HTML5 doctype, case insensitive
<! DOCTYPE html> <!--using HTML5 DOCTYPE, case-sensitive
☆ Declare the character encoding used by the document
<meta charset= ' Utf-8 ' >
☆ More Standard lang attribute notation http://zhi.hu/XyIa
? Simplified Chinese
? Chinese Traditional
☆ Priority to use the latest version of IE and chorme
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
SEO optimization
☆ Page description ( reference article )
Each page should have a description tag that does not exceed 150 characters and accurately reflects the content of the Web page.
Most search engines will display the contents of <meta name= "description" > tags in search results.
<meta name= "description" content= "no more than 150 characters" >
☆ Page Keywords
<meta name= "keywords" content= "" >
☆ Define page Title
<title> title </title>
☆ Define page Author
<meta name= "Author" content= "name, [email protected]" >
☆ Define Web search engine index method, Robotterms is a set of comma, the value of the partition, usually have the following values: None,noindex,nofollow,all,index and follow. ( reference article )
<meta name= "Robots" content= "Index,follow" >
Optional label
☆ Add viewport for mobile devices
<meta name = "Viewport" content = "initial-scale=1, maximum-scale=3, minimum-scale=1, User-scalable=no" > "Width=de Vice-width "causes the black edge to appear when IPhone 5 is added to the home screen to WebApp full-screen mode when the page is opened (Reference Articles)
iOS devices1. Title after adding to the home screen (IOS 6 new)
<meta name= "Apple-mobile-web-app-title" content= "title" >
2. Whether to enable WebApp full screen mode
<meta name= "apple-mobile-web-app-capable" content= "yes" > 3. Set the background color of the status bar
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent" >
The content parameter is valid only when "apple-mobile-web-app-capable" content= "yes":
Default defaults.
Black status bar background is dark.
Black-translucent status bar background is black translucent.
If set to default or black, the page content starts at the bottom of the status bar.
If set to Black-translucent, the page content fills the entire screen, and the top is obscured by the status bar.
4. Prohibit numbers from being automatically identified as phone numbers
<meta name= "format-detection" content= "Telephone=no" >5. Disable auto-recognition as address <meta name= "format-detection" content= " Address=no "> 6. Disable Auto-recognition as date <meta name=" format-detection "content=" Date=no ">7. Disable auto-recognition as email <meta name=" Format-detection "content=" Email=no "> Original reference Link:HTTPS://GITHUB.COM/YISIBL/BLOG/ISSUES/1Reference article:http://www.cnblogs.com/ada-zheng/p/4318478.htmlWriting Daquan:
<! DOCTYPE html><!--using HTML5 doctype, case insensitive--><Htmllang="Zh-cmn-hans"><!--a more standard notation for Lang attributes Http://zhi.hu/XyIa--><Head> <Metacharset=' Utf-8' ><!--declare the character encoding used by the document-<Metahttp-equiv="X-ua-compatible"Content="Ie=edge,chrome=1"/><!--preferred to use the latest version of IE and Chrome-<MetaName="Description"Content="No more than 150 characters"/><!--page description-<MetaName="Keywords"Content=""/><!--page Keywords-<MetaName="Author"Content="Name, [email protected]"/><!--Web Authors-<MetaName="Robots"Content="Index,follow"/><!--search Engine crawl-<!--adding viewport to mobile devices-<MetaName ="Viewport"Content ="Initial-scale=1, Maximum-scale=3, minimum-scale=1, User-scalable=no"><!--' Width=device-width ' will cause a black edge when IPhone 5 is added to the main screen to open the page in WEBAPP full-screen mode Http://bigc.at/ios-webapp-viewport-meta.orz-<!--IOS device begin-<MetaName="Apple-mobile-web-app-title"Content=The title"><!--title added to the home screen (IOS 6 new)-<MetaName="Apple-mobile-web-app-capable"Content="Yes"/><!--whether WebApp full screen mode is enabled-<MetaName="Apple-mobile-web-app-status-bar-style"Content="Black-translucent"/><!--set the background color of the status bar, which takes effect only when ' apple-mobile-web-app-capable ' content= ' yes '-<MetaName="Format-detection"Content="Telephone=no"/><!--no digital automatic phone number-<MetaName="Apple-itunes-app"Content="App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myurl"><!--add Smart App ad bar Smart app Banner (IOS 6+ Safari)-<!--IOS icon begin-<LinkRel="Apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/><!--IPhone and ITouch, default 57x57 pixels, must have-<LinkRel="Apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/><!--Retina IPhone and retina itouch,114x114 pixels, can be no, but recommended-<LinkRel="Apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/><!--Retina ipad,144x144 pixels, can be no, but recommended-<!--IOS icon End-<!--iOS Start screen begin-<LinkRel="Apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/><!--iPad Vertical screen 768 x 1004 (Standard resolution)-<LinkRel="Apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/><!--iPad vertical screen 1536x2008 (Retina)-<LinkRel="Apple-touch-startup-image"sizes="1024x748"href="/default-portrait-1024x748.png"/><!--iPad Horizontal screen 1024x748 (standard resolution)-<LinkRel="Apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/><!--IPad flat screen 2048x1496 (Retina)-<LinkRel="Apple-touch-startup-image"href="/splash-screen-320x480.png"/><!--iphone/ipod Touch vertical screen 320x480 (standard resolution)-<LinkRel="Apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/><!--iphone/ipod Touch vertical screen 640x960 (Retina)-<LinkRel="Apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/><!--iPhone 5/ipod Touch 5 Vertical screen 640x1136 (Retina)-<!--iOS boot screen End-<!--IOS Device end-<MetaName="Msapplication-tilecolor"Content="#000"/><!--Windows 8 tile Colors-<MetaName="Msapplication-tileimage"Content="Icon.png"/><!--Windows 8 tile icons-<LinkRel="Alternate"Type="Application/rss+xml"title= "Rss" href=< Span class= "Pl-pds" > "/rss.xml"/> <!--add RSS Feeds Span class= "pl-c" >--> <link rel= "shortcut Icon" type= "Image/ico" href= "/ Favicon.ico "/> <!--Add Favicon icon --> <title> title </title></HEAD>
HTML Head Header Tag