There are many tags and elements in the HTMLhead header, which involve browser rendering of webpages, SEO, etc. Various browser kernels and various domestic browser vendors have their own tag elements, this leads to many differences ....,. There are many tags and elements in the HTML head header, which involve browser rendering of webpages, SEO, etc. Each browser kernel and various domestic browser vendors have their own tag elements, this leads to many differences. In the mobile Internet era, the head structure and the meta element on the Mobile End become more important. The purpose of this article is to understand the meaning of each label and write the head header label that meets your needs. Based on a few articles, this article provides an extension summary to introduce the meaning and use cases of various labels and elements in common headers.
DOCTYPE
DOCTYPE (Document Type), which is located at the top of the Document and prior to the html Tag. This tag informs the browser Document of the HTML or XHTML specification used.
DTD (Document Type Definition) declaresIt is case-insensitive and has no content in front. If there are other content (except spaces), the browser will enable quirks mode to render the webpage in IE. Public DTD. The name format is registration // organization // type label // language. Registration indicates whether the organization is registered by the International Standardization Organization (ISO). + indicates yes,-indicates no. The organization name, for example, W3C. The type is generally DTD. The tag specifies the description of the public text, that is, the unique descriptive name of the referenced public text, followed by the version number. The last language is the ISO 639 language identifier of the DTD language. For example, EN indicates English and ZH indicates Chinese. XHTML 1.0 can declare three types of DTD. Indicates the strict version, the transitional version, and the framework-based HTML document.
HTML 4.01 strict
HTML 4.01 Transitional
HTML 4.01 Frameset
The latest HTML5 introduces more concise writing. It is backward compatible and is recommended for use.
In HTML, doctype has two main purposes.
Verify the validity of the document.
It tells the user agent and the validator which DTD the document is written according. This action is passive. When a page is loaded, the browser does not download the DTD and check validity. It is enabled only when the page is manually verified.
Determines the rendering mode of the browser.
For actual operations, notify the browser which resolution algorithm is used to read the document. If no code is written, the browser parses the code according to its own rules, which may seriously affect the html layout. The browser can parse HTML documents in three ways.
- Non-weird (standard) Mode
- Weird Mode
- Some weird (almost standard) modes about the document mode, browser mode, strict mode, weird mode, and DOCTYPE label of IE browser. Can you refer to the detailed reading mode? Standard! .
Charset
Declare the character encoding used in the document,
-
Before html5, the webpage will write as follows:
-
These two values are equivalent. For more information, see: Vs Therefore, we recommend that you use a shorter value, which is easy to remember.
Lang attributes
Simplified Chinese
Traditional Chinese
Why lang = "zh-cen-Hans" instead of the lang = "zh-CN" We usually write? Please read the following link: the statement in the header of the page should be lang = "zh" or lang = "zh-cn ".
The latest version of IE and Chrome are preferred.
-
360 use Google Chrome Frame
-
360 the browser will immediately switch the corresponding speed core after reading the tag. In addition, add again for the sake of Insurance
-
In this way, if Google Chrome Frame is installed, GCF is used to render the page. If GCF is not installed, the highest version of IE kernel is used for rendering.
Related links:Browser kernel control Meta tag description
Transcoding prohibited by Baidu
When you open a webpage through a Baidu mobile phone, Baidu may transcode Your webpage, ** your clothes, paste the dog skin plaster advertisement to your body, so you can add in the head
-
Link: SiteApp transcoding statement
SEO Optimization
Page title Label (head header required) <br> <p class = "blockcode"> <p id = "code_LL1"> <ol> <li> <title> your title
Page keywords
-
Description
-
Define webpage author
-
Define the indexing method of a Web search engine. robotterms is a group of values separated by commas (,). Generally, the following values are available: none, noindex, nofollow, all, index, and follow.
-
Related link: WEB1038-mark contains invalid values
Viewport
Viewport enables better display of the layout on a mobile browser. Usually write
-
Width = device-width causes the iPhone 5 to appear black when opening the page in WebApp full screen mode after being added to the home screen (http://bigc.at/ios-webapp-viewport-meta.orz)
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:
-
If your website is not responsive, do not use initial-scale or disable scaling.
-
Related Links: non-responsive viewport
To adapt to iPhone 6 and iPhone 6 plus, you need to write:
-
-
Most 4.7 ~ The viewport width of a 5-inch Android device is set to 360px, while that of the iPhone 6 is 375px. The viewport width of most 5.5-inch Android machines (such as Samsung Note) is 400, and that of the iPhone 6 plus is 414px.
Ios devices
Title after being added to the home screen (added in iOS 6)
-
Enable WebApp full screen mode?
-
Set the background color of the status bar
-
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
-
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
-
IPad, 72x72 pixels, no, but recommended
-
Retina iPhone and Retina iTouch, 114x114 pixels, no, but we recommend
-
Retina iPad, 144x144 pixels, can be left blank, but we recommend
-
The IOS Icon size is 180x180 on the iPhone 6 plus and 120x120 on the iPhone 6. To adapt to the iPhone 6 plus, you need to add this section in
-
IOS startup Screen
Official Document: 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)
-
IPad portrait screen 1536x2008 (Retina)
-
IPad horizontal screen 1024x748 (standard resolution)
-
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)
-
IPhone/iPod Touch portrait screen 640x960 (Retina)
-
IPhone 5/iPod Touch 5 portrait screen 640x1136 (Retina)
-
Add Smart App advertisement bar Smart App Banner (iOS 6 + Safari)
-
The image size for iPhone 6 is 750x1294, and for iPhone 6 Plus, it is 1242x2148.
-
-
Windows 8
Windows 8 tile color
-
Windows 8 tile icon
-
Rss subscription
-
Favicon
-
For more detailed favicon introduction, see https://github.com/audreyr/favicon-cheat-sheet
Mobile meta
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
This is a summary of toobug.
For more meta tag reference
- COMPLETE LIST OF HTML META TAGS
- 18 Meta Tags Every Webpage shoshould Have in 2013
References:
- Common HTML header tags
- Html5_header
- Amazeui css
- DOCTYPE
- 10 new IOS 8 changes that WEB engineers and designers must learn
Paddingme (http://padding.me)-a thriving front-end cainiao
Via: http://fex.baidu.com/blog/2014/10/html-head-tags/
