HTML head 头标签详细介绍-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

HTML head 头标签详细介绍

巴扎黑

Jun 27, 2017 am 10:20 AM

headhtmlmemperkenalkan

本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景 HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。

●HTML 4.01 strict

XML/HTML Code复制内容到剪贴板

●HTML 4.01 Transitional

XML/HTML Code复制内容到剪贴板

●HTML 4.01 Frameset

XML/HTML Code复制内容到剪贴板

●最新 HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。

XML/HTML Code复制内容到剪贴板

在 HTML中 doctype 有两个主要目的。

●对文档进行有效性验证。

它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。

●决定浏览器的呈现模式

对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。

●非怪异（标准）模式
●怪异模式
●部分怪异（近乎标准）模式关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。

charset

声明文档使用的字符编码，

XML/HTML Code复制内容到剪贴板

<meta charset="utf-8">

html5 之前网页中会这样写：

XML/HTML Code复制内容到剪贴板

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

这两个是等效的，具体可移步阅读： vs ，所以建议使用较短的，易于记忆。

lang属性

　　简体中文

XML/HTML Code复制内容到剪贴板

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

　　繁体中文

XML/HTML Code复制内容到剪贴板

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

　　为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"。

优先使用 IE 最新版本和 Chrome

XML/HTML Code复制内容到剪贴板

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

　　360 使用Google Chrome Frame

XML/HTML Code复制内容到剪贴板

<meta name="renderer" content="webkit">

　　360 浏览器就会在读取到这个标签后，立即切换对应的极速核。另外为了保险起见再加入

XML/HTML Code复制内容到剪贴板

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

　　这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

　　相关链接：浏览器内核控制 Meta 标签说明文档

百度禁止转码

　　通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

XML/HTML Code复制内容到剪贴板

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

相关链接：SiteApp 转码声明

SEO 优化部分

