Common HTML Head Tags (meta)
Category Programming Techniques
Let's first look at the list of commonly used tags, and then I will introduce each one in detail:
<!DOCTYPE html> <!-- Use the HTML5 doctype, case-insensitive -->
<html lang="zh-cmn-Hans"> <!-- More standard way of writing the lang attribute http://zhi.hu/XyIa -->
<head>
<meta charset='utf-8'> <!-- Declare the character encoding of the document -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Use the latest version of IE and Chrome first -->
<meta name="description" content="No more than 150 characters" /> <!-- Page description -->
<meta name="keywords" content=""/> <!-- Page keywords -->
<meta name="author" content="name, [email protected]" /> <!-- Web page author -->
<meta name="robots" content="index,follow" /> <!-- Search engine crawling -->
<!-- Add viewport for mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` will cause black edges when the page is opened in full-screen WebApp mode on the home screen of iPhone 5 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS devices begin -->
<meta name="apple-mobile-web-app-title" content="Title"> <!-- Title after adding to the home screen (new in iOS 6) -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Whether to enable WebApp full-screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- Set the background color of the status bar, only effective when `"apple-mobile-web-app-capable" content="yes"` -->
<meta name="format-detection" content="telephone=no" /> <!-- Prohibit automatic recognition of numbers as phone numbers -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- Add Smart App Banner for intelligent App ads (iOS 6+ Safari) -->
<!-- iOS icons begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone and iTouch, default 57x57 pixels, must have -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone and Retina iTouch, 114x114 pixels, can be omitted, but recommended -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 pixels, can be omitted, but recommended -->
<!-- iOS icons end -->
<!-- iOS startup screens begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad portrait 768 x 1004 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad portrait 1536x2008 (Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad landscape 1024x748 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad landscape 2048x1496 (Retina) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch portrait 320x480 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch portrait 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 portrait 640x1136 (Retina) -->
<!-- iOS startup screens end -->
<!-- iOS devices end -->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 tile color -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 tile icon -->
<link rel="alternate" type="application
- `height` viewport height (numerical value/device-height)
- `initial-scale` initial scale ratio
- `maximum-scale` maximum scale ratio
- `minimum-scale` minimum scale ratio
- `user-scalable` whether to allow user scaling (yes/no)[]()
- `minimal-ui` A new property in **** (****), which can minimize the top and bottom status bars when the page loads. It is a boolean value and can be written directly like this: `<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">`
### iOS Devices
Title after adding to home screen (new in iOS 6)
<meta name="apple-mobile-web-app-title" content="Title"> <!-- Title after adding to home screen (new in iOS 6) -->
Enable WebApp full-screen mode
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Enable WebApp full-screen mode -->
Set the status bar background color
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- Set the status bar background color, only effective when "apple-mobile-web-app-capable" content="yes"
-->
content parameters:
- `default` Default value.
- `black` The status bar background is black.
- `black-translucent` The status bar background is black translucent.
If set to `default` or `black`, the web page content starts from the bottom of the status bar.
If set to `black-translucent`, the web page content fills the entire screen, and the top is obscured by the status bar.
Prevent automatic recognition of numbers as phone numbers
<meta name="format-detection" content="telephone=no" /> <!-- Prevent automatic recognition of numbers as phone numbers -->
iOS Icons
rel parameters:
`apple-touch-icon` The image is automatically processed with rounded corners and gloss effects.
`apple-touch-icon-precomposed` Prohibit the system from automatically adding effects and display the original design image directly.
iPhone and iTouch, the default is 57x57 pixels, must have
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone and iTouch, the default is 57x57 pixels, must have -->
iPad, 72x72 pixels, can be omitted, but recommended
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 pixels, can be omitted, but recommended -->
Retina iPhone and Retina iTouch, 114x114 pixels, can be omitted, but recommended
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone and Retina iTouch, 114x114 pixels, can be omitted, but recommended -->
Retina iPad, 144x144 pixels, can be omitted, but recommended
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 pixels, can be omitted, but recommended -->
**iOS Launch Images**
Official documentation: [https://developer.apple.com/library/ios/qa/qa1686/_index.html](https://developer.apple.com/library/ios/qa/qa1686/_index.html)
Reference article: [http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/](http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/)
The launch image for the iPad does not include the status bar area.
**iPad Portrait 768 x 1004 (Standard Resolution)**
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad Portrait 768 x 1004 (Standard Resolution) -->
iPad Portrait 1536x2008 (Retina)
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad Portrait 1536x2008 (Retina) -->
iPad Landscape 1024x748 (Standard Resolution)
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad Landscape 1024x748 (Standard Resolution) -->
iPad Landscape 2048x1496 (Retina)
<link rel="apple-touch-startup