Home Web Front-end HTML Tutorial html head header tag

html head header tag

Nov 22, 2016 pm 03:31 PM
head html

There are many tags and elements in the HTML head, which involve the browser's 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 very front of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

 The DTD (Document Type Definition) declaration starts with , it is not case-sensitive, and there is no content in front. If there is other content (except spaces), the browser will enable quirks mode rendering under IE. Web page. 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), + means yes, - means 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Copy after login

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Copy after login

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Copy after login

The latest HTML5 introduces more concise writing, it is forward and backward compatible, and it is recommended to use.

<!doctype html>
Copy after login

 doctype has two main purposes in HTML.

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

Some weird (almost standard) mode About the document mode, browser mode, strict mode, weird mode, DOCTYPE tag, detailed reading mode of IE browser? standard! Content.

  charset

  Declares the character encoding used in the document,

<meta charset="utf-8">
Copy after login

  The web page before HTML5 would write like this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Copy after login

  These two are equivalent, you can read more specifically: vs , so it is recommended to use a shorter one that is easier to remember.

 Priority to use the latest version of IE and Chrome

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

  360 Use Google Chrome Frame

<meta name="renderer" content="webkit">
Copy after login

  360 The browser will immediately switch to the corresponding speed core after reading this tag. In addition, for the sake of safety, add

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Copy after login

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 transcode your webpage, take off your clothes, and stick it on your body For advertisements of dog skin plasters, you can add

<meta http-equiv="Cache-Control" content="no-siteapp" />
Copy after login

in the head. Related links: SiteApp transcoding statement

SEO optimization part

