Detailed description of the meaning of the html<head> head tag element and the usage scenario

Last Update:2015-06-24 Source: Internet

Author: User

Tags home screen

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Html

DOCTYPE

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, and if anything else (except spaces) causes the browser to turn on the quirks mode (quirks mode) to render the Web page under IE. Public DTD, name format for registration//organization//Type label//language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + denotes Yes,-indicates not. Organization is the name of the organization, such as: the company. The type is typically a DTD. A label is a specified public text description, which is a unique descriptive name for the referenced exposed text, which can be followed by a version number. The final language is the ISO 639 language identifier for the DTD language, such as en for English and ZH for Chinese. XHTML 1.0 can declare three types of DTDs. Represents the strict version, the transition version, and the framework-based HTML document, respectively.

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" >

The latest HTML5 introduces a more concise writing, which is backwards and forwards compatible and recommended for use.

<!doctype html>

There are two main purposes of DOCTYPE in HTML.

Validation of the document.

It tells the user agent and the validator that the document was written according to what DTD. This action is passive, and 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.

Determining the rendering mode of the browser

For the actual operation, tell the browser which parsing algorithm to use when reading the document. If it is not written, the browser parses the code according to its own rules, which can seriously affect the layout of HTML layouts. The browser has three ways to parse the HTML document.

Non-bizarre (standard) mode
Weird mode
Part of the weird (near standard) mode about IE browser document mode, browser mode, strict mode, weird mode, DOCTYPE tag, can detailed reading mode? Standard! The content.

CharSet

Declaring the character encoding used by a document

<meta charset= "Utf-8" >

This will be written on the previous page of HTML5:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

These two are equivalent, it is recommended to use the first one, simple and convenient.

Lang Property

Chinese Simplified


English
Use the latest version of IE and Chrome first<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
360 using Google Chrome Frame<meta name= "renderer" content= "WebKit" >
360 The browser will immediately switch to the corresponding fast kernel after reading this tab. Plus, for insurance purposes, join
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
The effect of this writing is that if Google Chrome Frame is installed, a GCF is used to render the page, and if no GCF is installed, the highest version of the IE kernel is used for rendering.
RELATED Links: Browser kernel control Meta Tag Description document
Baidu prohibits transcoding
Baidu Mobile phone to open the page, Baidu may be on your page transcoding, take off your clothes, to your body stickers Dogskin plaster ads, for this can be added in the head
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
Related link: Siteapp transcoding declaration
SEO optimization section
Page title <title> tags (head head must)
<title>your title</title>
Page keyword Keywords
<meta name= "keywords" content= "your keywords" >
Page description Content Description
<meta name= "description" content= "Your description" >
Define page author author
<meta name= "Author" content= "Author,email Address" >
Define the page search engine index method, Robotterms is a set of comma, the value of the split, usually have the following values: None,noindex,nofollow,all,index and follow.
<meta name= "Robots" content= "Index,follow" >
RELATED links: WEB1038-Tags contain invalid values
Viewport
Viewport can make the layout appear better on a mobile browser. Will 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) 
    Minimal-ui New in IOS 7.1 Beta 2, you can minimize the upper and lower status bar when the page loads. This is a Boolean value that can be written directly like this: 
   
 
  
<meta name= "viewport" content= "Width=device-width, initial-scale=1, Minimal-ui" >
If your site is not responsive, do not use Initial-scale or disable zooming
<meta name= "viewport" content= "Width=device-width,user-scalable=yes" >
For iphone 6 and iphone 6plus, you need to write a
<meta name= "viewport" content= "width=375" > <meta name= "viewport" content= "width=414" >
Most 4.7~5-inch Android devices have a viewport width of 360px,iphone 6, while the majority of 5.5-inch Android machines (such as Samsung Note) have a viewport width of 400,iphone 6 Plus 414px.
iOS devices
Title added to the home screen (IOS 6 new)
<meta name= "Apple-mobile-web-app-title" content= "title" > <!--title added to the home screen (IOS 6 new)-
Whether to 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, only in the ' " Apple-mobile-web-app-capable "content=" "yes" is effective-
Only valid when "apple-mobile-web-app-capable" content= "yes"
Content parameters:

 
  
  
    
    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. 
   
 
  
