Home > Developer > Web Develop
Reference: http://fex.baidu.com/blog/2014/10/html-head-tags/
Head
DOCTYPE (document Type), which is located in the first position of the document, before the HTML tag, which tells the browser which HTML or XHTML specification to use for the document.
The DTD (Document Type Definition) is declared with the <! Doctype> start, case-insensitive, nothing in front.
HTML 4.01 Strict: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
HTML 4.01 Transitional: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
HTML 4.01 Frameset: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD" >
HTML5: <!doctype html> It is forward backwards compatible and recommended for use.
There are two main purposes of DOCTYPE in HTML
A) validation of the document. It tells the user agent and the validator that the document was written according to what DTD. is passive, each time the page loads, the browser does not download the DTD and checks for legitimacy, which is enabled only when the page is manually validated.
b) Determine the rendering mode of the browser. http://padding.me/blog/2014/07/04/mode-or-standard/
Charset
Declaring the character encoding used by a document
Recommended wording: <meta charset= "Utf-8" >
HTML5 before the wording: <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
The two are equivalent, specific: Http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type
Lang Property
Simplified Chinese: Traditional Chinese page: English page:
Meta
Prefer to use the latest IE version and Chrome: <meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
360 using Google Chrome Frame: <meta name= "renderer" content= "WebKit" > Additional for insurance purposes: <meta http-equiv= " X-ua-compatible "content=" ie=edge,chrome=1 ">
Browser kernel control META tag description document: http://se.360.cn/v6/help/meta.html
Meta on the mobile side
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no"/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= "format-detection" content= "Telephone=no, Email=no"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no"/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/><!--remove Apple's default toolbar and menu bar--
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/><!--set the Apple toolbar color--
<meta name= "format-detection" content= "Telphone=no, email=no"/><!--ignore the numbers in the page to recognize the phone, ignoring email identification
<!--fast mode with 360 browser enabled (WebKit)--
<meta name= "renderer" content= "WebKit" >
<!--prevent IE from using compatibility mode--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and
<meta name= "handheldfriendly" content= "true" >
<!--Microsoft's Vintage browser--
<meta name= "mobileoptimized" content= ">"
<!--UC Force vertical screen--
<meta name= "Screen-orientation" content= "Portrait" >
<!--QQ Forced vertical screen--
<meta name= "X5-orientation" content= "Portrait" >
<!--UC Mandatory fullscreen--
<meta name= "Full-screen" content= "yes" >
<!--QQ Mandatory fullscreen--
<meta name= "X5-fullscreen" content= "true" >
<!--UC Application Mode--
<meta name= "Browsermode" content= "Application" >
<!--QQ Application Mode--
<meta name= "X5-page-mode" content= "App" >
<!--windows Phone Click No Highlight--
<meta name= "Msapplication-tap-highlight" content= "no" >
<!--adapt to mobile end---
Baidu prohibits transcoding
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
Baidu transcoding Description: http://m.baidu.com/pub/help.php?pn=22&ssid=0&from=844b&bd_page_type=1
SEO Optimization Section
A) page title <title> tag (head head must): <title>your title</title>
b) Page keywords Keywords:<meta name= "keywords" content= "your keywords" > multiple separated by commas
c) Page description content Description: <meta name= "description" content= "Your description" >
d) define page author Author: <meta name= "Author" content= "Author,email Address" >
c) Define the index of the web search engine, Robotterms is a set of values that use commas and splits, usually with the following values: None,noindex,nofollow,all,index and follow. : <meta name= "Robots" content= "Index,follow" >
Viewport
Viewport can make the layout appear better on a mobile browser. Usually write: <meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
Content parameters:
Width viewport widths (numeric/device-width)
Height viewport altitude (numeric/device-height)
Initial-scale Initial zoom ratio
Maximum-scale Maximum zoom ratio
Minimum-scale Minimum zoom ratio
User-scalable whether to allow user scaling (yes/no)
HTML Head Header Tag
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
