search

Home >Web Front-end >HTML Tutorial >Detailed introduction to HTML head header tag_HTML/Xhtml_Web page production

Detailed introduction to HTML head header tag_HTML/Xhtml_Web page production

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:36:352342browse

There are many tags and elements in the HTML head part, which involve browser rendering of web pages, SEO, etc. Each browser core and each domestic browser manufacturer have their own tag elements, which results in a lot of differences. In the era of mobile Internet, the head structure and meta elements of mobile terminals are even more important. Understanding the meaning of each tag and writing a head tag that meets your own needs is the purpose of this article. This article is based on Yishi's article and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the frontmost position in the document, before the html tag. This tag tells the browser what kind of HTML the document uses. Or the XHTML specification.

DTD (Document Type Definition) declaration starts with , is not case-sensitive, and has no content in front. If there is other content (except spaces), the browser will open a weird mode under IE ( quirks mode) renders web pages. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), indicating yes, - indicating no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The final language is the ISO 639 language identifier of the DTD language, such as: EN for English, ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.

●HTML 4.01 strict

XML/HTML CodeCopy content to clipboard
  1. >
●HTML 4.01 Transitional

XML/HTML CodeCopy content to clipboard
  1. > 
●HTML 4.01 Frameset

XML/HTML CodeCopy content to clipboard
  1. > 
●The latest HTML5 introduces more concise writing, which is forward and backward compatible, and is recommended for use.

XML/HTML CodeCopy content to clipboard
  1. >

In HTML doctype has two main purposes.

●Verify the validity of documents.

It tells the user agent and validator what DTD this document is written according to. This action is passive. Every time the page is loaded, the browser does not download the DTD and check the validity. It is only enabled when the page is manually verified.

●Determine the browser’s rendering mode

For actual operations, inform the browser which parsing algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the html layout. Browsers have three ways to parse HTML documents.

●Non-weird (standard) mode
●Weird mode
●Partially weird (almost standard) mode About IE browser’s document mode, browser mode, strict mode, weird mode, DOCTYPE tag, you can learn more Reading mode? standard! content.

charset

Declare the character encoding used by the document,

XML/HTML CodeCopy content to clipboard
  1. <meta charset="utf-8"> 

Before html5, the web page would read like this:

XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="Content-Type " content="text/html; charset=utf-8">

These two are equivalent, please read the details below: vs , so it is recommended to use shorter ones that are easier to remember.

lang attribute

Simplified Chinese

XML/HTML CodeCopy content to clipboard
  1. <html lang="zh-cmn-Hans "> 

Traditional Chinese

XML/HTML CodeCopy content to clipboard
  1. <html lang="zh-cmn-Hant "> 

Why is lang="zh-cmn-Hans" instead of the lang="zh-CN" we usually write? Please read: 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

XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="X-UA -Compatible" content="IE=edge,chrome=1" />

　360 Using Google Chrome Frame

XML/HTML CodeCopy content to clipboard
  1. <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

XML/HTML CodeCopy content to clipboard
  1. <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 will be used to render the page. If GCF is not installed, the highest version of the IE kernel will be used for rendering.

Related links: Browser Kernel Control Meta Tag Documentation

Baidu prohibits transcoding

When you open a webpage through Baidu mobile phone, Baidu may modify your webpage Transcode, take off your clothes, and put dog skin plaster ads on your body. For this purpose, you can add

in the head
XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="Cache-Control " content="no-siteapp" />

Related links: SiteApp transcoding statement


SEO optimization part

