[toc]
轻松搞定网页设计之html
一、HTML介绍
1. HTML概念
HTML(Hyper Text Markup Language)，即超文本标记语言。是目前网络上应用最为广泛的语言，是构成网页文档的主要语言。
HTML文本是由HTML组成的描述性文本，HTML命令可以说明/描述文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（head）、主体（body）两部分，其中头部描述浏览器所需的信息，而主体则包含需说明的具体内容。
1.1 HTML是什么
HTML是超文本标记语言，主要的用处是制作网页。通过HTML语言的描述，可以在网页上显示文字、图像、视频和声音等内容。
立即学习“PHP免费学习笔记（深入）”；
1.2 HTML可以做什么
HTML可以编写静态网页，该静态网页可以包含文字、图形、动画、声音、表格、链接等内容，从而构成一个精美的网页。
网页分为静态网页（html页面）和动态网页（php/jsp/asp/asp.net/cgi页面）。
静态网页：用于向用户呈现内容信息，不能与用户进行数据交互。静态网页中可能包含flash动画内容，或者是通过Javascript网页能够产生“动态效果”，但依旧还是静态网页。
动态网页：不仅能够向用户呈现内容，能够与用户进行数据交互。与静态网页的区别在于动态网页带有“功能”。如，用户发帖功能的实现，就需要使用到动态网页技术，接收用户提交的发帖内容，经过程序处理，将用户发的帖子内容显示在论坛中。
2. html发展历史
2.1 html发展历史
蒂姆·伯纳斯·李万维网之父，html的设计者，W3C组织的创始人。
1993年标记语言第一版；
1995年html2.0；
1996年html3.2 W3C推荐标准；
1999年html4.0.1 W3C推荐标准；
2000年xhtml1.0 W3C推荐标准；
2001年xhtml1.1；
2008年html5...
说明：1999年html逐渐向xml发展，出现了xhml。xhtml可以理解成html的加强版。html语法要求简单，而xml语法要求非常严格，xhtml可以算是html向xml过渡的中间物。
2.2 W3C组织介绍
W3C是英文world wide web consortium的缩写，译为W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创建者是万维网发明者Tim Berners-Lee。
W3C组织是专门制定网络标准的一个非盈利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来制定。W3C会员包括生产技术产品及服务的产商、内容供应者、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力于在万维网发展方向上达成共识。
2.3 HTML和XHTML的区别
发展方向：html→xhtml→xml。
html语言本身存在一些缺陷（比如，内容和样式不能分离，标记单一，数据不能复用等），随着XML的兴起，XML越来越受到国际认可，所以人们希望用XML来弥补HTML的不足，但是目前已有成千上万的网页都是基于Html编写的，使用XML来完全代替存在很大难度，于是W3C组织在2000年推出XHTML1.0。
建立XHTML标准的目的就是为了在HTML向XML过渡时更加平滑。
3. HTML运行原理
3.1 html文件的运行方式
html文件的运行有2种方式：本地运行和远程访问运行。
本地运行：选中html文件，单击鼠标右键选择使用浏览器打开，即可以看到执行结果。html文件可以存放到电脑磁盘上的任意文件夹中。
远程运行：浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。html文件必须存放在服务器下指定的文件夹中，如apache服务下的www/htdocs文件夹中。
案例：
demo.html，位于C:\html\目录（打开电脑的C盘，在C盘新建一个名称为html的文件夹）下，写下如下代码。
HTML运行方式Hello,world
浏览器相关知识
使用浏览器打开demo.html文件，我这里的使用的是ie11浏览器，浏览器信息如下：
浏览器组成介绍：以ie11浏览器为例，介绍浏览器的组成。
- 地址栏；输入地址可以访问网页。
- 标题栏；显示网页的标题。
- 常用/快捷命令栏；第一个表示快捷打开主页，第二个表示快捷收藏网页，第三个表示快捷设置。
- 菜单栏；通过菜单栏可以对浏览器进行设置。
- 收藏栏；显示用户收藏的网页。
- 命令栏；
- 状态栏；显示浏览网页时的页面状态。
- 内容区。
- 最大化、最小化、关闭按钮位于浏览器的右上角；可以最大化、最小化、关闭浏览器窗口。
- 下拉按钮；当内容区有很多的显示内容，浏览器内容区因窗口大小限制，无法一次性显示页面全部内容。浏览器的右侧会出现一个下拉按钮，鼠标拖动下拉按钮可以查看更多的内容。
本地运行
选中带有html后缀名的文件→单击鼠标右键→打开方式→选择浏览器。
运行结果如下：
说明：浏览器地址栏显示C:\html\demo.html，其中“C:\html\”为demo.html文件存放的磁盘路径，demo.html为文件的名称。
远程运行
浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。
说明：
Ⅰ.127.0.0.1是服务器的ip地址，/html是demo.html文件在服务器下的存放路径，demo.html为html文件的名称。
Ⅱ.本案例中，使用的服务器是apache，demo.html文件存放在apache服务器指定的文件夹www下的html文件夹中。apache服务器的使用，在后续的PHP课程中再继续介绍。
3.2 .htm 还是 .html 文件后缀？
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。
区别：
Ⅰ.访问一个远程网站时，该网站服务器目录下同时有index.html和index.html，默认优先访问.html后缀的文件。
Ⅱ..htm后缀是因为很久前的软件后缀名只允许包含3个字母。html后缀是为了兼容以前的dos系统“8.3”命名规范，即文件名8个字符，后缀名3个字符。
Ⅲ.对于如今的软件，2种后缀名的html文件都可以正常执行。
二、HTML基本概念
1. html开发工具选择
html网页开发其实很简单，使用windows系统自带的记事本就可以进行。
当然，也可以较为简单的编辑器，如sublime Text，edit plus，vim，frontpage，dreamweaver。
也可以使用集成的开发工具（IDE），如zend studio，eclipse等。（笔者使用的是sublime text2）
2. html文件的基本结构
<标签 属性1="属性值" 属性2="属性值" ...>内容 <标签 属性1="属性值" />
3. 什么是Html标签
一个html文档（文件），由多个html标签组成。
html标签也被称为html元素或html标记，这仅仅只是个人的习惯不同，其实这几种叫法并没有区别。
所以，元素、标记和标签其实是一个意思。
3.1 html标签/元素
结构：
<标签 属性1="属性值" 属性2="属性值" ...>内容<标签 属性1="属性值" />
说明：
Ⅰ.html文档由多个html标签组成
Ⅱ.html标签用2个尖括号括起来，如
。
Ⅲ.html标签多数是双标签，包含起始标签和结束标签。如，双标签b，包含起始标签
和结束标签。
双标签中间的文本是Html标签的内容。如，双标签b，
hello,world，
和中间的文本是b标签的内容。
Ⅳ.少数html标签为单标签。如，
、
、
、
。
3.2 Html标签属性
Html标签通常都有多个属性，给属性设置不同的属性值可以控制Html标签在浏览器中的显示效果。
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以“名称/值”的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
网页制作与PHP语言应用
图书《网页制作与PHP语言应用》，由武汉大学出版社于2006出版，该书为普通高等院校网络传播系列教材之一，主要阐述了网页制作的基础知识与实践，以及PHP语言在网络传播中的应用。该书内容涉及：HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。
下载
使用小写属性：
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而 XHTML 要求使用小写的属性/属性值。
始终为属性值加引号：
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'，name的属性值为Bill "HelloWorld" Gates。
适用于大多数 HTML标签的属性：
属性 值 描述
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
如，。
3.3 Html符号实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体有三部分：
一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。即“&实体名称;”或“实体编号;”。
使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。
注意：
: 实体名称对大小写敏感。如，&表示符号“&”，而&Amp;不能准确表示符合“&”。
: 要在 HTML 文档中显示小于号（ 空格
空格是 HTML 中最普通的字符实体。
通常情况下，HTML 会裁掉文档中的空格。不管使用空格键添加多少个空格，浏览器解析HTML文档显示时，只会显示1个空格。所以，如果需要显示多个空格时，就要使用到 ，可以在文档中增加空格。
最常用的字符实体
显示结果 描述 实体名称 实体编号
| 空格 | | |
| |
小于号 | |
|
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | '(IE不支持) | ' |
其他字符实体
显示结果 描述 实体名称 实体编号
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| § | 节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
三、HTML标签
1. HTML文档注释
1.1 HTML文档注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器解析显示html文档内容时会忽略注释。也就是说，读者/用户并不会看到注释的内容。
语法：
包含在之间的内容就是注释的内容。
提示：合理地使用注释可以对代码编辑工作产生帮助。
1.2 如何查看HTML文档源码/源文件
在浏览网页时，遇到精美的网页，可能会在惊叹设计者对网页的制作时，也会想要将这种设计应用到自己的网页开发当中，这时便要了解如何在浏览网页时，查看HTML文档的源码。
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？
你有没有看过一些网页，并且想知道它是如何做出来的呢？
要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。
2. HTML标签??html
2.1 介绍
html标签用于告知浏览器，当前解析的文档是一个html文档。
html标签为双标签，开始标签和结束标签之间的内容（即html标签的内容），构成html文档的内容。
html标签的内容包含2个部分：头部（head）和主体（body）。
头部（head）部分
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
这些标签可用在 head 部分：, , ,
主体（body）部分
文档的主体包含了文档需要呈现给读者/用户的全部内容。
body包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
可用在主体部分的标签有很多很多，下面会陆续介绍常用在主体部分的标签。
2.2 案例
代码：demo2.html，位于C:\html目录下。
demo2 body标签之间的文本为html文档的主体
测试
使用浏览器打开demo2.html文件，显示效果如下图：
说明：
Ⅰ.地址栏显示demo2.html文件的本地存放地址；
Ⅱ.标题栏显示头部部分title标签的内容；
Ⅲ.内容区显示主体部分body标签的内容。
3. HTML常用标签[body部分]??标题
3.1 介绍
标题（Heading）是通过
- 等标签来表示的，常用来表示文章的标题。
具体标题标签有h1、h2、h3、h4、h5和h6，随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
标题标签属于块级标签，浏览器会自动地为块级标签后添加一个空行，也就是有换行的显示效果。
提示：
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 3.2 案例：标题标签的使用
代码：demo3.html，位于C:\html\目录下 demo3 一号标题
二号标题
三号标题
四号标题
五号标题
六号标题
测试
使用浏览器打开demo3.html，本地运行Html文档。
说明：
Ⅰ.从浏览器内容区的显示效果可以看出，标题标签随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
Ⅱ.可以看出不同标题标签处在不同的行，这是因为标题标签属于块级标签，浏览器会自动地为块级标签添加一个空行，显示为换行的效果。
4. HTML常用标签[body部分]??水平线
4.1 介绍
标签为单标签。
标签用于在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
通常使用水平线 (
标签) 来分隔文章中的小节（但并不是唯一的办法）。
4.2 案例：水平线标签的使用
代码：demo4.html，位于C:\html\目录下。
demo4何以笙箫默
既然琴瑟起，何以笙箫默。
悄悄是别离的笙箫，沉默是今晚的康桥。
测试
使用浏览器本地运行demo4.html文件，选中demo4.html，单击右键选择浏览器打开。
说明：
“何以笙箫默”为文章的标题；“既然琴瑟起，何以笙箫默。”为文章的内容；“悄悄是别离的笙箫，沉默是今晚的康桥。”为文章第二小节的内容。
5. HTML常用标签[body部分]??段落
5.1 介绍
段落标签p为双标签。
段落标签p用来描述html文档中的一段内容。
段落标签p属于块级标签/元素。
浏览器会自动地为块级标签添加一个空行，显示为换行的效果。
提示：
使用内容为空的段落标签
去插入一个空行是个坏习惯。用换行标签
代替它！也就是说，不要使用段落标签来达到换行的效果，段落标签的内容也该是一大段文本内容。
5.2 案例：段落标签的使用
代码：demo5.html，位于C:\html目录下。
demo5再别康桥
但我不能放歌，
悄悄是离别的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥。悄悄是别离的笙箫，沉默是今晚的康桥。
测试
使用浏览器打开demo5.html，显示效果如下：
说明：对比demo5.html的源码，可以看出使用“
”也有换行的显示效果，但不推荐这样使用。
6. HTML常用标签[body部分]??控制文本显示格式
6.1 介绍
在HTML开发中，很多时候都需要控制文本的显示显示格式，如，斜体字、加粗、下划线，文本是代码时显示为代码的格式等。这时就会使用到下面的标签。
文本格式化标签
标签 描述
| 定义粗体文本。 |
| 定义大号字。 |
| 定义着重文字。 |
| 定义斜体字。 |
| 定义小号字。 |
| 定义加重语气。 |
| 定义下标字。 |
| 定义上标字。 |
| 定义插入字。 |
| 定义删除字。 |
| 不赞成使用。使用 代替。
|
| 不赞成使用。使用 代替。
|
| 不赞成使用。使用样式（style）代替 |
“计算机输出”标签
当显示在页面中的内容为一段代码时，需要保留代码中的显示格式（缩进、换行、空格）时，就可以使用下面的这些标签。
|标签| 描述|
|----|------|
|| 定义计算机代码。|
|| 定义键盘码。|
| 定义计算机代码样本。|
|| 定义打字机代码。|
|| 定义变量。|
|| 定义预格式文本。|
|| 不赞成使用。使用 代替。|
|<![CDATA[| 不赞成使用。使用 <pre class="brush:php;toolbar:false;"> 代替。|<br />|<xmp>| 不赞成使用。使用 <pre class="brush:php;toolbar:false;"> 代替。|</p> <h4 class="mt-10">6.2 案例：文本格式化标签的使用</h4> 代码：demo6.html，位于C:\html目录下。 <pre class="precsshui"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo6</title></head><body> <h3>文本格式化标签</h3> 普通 <b>加粗</b> <big>加大</big> <em>着重</em> <i>斜体</i> <strong>加重</strong> <sub>下标</sub> <sup>上标</sup> <ins>插入字</ins> <del>删除字</del></body></html></pre> 测试 <p>使用浏览器打开demo6.html，显示效果如下：<br></p> </var></tt></samp></kbd></code></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p>
<p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </div>
<div class="artmoreart ">
<div class="artdp artptit"><span></span>
<p>相关文章</p>
</div>
<div class="artmores flexColumn">
<a class="artmrlis flexRow" href="/faq/1824999.html" title="PHP Datepicker实现年龄验证：确保用户年龄不低于18岁"><b></b>
<p class="overflowclass">PHP Datepicker实现年龄验证：确保用户年龄不低于18岁</p>
</a>
<a class="artmrlis flexRow" href="/faq/1820574.html" title="PHP数组通过HTML onclick事件传递给JavaScript函数的教程"><b></b>
<p class="overflowclass">PHP数组通过HTML onclick事件传递给JavaScript函数的教程</p>
</a>
<a class="artmrlis flexRow" href="/faq/1792900.html" title="PHP中实现JSON数据数组分页的教程"><b></b>
<p class="overflowclass">PHP中实现JSON数据数组分页的教程</p>
</a>
<a class="artmrlis flexRow" href="/faq/1774271.html" title="PHP服务器端图片上传指南"><b></b>
<p class="overflowclass">PHP服务器端图片上传指南</p>
</a>
<a class="artmrlis flexRow" href="/faq/1773166.html" title="PHP表单值保留教程：提交与刷新后如何保持数据"><b></b>
<p class="overflowclass">PHP表单值保留教程：提交与刷新后如何保持数据</p>
</a>
</div>
<div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="https://pan.quark.cn/s/f79bda81fa1b" title="PHP速学教程(入门到精通)"><img
src="https://img.php.cn/upload/Recdownload/000/000/085/666bdff371e4d231.png" alt="PHP速学教程(入门到精通)"></a>
<div class="aritcle_card_info flexColumn">
<a href="https://pan.quark.cn/s/f79bda81fa1b" title="PHP速学教程(入门到精通)">PHP速学教程(入门到精通)</a>
<p>PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！</p>
</div>
<a href="https://pan.quark.cn/s/f79bda81fa1b" title="PHP速学教程(入门到精通)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p class="statement">本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</p>
<div class="lastanext flexRow">
<a class="lastart flexRow" href="/faq/255530.html" title="【】不会这个php的，求大神们帮帮忙"><span>上一篇：</span>【】不会这个php的，求大神们帮帮忙</a>
<a class="nextart flexRow" href="/faq/255532.html" title="php深入学习笔记一（数组与对象之间的相互转化）"><span>下一篇：</span>php深入学习笔记一（数组与对象之间的相互转化）</a>
</div>
</div>
<div class="artlef-down ">
<div class="moreAi ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>热门AI工具</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a>
</div>
<div class="moreailist flexRow">
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/723" title="DeepSeek" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="DeepSeek" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/723" title="DeepSeek" class="overflowclass abripone">DeepSeek</a>
<p class="overflowclass abriptwo">幻方量化公司旗下的开源大模型平台</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/chat" target="_blank" >AI 聊天问答</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/726" title="豆包大模型" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680204067325.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="豆包大模型" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/726" title="豆包大模型" class="overflowclass abripone">豆包大模型</a>
<p class="overflowclass abriptwo">字节跳动自主研发的一系列大型语言模型</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/code/large-model" target="_blank" >AI大模型</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/725" title="通义千问" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974228210.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="通义千问" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/725" title="通义千问" class="overflowclass abripone">通义千问</a>
<p class="overflowclass abriptwo">阿里巴巴推出的全能AI助手</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/854" title="腾讯元宝" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="腾讯元宝" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/854" title="腾讯元宝" class="overflowclass abripone">腾讯元宝</a>
<p class="overflowclass abriptwo">腾讯混元平台推出的AI助手</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/office/docs" target="_blank" >文档处理</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/chat" target="_blank" >AI 聊天问答</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/724" title="文心一言" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974557049.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="文心一言" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/724" title="文心一言" class="overflowclass abripone">文心一言</a>
<p class="overflowclass abriptwo">文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/text" target="_blank" >AI 文本写作</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/1507" title="讯飞写作" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a4153cd86671.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="讯飞写作" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/1507" title="讯飞写作" class="overflowclass abripone">讯飞写作</a>
<p class="overflowclass abriptwo">基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/text" target="_blank" >AI 文本写作</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/text/chinese-writing" target="_blank" >中文写作</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/1115" title="即梦AI" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8f7c530c315.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="即梦AI" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/1115" title="即梦AI" class="overflowclass abripone">即梦AI</a>
<p class="overflowclass abriptwo">一站式AI创作平台，免费AI图片和视频生成。</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="" target="_blank" ></a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/image/image-titching" target="_blank" >图片拼接</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/808" title="ChatGPT" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679970194596.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="ChatGPT" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/808" title="ChatGPT" class="overflowclass abripone">ChatGPT</a>
<p class="overflowclass abriptwo">最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/text" target="_blank" >AI 文本写作</a> </div>
</div>
</div>
</div>
<div class="aidcons flexRow ">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="aibtnsa flexRow" >
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679976181507.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="智谱清言 - 免费全能的AI助手" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="aibtn-right flexColumn">
<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="overflowclass abripone">智谱清言 - 免费全能的AI助手</a>
<p class="overflowclass abriptwo">智谱清言 - 免费全能的AI助手</p>
<div class="aidconstab flexRow">
<a class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="conRight artdtilRight ">
<div class="artrig-adv ">
<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
</div>
<div class="hotzt artdtzt">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>相关专题</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a>
</div>
<div class="hotztuls flexColumn">
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/cyyzxgxghj" class="aClass flexRow hotzta" title="c语言中/相关合集"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311355368427.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="c语言中/相关合集" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/cyyzxgxghj" class="aClass flexRow hotztra overflowclass" title="c语言中/相关合集">c语言中/相关合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">0</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/mwmhwybrkyzb" class="aClass flexRow hotzta" title="漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311280622739.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/mwmhwybrkyzb" class="aClass flexRow hotztra overflowclass" title="漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题">漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题</a>
<p class="aClass flexRow hotztrp overflowclass">本专题围绕漫蛙漫画（Manwa / Manwa2）官网网页版入口进行整理，涵盖漫蛙漫画官方主页访问方式、网页版在线阅读入口、台版正版漫画浏览说明及基础使用指引，帮助用户快速进入漫蛙漫画官网，稳定在线阅读正版漫画内容，避免误入非官方页面。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">0</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/ygwrkyelsssy" class="aClass flexRow hotzta" title="Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311193110528.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/ygwrkyelsssy" class="aClass flexRow hotztra overflowclass" title="Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口">Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口</a>
<p class="aClass flexRow hotztrp overflowclass">本专题汇总了俄罗斯知名搜索引擎 Yandex 的官网入口、免登录访问地址、中文登录方法与网页版使用指南，帮助用户稳定访问 Yandex 官网，并提供一站式入口汇总。无论是登录入口还是在线搜索，用户都能快速获取最新稳定的访问链接与使用指南。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">2</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/jsjmsycgsj" class="aClass flexRow hotzta" title="Java 设计模式与重构实践"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311153863949.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Java 设计模式与重构实践" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/jsjmsycgsj" class="aClass flexRow hotztra overflowclass" title="Java 设计模式与重构实践">Java 设计模式与重构实践</a>
<p class="aClass flexRow hotztrp overflowclass">本专题专注讲解 Java 中常用的设计模式，包括单例模式、工厂模式、观察者模式、策略模式等，并结合代码重构实践，帮助学习者掌握 如何运用设计模式优化代码结构，提高代码的可读性、可维护性和扩展性。通过具体示例，展示设计模式如何解决实际开发中的复杂问题。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">1</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/cbfyybbc" class="aClass flexRow hotzta" title="C# 并发与异步编程"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311092871923.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="C# 并发与异步编程" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/cbfyybbc" class="aClass flexRow hotztra overflowclass" title="C# 并发与异步编程">C# 并发与异步编程</a>
<p class="aClass flexRow hotztrp overflowclass">本专题系统讲解 C# 异步编程与并发控制，重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目，帮助学习者掌握 如何在 C# 中编写高效的异步代码，提升应用的并发性能与响应速度。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">0</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pqhxxysd" class="aClass flexRow hotzta" title="Python 强化学习与深度Q网络（DQN）"><img
src="https://img.php.cn/upload/subject/202602/03/2026020311043090654.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Python 强化学习与深度Q网络（DQN）" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pqhxxysd" class="aClass flexRow hotztra overflowclass" title="Python 强化学习与深度Q网络（DQN）">Python 强化学习与深度Q网络（DQN）</a>
<p class="aClass flexRow hotztrp overflowclass">本专题深入讲解 Python 在强化学习（Reinforcement Learning）中的应用，重点介绍 深度Q网络（DQN） 及其实现方法，涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI，帮助学习者掌握 如何使用 Python 训练智能体在动态环境中作出决策。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">1</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pythonenddy" class="aClass flexRow hotzta" title="python end="><img
src="https://img.php.cn/upload/subject/202602/03/2026020311003825603.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="python end=" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pythonenddy" class="aClass flexRow hotztra overflowclass" title="python end=">python end=</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了python中end=的相关内容，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">0</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pythonysfyxj" class="aClass flexRow hotzta" title="python运算符优先级"><img
src="https://img.php.cn/upload/subject/202602/03/2026020310532663540.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="python运算符优先级" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pythonysfyxj" class="aClass flexRow hotztra overflowclass" title="python运算符优先级">python运算符优先级</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了python运算符优先级排序、用法相关内容，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">1</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pythonprintyf" class="aClass flexRow hotzta" title="python print用法与作用"><img
src="https://img.php.cn/upload/subject/202602/03/2026020310312737148.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="python print用法与作用" class="hotztaimg"
onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pythonprintyf" class="aClass flexRow hotztra overflowclass" title="python print用法与作用">python print用法与作用</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了python print的用法、作用、函数功能相关内容，阅读专题下面的文章了解更多详细教程。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">1</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.02.03</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hotdownload ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>热门下载</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a>
</div>
<div class="hotdownTab">
<div class="hdTabs flexRow">
<div class="check" data-id="onef">网站特效 <b></b> </div> /
<div class="" data-id="twof">网站源码 <b></b></div> /
<div class="" data-id="threef">网站素材 <b></b></div> /
<div class="" data-id="fourf">前端模板 <b></b></div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="js渐隐渐现图片切换效果" href="/xiazai/js/8770"><span>[图片特效]</span><span>js渐隐渐现图片切换效果</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="js图片轮播滚动 js左右箭头按钮控制图片轮播滚动" href="/xiazai/js/8769"><span>[图片特效]</span><span>js图片轮播滚动 js左右箭头按钮控制图片轮播滚动</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="jquery可切换主题的注册表单" href="/xiazai/js/8768"><span>[表单按钮]</span><span>jquery可切换主题的注册表单</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="Bootstrap扁平带浮动标签表单" href="/xiazai/js/8767"><span>[表单按钮]</span><span>Bootstrap扁平带浮动标签表单</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="时间轴图片切换代码" href="/xiazai/js/8766"><span>[图片特效]</span><span>时间轴图片切换代码</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="jquery自动填充搜索框" href="/xiazai/js/8765"><span>[表单按钮]</span><span>jquery自动填充搜索框</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="swiper倾斜图片左右切换特效" href="/xiazai/js/8764"><span>[图片特效]</span><span>swiper倾斜图片左右切换特效</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="jQuery Banner图片旋转切换代码" href="/xiazai/js/8763"><span>[图片特效]</span><span>jQuery Banner图片旋转切换代码</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="css3实现3D登录表单 css3实现3D登录表单网页特效" href="/xiazai/js/8762"><span>[表单按钮]</span><span>css3实现3D登录表单 css3实现3D登录表单网页特效</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="jQuery选项卡切换图片异步加载代码" href="/xiazai/js/8761"><span>[图片特效]</span><span>jQuery选项卡切换图片异步加载代码</span></a>
</div>
</li>
</ul>
<ul class="twof" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11355" title="openaishop"><span>[电商源码]</span><span>openaishop</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313"><span>[其它模板]</span><span>思翔企(事)业单位文件柜 build 20080313</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0"><span>[企业站源码]</span><span>雅龙智能装备工业设备类WordPress主题1.0</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11352" title="威发卡自动发卡系统"><span>[电商源码]</span><span>威发卡自动发卡系统</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11351" title="卡密分发系统"><span>[电商源码]</span><span>卡密分发系统</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11350" title="中华陶瓷网"><span>[电商源码]</span><span>中华陶瓷网</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11349" title="简洁粉色食品公司网站"><span>[电商源码]</span><span>简洁粉色食品公司网站</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11348" title="极速网店系统"><span>[电商源码]</span><span>极速网店系统</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统"><span>[电商源码]</span><span>淘宝妈妈_淘客推广系统</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/11346" title="积客B2SCMS商城系统"><span>[电商源码]</span><span>积客B2SCMS商城系统</span> </a>
</div>
</li>
</ul>
<ul class="threef" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4327" title="中式书房毛笔卷轴插画矢量素材"><span>[网站素材]</span><span>中式书房毛笔卷轴插画矢量素材</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4326" title="唯美紫色兰花盆栽插画矢量素材"><span>[网站素材]</span><span>唯美紫色兰花盆栽插画矢量素材</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4325" title="2026马年装饰合集矢量素材"><span>[网站素材]</span><span>2026马年装饰合集矢量素材</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4324" title="红色浪漫情人节竖版海报PSD模板下载"><span>[网站素材]</span><span>红色浪漫情人节竖版海报PSD模板下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4323" title="创意文字情人节海报矢量模板"><span>[网站素材]</span><span>创意文字情人节海报矢量模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4322" title="新中式水墨山水画矢量素材"><span>[网站素材]</span><span>新中式水墨山水画矢量素材</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4321" title="美味披萨宣传INS海报模板设计下载"><span>[网站素材]</span><span>美味披萨宣传INS海报模板设计下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4320" title="可爱民俗风彩色生肖马矢量插画"><span>[网站素材]</span><span>可爱民俗风彩色生肖马矢量插画</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4319" title="红色爱心情人节主题海报设计源文件下载"><span>[网站素材]</span><span>红色爱心情人节主题海报设计源文件下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4318" title="2026马年新年贺卡矢量模板"><span>[网站素材]</span><span>2026马年新年贺卡矢量模板</span> </a>
</div>
</li>
</ul>
<ul class="fourf" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8590" title="驾照考试驾校HTML5网站模板"><span>[前端模板]</span><span>驾照考试驾校HTML5网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8589" title="驾照培训服务机构宣传网站模板"><span>[前端模板]</span><span>驾照培训服务机构宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8588" title="HTML5房地产公司宣传网站模板"><span>[前端模板]</span><span>HTML5房地产公司宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8587" title="新鲜有机肉类宣传网站模板"><span>[前端模板]</span><span>新鲜有机肉类宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8586" title="响应式天气预报宣传网站模板"><span>[前端模板]</span><span>响应式天气预报宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8585" title="房屋建筑维修公司网站CSS模板"><span>[前端模板]</span><span>房屋建筑维修公司网站CSS模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8584" title="响应式志愿者服务网站模板"><span>[前端模板]</span><span>响应式志愿者服务网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8583" title="创意T恤打印店网站HTML5模板"><span>[前端模板]</span><span>创意T恤打印店网站HTML5模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8582" title="网页开发岗位简历作品展示网页模板"><span>[前端模板]</span><span>网页开发岗位简历作品展示网页模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/8581" title="响应式人力资源机构宣传网站模板"><span>[前端模板]</span><span>响应式人力资源机构宣传网站模板</span> </a>
</div>
</li>
</ul>
</div>
<script>
$('.hdTabs>div').click(function (e) {
$('.hdTabs>div').removeClass('check')
$(this).addClass('check')
$('.hotdownTab>ul').css('display', 'none')
$('.' + e.currentTarget.dataset.id).show()
})
</script>
</div>
<div class="artrig-adv ">
<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
</div>
<div class="xgarts ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>相关下载</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a>
</div>
<div class="xgwzlist ">
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="网页制作与PHP语言应用" href="/xiazai/learn/2560">网页制作与PHP语言应用</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP与MySQL程序设计3" href="/xiazai/learn/2529">PHP与MySQL程序设计3</a></div>
</div>
</div>
<div class="jpkc">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>精品课程</p>
</div>
<a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a>
</div>
<div class=" jpkcTab">
<div class=" jpkcTabs flexRow">
<div class="check" data-id="onefd">相关推荐 <b></b> </div> /
<div class="" data-id="twofd">热门推荐 <b></b></div> /
<div class="" data-id="threefd">最新课程 <b></b></div>
</div>
<div class="onefd jpktabd">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1587.html" title="PHP基础入门课程">
<img src="https://img.php.cn/upload/course/000/000/067/650d42c62399c149.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PHP基础入门课程" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1587.html" title="PHP基础入门课程"
class="rirightp overflowclass">PHP基础入门课程</a>
<div class="risrdown flexRow">
<p>共33课时 | 2.1万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1513.html" title="PHP+MySQL網站程式入門課(廣東話/粵語) 梁浩賢">
<img src="https://img.php.cn/upload/course/000/000/068/63d8e62db5e5c880.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PHP+MySQL網站程式入門課(廣東話/粵語) 梁浩賢" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1513.html" title="PHP+MySQL網站程式入門課(廣東話/粵語) 梁浩賢"
class="rirightp overflowclass">PHP+MySQL網站程式入門課(廣東話/粵語) 梁浩賢</a>
<div class="risrdown flexRow">
<p>共34课时 | 3.1万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/214.html" title="燕十八 Javascript高级视频教程">
<img src="https://img.php.cn/upload/course/000/000/068/62612abdc78dc317.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="燕十八 Javascript高级视频教程" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/214.html" title="燕十八 Javascript高级视频教程"
class="rirightp overflowclass">燕十八 Javascript高级视频教程</a>
<div class="risrdown flexRow">
<p>共23课时 | 6万人学习</p>
</div>
</div>
</div>
</div>
<div class="twofd jpktabd" style="display:none;">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>
<div class="risrdown flexRow">
<p>共6课时 | 11.2万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"
class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
<div class="risrdown flexRow">
<p>共79课时 | 152万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程">
<img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"
class="rirightp overflowclass">phpStudy极速入门视频教程</a>
<div class="risrdown flexRow">
<p>共6课时 | 53.5万人学习</p>
</div>
</div>
</div>
</div>
<div class="threefd jpktabd" style="display:none;">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通">
<img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新Python教程 从入门到精通" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通"
class="rirightp overflowclass">最新Python教程 从入门到精通</a>
<div class="risrdown flexRow">
<p>共4课时 | 22.4万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>
<div class="risrdown flexRow">
<p>共6课时 | 11.2万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学">
<img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="PHP新手语法线上课程教学" class="ristyAimg"
onerror="this.src='/static/mobimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学"
class="rirightp overflowclass">PHP新手语法线上课程教学</a>
<div class="risrdown flexRow">
<p>共13课时 | 0.9万人学习</p>
</div>
</div>
</div>
</div>
<script>
$('.jpkcTabs>div').click(function (e) {
$('.jpkcTabs>div').removeClass('check')
$(this).addClass('check')
$('.jpkcTab .jpktabd').css('display', 'none')
$('.' + e.currentTarget.dataset.id).show()
})
</script>
</div>
</div>
<div class="zxarts ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>最新文章</p>
</div>
<a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a>
</div>
<div class="xgwzlist ">
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP表单怎样实现表单数据预填_预填数据PHP表单回显法【回填】" href="/faq/2060904.html">PHP表单怎样实现表单数据预填_预填数据PHP表单回显法【回填】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="Webapp 中访问令牌与刷新令牌的正确实践" href="/faq/2060873.html">Webapp 中访问令牌与刷新令牌的正确实践</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何在 PHP 中动态构建并过滤多维子数组，移除空值条目" href="/faq/2060835.html">如何在 PHP 中动态构建并过滤多维子数组，移除空值条目</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP请求网址返回JSON怎转数组_PHPJSON转数组法【解析】" href="/faq/2060808.html">PHP请求网址返回JSON怎转数组_PHPJSON转数组法【解析】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php清理logs影响运行吗_php无干扰清理logs法【稳运】" href="/faq/2060781.html">php清理logs影响运行吗_php无干扰清理logs法【稳运】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP过低怎样用源码包升级_PHP过低源码包升级流程【源码】" href="/faq/2060758.html">PHP过低怎样用源码包升级_PHP过低源码包升级流程【源码】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何在 WooCommerce 邮件模板中显示产品主图（而非缩略图）" href="/faq/2060752.html">如何在 WooCommerce 邮件模板中显示产品主图（而非缩略图）</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php实现班级通信录导入主键冲突_php覆盖或忽略冲突法【技巧】" href="/faq/2060748.html">php实现班级通信录导入主键冲突_php覆盖或忽略冲突法【技巧】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP多进程pcntl_fork怎样并行调用_PHPpcntl_fork并行调用法【并行】" href="/faq/2060740.html">PHP多进程pcntl_fork怎样并行调用_PHPpcntl_fork并行调用法【并行】</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP用stream_select监控调用服务流_PHPstream_select监控流法【监控】" href="/faq/2060732.html">PHP用stream_select监控调用服务流_PHPstream_select监控流法【监控】</a></div>
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a target="_blank" href="/about/us.html" rel="nofollow" title="关于我们" class="cBlack">关于我们</a>
<a target="_blank" href="/about/disclaimer.html" rel="nofollow" title="免责申明" class="cBlack">免责申明</a>
<a target="_blank" href="/about/jbzx.html" rel="nofollow" title="举报中心" class="cBlack">举报中心</a>
<a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a>
<a target="_blank" href="https://www.php.cn/teacher.html" rel="nofollow" title="讲师合作" class="cBlack">讲师合作</a>
<a target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" title="广告合作" class="cBlack">广告合作</a>
<a target="_blank" href="/new/" 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" 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>
<div class="phpFootRight">
<div class="phpFootMsg">
<span><img src="/static/images/examples/text17.png"/></span>
<dl>
<dt>PHP中文网订阅号</dt>
<dd>每天精选资源文章推送</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="phpFootCode">
<div class="phpFootCodeIn"><p>Copyright 2014-2026 <a href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><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 src="/static/js/cdn.js?v=1.0.1"></script>
<!--底部 end-->
<!-- content -->
<!--
<div class="phpFudong">
<div class="phpFudongIn">
<div class="phpFudongImg"></div>
<div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div>
<div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
<div class="phpFudongCode"><a href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
<div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
<div class="clear"></div>
</div>
</div>
--> <!--底部浮动层 end-->
<!--侧导航-->
<style>
.layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
<li>
<div class="phpSdhIn">
<div class="phpSdhTitle">
<a href="/k24.html" 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" >
<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>
</body>
</html>
<script type="text/javascript" src="/hitsUp?type=article&id=255531&time=1770090345">
</script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1770090345"></script>
<script>
article_status = "0";
</script>
<input type="hidden" id="verifycode" value="/captcha.html">
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></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>
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;
}
</script>
<!-- Matomo -->
<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', '11']);
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>
<!-- End Matomo Code -->
<script>
setCookie('is_article', 1, 1);
</script>
<script>
var is_login = "0";
var show = 0;
var ceng = getCookie('ceng');
//未登录复制显示登录按钮
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);
});
}
</script>]]></plaintext></pre></listing></pre></var></tt></samp></kbd></code></p></div></div>
