The main content of this article comes from the commonly used HTML head tags and Baidu FEX's HTML head tags .
Mobile work has increasingly become an important part of front-end work. In addition to ordinary project development, the HTML head tag function, especially the meta tag, is very important.
DOCTYPE
DOCTYPE (Document Type), this declaration is located at the very beginning of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.
Use HTML5 doctype, which is not case sensitive.
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->charset
Declare the character encoding used by the document,
<meta charset="utf-8">Before html5, the web page would be written like this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">These two are equivalent, please read step by step: <meta charset='utf-8'> vs <meta http-equiv='Content-Type'> , so it is recommended to use the shorter one, which is easier to remember.
lang attribute
A more standard way of writing the lang attribute. Should the declaration in the header of the web page be lang="zh" or lang="zh-cn"? - Know almost
Simplified Chinese
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->traditional Chinese
<html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->In rare cases, it is necessary to add area codes, usually to emphasize the differences in Chinese usage in different regions, for example:
<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
</p>Why is lang="zh-cmn-Hans" instead of the lang="zh-CN" we usually write? Please read further: Should the statement at the head of the page be lang="zh" or lang="zh-cn " .
Prioritize using the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />360 using Google Chrome Frame
<meta name="renderer" content="webkit">360 Browser will immediately switch to the corresponding speed core after reading this tag. Also, just to be on the safe side, join
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">The effect that can be achieved by writing this way is that if Google Chrome Frame is installed, GCF is used to render the page. If GCF is not installed, the highest version of the IE kernel is used for rendering.
Related links: Browser kernel control Meta tag documentation
Baidu prohibits transcoding
When you open a web page through Baidu mobile phone, Baidu may transcode your web page, take off your clothes, and put an advertisement for dog skin plaster on your body. To do this, you can add it in the head.
<meta http-equiv="Cache-Control" content="no-siteapp" />Related Links: SiteApp Transcoding Statement
SEO optimization part
- Page title <title> tag (head header is required)
<title>your title</title>- Page keywordskeywords
<meta name="keywords" content="your keywords">- Page description content description
<meta name="description" content="your description">- Define web page author author
<meta name="author" content="author,email address">Define the web search engine indexing method. Robotterms is a set of values separated by English commas ",". It usually has the following values: none, noindex, nofollow, all, index and follow.
<meta name="robots" content="index,follow">Related Links: WEB1038 – Tag contains invalid value
Add viewport for mobile devices
viewportThis allows the layout to display better on mobile browsers. usually write
<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 It will cause black borders to appear when iPhone 5 is added to the home screen and the page is opened in WebApp full-screen mode ( WebAPP ViewPort iPhone5 black border solution – Big Cat’s Infinite Game )
content parameters:
- width viewport width (value/device-width)
- height viewport height (value/device-height)
- initial-scale initial scaling ratio
- maximum-scale maximum scaling ratio
- minimum-scale minimum scaling ratio
- user-scalable whether to allow user scaling (yes/no)
- minimal-ui has a new attribute in iOS 7.1 beta 2 (note: it has been deleted in iOS8
), which can minimize the upper and lower status bars when the page is loaded. This is a Boolean value and can be written directly like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">And if your website is not responsive, please do not use initial-scale or disable scaling.
<meta name="viewport" content="width=device-width,user-scalable=yes">Related links: viewport for non-responsive design
To adapt to iPhone 6 and iPhone 6plus, you need to write:
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">The viewport width of most 4.7 to 5-inch Android devices is set to 360px, but it is 375px on the iPhone 6. The viewport width of most 5.5-inch Android devices (such as Samsung Note) is 400, and it is 414px on the iPhone 6 plus.
ios device
Title added to home screen (new in iOS 6)
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->Whether to enable WebApp full screen mode
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->Set the background color of the status bar
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->Only takes effect when “apple-mobile-web-app-capable” content=”yes”
content parameters:
- default default value.
- black The background of the status bar is black.
- black-translucent The status bar background is black and translucent. If set to default or black, 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 will be blocked by the status bar.
Disable digit recognition as phone number
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->iOS icon
rel parameter: apple-touch-icon The image is automatically processed into effects such as rounded corners and highlights. apple-touch-icon-precomposed prohibits the system from automatically adding effects and displays the original design directly. iPhone and iTouch, default 57×57 pixels, must have
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->iPad, 72×72 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->Retina iPhone and Retina iTouch, 114×114 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->Retina iPad, 144×144 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->The IOS icon size is 180×180 on iPhone 6 plus and 120×120 on iPhone 6. To adapt to iPhone 6 plus, you need to add this paragraph in
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">iOS splash screen
Official document: Technical Q&A QA1686: App Icons on iPhone, iPad and Apple Watch
Reference article: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
The iPad startup screen 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 竖屏 768 x 1004（标准分辨率） -->iPad vertical screen 1536×2008 (Retina)
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->iPad landscape 1024×748 (standard resolution)
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->iPad landscape 2048×1496 (Retina)
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->The startup screen of iPhone and iPod touch includes the status bar area.
iPhone/iPod Touch portrait screen 320×480 (standard resolution)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->iPhone/iPod Touch portrait screen 640×960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->iPhone 5/iPod Touch 5 vertical screen 640×1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->Add Smart App Banner Smart App Banner (iOS 6+ Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->The corresponding image size for iPhone 6 is 750×1294, and the corresponding image size for iPhone 6 Plus is 1242×2148.
<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
Chrome 39 in Android Lollipop adds the theme-color meta tag to control tab color.
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
<meta name="theme-color" content="#db5945">rss subscription
<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 -->For a more detailed introduction to favicon, please refer to https://github.com/audreyr/favicon-cheat-sheet
Turn off the translation plug-in in chrome browser
Sometimes I feel that the translation plug-in in Chrome browser is very annoying. You can disable it through the following code.
<meta name="google" value="notranslate" />
Mobile header tags and 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 protected]"/>
<!-- 搜索引擎抓取 -->
<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 Banner（iOS 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">
<!-- 针对手持设备优化，主要是针对一些老的不识别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 iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- 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 竖屏 1536x2008（Retina） -->
<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 横屏 2048x1496（Retina） -->
<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>More meta tag reference
COMPLETE LIST OF HTML META TAGS
18 Meta Tags Every Webpage Should Have in 2013
参考文章：
Commonly used HTML header tags
html5_header
amazeui css
DOCTYPE
WEB 10 new changes in IOS 8 that engineers and designers must learn