本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2.1 文字样式设置的基本标签—
设置字体样式的基本标签是，被其包含的文本为样式作用区。在初学者的HTML代码编写中，容易被多重嵌套，如文本。还有一种情况是标签嵌套错位，如

文本

。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
4.2.2 设置文字的颜色
color是标签的属性之一，用于设置文字颜色。在D:\web\目录下创建网页文件，命名为font_color.htm，编写代码如代码4.7所示。
代码4.7 字体颜色的设置：font_color.htm

字体颜色的设置

浅红色文字：HTML学习的本质就是该是什么就用什么

深红色文字：HTML学习的本质就是该是什么就用什么

浅绿色文字：HTML学习的本质就是该是什么就用什么

深绿色文字：HTML学习的本质就是该是什么就用什么

浅蓝色文字：HTML学习的本质就是该是什么就用什么

深蓝色文字：HTML学习的本质就是该是什么就用什么

浅黄色文字：HTML学习的本质就是该是什么就用什么

深黄色文字：HTML学习的本质就是该是什么就用什么

浅青色文字：HTML学习的本质就是该是什么就用什么

深青色文字：HTML学习的本质就是该是什么就用什么

浅紫色文字：HTML学习的本质就是该是什么就用什么

深紫色文字：HTML学习的本质就是该是什么就用什么

在浏览器地址栏输入http://localhost/font_color.htm，浏览效果如图4.7所示。

图4.7 字体颜色的设置
读者不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
4.2.3 设置文字的尺寸
size也是标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size 属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。在D:\web\目录下创建网页文件，命名为font_size.htm，编写代码如代码4.8所示。
代码4.8 字体尺寸的设置：font_size.htm

字体尺寸的设置

size为1：HTML学习

size为2：HTML学习

size为3：HTML学习

size为4：HTML学习

size为5：HTML学习

size为6：HTML学习

size为7：HTML学习

在浏览器地址栏输入http://localhost/font_size.htm，浏览效果如图4.8所示。

图4.8 字体尺寸的设置
读者可尝试在size值前面加上“＋”、“－”字符，更灵活地设置文字尺寸。
4.2.4 设置文字的字体
face也是标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:\web\目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm

字体字型的设置

字型为宋体：沁园春·长沙-毛泽东

字型为楷体：沁园春·长沙-毛泽东

字型为黑体：沁园春·长沙-毛泽东

字型为隶书：沁园春·长沙-毛泽东

在浏览器地址栏输入http://localhost/font_face.htm，浏览效果如图4.9所示。

图4.9 字体字型的设置
笔者把被修改字型部分的文字尺寸设置为5号，方便读者查看。
4.2.5 使文字倾斜
用双标签可使被作用文字倾斜，达到特殊的效果，例如文章的日期。被称为强调标签，也是斜体，目前使用比标签更频繁，其编写方法如下：
这是斜体文字
这也是斜体文字
4.2.6 使文字加粗
用双标签可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。被称为特别强调标签，也是文字加粗，目前使用比标签更频繁，其编写方法如下：
这是粗体文字
这也是粗体文字
4.2.7 给文字加下划线
用双标签可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:\web\目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm

字体修饰的设置

斜体：沁园春·长沙-毛泽东

加粗体：沁园春·长沙-毛泽东

下划线：沁园春·长沙-毛泽东

斜体加粗体下划线：沁园春·长沙-毛泽东

在浏览器地址栏输入http://localhost/font_style.htm，浏览效果如图4.10所示。

图4.10 字体修饰的设置
笔者把内的所有文字尺寸设置为5号，方便读者查看。
— 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
4.2.8 多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签

到

，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:\web\目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm

标题的设置

一号标题

二号标题

三号标题

四号标题

五号标题

六号标题

财富杂志：谷歌为何不会盛极而衰

遭遇潜在问题

一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
　　

将继续垄断搜索

最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。

在浏览器地址栏输入http://localhost/font_h.htm，浏览效果如图4.11所示。

图4.11 标题的设置
4.2.9 学会处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如“”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“”呢？HTML规定了一些特殊字符的写法，以便在网页中显示，如表4.1所示。
表4.1 HTML中的特殊字符

特殊符号
HTML代码
特殊符号
HTML代码
™（商标符号）
™
>
>
®（注册符号）
®
“”（英文半角）
"
×
×
§
§
©（版权符号）
©
在D:\web\目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm

特殊字符的设置

标签的显示方法：

引号的显示方法："英文半角双引号"

商标的显示方法：™

注册符号的显示方法：®

版权符号的显示方法：©

显示§

显示×

在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.12所示。

