HTML page The meaning and application scenario of head tag element

It is believed that before HTML5, few people would care about the definition and application of the tag element in the head of the HTML page, and probably remember that only "title", "keyword" and "description" were used to understand the new standard of HTML. In particular, the development of mobile pages, you can see this piece of HTML is becoming more and more important for everyone to know, the first time to see these tags are basically confusing the mind, today to comb the definition of these tags (HTML5 standard);

First of all, a page summary, head tag is not sorted successively:

<! DOCTYPE HTML > < HTML > < Head >

<meta charset= "UTF-8" >
<title>Title</title>
<meta content= "keyword" name= "keywords" >
<meta content= "description" name= "description" >
<meta name= "renderer" content= "WebKit" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
<meta name= "Author" content= "Author,email Address" >
<meta name= "Robots" content= "Index,follow" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>
<meta name= "format-detection" content= "Telephone=no,email=no"/>
<link rel= "apple-touch-icon-precomposed" href= "/apple-touch-icon.png"/>
<meta name= "handheldfriendly" content= "true" >
<meta name= "Screen-orientation" content= "Portrait" >
<meat name= "X5-orientation" content= "Portrait" >
<meta name= "Full-screen" content= "yes" >
<meta name= "X5-fullscreen" content= "true" >
<meta name= "Browsermode" content= "Application" >
<meta name= "X5-page-mode" content= "App" >
<meta name= "Msapplication-tap-highlight" content= "no" >

<link rel= "icon" type= "Image/ico" href= "/favicon.ico"/>

<link rel= "Alternate" type= "Application/rss+xml" title= "RSS" href= "/rss.xml"/>

......

</ Heda > < Bady > some content </ Bady > </ HTML >

Recently collected these head tags, in fact, there are many, either did not think of, or I do not know what the meaning of = =, but the General page is so much, many sites are to customize some of the content, such as:

Well, these will not be ignored, the use of appropriate labels, to achieve the purpose of the pre-set, personal feeling here or not to put a lot of it, after all, these settings need the browser to parse the execution, or will consume a bit of resources;

　　<meta charset= "UTF-8": set the page character encoding, commonly used utf-8 and gb2312;

　　<title>title</title>: page title, not explained;

　　<meta content= "keyword" name= "keywords";:keyword keywords, separated by commas, not explained;

　　<meta content= "description" name= "description";:description Description not explained;

　　<meta name= "renderer" content= "WebKit";: first Use chrome kernel rendering page;

　　<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1": priority to use the latest version of IE and Chrome browser;

　　<meta http-equiv= "Cache-control" content= "No-siteapp"/>: When you open a webpage via a mobile phone, hundred poison may transcode your page, showing only the content of the page, The bottom of the head will be replaced and will generally add ads = = Urine sex does not change;

　　<meta name= "author" content= "Author,email address";: Define page author, this rarely see people with the seemingly, of course, there are many people do not know, Before a project was delivered to the boss, he saw this part of the book. We put the Trojan on their website = = The importance of reading more and more literate;

　　<meta name= "Robots" content= "Index,follow";: define the index of the web search engine, Robotterms is a set of values that use commas, Usually there are several values: None,noindex,nofollow,all,index and follow;

　　<meta name= "viewport" content= "Width=device-width, initial-scale=1.0": This application is more, for mobile device settings, Viewport can also be used as width units, some parameter settings, Width viewport widths (numeric/device-width), Height viewport heights (numeric/device-height), Initial-scale Initial scaling, user-scalable whether to allow user scaling (yes/no), the General Mobile Web page is set device width, default is not scalable;

　　<meta name= "apple-mobile-web-app-capable" content= "yes"/>: There is an apple, yes, this is an Apple device switch, this is whether to enable WEBAPP full screen mode Apple devices can be said Dancheng family, there are many specific settings, interested in small partners can go to the official document description to see details, to stamp the portal

　　<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>: sets the background color of the status bar, only in the Apple-mobile-web-app-capable "content=" yes "is effective;

　　<meta name= "format-detection" content= "Telephone=no,email=no"/>: do not automatically identify the phone and mailbox in the page, is to click on a number or a mailbox-like character will not do other actions;

　　<link rel= "apple-touch-icon-precomposed" href= "/apple-touch-icon.png"/>: Big Apple again, yes. This is the iOS icon set, And can be set more than one size, Apple can set the start page, interested in continuing to stamp official website documents;

　　<meta name= "handheldfriendly" content= "true";: Well, if you have more words, you can see what this means, friendly optimization of handheld devices, Seems to be aimed at not know viewport equipment (Apple has become an arcade, who idle nothing to see the Web page with Saipan?) Anyway, I didn't use it, so I can think of no eggs.

　　<meta name= "screen-orientation" content= "Portrait";:UC forced vertical screen;

　　<meta name= "x5-orientation" content= "Portrait";: QQ forced vertical screen;

　　<meta name= "Full-screen" content= "yes";: UC mandatory fullscreen;

<meta name= "X5-fullscreen" content= "true";: QQ Mandatory Fullscreen
<meta name= "Browsermode" content= "Application";: UC Application Mode
　　<meta name= "X5-page-mode" content= "app";: QQ Application Mode;

　　<link rel= "icon" type= "Image/ico" href= "/favicon.ico"/>: Web page ico icon settings;

　　<link rel= "alternate" type= "Application/rss+xml" title= "RSS" href= "/rss.xml"/>:RSS Subscription;

......

Look at the content is still a lot of, and a lot is set for the mobile end, the PC is relatively concise, and sure enough the maintenance cost of multi-device multi-browser is high Ah, so in many discussion scenarios I have been against the PC and mobile devices using a page, that is, to adapt to all devices page = =, Although some of the front-end framework is to support this, the feeling has not been separated design convenient and labor-saving, OK today first write here, check leaks fill in, there are new discoveries continue more;

HTML page The meaning and application scenario of head tag element