No digital knowledge automatic phone number
<meta name= "format-detection" content= "Telephone=no"/> <!--disable Digital automatic phone number--
IOS icons
Rel parameter: Apple-touch-icon image automatically processed into rounded corners and highlights and other effects. Apple-touch-icon-precomposed prevents the system from automatically adding effects, directly showing the original design. IPhone and ITouch, default 57x57 pixels, must have
<link rel= "apple-touch-icon-precomposed" href= "/apple-touch-icon-57x57-precomposed.png"/> <!--IPhone and ITouch, default 57x57 pixels, must have--
ipad,72x72 pixels, can not, but recommended to have
<link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "/apple-touch-icon-72x72-precomposed.png"/> < !--ipad,72x72 pixels can be no, but the recommended one-
Retina IPhone and retina itouch,114x114 pixels, can not, but recommended to 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 no but recommended--
Retina ipad,144x144 pixels, can not, but recommended to have
<link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= "/apple-touch-icon-144x144-precomposed.png"/> <!--Retina ipad,144x144 pixels, yes No but recommended-
IOS icon Size on IPhone 6 Plus is 180x180,iphone 6 is 120x120. With iphone 6 Plus, you'll need to add this
<link rel= "apple-touch-icon-precomposed" sizes= "180x180" href= "Retinahd_icon.png" >
IOS splash Screen
Official Document: Https://developer.apple.com/library/ios/qa/qa1686/_index.html
The IPad splash screen does not include the status bar area.
IPad Vertical screen 768 x 1004 (Standard resolution)
<link rel= "Apple-touch-startup-image" sizes= "768x1004" href= "/splash-screen-768x1004.png"/> <!--iPad vertical screen 768 X 1004 (standard resolution)--
IPad Vertical Screen 1536x2008 (Retina)
<link rel= "Apple-touch-startup-image" sizes= "1536x2008" href= "/splash-screen-1536x2008.png"/> <!--iPad vertical screen 1536x2008 (Retina)--
IPad Horizontal screen 1024x748 (standard resolution)
<link rel= "Apple-touch-startup-image" sizes= "1024x748" href= "/default-portrait-1024x748.png"/> <!--iPad flat screen 1024x748 (standard resolution)--
IPad Horizontal screen 2048x1496 (Retina)
<link rel= "Apple-touch-startup-image" sizes= "2048x1496" href= "/splash-screen-2048x1496.png"/> <!--iPad flat screen 2048x1496 (Retina)--
The splash screen for IPhone and IPod touch includes the status bar area.
Iphone/ipod Touch Vertical Screen 320x480 (standard resolution)
<link rel= "Apple-touch-startup-image" href= "/splash-screen-320x480.png"/> <!--iphone/ipod Touch vertical Screen 320x480 ( Standard resolution)--
Iphone/ipod Touch Vertical Screen 640x960 (Retina)
<link rel= "Apple-touch-startup-image" sizes= "640x960" href= "/splash-screen-640x960.png"/> <!--iPhone/iPod Touch vertical Screen 640x960 (Retina)--
IPhone 5/ipod Touch 5 Vertical screen 640x1136 (Retina)
<link rel= "Apple-touch-startup-image" sizes= "640x1136" href= "/splash-screen-640x1136.png"/> <!--iPhone 5/ IPod Touch 5 Vertical screen 640x1136 (Retina)--
Add Smart App ad strip Smart app Banner (IOS 6+ Safari)
<meta name= "Apple-itunes-app" content= "App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myURL" > <!--add smart App ad strip Smart app Banner (IOS 6+ Safari)--
The image size corresponding to the IPhone 6 is 750x1294,iphone 6 Plus corresponds to 1242x2148.
<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) ">
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--
RSS Subscription
<link rel= "Alternate" type= "Application/rss+xml" title= "RSS" href= "/rss.xml"/> <!--add RSS feeds--
Favicon icon
<link rel= "shortcut icon" type= "Image/ico" href= "/favicon.ico"/> <!--Add Favicon icon--
More detailed Favicon Introduction can refer to Https://github.com/audreyr/favicon-cheat-sheet
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" >
<!--avoid IE using compatibility mode--<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--optimized for handheld devices, primarily for older browsers that do not recognize viewport, such as BlackBerry-to-<meta name= "handheldfriendly" content= "true" >
<!--Microsoft's Vintage browser--<meta name= "mobileoptimized" content= "the" >
<!--UC Force vertical screen-<meta name= "Screen-orientation" content= "Portrait" >
<!--QQ Force vertical Screen--<meta name= "X5-orientation" content= "Portrait" >
<!--UC Force full screen--<meta name= "Full-screen" content= "yes" >
<!--QQ Force full Screen--<meta name= "X5-fullscreen" content= "true" >
<!--UC Application Mode--<meta name= "Browsermode" content= "Application" >
<!--QQ App mode--<meta name= "X5-page-mode" content= "App" >
<!--windows Phone Click No Highlight--<meta name= "Msapplication-tap-highlight" content= "no" >
<!--adapt to mobile end---
Detailed description of the meaning of the html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More