Page title tag (head header is required) </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><title>your title</title></pre><div class="contentsignin">Copy after login</div></div><p>Page keywords keywords</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="keywords" content="your keywords"></pre><div class="contentsignin">Copy after login</div></div> <p>Page description content description</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="description" content="your description"></pre><div class="contentsignin">Copy after login</div></div><p>Define the web page author author</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="author" content="author,email address"></pre><div class="contentsignin">Copy after login</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. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="robots" content="index,follow"></pre><div class="contentsignin">Copy after login</div></div><p> Related links: WEB1038 -</p><p> The tag contains an invalid value</p><p style="margin: 30px 0px 10px; padding: 0px; font-family: Verdana, "Microsoft YaHei"; border-bottom: 1px solid rgb(221, 221, 221); font-size: inherit; color: rgb(69, 69, 69); line-height: 30px; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"> viewport</p><p>  viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre><div class="contentsignin">Copy after login</div></div><p>  width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p><p>  content 参数:</p><p>width viewport 宽度(数值/device-width)</p><p>height viewport 高度(数值/device-height)</p><p>initial-scale 初始缩放比例</p><p>maximum-scale 最大缩放比例</p><p>minimum-scale 最小缩放比例</p><p>user-scalable 是否允许用户缩放(yes/no)</p><p>minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></pre><div class="contentsignin">Copy after login</div></div><p>  而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width,user-scalable=yes"></pre><div class="contentsignin">Copy after login</div></div><p>  相关链接:非响应式设计的viewport</p><p>  适配 iPhone 6 和 iPhone 6plus 则需要写:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"></pre><div class="contentsignin">Copy after login</div></div><p>  大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。</p><p>  ios 设备</p><p>  添加到主屏后的标题(iOS 6 新增)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 6 新增) --></pre><div class="contentsignin">Copy after login</div></div><p>  是否启用 WebApp 全屏模式</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 --></pre><div class="contentsignin">Copy after login</div></div><p>  设置状态栏的背景颜色</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色, 只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --></pre><div class="contentsignin">Copy after login</div></div><p>  只有在 "apple-mobile-web-app-capable" content="yes" 时生效</p><p>  content 参数:</p><p>default 默认值。</p><p>black 状态栏背景是黑色。</p><p>black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。</p><p>  禁止数字识自动别为电话号码</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 --></pre><div class="contentsignin">Copy after login</div></div><p style="margin: 30px 0px 10px; padding: 0px; font-family: Verdana, "Microsoft YaHei"; border-bottom: 1px solid rgb(221, 221, 221); font-size: inherit; color: rgb(69, 69, 69); line-height: 30px; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"> iOS 图标</p><p>  rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 --></pre><div class="contentsignin">Copy after login</div></div><p>  iPad,72x72 像素,可以没有,但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad,72x72 像素,可以没有,但推荐有 --></pre><div class="contentsignin">Copy after login</div></div><p>  Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 --></pre><div class="contentsignin">Copy after login</div></div><p>  Retina iPad,144x144 像素,可以没有,但推荐有</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 --></pre><div class="contentsignin">Copy after login</div></div><p>  IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"></pre><div class="contentsignin">Copy after login</div></div><p style="margin: 30px 0px 10px; padding: 0px; font-family: Verdana, "Microsoft YaHei"; border-bottom: 1px solid rgb(221, 221, 221); font-size: inherit; color: rgb(69, 69, 69); line-height: 30px; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"> iOS 启动画面</p><p>  官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</p><p>  iPad 的启动画面是不包括状态栏区域的。</p><p>  iPad 竖屏 768 x 1004(标准分辨率)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004(标准分辨率) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPad 竖屏 1536x2008(Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008(Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPad 横屏 1024x748(标准分辨率)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748(标准分辨率) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPad 横屏 2048x1496(Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496(Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p><p>  iPhone/iPod Touch 竖屏 320x480 (标准分辨率)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPhone/iPod Touch 竖屏 640x960 (Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --></pre><div class="contentsignin">Copy after login</div></div><p>  添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) --></pre><div class="contentsignin">Copy after login</div></div><p>  iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"></pre><div class="contentsignin">Copy after login</div></div><p style="margin: 30px 0px 10px; padding: 0px; font-family: Verdana, "Microsoft YaHei"; border-bottom: 1px solid rgb(221, 221, 221); font-size: inherit; color: rgb(69, 69, 69); line-height: 30px; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">Windows 8</p><p>  Windows 8 磁贴颜色</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --></pre><div class="contentsignin">Copy after login</div></div><p>  Windows 8 磁贴图标</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></pre><div class="contentsignin">Copy after login</div></div><p><span style="line-height: 1.76em;"> rss订阅</span><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 --></pre><div class="contentsignin">Copy after login</div></div><p>  favicon icon</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon --></pre><div class="contentsignin">Copy after login</div></div><p>  比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet</p><p style="margin: 30px 0px 10px; padding: 0px; font-family: Verdana, "Microsoft YaHei"; border-bottom: 1px solid rgb(221, 221, 221); font-size: inherit; color: rgb(69, 69, 69); line-height: 30px; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"> 移动端的meta</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 适应移动端end --></pre><div class="contentsignin">Copy after login</div></div><p>  这是来自 toobug 的分享总结。</p> <p>  更多的 meta 标签参考</p> <p>COMPLETE LIST OF HTML META TAGS</p> <p>18 Meta Tags Every Webpage Should Have in 2013</p> <p>  参考文章:</p> <p>常用的 HTML 头部标签</p> <p>html5_header</p> <p>amazeui css</p> <p>DOCTYPE</p> <p>WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变</p> <p><br></p> </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_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/1796773439.html" title="Repo: How To Revive Teammates" class="phpgenera_Details_mainR4_bottom_title">Repo: How To Revive Teammates</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796774171.html" title="Hello Kitty Island Adventure: How To Get Giant Seeds" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island Adventure: How To Get Giant Seeds</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 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>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796775336.html" title="R.E.P.O. Save File Location: Where Is It & How to Protect It?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Save File Location: Where Is It & How to Protect It?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</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 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/1796773439.html" title="Repo: How To Revive Teammates" class="phpgenera_Details_mainR4_bottom_title">Repo: How To Revive Teammates</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796774171.html" title="Hello Kitty Island Adventure: How To Get Giant Seeds" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island Adventure: How To Get Giant Seeds</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 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>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796775336.html" title="R.E.P.O. Save File Location: Where Is It & How to Protect It?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Save File Location: Where Is It & How to Protect It?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</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>7323</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>9</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1625</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</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>1350</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>46</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1262</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1209</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</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/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/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/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 class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" 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/2024090416493797970.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML onclick Button" /> </a> <a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" class="phphistorical_Version2_mids_title">HTML onclick Button</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.</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?1743551948"></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>