Basic tag
HTML5 doctype is not case sensitive.
<! DOCTYPE html> <! -- Use HTML5 doctype, case-insensitive -->
Declare the character encoding used in the document
<Meta charset = 'utf-8'> <! -- Declare the character encoding used in the document -->
More standard lang attribute writing http://zhi.hu/XyIa
Simplified Chinese
<Html lang = "zh-cen-Hans"> <! -- More standard lang attribute writing http://zhi.hu/XyIa -->
Traditional Chinese
<Html lang = "zh-cen-Hant"> <! -- More standard lang attribute writing http://zhi.hu/XyIa -->
In rare cases, you need to add the region code, usually to emphasize the differences in Chinese usage in different regions. For example:
<P lang = "zh-cen-Hans">
<Strong lang = "zh-cen-Hans-CN"> pineapple </strong> and <strong lang = "zh-cen-Hant-TW">? Pear </strong> is actually the same fruit. The title of mainland China is different from that of Taiwan, and the title of Singapore and Malaysia is also different. It is called <strong lang = "zh-cen-Hans-SG"> huangli </strong>.
</P>
The latest version of IE and Chrome are preferred.
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"/> <! -- Use the latest version of IE and Chrome -->
SEO optimization
Page description
Each web page should contain a description tag that cannot exceed 150 characters and can accurately reflect the content of the web page. Document
<Meta name = "description" content = "up to 150 characters"/> <! -- Page description -->
Page keywords
<Meta name = "keywords" content = ""/> <! -- Page keyword -->
Define page title
<Title> title </title>
Define webpage author
<Meta name = "author" content = "name, email@gmail.com"/> <! -- Webpage author -->
Define the seo/seo.html "target =" _ blank "> Search engine indexing method. robotterms is a set of values separated by commas (,). Generally, the following values are available: none, noindex, nofollow, all, index, and follow. Document
<Meta name = "robots" content = "index, follow"/> <! -- Search engine capture -->
Optional labels
Add a viewport to a mobile device
<Meta name = "viewport" content = "initial-scale = 1, maximum-scale = 3, minimum-scale = 1, user-scalable = no"> <! -- 'Width = device-width' causes the black edge http://bigc.at/ios-webapp-viewport-meta.orz to appear when the iPhone 5 is added to the home screen in WebApp full screen mode to open the page -->
Width = device-width causes the iPhone 5 to have a black edge http://bigc.at/ios-webapp-viewport-meta.orz when opening the page in WebApp full screen mode after being added to the home screen
Content parameter:
Width viewport width (numeric value/device-width)
Height viewport height (numeric value/device-height)
Initial-scale initial scaling ratio
Maximum-scale maximum scaling ratio
Minimum-scale min scaling ratio
Whether user-scalable allows user scaling (yes/no)
Added properties in minimal-ui iOS 7.1 beta 2 to minimize the upper and lower status bars during page loading. This is a Boolean value and can be written as follows: <meta name = "viewport" content = "width = device-width, initial-scale = 1, minimal-ui">
IOS devices
Title after being added to the home screen (added in iOS 6)
<Meta name = "apple-mobile-web-app-title" content = "title"> <! -- Title after being added to the home screen (added in iOS 6) -->
Enable WebApp full screen mode?
<Meta name = "apple-mobile-web-app-capable" content = "yes"/> <! -- Enable WebApp full screen mode -->
Set the background color of the status bar
<Meta name = "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"' -->
Effective only when "apple-mobile-web-app-capable" content = "yes"
Content parameter:
Default value.
The background of the black status bar is black.
The background of the black-translucent status bar is black translucent.
If it is set to default or black, the webpage content starts from the bottom of the status bar.
If it is set to black-translucent, the webpage content is full of the whole screen, and the top is blocked by the status bar.
Do not use digital identification as a phone number automatically
<Meta name = "format-detection" content = "telephone = no"/> <! -- Disable automatic identification of numbers as phone numbers -->
IOS icon
Rel parameter:
Apple-touch-icon images are automatically processed as rounded corners and highlights.
Apple-touch-icon-precomposed prohibits the system from automatically adding results to directly display the design source image.
IPhone and iTouch, 57x57 pixels by default, must have
<Link rel = "apple-touch-icon-precomposed" href = "/apple-touch-icon-57x57-precomposed.png"/> <! -- IPhone and iTouch, 57x57 pixels by default, must have -->
IPad, 72x72 pixels, no, but recommended
<Link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "/apple-touch-icon-72x72-precomposed.png"/> <! -- IPad, 72x72 pixels, but not available -->
Retina iPhone and Retina iTouch, 114x114 pixels, no, but we recommend
<Link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "/apple-touch-icon-114x114-precomposed.png"/> <! -- Retina iPhone and Retina iTouch, 114x114 pixels, but none, but recommended -->
Retina iPad, 144x144 pixels, but not available, but recommended
<Link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "/apple-touch-icon-144x144-precomposed.png"/> <! -- Retina iPad, 144x144 pixels, can be left blank, but recommended -->
IOS startup screen
Official documents: https://developer.apple.com/library/ios/qa/qa1686/_index.html
Reference: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
The startup screen of the iPad does not include the status bar area.
IPad portrait screen 768x1004 (standard resolution)
<Link rel = "apple-touch-startup-image" sizes = "768x1004" href = "/splash-screen-768x1004.png"/> <! -- IPad portrait screen 768x1004 (standard resolution) -->
IPad portrait screen 1536x2008 (Retina)
<Link rel = "apple-touch-startup-image" sizes = "1536x2008" href = "/splash-screen-1536x2008.png"/> <! -- IPad portrait screen 1536x2008 (Retina) -->
IPad horizontal screen 1024x748 (standard resolution)
<Link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/Default-Portrait-1024x748.png"/> <! -- IPad horizontal screen 1024x748 (standard resolution) -->
IPad horizontal screen 2048x1496 (Retina)
<Link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "/splash-screen-2048x1496.png"/> <! -- IPad horizontal screen 2048x1496 (Retina) -->
The startup screen of iPhone and iPod touch includes the status bar area.
IPhone/iPod Touch portrait screen 320x480 (standard resolution)
<Link rel = "apple-touch-startup-image" href = "/splash-screen-320x480.png"/> <! -- IPhone/iPod Touch portrait screen 320x480 (standard resolution) -->
IPhone/iPod Touch portrait screen 640x960 (Retina)
<Link rel = "apple-touch-startup-image" sizes = "640x960" href = "/splash-screen-640x960.png"/> <! -- IPhone/iPod Touch portrait screen 640x960 (Retina) -->
IPhone 5/iPod Touch 5 portrait screen 640x1136 (Retina)
<Link rel = "apple-touch-startup-image" sizes = "640x1136" href = "/splash-screen-640x1136.png"/> <! -- IPhone 5/iPod Touch 5 portrait screen 640x1136 (Retina) -->
Add Smart App advertisement bar Smart App Banner (iOS 6 + Safari) document
<Meta name = "apple-itunes-app" content = "app-id = myAppStoreID, affiliate-data = myAffiliateData, app-argument = myURL"> <! -- Add Smart App advertisement bar Smart App Banner (iOS 6 + Safari) -->
Windows 8
Windows 8 tile color
<Meta name = "msapplication-TileColor" content = "#000"/> <! -- Windows 8 tile color -->
Windows 8 tile Icon
<Meta name = "msapplication-TileImage" content = "icon.png"/> <! -- Windows 8 tile icon -->
Others
Add RSS subscription
<Link rel = "alternate" type = "application/rss + xml" title = "RSS" href = "/rss. xml"/> <! -- Add an RSS subscription -->
Add favicon
<Link rel = "shortcut icon" type = "image/ico" href = "/favicon. ico"/> <! -- Add favicon -->
More
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
