search
HomeWeb Front-endHTML TutorialDetailed introduction to HTML head header tag_HTML/Xhtml_Web page production

Detailed introduction to HTML head header tag_HTML/Xhtml_Web page production

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 04:36 PM
headhtml

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. /span>>
●HTML 4.01 Transitional

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

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

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> <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 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></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 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></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 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></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 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></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 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></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 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></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 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></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 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></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 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></span></li> <li> <span></span><span class="tag"><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></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 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></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 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></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 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></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 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></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> <p> Retina iPad, 144x144 pixels, optional but recommended </p> <p><br><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 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></span></li> <li> <span></span><span class="tag"><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> </li> <li class="alt"> <span></span><span class="tag"><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></span> </li> <li> <span></span><span class="tag"><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></span> </li> <li class="alt"> <span></span><span class="tag"><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 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></span> </li> <li class="alt"> <span></span><span class="tag"><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></span> </li> <li> <span></span><span class="tag"><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></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span>  </span> </li> <li> <span></span><span class="tag"><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></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><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></span> </li> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"HandheldFriendly" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"true"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"MobileOptimized" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"320"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"screen- orientation"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"portrait"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"x5- orientation"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"portrait"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"full- screen"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"yes"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"x5- fullscreen"</span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"true"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<li> <span>"browsermode" </span><span class="tag"> </span><span class="tag-name">content</span><span>=</span><span class="attribute">"application"</span><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> <span>meta</span><span class="comments"> </span><span>name</span>=<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><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 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> </span> </li> <li class="alt"> <span></span><span class="comments"><!-- Adapt to mobile end --></span><span> </span> </li> </span> </li> </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>
Statement
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
Related Article
HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesThe Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Is HTML easy to learn for beginners?Is HTML easy to learn for beginners?Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
2 weeks agoByDDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Show More

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Show More

Hot Topics

Where is the login entrance for gmail email?
7500
15
CakePHP Tutorial
1377
52
What is the format of the account name of steam
78
11
win11 activation key permanent
52
19
nyt connections hints and answers
19
54
Show More