图4.12 特殊字符的设置
— 说明：单独显示符号&必须用代码&。
4.2.10 如何更方便地忽略浏览器对部分HTML的解析
如果在网页中作一个类似本书的HTML代码示例，恐怕得把所有的转换成，显得比较麻烦。HTML代码中的和<xmp></xmp>可以轻松解决这个问题。 <br><plaintext>是单标签，它插入到HTML代码中时，其后面的所有HTML标签全部失效，即浏览器对<plaintext>后面所有的HTML标签不作解析，直接在页面上显示。 <br><xmp></xmp>是双标签，它只使其包含的内容中的标签失效，<xmp></xmp>的使用更为普遍。在D:\web\目录下创建网页文件，命名为html.htm，编写代码如代码4.13所示。 <br>代码4.13 忽略标签的设置：html.htm <br><br><br><title>忽略标签的设置</title><br><br><br><h2>沁园春·长沙</h2> <br><xmp>独立寒秋，<strong>湘江北去</strong>，橘子洲头。 <br>看万山红遍，层林尽染； <br>漫江碧透，<u>百舸争流。</u> <br></xmp><br>鹰击长空，<strong>鱼翔浅底，</strong> <br>万类霜天竞自由。 <br>怅寥廓，<u>问苍茫大地</u>，谁主沉浮？<br><br><plaintext><br>携来百侣曾游，<br>忆往昔峥嵘岁月稠。 <br> 恰同学少年，风华正茂； <br> 书生意气，挥斥方遒。 <br> 指点江山，激扬文字， <br> 粪土当年万户侯。 <br> 曾记否，<strong>到中流击水</strong>，浪遏飞舟！ <br><br><br>在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.13所示。 <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058213177807.jpg"><br>图4.13 忽略标签的设置 <br><strong>4.2.11 其他文字修饰方法</strong> <br>为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。 <br>— 上标格式标签为双标签<sup></sup>，多用于数学指数的表示，比如某个数的平方或立方。 <br>— 下标格式标签为双标签<sub></sub>，多用于注释，以及数学的底数表示。 <br>— 中划线标签为双标签<strike></strike>，多用于删除效果。 <br>在D:\web\目录下创建网页文件，命名为other.htm，编写代码如代码4.14所示。 <br>代码4.14 其他修饰标签的设置：other.htm <br><br><br><title>其他修饰标签的设置</title><br><br><br><font size="5"> <br>沁园春<sup>长沙</sup>！<br><br>数学指数的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br><hr> <br>沁园春<sub>长沙</sub>！<br><br>数学底数的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br><hr> <br>删除效果：<strike>我被删除了</strike> <br></font> <br><br><br>在浏览器地址栏输入http://localhost/other.htm，浏览效果如图4.14所示。 <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058217877808.jpg"><br>图4.14 其他修饰标签的设置 </plaintext></plaintext></plaintext></plaintext> </div> </div>  <div class="community flexRow newcommunity"> <div class="comleft flexRow newcomlimg"> <a class="newcomlimga" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)" > <img src="https://img.php.cn/upload/Recdownload/000/000/085/66723a3016a41308.jpg" class="comlimg newcomlimg" alt="HTML速学教程(入门课程)"> </a> <div class="comldiv flexColumn newcomldiv"> <a class="comldup newcomldup" target="_blank" rel="nofollow" title="HTML速学教程(入门课程)" href="https://pan.quark.cn/s/f4eedefabd61">HTML速学教程(入门课程)</a> <p class="comlddown newcomlddown">HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！</p> </div> </div> <a class="comright flexRow newcomright" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)"> 下载 </a> </div> <div class="wzconlabels"> <div style="display: inline-flex;float: right; color:#333333;">来源：php中文网</div> </div> <div class="wzconFx"> <a class="wzcf-sc articleICollection " data-id="12299"> <img src="/static/lhimages/shoucang_2x.png"> <span>收藏</span> </a> <a class="wzcf-dz articlegoodICollection " data-id="12299"> <img src="/static/images/images/icon37.png"> <span>点赞</span> </a> </div> <div class="wzconOtherwz"> <a href="/faq/12298.html"> <span>上一篇：网页制作初学者:学用HTML的超链接A标记_HTML/Xhtml_网页制作</span> </a> <a href="/faq/12302.html"> <span>下一篇：网页前端开发CSS相关团队协作_HTML/Xhtml_网页制作</span> </a> </div> <div class="wzconShengming"> <img src="/static/images/images/benzhanshengming.png" /> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div>  <div class="wzconZzwz"> <div class="wzconZzwztitle">最新问题</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401237.html" target="_blank" title="HTML5的Drag and Drop API怎么用？如何实现拖拽上传？" class="wdcdcTitle">HTML5的Drag and Drop API怎么用？如何实现拖拽上传？</a> <a href="/faq/1401237.html" class="wdcdcCons">HTML5的拖拽上传可通过以下步骤实现：1.设置允许拖放的区域，如一个<div>；2.监听dragenter、dragover、dragleave和drop事件；3.在dragenter和dragover中调用preventDefault()阻止浏览器默认行为；4.在drop事件中获取dataTransfer.files处理文件；5.使用FileReader和fetchAPI读取并上传文件；此外，需考虑兼容性问题，可使用polyfill或回退到传统文件上传方式，并优化用户体验，如提供</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 20:02:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">532</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401232.html" target="_blank" title="CSS的display属性有哪些值？inline和block有什么区别？" class="wdcdcTitle">CSS的display属性有哪些值？inline和block有什么区别？</a> <a href="/faq/1401232.html" class="wdcdcCons">CSS的display属性通过定义元素的显示方式来控制网页布局。1.block元素独占一行，可设置宽高，默认如div、p等；2.inline元素不独占行，宽高由内容决定，如span、a；3.inline-block兼具block和inline特性，可并排显示且能设尺寸；4.none隐藏元素且不占空间；5.visibility:hidden仅视觉隐藏但保留布局空间；6.flex用于一维弹性布局，擅长对齐与分布空间；7.grid用于二维网格布局，可精准控制行列结构。这些值共同构成了现代CSS布局的核</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:54:03</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">406</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401226.html" target="_blank" title="HTML表格如何实现数据的复制粘贴？有哪些技巧？" class="wdcdcTitle">HTML表格如何实现数据的复制粘贴？有哪些技巧？</a> <a href="/faq/1401226.html" class="wdcdcCons">直接复制HTML表格数据常常不尽如意的原因是浏览器默认行为仅复制可见文本而非结构化数据。1.浏览器默认只提取选中区域的文本内容，忽略表格的行列结构；2.HTML表格标签不自动转换为电子表格可识别的格式（如TSV或CSV）；3.合并单元格（rowspan/colspan）导致粘贴后列对齐混乱；4.隐藏内容或复杂样式可能干扰复制结果；5.用户期望与实际效果存在落差。要实现结构化复制，需通过JavaScript手动提取表格数据并格式化为TSV或CSV。1.获取表格引用并遍历每一行和单元格；2.使用制表</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:47:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">967</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401224.html" target="_blank" title="HTML5的Dialog元素有什么用？如何创建模态框？" class="wdcdcTitle">HTML5的Dialog元素有什么用？如何创建模态框？</a> <a href="/faq/1401224.html" class="wdcdcCons">HTML5的元素用于创建语义化的对话框或模态框，通过open属性控制可见性，showModal()方法实现模态行为。1.使用JavaScript调用showModal()显示模态框并自动聚焦内部元素；2.通过CSS设置dialog样式和::backdrop伪元素定制遮罩层；3.表单提交时需阻止默认行为，使用FormData和fetchAPI异步提交数据；4.对于兼容性问题，可通过检测支持情况并引入dialog-polyfill库进行修复。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:45:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">188</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401214.html" target="_blank" title="CSS的perspective属性怎么设置3D视角？" class="wdcdcTitle">CSS的perspective属性怎么设置3D视角？</a> <a href="/faq/1401214.html" class="wdcdcCons">CSS的perspective属性通过设置观察者与3D空间之间的距离来控制3D变换效果，距离越小透视越强。1.应用于父元素是常见方式，为子元素创建共享3D空间；2.也可应用于变换元素自身，但需结合transform-style:preserve-3d生效；3.perspective-origin可调整视角中心，以像素、百分比或关键字定义观察点；4.transform-style:preserve-3d确保子元素参与3D空间；5.使用JavaScript动态修改perspective值可通过获取元</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:41:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">859</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401194.html" target="_blank" title="CSS的var函数怎么使用自定义属性？" class="wdcdcTitle">CSS的var函数怎么使用自定义属性？</a> <a href="/faq/1401194.html" class="wdcdcCons">CSS变量通过var()函数定义和使用，提升样式维护效率与一致性。1.定义变量：在:root或特定元素中使用--变量名语法定义；2.引用变量：通过var(--变量名)在任意CSS值中引用；3.设置回退值：var(--变量名,默认值)用于应对未定义情况；4.动态修改：可通过JavaScript操作元素的style.setProperty()方法更新变量；5.作用域遵循继承规则：全局变量定义于:root，局部变量定义于具体元素，子元素可覆盖父元素变量；6.适用场景包括主题切换、样式一致性、响应式设计</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:27:01</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">595</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401189.html" target="_blank" title="如何为HTML表格添加主题切换？CSS怎么实现？" class="wdcdcTitle">如何为HTML表格添加主题切换？CSS怎么实现？</a> <a href="/faq/1401189.html" class="wdcdcCons">为HTML表格添加主题切换的方法是使用CSS变量和JavaScript动态改变样式。1.定义CSS变量并设置不同主题的变量值；2.使用JavaScript监听切换事件并更新CSS变量；3.可通过localStorage保存用户选择的主题；4.对于复杂样式，可使用Sass或Less预处理器管理代码；5.优化性能可通过减少变量、使用will-change属性、避免同步布局及添加过渡动画实现。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:24:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">180</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401165.html" target="_blank" title="HTML5的File API有什么用？如何读取本地文件？" class="wdcdcTitle">HTML5的File API有什么用？如何读取本地文件？</a> <a href="/faq/1401165.html" class="wdcdcCons">HTML5的FileAPI允许Web应用在用户授权下安全地访问本地文件。1.通过让用户选择文件；2.使用JavaScript监听change事件并获取文件对象；3.利用FileReader读取文件内容，如readAsText读取文本、readAsDataURL用于图片预览、readAsArrayBuffer处理二进制数据；4.处理大文件时可通过分片读取提升性能；5.FileAPI的安全限制包括用户授权、同源策略、文件大小及类型限制，以保障用户安全。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 19:09:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">202</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401137.html" target="_blank" title="HTML的table标签怎么用？如何合并单元格？" class="wdcdcTitle">HTML的table标签怎么用？如何合并单元格？</a> <a href="/faq/1401137.html" class="wdcdcCons">HTML表格通过标签创建，合并单元格使用colspan和rowspan属性。1.定义行，定义单元格，定义表头单元格。2.横向合并用colspan，如；纵向合并用rowspan，如。3.语义化通过和提升可访问性和SEO，避免用表格布局。4.CSS可美化表格，如设置边框、背景色、对齐方式及响应式设计。5.响应式问题可通过水平滚动、转换为列表或媒体查询解决，也可借助JavaScript库实现复杂效果。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 18:51:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">626</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="/faq/1401136.html" target="_blank" title="HTML5的Push API有什么用？如何实现消息推送？" class="wdcdcTitle">HTML5的Push API有什么用？如何实现消息推送？</a> <a href="/faq/1401136.html" class="wdcdcCons">HTML5PushAPI允许网页在未打开时接收服务器消息，实现方法包括：1.注册ServiceWorker以监听推送事件；2.生成VAPID密钥用于服务器身份验证；3.服务器端使用web-push库发送消息；4.ServiceWorker接收并展示通知。推送失败常见原因有：VAPID密钥错误、subscription信息不正确、网络问题、浏览器限制、权限拒绝等。调试方法包括使用浏览器开发者工具、添加日志、WebPushTester工具、检查subscription信息、try-catch异常捕获</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">2025-07-11 18:50:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">431</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>相关专题</div> <a href="/faq/zt" target="_blank">更多> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="/faq/javaxzwjff"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/08/2025070812063233358.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/javaxzwjff" class="title-a-spanl"><span>Java下载文件方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/cjjyjgjb"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/08/2025070811593812142.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/cjjyjgjb" class="title-a-spanl"><span>c++有几个级别</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/goyyksxxjc"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/08/2025070811444412211.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/goyyksxxjc" class="title-a-spanl"><span>go语言快速学习教程</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/goyykjynx"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/08/2025070811303136050.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/goyykjynx" class="title-a-spanl"><span>go语言框架</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonpcrmjjj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/08/2025070811011312565.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonpcrmjjj" class="title-a-spanl"><span>python爬虫:入门+进阶</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/pythonpcjc"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/07/2025070717540832399.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/pythonpcjc" class="title-a-spanl"><span>python爬虫教程</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/xphpxydj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/07/2025070717202526977.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/xphpxydj" class="title-a-spanl"><span>学php需要多久</span> </a> </li> <li class="ul-li"> <a target="_blank" href="/faq/javazjlhzfldq"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202507/04/2025070412135745245.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="/faq/javazjlhzfldq" class="title-a-spanl"><span>java 字节流和字符流的区别</span> </a> </li> </ul> </div> </div> <div class="wzcongg"><script type="text/javascript" src="https://teacher.php.cn/php/NzIzNmE5NjBlOTgwNWZlNTMzN2E0MGEzNmU3NjM3NmI6Og==" ></script></div> </div> </div> <div class="phpwzright"> <div class="wzrOne" style="margin-bottom:31px; padding:0px; width: 366px;"> <script type="text/javascript" src="https://teacher.php.cn/php/N2Q0ODk3NTAwZTFmODQ1NGM4Y2VjYzQzZTVkOTI5NDk6Og==" ></script>  </div> <div class="wzrOne"> <div class="wzroTitle">热门推荐</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1401237.html">HTML5的Drag and Drop API怎么用？如何实现拖拽上传？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1401232.html">CSS的display属性有哪些值？inline和block有什么区别？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1401226.html">HTML表格如何实现数据的复制粘贴？有哪些技巧？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1401224.html">HTML5的Dialog元素有什么用？如何创建模态框？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="/faq/1401214.html">CSS的perspective属性怎么设置3D视角？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！"><b>HTML速学教程(入门课程)</b></a> </div> </li> </ul> </div> </div> <div class="wzrTwo"> </div> <div class="wzrTwo"> <div style="position: relative;"><a class="" href="https://teacher.php.cn/jump/67" title="开源免费商场系统" rel="nofollow" target="_blank"><img style="width: 100%; " src="https://img.php.cn/teacher/course/20220930/8ef7a4a308a22ece023e77e5428c0e25.png" alt="开源免费商场系统"></a><span style="position: absolute;right: 5px;border: 1px solid #333;padding: 2px;color: #333;line-height: 14px;font-size: 12px;bottom: 5px;">广告</span></div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>热门教程</div> <a target="_blank" href="https://www.php.cn/k.html">更多> </a> </div> <div class="wzrthreelist"> <div class="wzrthreeTab"> <div class="check tabdiv" data-id="one">相关推荐 <div></div></div> <div class="tabdiv" data-id="two">热门推荐<div></div></div> <div class="tabdiv" data-id="three">最新课程<div></div></div> </div> <ul class="one"> <script type="text/javascript" src="https://teacher.php.cn/php/MTJjOWU0YjVmMmE1MzI1OTgyNzRlYmJmYjE0MmZkNWY6Og==" ></script> <li> <a target="_blank" href="/course/631.html" title="ThinkPHP5快速开发企业站点[全程实录]" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png" alt="ThinkPHP5快速开发企业站点[全程实录]"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/631.html">ThinkPHP5快速开发企业站点[全程实录]</a> <div class="wzrthreerb"> <div >400605次学习</div> <a class="courseICollection" data-id="631"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1475.html" title="PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/63885f486655e517.png" alt="PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1475.html">PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）</a> <div class="wzrthreerb"> <div >52510次学习</div> <a class="courseICollection" data-id="1475"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/332.html" title="Thinkphp3.2.3个人博客开发" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d96e5aaaf629.png" alt="Thinkphp3.2.3个人博客开发"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/332.html">Thinkphp3.2.3个人博客开发</a> <div class="wzrthreerb"> <div >213214次学习</div> <a class="courseICollection" data-id="332"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1462096次学习</div> <a class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a> <div class="wzrthreerb"> <div >527430次学习</div> <a class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a> <div class="wzrthreerb"> <div >1237305次学习</div> <a class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="wzrthreerb"> <div >765471次学习</div> <a class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/372.html" title="独孤九贱(1)_HTML5视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg" alt="独孤九贱(1)_HTML5视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/372.html">独孤九贱(1)_HTML5视频教程</a> <div class="wzrthreerb"> <div >612236次学习</div> <a class="courseICollection" data-id="372"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a> <div class="wzrthreerb"> <div >304次学习</div> <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a> <div class="wzrthreerb"> <div >1457次学习</div> <a class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）" class="wzrthreelaimg"> <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a> <div class="wzrthreerb"> <div >2726次学习</div> <a class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a> <div class="wzrthreerb"> <div >31849次学习</div> <a class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1649.html" title="Swoole5 Hyperf3 php8新版本协程框架讲说" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6641ad56af4c9674.png" alt="Swoole5 Hyperf3 php8新版本协程框架讲说"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1649.html">Swoole5 Hyperf3 php8新版本协程框架讲说</a> <div class="wzrthreerb"> <div >12008次学习</div> <a class="courseICollection" data-id="1649"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> </div> <script> $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新下载</div> <a href="/xiazai">更多> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }); loading(); }) function loading(reloading=false){ if(reloading){ $("#ai_doubao2_3_wait_right").show(); $("#ai_doubao2_3_wait_left").show(); $("#doubao_error_right").hide(); $("#doubao_error_left").hide(); } $.ajax({ url:'/index.php/api/process?sign=&id=12299&time='+Date.now(), dataType:'json', async:true, headers: { "X-Requested-With": "XMLHttpRequest" // 标记为异步请求 }, type:'post', success:function(result){ if(result.code!=1){ $("#doubao_error_right").show(); $("#ai_doubao2_3_wait_right").hide(); $("#doubao_error_left").show(); $("#ai_doubao2_3_wait_left").hide(); }else{ $("#ai_doubao2_3_wait_right").hide(); $("#ai_doubao2_3_wait_left").hide(); let doubao_answer = `<p>`+result.data.content+`</p>`; $("#doubao_answer_right").html(doubao_answer); $("#doubao_answer_left").html(doubao_answer); let doubao_titles = ''; if(result.data.title){ $.each(result.data.title,function(k,v){ doubao_titles+=`<div class="ai_doubao2_2s"><a rel="nofollow" target="_blank" href="https://doubao.com/chat/new-thread?flow_tracking_source=360_php&channel=360_php_abstract&source=360_db_php_abstract&keywordid=`+"12299"+`&query=参考https://www.php.cn`+"/faq/12299.html的内容，"+encodeURIComponent(v)+`" title="`+v+`"><p><img src="/static/images/doubao_yellowstar.png" alt=""> `+v+`</p></a></div>`; }) } yigeyigezichulai(ai_doubao_titles_show,doubao_titles); } } }) } function ai_doubao_titles_show(str){ $("#ai_doubao_titles_right").html(str); $("#ai_doubao_titles_left").html(str); } function yigeyigezichulai(callback,str){ const textElements = document.querySelectorAll('.yigeyigezichulai p'); textElements.forEach(textElement => { const originalHTML = textElement.innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = originalHTML; const fragments = []; Array.from(tempDiv.childNodes).forEach(node => { if (node.nodeType === Node.TEXT_NODE) { fragments.push(...node.textContent.split('')); } else { fragments.push(node.outerHTML); } }); textElement.innerHTML = ''; let index = 0; const interval = setInterval(() => { if (index < fragments.length) { const fragment = fragments[index]; if (fragment.startsWith('<')) { textElement.innerHTML += fragment; } else { textElement.innerHTML += fragment; } } else { clearInterval(interval); callback(str); } index++; }, 25); // 每 100 毫秒显示一个片段 }); } // 豆包等待动画 const containers = document.querySelectorAll('.ai_doubao2_3_wait') || []; if (containers.length > 0) { containers.forEach(container => { if (container && container.firstElementChild) { const intervalId = setInterval(() => { if (!container || !container.firstElementChild) { clearInterval(intervalId); return; } const firstChild = container.firstElementChild; container.appendChild(firstChild); }, 300); } }); } // AI总结相关功能 const aiZongjie = document.querySelector('.ai_zongjie'); const aiDoubao = document.querySelector('.ai_doubao'); const closeButton = document.querySelector('.ai_doubao1_R_img'); if (aiZongjie && aiDoubao && closeButton) { aiZongjie.addEventListener('click', () => { aiDoubao.style.display = 'block'; }); closeButton.addEventListener('click', () => { aiDoubao.style.display = 'none'; }); } // 文字动画效果 const textElements = document.querySelectorAll('.ai_doubao2_3s.ai_doubao2_3s_L p') || []; if (textElements.length > 0) { textElements.forEach(textElement => { if (!textElement) return; const originalHTML = textElement.innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = originalHTML; const fragments = []; Array.from(tempDiv.childNodes).forEach(node => { if (!node) return; if (node.nodeType === Node.TEXT_NODE) { fragments.push(...(node.textContent || '').split('')); } else { fragments.push(node.outerHTML); } }); if (fragments.length === 0) return; textElement.innerHTML = ''; let index = 0; const interval = setInterval(() => { if (!textElement || index >= fragments.length) { clearInterval(interval); return; } const fragment = fragments[index]; if (fragment) { textElement.innerHTML += fragment; } index++; }, 100); }); } // 页面滚动监听相关 const divai_zongjie1 = document.getElementById('ai_zongjie1'); const divai_zongjie2 = document.getElementById('ai_zongjie2'); const divai_zongjie3 = document.getElementById('ai_zongjie3'); if (divai_zongjie2) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting && divai_zongjie1) { try { divai_zongjie1.style.display = 'flex'; requestAnimationFrame(() => { if (divai_zongjie1) { divai_zongjie1.classList.add('visible'); } }); } catch (e) { console.log('元素操作失败'); } } else if (divai_zongjie1) { try { divai_zongjie1.classList.remove('visible'); divai_zongjie1.addEventListener('transitionend', () => { if (divai_zongjie1 && !divai_zongjie1.classList.contains('visible')) { divai_zongjie1.style.display = 'none'; } }, { once: true }); if (divai_zongjie3 && divai_zongjie3.style) { divai_zongjie3.style.display = 'none'; } } catch (e) { console.log('元素操作失败'); } } }); }, { threshold: 0, rootMargin: '-90px 0px 0px 0px' }); try { observer.observe(divai_zongjie2); } catch (e) { console.log('观察器初始化失败'); } // 滚动事件处理 window.addEventListener('scroll', () => { const scrollY = window.scrollY || window.pageYOffset; if (divai_zongjie2) { try { divai_zongjie2.style.display = scrollY > 1000 ? 'none' : 'block'; } catch (e) { console.log('滚动处理失败'); } } }); } </script> <div class="wzrfourList"> <div class="wzrfourlTab"> <div class="check" data-id="onef">网站特效 <div></div></div> <div class="" data-id="twof">网站源码<div></div></div> <div class="" data-id="threef">网站素材<div></div></div> <div class="" data-id="fourf">前端模板<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery企业留言表单联系代码" href="/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8637" title="蓝鸟新QQ交易系统" target="_blank">[电商源码] 蓝鸟新QQ交易系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8636" title="zyshop 正源网上商城程序" target="_blank">[电商源码] zyshop 正源网上商城程序</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8635" title="飞环技术电子商务网全站源码" target="_blank">[电商源码] 飞环技术电子商务网全站源码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8634" title="supermaket商城程序" target="_blank">[电商源码] supermaket商城程序</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8633" title="著名osComm电子商务程序系统" target="_blank">[电商源码] 著名osComm电子商务程序系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8632" title="网龙购物系统" target="_blank">[电商源码] 网龙购物系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8631" title="SUZI电子商城系统" target="_blank">[电商源码] SUZI电子商城系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8630" title="5324.net商场程序" target="_blank">[电商源码] 5324.net商场程序</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3111" target="_blank" title="手绘生日数字蜡烛合集矢量模板">[网站素材] 手绘生日数字蜡烛合集矢量模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3110" target="_blank" title="日落圣境教堂山脉矢量素材">[网站素材] 日落圣境教堂山脉矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3109" target="_blank" title="湖光山色自然风光扁平矢量素材">[网站素材] 湖光山色自然风光扁平矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3108" target="_blank" title="雅韵线条艺术装饰边框矢量模板">[网站素材] 雅韵线条艺术装饰边框矢量模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3107" target="_blank" title="田园小屋卡通乡村住宅矢量图片">[网站素材] 田园小屋卡通乡村住宅矢量图片</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3106" target="_blank" title="优雅花语水彩艺术边框矢量模板">[网站素材] 优雅花语水彩艺术边框矢量模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3105" target="_blank" title="美味时光水彩美食插画矢量图片">[网站素材] 美味时光水彩美食插画矢量图片</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3104" target="_blank" title="植树节工具用具合集矢量素材">[网站素材] 植树节工具用具合集矢量素材</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8590" target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8589" target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8588" target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8587" target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8586" target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8585" target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8584" target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8583" target="_blank" title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a> </div> </li> </ul> </div> <script> $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div>   <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>  <a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> <div class="ylwTopBox phpAppBox" style="top: 0px; right: 20px;"> <div class="phpAppTitle"><a href="/app/" style="color:#cccccc;">app下载</a></div> <div class="phpAppSub ylwTopSub" style="display: none;"> <img src="https://www.php.cn/static/images/examples/text14.png"/> <p>扫描下载App</p> </div> </div> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/dy.png"/></span> <dl> <dt>PHP中文网抖音号</dt> <dd>发现有趣的</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <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> <span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>  <script> $(function() { //直播倒计时 $(".liveitem").each(function(){ timer(this); }) function timer(obj){ var intDiff = $(obj).data("countdown"); window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); }else{ $(obj).find(".phpZbktBg").remove(); return; } if (hour <= 9) hour = '0' + hour; if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $(obj).find('.day_show').html(day+""); $(obj).find('.hour_show').html('<s id="h"></s>'+hour+''); $(obj).find('.minute_show').html('<s></s>'+minute+''); $(obj).find('.second_show').html('<s></s>'+second+''); intDiff--; }, 1000); } }); </script> <script type="text/javascript" src="/hitsUp?type=article&id=12299&time=1752258636"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1752258636"></script> <script>article_status = "0";</script> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <input type="hidden" id="verifycode" value="/captcha.html"> <script src="/static/js/jquery.min.js"></script> <script src="/static/layui/layui.js"></script> <script src="/static/js/common_new.js?2.1" ></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script>var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj_day = $('.topimages .time').find('.day');var topobj_hours = $('.topimages .time').find('.hours');var topobj_minutes = $('.topimages .time').find('.minutes');var topobj_second = $('.topimages .time').find('.second');var topday = parseInt(topobj_day.html());var tophours = parseInt(topobj_hours.html());var topminutes = parseInt(topobj_minutes.html());var topsecond = parseInt(topobj_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("<p><span>活动已结束</span></p>");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});</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> <style> .content img{max-width:100%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style> <script> $(document).ready(function(){ $('#gongzhonghao').hover(function(){ $('#gzh').show(); },function(){ $('#gzh').hide(); }) }) </script> <script> layui.use(['jquery','layer'], function(){ $('.test-iframe-handle').click(function(){ layer.open({ type: 2, area: ['1300px', '750px'], content: 'https://www.php.cn/help/ask?q=HTML%E7%BD%91%E9%A1%B5%E5%90%84%E7%A7%8D%E5%AD%97%E4%BD%93%E6%A0%BC%E5%BC%8F%E7%9A%84%E7%BB%86%E8%8A%82%E4%BF%AE%E9%A5%B0_HTML%2FXhtml_%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C', fixed: true, // 不固定 //maxmin: true, shadeClose: true, title:"智能小助手", btnAlign: 'c', yes: function(index, layero){ // 获取 iframe 的窗口对象 var iframeWin = window[layero.find('iframe')[0]['name']]; var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素 var value = elemMark.val(); if($.trim(value) === '') return elemMark.focus(); // 显示获得的值 layer.msg('获得 iframe 中的输入框标记值：'+ value); } }); }) var is_login = "0"; var show = 0; var ceng = getCookie('ceng'); //文章下拉弹出登录 // if(is_login == 0 && !ceng) // { // window.onscroll = function(){ // var t = document.documentElement.scrollTop || document.body.scrollTop; // var top_div = document.getElementById( "top_div" ); // if( t >= 2500 && show == 0) { // show = 1 // setCookie('ceng',1,1); // $(document).trigger("api.loginpopbox"); // } // } // } //未登录复制显示登录按钮 if(is_login == 0 && false){ $(".code").hover(function(){ $(this).find('.contentsignin').show(); },function(){ $(this).find('.contentsignin').hide(); }); //不给复制 $('.code').bind("cut copy paste",function(e) { e.preventDefault(); }); $('.code .contentsignin').click(function(){ $(document).trigger("api.loginpopbox"); }) }else{ // 获取所有的 <pre> 元素 var preElements = document.querySelectorAll('pre'); preElements.forEach(function(preElement) { // 创建复制按钮 var copyButton = document.createElement('button'); copyButton.className = 'copy-button'; copyButton.textContent = '复制'; // 添加点击事件处理程序 copyButton.addEventListener('click', function() { // 获取当前按钮所属的 <pre> 元素中的文本内容 var textContent = preElement.textContent.trim(); // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容 var tempTextarea = document.createElement('textarea'); tempTextarea.value = textContent; // 将临时 textarea 添加到文档中 document.body.appendChild(tempTextarea); // 选中临时 textarea 中的文本内容并执行复制操作 tempTextarea.select(); document.execCommand('copy'); // 移除临时 textarea 元素 document.body.removeChild(tempTextarea); // 更新按钮文本为 "已复制" this.textContent = '已复制'; }); // 创建AI写代码按钮 var aiButton = document.createElement('button'); aiButton.className = 'copy-button'; aiButton.textContent = 'AI写代码'; aiButton.style.marginLeft = '5px'; aiButton.style.marginRight = '5px'; // 添加点击事件处理程序 aiButton.addEventListener('click', function() { // Generate a random number between 0 and 1 var randomChance = Math.random(); // If the random number is less than 0.5, open the first URL, else open the second if (randomChance < 0.5) { window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank'); } else { window.open('https://click.aliyun.com/m/1000402709/', '_blank'); } }); // 将按钮添加到 <pre> 元素前面 preElement.parentNode.insertBefore(copyButton, preElement); preElement.parentNode.insertBefore(aiButton, preElement); }); } }) function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } function aiask(ask){ layer.open({ type: 2, area: ['1300px', '750px'], content: 'https://www.php.cn/help/ask?q='+encodeURIComponent(ask), fixed: true, // 不固定 //maxmin: true, shadeClose: true, title:"智能小助手", btnAlign: 'c', yes: function(index, layero){ // 获取 iframe 的窗口对象 var iframeWin = window[layero.find('iframe')[0]['name']]; var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素 var value = elemMark.val(); if($.trim(value) === '') return elemMark.focus(); // 显示获得的值 layer.msg('获得 iframe 中的输入框标记值：'+ value); } }); } </script>    <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox" style="height:240px !important;"> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="/k24.html" target="_blank" class="hover" title="PHP学习"> <b class="icon1"></b> <p>PHP学习</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="https://www.php.cn/blog/detail/1047189.html" target="_blank"> <b class="icon2"></b> <p>技术支持</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div>   <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', '7']); 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> setCookie('is_article', 1, 1); </script> </body> </html>

HTML网页各种字体格式的细节修饰_HTML/Xhtml_网页制作

到