Detailed introduction to HTML head header tag_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed introduction to HTML head header tag_HTML/Xhtml_Web page production

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:36 PM

head html

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

●HTML 4.01 Transitional

XML/HTML CodeCopy content to clipboard

●HTML 4.01 Frameset

XML/HTML CodeCopy content to clipboard

●The latest HTML5 introduces more concise writing, which is forward and backward compatible, and is recommended for use.

XML/HTML CodeCopy content to clipboard

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

<meta charset="utf-8">

Before html5, the web page would read like this:

XML/HTML CodeCopy content to clipboard

<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

<html lang="zh-cmn-Hans ">

Traditional Chinese

XML/HTML CodeCopy content to clipboard

<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

<meta http-equiv="X-UA -Compatible" content="IE=edge,chrome=1" />

　360 Using Google Chrome Frame

XML/HTML CodeCopy content to clipboard

<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

<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

<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"></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"></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"> </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"></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" /> <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" /> <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" />  <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" /> <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" /> <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" /> <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" /> <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" /> <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" /> <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" /> <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"> <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"/> <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"/> <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" />  <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" /> <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"></span><span> </span> </li> <li class="alt"> <span></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">"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"></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></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></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></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></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></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></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></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></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"></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"></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> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Statement of this Website</div> <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> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot AI Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Generate AI Hentai for free.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796780570.html" title="R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796775427.html" title="How Long Does It Take To Beat Split Fiction?" class="phpgenera_Details_mainR4_bottom_title">How Long Does It Take To Beat Split Fiction?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 months ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796780641.html" title="R.E.P.O. Best Graphic Settings" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Best Graphic Settings</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796780520.html" title="R.E.P.O. How to Fix Audio if You Can't Hear Anyone" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. How to Fix Audio if You Can't Hear Anyone</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Topics</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7412</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1359</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/steamdzhmcssmgs" title="What is the format of the account name of steam" class="phpgenera_Details_mainR4_bottom_title">What is the format of the account name of steam</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>76</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/winactivationkeyper" title="win11 activation key permanent" class="phpgenera_Details_mainR4_bottom_title">win11 activation key permanent</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>20</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/faq/zt">Show More</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416492486715.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Table Border in HTML" /> </a> <a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_title">Table Border in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416491283996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Nested Table in HTML" /> </a> <a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_title">Nested Table in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416482056439.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML margin-left" /> </a> <a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_title">HTML margin-left</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:48 PM</span> <p class="Articlelist_txts_p">Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416543391948.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Table Layout" /> </a> <a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_title">HTML Table Layout</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416432927533.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Ordered List" /> </a> <a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_title">HTML Ordered List</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span> <p class="Articlelist_txts_p">Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416455153019.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Moving Text in HTML" /> </a> <a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_title">Moving Text in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:45 PM</span> <p class="Articlelist_txts_p">Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416542577781.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Input Placeholder" /> </a> <a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_title">HTML Input Placeholder</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796764479.html" title="How do you parse and process HTML/XML in PHP?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/173890063284749.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do you parse and process HTML/XML in PHP?" /> </a> <a href="https://www.php.cn/faq/1796764479.html" title="How do you parse and process HTML/XML in PHP?" class="phphistorical_Version2_mids_title">How do you parse and process HTML/XML in PHP?</a> <span class="Articlelist_txts_time">Feb 07, 2025 am 11:57 AM</span> <p class="Articlelist_txts_p">This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an</p> </div> </div> <a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744025764"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <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> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>