页面标题标签(head 头部必须) <br><br></p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span>your title<span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span></p></li></ol> <p>页面关键词 keywords <br><br></p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"keywords"</span> <span class="attribute">content</span>=<span class="attribute-value">"your keywords"</span><span class="tag">></span></p></li></ol> <p><br>页面描述内容 description <br></p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"description"</span> <span class="attribute">content</span>=<span class="attribute-value">"your description"</span><span class="tag">></span></p></li></ol> <p>定义网页作者 author <br></p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"author"</span> <span class="attribute">content</span>=<span class="attribute-value">"author,email address"</span><span class="tag">></span></p></li></ol> <p>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <br><br><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <p class="codeText"><br></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"robots"</span> <span class="attribute">content</span>=<span class="attribute-value">"index,follow"</span><span class="tag">></span></p></li></ol> <p>相关链接：WEB1038 - 标记包含无效的值 <br><br><strong><a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a></strong></p> <p>　　viewport 可以让布局在移动浏览器上显示的更好。通常会写</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span></p></li></ol> <p>width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p> <p>content 参数：</p> <p>width viewport 宽度(数值/device-width)<br>height viewport 高度(数值/device-height)<br>initial-scale 初始缩放比例<br>maximum-scale 最大缩放比例<br>minimum-scale 最小缩放比例<br>user-scalable 是否允许用户缩放(yes/no)<br>minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span></p></li></ol> <p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span></p></li></ol> <p>相关链接：非响应式设计的viewport <br><br>　　适配 iPhone 6 和 iPhone 6plus 则需要写： <br><span class="lantxt"><br>XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <p class="codeText"><br></p> <ol class="dp-xml list-paddingleft-2"> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=375"</span><span class="tag">></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=414"</span><span class="tag">></span></p></li> </ol> <p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。 <br><br><strong>　　ios 设备 <br><br></strong>　　添加到主屏后的标题（iOS 6 新增）</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-title"</span> <span class="attribute">content</span>=<span class="attribute-value">"标题"</span><span class="tag">></span> <span class="comments"></span></p></li></ol> <p><br>是否启用 WebApp 全屏模式</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-capable"</span> <span class="attribute">content</span>=<span class="attribute-value">"yes"</span> <span class="tag">/></span> <span class="comments"></span></p></li></ol> <p>设置状态栏的背景颜色</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span> <span class="attribute">content</span>=<span class="attribute-value">"black-translucent"</span> <span class="tag">/></span></p></li> <li><p><span class="comments"></span></p></li> </ol> <p>只有在 "apple-mobile-web-app-capable" content="yes" 时生效 <br><br>　　content 参数： <br><br>default 默认值。 <br>black 状态栏背景是黑色。 <br>black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 <br><br><strong>禁止数字识自动别为电话号码</strong></p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"><li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"format-detection"</span> <span class="attribute">content</span>=<span class="attribute-value">"telephone=no"</span> <span class="tag">/></span> <span class="comments"></span></p></li></ol> <p>iOS 图标</p> <p>　　rel 参数： apple-touch-icon <a href="http://www.php.cn/css/css-rwd-images.html" target="_blank">图片</a>自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <br></p> <p>　　iPad，72x72 像素，可以没有，但推荐有</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <br></p> <p>　　Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <br></p> <p>　　Retina iPad，144x144 像素，可以没有，但推荐有</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <br></p> <p>　　IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在中加上这段</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"><br></p> <p><strong>iOS 启动画面<br><br></strong>官方文档：<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>developer.apple.com/library/ios/qa/qa1686/_index.html <br>参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/ <br><br>iPad 的启动画面是不包括状态栏区域的。</p> <p>　　iPad 竖屏 768 x 1004（标准分辨率）</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <br></p> <p>　　iPad 竖屏 1536x2008（Retina</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <br></p> <p>　　iPad 横屏 1024x748（标准分辨率）</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <br></p> <p>　　iPad 横屏 2048x1496（Retina）</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <br></p> <p>　　iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p> <p>　　iPhone/iPod Touch 竖屏 320x480 (标准分辨率)</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <br></p> <p>　　iPhone/iPod Touch 竖屏 640x960 (Retina)</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <br></p> <p>　　iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p> <p>代码如下:</p> <p class="msgborder"><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <br></p> <p>　　添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）</p> <p>代码如下:</p> <p class="msgborder"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <br></p> <p>　　iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。</p> <p>代码如下:</p> <p class="msgborder"><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></p> <p><strong>Windows 8<br></strong>　　Windows 8 磁贴颜色</p> <p>代码如下:</p> <p class="msgborder"><meta name="msapplication-TileColor" content="#000"/> <br></p> <p>　　Windows 8 磁贴图标</p> <p>代码如下:</p> <p class="msgborder"><meta name="msapplication-TileImage" content="icon.png"/> <br></p> <p>　　rss订阅</p> <p>代码如下:</p> <p class="msgborder"><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <br></p> <p>　　favicon icon</p> <p>代码如下:</p> <p class="msgborder"><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <br></p> <p>比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet<br><br><strong>移动端的meta <br></strong><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span> <span class="tag">/></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-capable"</span> <span class="attribute">content</span>=<span class="attribute-value">"yes"</span> <span class="tag">/></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span> <span class="attribute">content</span>=<span class="attribute-value">"black"</span> <span class="tag">/></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>="format-detection"<span class="attribute-value">content</span>="<span class="attribute">telephone</span>=<span class="attribute-value">no</span>, <span class="attribute">email</span>=<span class="attribute-value">no</span>" <span class="tag">/></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"viewport"</span> <span class="attribute">content</span>=<span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span> <span class="tag">/></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-capable"</span> <span class="attribute">content</span>=<span class="attribute-value">"yes"</span> <span class="tag">/></span><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span> <span class="attribute">content</span>=<span class="attribute-value">"black"</span> <span class="tag">/></span><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"format-detection"</span> <span class="attribute">content</span>=<span class="attribute-value">"telphone=no, email=no"</span> <span class="tag">/></span><span class="comments"></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"renderer"</span> <span class="attribute">content</span>=<span class="attribute-value">"webkit"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">http-equiv</span>=<span class="attribute-value">"X-UA-Compatible"</span> <span class="attribute">content</span>=<span class="attribute-value">"IE=edge"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"HandheldFriendly"</span> <span class="attribute">content</span>=<span class="attribute-value">"true"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"MobileOptimized"</span> <span class="attribute">content</span>=<span class="attribute-value">"320"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"screen-orientation"</span> <span class="attribute">content</span>=<span class="attribute-value">"portrait"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"x5-orientation"</span> <span class="attribute">content</span>=<span class="attribute-value">"portrait"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"full-screen"</span> <span class="attribute">content</span>=<span class="attribute-value">"yes"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"x5-fullscreen"</span> <span class="attribute">content</span>=<span class="attribute-value">"true"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"browsermode"</span> <span class="attribute">content</span>=<span class="attribute-value">"application"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"x5-page-mode"</span> <span class="attribute">content</span>=<span class="attribute-value">"app"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> <li><p><span class="tag"><</span><span class="tag-name">meta</span> <span class="attribute">name</span>=<span class="attribute-value">"msapplication-tap-highlight"</span> <span class="attribute">content</span>=<span class="attribute-value">"no"</span><span class="tag">></span></p></li> <li><p><span class="comments"></span></p></li> </ol> <p>这是来自 toobug 的分享总结。</p> <p>　　更多的 meta 标签参考</p> <ul class=" list-paddingleft-2"> <li><p>COMPLETE LIST OF HTML META TAGS</p></li> <li><p>18 Meta Tags Every Webpage Should Have in 2013</p></li> </ul> <p>　　参考文章：</p> <ul class=" list-paddingleft-2"> <li><p>常用的 HTML 头部标签</p></li> <li><p>html5_header</p></li> <li><p>amazeui css</p></li> <li><p>DOCTYPE</p></li> <li><p>WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变</p></li> </ul><p>Atas ialah kandungan terperinci HTML head 头标签详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Kenyataan</div><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Artikel Berkaitan<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796794693.html" title="Memahami HTML, CSS, dan JavaScript: Panduan Pemula" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174438733162787.jpg?x-oss-process=image/resize,p_40" alt="Memahami HTML, CSS, dan JavaScript: Panduan Pemula" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796794693.html" title="Memahami HTML, CSS, dan JavaScript: Panduan Pemula" class="phphistorical_Version2_mids_title">Memahami HTML, CSS, dan JavaScript: Panduan Pemula</a><span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796794180.html" title="Peranan HTML: Penstrukturan Kandungan Web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174430155217186.jpg?x-oss-process=image/resize,p_40" alt="Peranan HTML: Penstrukturan Kandungan Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796794180.html" title="Peranan HTML: Penstrukturan Kandungan Web" class="phphistorical_Version2_mids_title">Peranan HTML: Penstrukturan Kandungan Web</a><span class="Articlelist_txts_time">Apr 11, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796793634.html" title="HTML dan Kod: Melihat lebih dekat pada istilah" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174424853215422.jpg?x-oss-process=image/resize,p_40" alt="HTML dan Kod: Melihat lebih dekat pada istilah" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796793634.html" title="HTML dan Kod: Melihat lebih dekat pada istilah" class="phphistorical_Version2_mids_title">HTML dan Kod: Melihat lebih dekat pada istilah</a><span class="Articlelist_txts_time">Apr 10, 2025 am 09:28 AM</span><p class="Articlelist_txts_p">Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796793129.html" title="HTML, CSS, dan JavaScript: Alat penting untuk pemaju web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174412873346901.jpg?x-oss-process=image/resize,p_40" alt="HTML, CSS, dan JavaScript: Alat penting untuk pemaju web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796793129.html" title="HTML, CSS, dan JavaScript: Alat penting untuk pemaju web" class="phphistorical_Version2_mids_title">HTML, CSS, dan JavaScript: Alat penting untuk pemaju web</a><span class="Articlelist_txts_time">Apr 09, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796792987.html" title="Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174411031220217.jpg?x-oss-process=image/resize,p_40" alt="Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796792987.html" title="Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras" class="phphistorical_Version2_mids_title">Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras</a><span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span><p class="Articlelist_txts_p">HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796791823.html" title="Adakah HTML mudah belajar untuk pemula?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174395586298618.jpg?x-oss-process=image/resize,p_40" alt="Adakah HTML mudah belajar untuk pemula?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796791823.html" title="Adakah HTML mudah belajar untuk pemula?" class="phphistorical_Version2_mids_title">Adakah HTML mudah belajar untuk pemula?</a><span class="Articlelist_txts_time">Apr 07, 2025 am 12:11 AM</span><p class="Articlelist_txts_p">HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796791144.html" title="Apakah contoh tag permulaan dalam html?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174386905283883.jpg?x-oss-process=image/resize,p_40" alt="Apakah contoh tag permulaan dalam html?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796791144.html" title="Apakah contoh tag permulaan dalam html?" class="phphistorical_Version2_mids_title">Apakah contoh tag permulaan dalam html?</a><span class="Articlelist_txts_time">Apr 06, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796790923.html" title="Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174286321766559.jpg?x-oss-process=image/resize,p_40" alt="Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796790923.html" title="Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?" class="phphistorical_Version2_mids_title">Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?</a><span class="Articlelist_txts_time">Apr 05, 2025 pm 01:24 PM</span><p class="Articlelist_txts_p">Bagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...</p></div></div><a href="https://m.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat AI Hot</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Gambar buka pakaian secara percuma</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>Penyingkiran pakaian AI</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>Menjana ai hentai secara percuma.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/ai">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Artikel Panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 minggu yang lalu</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796780520.html" title="R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796779766.html" title="WWE 2K25: Cara Membuka Segala -galanya Di Myrise" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25: Cara Membuka Segala -galanya Di Myrise</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/article.html">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat panas</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"><h3>Hantar Studio 13.0.1</h3></a><p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/506" title="Versi Mac WebStorm" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d36e6254963493.png" src="/static/imghw/default1.png" alt="Versi Mac WebStorm" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/506" title="Versi Mac WebStorm" class="phpmain_tab2_mids_title"><h3>Versi Mac WebStorm</h3></a><p>Alat pembangunan JavaScript yang berguna</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1471" title="SublimeText3 Linux versi baharu" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5aab420a5fb42187.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Linux versi baharu" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1471" title="SublimeText3 Linux versi baharu" class="phpmain_tab2_mids_title"><h3>SublimeText3 Linux versi baharu</h3></a><p>SublimeText3 Linux versi terkini</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"><h3>Notepad++7.3.1</h3></a><p>Editor kod yang mudah digunakan dan percuma</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/ai">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Topik panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7476</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1377</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>77</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>49</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>31</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/faq/zt">Tunjukkan Lagi</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> 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> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>