Page title tag (head header (Required) <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3566')">Copy content to clipboard</span> </div> <div id="code_3566"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>your title</span><span class="tag"></</span><span class="tag-name">title </span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Page keywords keywords <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5916')">Copy content to clipboard</span> </div> <div id="code_5916"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"keywords"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your keywords"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p><br>Page description content description <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8699')">Copy content to clipboard</span> </div> <div id="code_8699"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"description"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your description"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Define web author author <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2733')">Copy content to clipboard</span> </div> <div id="code_2733"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"author"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"author,email address"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>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. <br><br><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1191')">Copy content to clipboard</span></p> <div class="codeText"> <div id="code_1191"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"robots"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"index,follow"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Related links: <a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspx">WEB1038 - Tag contains invalid value</a> <br><br><strong>viewport</strong></p> <p>　Viewport can make the layout display better on mobile browsers. Usually write </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2172')">Copy content to clipboard</span> </div> <div id="code_2172"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>width=device-width will cause black borders to appear when the iPhone 5 is added to the home screen and opened in WebApp full-screen mode (<a href="http://bigc.at/ios-webapp-viewport-meta.orz">http://bigc.at/ios-webapp-viewport-meta.orz</a> )</p> <p>content parameter: </p> <p>width viewport width (numeric value/device-width)<br>height viewport height (numeric value/device-height)<br>initial-scale initial scaling ratio<br>maximum-scale maximum scaling ratio<br>minimum-scale Minimum zoom ratio<br>user-scalable Whether to allow user scaling (yes/no)<br>minimal-ui A new attribute in iOS 7.1 beta 2 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: </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4407')">Copy content to clipboard</span> </div> <div id="code_4407"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>And if your website is not responsive, please do not use initial-scale or disable scaling. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8954')">Copy content to clipboard</span> </div> <div id="code_8954"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span><span> </span></span></li> </ol> </div> </div> <p>Related links: <a target="_blank" href="http://www.qianduan.net/non-responsive-design-viewport.html">Viewport with non-responsive design</a> <br><br> To adapt to iPhone 6 and iPhone 6plus, you need to write: <br><span class="lantxt"><br>XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4250')">Copy content to clipboard</span></p> <div class="codeText"> <div id="code_4250"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span> <span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=375"</span><span class="tag">></span><span> </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport" </span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=414"</span><span class="tag">></span><span> </span> </li> </ol> </div> </div> <p>The viewport width of most 4.7~5-inch Android devices is set to 360px, but it is 375px on iPhone 6. The viewport width of most 5.5-inch Android devices (such as Samsung Note) is 400, and it is 414px on iPhone 6 plus. . <br><br><strong> ios device <br><br></strong> Title added to the home screen (new in iOS 6) </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7738')">Copy content to clipboard</span> </div> <div id="code_7738"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-title"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"title"</span><span class="tag">></span><span> </span><span class="comments"><!-- Title added to the home screen (new in iOS 6) --></span><span> </span></span></li> </ol> </div> </div> <p><br>Whether to enable WebApp full screen mode</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5148')">Copy content to clipboard</span> </div> <div id="code_5148"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- Whether to enable WebApp full screen mode --></span><span> </span></span></li> </ol> </div> </div> <p>Set the background color of the status bar</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5979')">Copy content to clipboard</span> </div> <div id="code_5979"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web -app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black-translucent"</span><span> </span><span class="tag">/></span><span> </span></span></li> <li> <span></span><span class="comments"><!-- Set the background color of the status bar, which only takes effect when `"apple-mobile-web-app-capable" content="yes"` --> </span><span> </span> </li> </ol> </div> </div> <p>Only takes effect when "apple-mobile-web-app-capable" content="yes" <br><br>　content parameter: <br><br>default default value. <br>black The background of the status bar is black. <br>black-translucent The background of the status bar is black and translucent. If set to default or black , web 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 obscured by the status bar. <br><br><strong>Disable digit recognition as a phone number</strong></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3828')">Copy content to clipboard</span> </div> <div id="code_3828"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telephone=no"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!--Disable digit recognition as a phone number --></span><span> </span></span></li> </ol> </div> </div> <p>iOS icon</p> <p>　rel parameter: apple-touch-icon The image is automatically processed into 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 57x57 pixels, required </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode60"> <br><link rel="apple-touch -icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone and iTouch, default 57x57 pixels, must have--><br> </div> <p> iPad, 72x72 pixels, optional but recommended </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode61"> <br><link rel="apple-touch -icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 pixels, optional but recommended--><br> </div> <p> Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode62'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode62"> <br><link rel="apple-touch -icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended - -><br> </div> <p> Retina iPad, 144x144 pixels, optional but recommended </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode63'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode63"> <br><link rel="apple-touch -icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 pixels, optional but recommended--> <br> </div> <p>　The iOS icon size is 180×180 on iPhone 6 plus and 120x120 on iPhone 6. To adapt to iPhone 6 plus, you need to add this paragraph </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode64'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode64"> <br><link rel="apple-touch -icon-precomposed" sizes="180x180" href="retinahd_icon.png"><br> </div> <p><strong>iOS splash screen<br><br></strong>Official documentation: <a target="_blank" href="https://developer.apple.com/library/ios/qa/qa1686/_index.html">https://developer.apple.com/library/ios/qa/qa1686/_index.html</a> <br>Reference article: <a target="_blank" href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/">http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</a> <br><br>The iPad startup screen does not include the status bar area. </p> <p> iPad portrait screen 768 x 1004 (standard resolution) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode65'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode65"> <br><link rel="apple-touch -startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad portrait screen 768 x 1004 (standard resolution) --><br> </div> <p> iPad portrait 1536x2008 (Retina) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode66'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode66"> <br><link rel="apple-touch -startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad vertical screen 1536x2008 (Retina) --><br> </div> <p> iPad landscape 1024x748 (standard resolution) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode67'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode67"> <br><link rel="apple-touch -startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad landscape 1024x748 (standard resolution) --><br> </div> <p> iPad landscape 2048x1496 (Retina) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode68"> <br><link rel="apple-touch -startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad landscape screen 2048x1496 (Retina) --><br> </div> <p> The startup screen of iPhone and iPod touch includes the status bar area. </p> <p>　iPhone/iPod Touch portrait screen 320x480 (standard resolution)<br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode69"> <br><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch portrait screen 320x480 (standard resolution rate) --><br> </div> <p>　iPhone/iPod Touch portrait screen 640x960 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode70"> <br><link rel="apple-touch -startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch portrait screen 640x960 (Retina) --><br> </div> <p>　iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode71"> <br><link rel="apple-touch -startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina) --><br> </div> <p> Add Smart App Banner Smart App Banner (iOS 6 Safari) </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode72'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode72"> <br><meta name="apple-itunes -app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- Add Smart App Banner Smart App Banner (iOS 6 Safari) --><br> </div> <p> The corresponding image size for iPhone 6 is 750×1294, and the corresponding image size for iPhone 6 Plus is 1242×2148. </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode73'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode73"> <br><link rel="apple-touch -startup-image" href="launch6.png" media="(device-width: 375px)"><br><link rel="apple-touch-startup-image" href="launch6plus.png" media ="(device-width: 414px)"><br> </div> <p><strong>Windows 8<br></strong>　Windows 8 tile color</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode74'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode74"> <br><meta name="msapplication-TileColor " content="#000"/> <!-- Windows 8 Tile Color--><br> </div> <p>　Windows 8 tile icon</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode75'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode75"> <br><meta name="msapplication-TileImage " content="icon.png"/> <!-- Windows 8 tile icon--><br> </div> <p> RSS subscription </p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode76'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode76"> <br><link rel="alternate" type="application/rss xml" title="RSS" href="/rss.xml" /> <!-- Add RSS subscription--> <br> </div> <p> favicon icon</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode77"> <br><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- Add favicon icon --><br> </div> <p>For a more detailed introduction to favicon, please refer to <a target="_blank" href="https://github.com/audreyr/favicon-cheat-sheet">https://github.com/audreyr/favicon-cheat-sheet<br></a><br><strong>Mobile meta <br><br></strong><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8641')">Copy content to clipboard</span></p> <div class="codeText"> <div id="code_8641"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span></span></li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>="format-detection"</span><span class="attribute-value">content</span><span>="</span><span class="attribute">telephone</span><span>=</span><span class="attribute-value">no</span><span>, </span><span class="attribute">email</span><span>=</span><span class="attribute-value">no</span><span>" </span><span class="tag">/></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 删除苹果默认的工具栏和菜单栏 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 设置苹果工具栏颜色 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telphone=no, email=no"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 忽略页面中的数字识别为电话，忽略email识别 --></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"renderer"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"webkit"</span><span class="tag">></span><span>  </span> </li> <li class="alt"> <span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">" " > </span><span> </span><span class="attribute"></span><span><!-- Optimized for handheld devices, mainly for some old browsers that do not recognize viewport, such as Blackberry --></span><span class="attribute-value"> </span> <span class="tag"> </span><span></span> </li><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"HandheldFriendly" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"true"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!--Microsoft's old-school browser --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"MobileOptimized" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"320"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- uc forced vertical screen --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"screen- orientation"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"portrait"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ forced vertical screen --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- orientation"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"portrait"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- UC forced full screen --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"full- screen"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"yes"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ forced full screen --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- fullscreen"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"true"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- UC application mode --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"browsermode" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"application"</span><span>><span class="attribute-value"> </span><span> </span><span class="attribute"></span><span><!-- QQ application mode --></span><span class="attribute-value"> </span><span class="tag"> </span><span></span><<li class="alt"><span>meta</span><span class="comments"> </span><span>name</span></li>=<li><span>"x5- page-mode"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"app"</span><span>><span class="attribute-value"> </span> <span><li class="alt"> <span></span><span class="comments"><!-- windows phone click without highlight --></span><span> </span> </li> <li> <span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"msapplication- tap-highlight"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"no"</span><span class="tag">></span><span> </span> </li> <li class="alt"> <span></span><span class="comments"><!-- Adapt to mobile end --></span><span> </span> </li> </span> </ol> </div> </div> <p><br>This is a summary of sharing from <a href="http://weibo.com/toooobug" target="_blank">toobug</a>. </p> <p>More meta tag references</p> <ul> <li><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/" target="_blank">COMPLETE LIST OF HTML META TAGS</a></li> <li><a href="http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013" target="_blank">18 Meta Tags Every Webpage Should Have in 2013</a></li> </ul> <p> Reference article: </p> <ul> <li><a href="https://github.com/yisibl/blog/issues/1" target="_blank">Commonly used HTML header tags</a></li> <li><a href="https://gist.github.com/paddingme/6182708733917ae36331" target="_blank">html5_header</a></li> <li><a href="http://amazeui.org/css/" target="_blank">amazeui css</a></li> <li><a href="http://www.douban.com/note/170560091/" target="_blank">DOCTYPE</a></li> <li><a href="http://www.uisdc.com/ios8-ten-new-feature" target="_blank">10 new changes in IOS 8 that WEB engineers and designers must learn</a></li> </ul></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed summary of HTML tag nesting rules suitable for novice friends_HTML/Xhtml_Web page production" href="https://m.php.cn/faq/10967.html">Detailed summary of HTML tag nesting rules suitable for novice friends_HTML/Xhtml_Web page production</a></span><span>Next article：<a class="dBlack" title="Detailed summary of HTML tag nesting rules suitable for novice friends_HTML/Xhtml_Web page production" href="https://m.php.cn/faq/10971.html">Detailed summary of HTML tag nesting rules suitable for novice friends_HTML/Xhtml_Web page production</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>