HTML文本域怎么创建_HTML的textarea标签多行文本输入-html教程-PHP中文网

答案：HTML的textarea标签用于创建多行文本输入框，适合输入长文本并保留换行，通过rows和cols设置初始尺寸，用CSS的resize控制是否可调整大小，支持placeholder提示、maxlength字符限制及required必填验证，与单行input类型相比更适合需要多行输入的场景。

html文本域怎么创建_html的textarea标签多行文本输入

HTML的

textarea

登录后复制

标签就是用来创建多行文本输入框的，它允许用户输入比单行文本框更长的内容，并且可以自由调整大小（如果浏览器允许）。简单来说，当你需要用户输入一段话，而不是一个词的时候，就该用它。

解决方案

创建多行文本输入框，我们直接使用

<textarea>

登录后复制

标签就行。这个标签是成对出现的，内容写在开始和结束标签之间，会被作为默认值显示。

最基础的用法大概是这样：

<textarea name="userMessage" id="message" rows="5" cols="30" placeholder="在这里输入您的留言..."></textarea>

登录后复制

这里面有几个关键的属性，我通常会用到：

立即学习“前端免费学习笔记（深入）”；

```
name
```
登录后复制
: 这个是提交表单时，服务器端用来识别这个字段的名字，非常重要。
```
id
```
登录后复制
: 用于CSS样式和JavaScript操作，确保唯一性是个好习惯。
```
rows
```
登录后复制
: 指定文本区域的可见行数。这只是一个初始建议，用户通常可以输入更多行，或者浏览器允许他们拖动调整大小。
```
cols
```
登录后复制
: 指定文本区域的可见列数（大致字符宽度）。同样，这只是一个建议。
```
placeholder
```
登录后复制
: 当文本区域为空时，显示在其中的提示文本。用户开始输入后，它就会消失。

如果你想预设一些内容，可以直接把文本放在

<textarea>

登录后复制

和

</textarea>

登录后复制

之间：

这是产品的详细描述，可以写很多内容。
</textarea></pre><div class="contentsignin">登录后复制</div></div><p>有时候，我们还需要控制用户是否能调整这个输入框的大小，或者给它一个固定的外观，这通常就要结合CSS来做了。但从HTML结构上说，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><textarea></pre><div class="contentsignin">登录后复制</div></div>就是这么简单。</p>
<h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type="text"</pre><div class="contentsignin">登录后复制</div></div>有什么核心区别，我该如何选择？</h3>
<p>其实，这两者最根本的区别就在于“单行”和“多行”。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type="text"</pre><div class="contentsignin">登录后复制</div></div>，顾名思义，就是为单行文本设计的。你可以在里面输入很长的字符串，但它不会自动换行，内容会超出可视区域，需要滚动才能看到。它主要用于收集像姓名、<a style="color:#f60; text-decoration:underline;" title="邮箱" href="https://www.php.cn/zt/21185.html" target="_blank">邮箱</a>、搜索关键词这类短小精悍的信息。</p>
<p>而<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>呢，就是为多行文本而生。你输入的内容会自动换行，而且通常浏览器会允许用户拖动右下角来调整它的大小。这使得它非常适合用来收集留言、评论、详细描述或者任何需要用户表达较长段落的场景。</p>
<p>我个人在选择时，主要看预期用户会输入多长的内容，以及是否需要保留换行符。如果只是一个邮箱地址，那肯定<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type="text"</pre><div class="contentsignin">登录后复制</div></div>更合适。但如果我需要用户写一个产品反馈，那毫无疑问是<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>。想象一下，如果评论区只能用单行输入框，那用户体验简直是灾难。而且，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>在提交时会保留用户输入的换行符，这对于需要格式化的文本来说至关重要，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type="text"</pre><div class="contentsignin">登录后复制</div></div>可做不到这点。</p>
<p>所以，核心选择标准：短文本、无需换行选<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">input type="text"</pre><div class="contentsignin">登录后复制</div></div>；长文本、需要换行、可能需要调整大小，就选<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>。简单明了。</p>
<h3>如何控制<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>的默认尺寸和用户是否可以调整大小？</h3>
<p>控制<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>的尺寸，我们有几种方式。最直接的，就是前面提到的HTML属性<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">rows</pre><div class="contentsignin">登录后复制</div></div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">cols</pre><div class="contentsignin">登录后复制</div></div>。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">rows</pre><div class="contentsignin">登录后复制</div></div>决定了它默认显示多少行文本的高度，而<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">cols</pre><div class="contentsignin">登录后复制</div></div>则大致控制了它默认的宽度（按字符数算）。比如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">rows="10" cols="50"</pre><div class="contentsignin">登录后复制</div></div>，就是说它默认会有10行高，50个字符宽。</p>
<p>不过，这些HTML属性提供的只是一个“建议”或者说“初始状态”。在实际开发中，我更倾向于使用CSS来精确控制<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>的尺寸，因为它更灵活，也能更好地适应不同的屏幕尺寸和响应式布局。你可以直接用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">width</pre><div class="contentsignin">登录后复制</div></div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">height</pre><div class="contentsignin">登录后复制</div></div>属性来设定它的像素宽度和高度，或者百分比宽度：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>textarea {
    width: 100%; /* 占据父容器的全部宽度 */
    height: 150px; /* 固定高度 */
    min-height: 100px; /* 最小高度 */
    max-height: 300px; /* 最大高度 */
    padding: 10px;
    box-sizing: border-box; /* 让padding不影响width/height计算 */
}</pre><div class="contentsignin">登录后复制</div></div><p>至于用户是否可以调整大小，这主要通过CSS的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">resize</pre><div class="contentsignin">登录后复制</div></div>属性来控制。浏览器默认情况下通常是允许用户调整<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>大小的（表现为右下角有一个拖拽手柄）。但有时候，为了布局的整洁或者避免用户破坏页面结构，我们可能需要禁用这个功能，或者只允许在特定方向调整。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1821">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6cb7330755575.png" alt="Dreamlike.art">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1821">Dreamlike.art</a>
                            <p>内置5种模型的AI图像生成器</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Dreamlike.art">
                                <span>57</span>
                            </div>
                        </div>
                        <a href="/ai/1821" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Dreamlike.art">
                        </a>
                    </div>
                
<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">resize</pre><div class="contentsignin">登录后复制</div></div>属性有几个值：</p>
<ul>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">none</pre><div class="contentsignin">登录后复制</div></div>: 完全禁止用户调整大小。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">both</pre><div class="contentsignin">登录后复制</div></div>: 允许水平和垂直方向调整（默认行为）。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">horizontal</pre><div class="contentsignin">登录后复制</div></div>: 只允许水平方向调整。</li>
<li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">vertical</pre><div class="contentsignin">登录后复制</div></div>: 只允许垂直方向调整。</li>
</ul>
<p>比如，如果你想完全禁用用户调整大小：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>textarea {
    resize: none;
}</pre><div class="contentsignin">登录后复制</div></div><p>我个人觉得，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">resize: none;</pre><div class="contentsignin">登录后复制</div></div>用起来确实要小心，有时用户会觉得被限制了，体验并不好。除非有非常明确的布局需求，否则我通常会保留默认的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">both</pre><div class="contentsignin">登录后复制</div></div>，或者至少允许<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">vertical</pre><div class="contentsignin">登录后复制</div></div>方向的调整，这样用户在输入长文本时会更舒服。毕竟，用户体验很多时候比严格的视觉规范更重要。</p>
<h3>在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>中如何处理默认文本、占位符以及用户输入限制？</h3>
<p>处理<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>中的默认文本、占位符和输入限制，是提升用户体验和确保数据有效性的关键。</p>
<p><strong>默认文本：</strong>
如果你想在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>加载时就显示一些内容，比如一个模板或者编辑历史，直接把文本内容放在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><textarea></pre><div class="contentsignin">登录后复制</div></div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></textarea></pre><div class="contentsignin">登录后复制</div></div>标签之间就行。这是最直接的方式。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="draft" id="draftContent" rows="8" cols="60">
亲爱的用户，请在这里输入您的反馈意见。
感谢您的宝贵建议！
</textarea></pre><div class="contentsignin">登录后复制</div></div><p>用户打开页面时，就会看到这段预设的文字。</p>
<p><strong>占位符（Placeholder）：</strong>
占位符（<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">placeholder</pre><div class="contentsignin">登录后复制</div></div>属性）和默认文本不一样。它不是实际的值，而是一个提示，告诉用户这个输入框应该输入什么类型的内容。当<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>为空时它会显示，一旦用户开始输入，它就会消失。这对于简洁的表单设计很有帮助，可以减少额外的标签文本。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="comment" id="userComment" rows="5" cols="40" placeholder="请在这里写下您的评论，不超过200字。"></textarea></pre><div class="contentsignin">登录后复制</div></div><p>记住，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">placeholder</pre><div class="contentsignin">登录后复制</div></div>只是一个提示，它不会作为表单数据提交。如果用户不输入任何内容，这个字段提交的就是空值。</p>
<p><strong>用户输入限制：</strong>
HTML5为<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>提供了一些内置的属性来限制用户的输入，这在很多场景下都非常实用：</p>
<ul>
<li>
<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre><div class="contentsignin">登录后复制</div></div></strong>: 限制用户可以输入的字符总数。这对于有字数限制的场景（比如<a style="color:#f60; text-decoration:underline;" title="微博" href="https://www.php.cn/zt/16808.html" target="_blank">微博</a>、短消息）非常有用。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="tweet" id="tweetContent" rows="3" cols="50" maxlength="140" placeholder="分享您的想法（140字以内）"></textarea></pre><div class="contentsignin">登录后复制</div></div><p>当用户输入达到<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre><div class="contentsignin">登录后复制</div></div>时，浏览器会阻止他们继续输入。</p>
</li>
<li>
<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">required</pre><div class="contentsignin">登录后复制</div></div></strong>: 这个属性让<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>成为一个必填字段。如果用户不输入任何内容就尝试提交表单，浏览器会提示他们填写。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="feedback" id="userFeedback" rows="6" cols="50" required placeholder="请务必填写您的宝贵意见。"></textarea></pre><div class="contentsignin">登录后复制</div></div><p>这是一种基本的客户端验证，有助于减少空表单提交。</p>
</li>
<li>
<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">readonly</pre><div class="contentsignin">登录后复制</div></div></strong>: 使<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>只读。用户可以看到里面的内容，但无法修改。它的值仍然会随着表单一起提交。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="terms" id="termsAndConditions" rows="10" cols="70" readonly>
这是服务条款，您只能阅读，不能修改。
请仔细阅读并同意。
</textarea></pre><div class="contentsignin">登录后复制</div></div></li>
<li>
<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">disabled</pre><div class="contentsignin">登录后复制</div></div></strong>: 完全禁用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">textarea</pre><div class="contentsignin">登录后复制</div></div>。用户无法与之交互，也无法选择或修改内容。最重要的是，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">disabled</pre><div class="contentsignin">登录后复制</div></div>字段的值不会随表单一起提交。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><textarea name="notes" id="adminNotes" rows="5" cols="50" disabled placeholder="此字段已禁用。"></textarea></pre><div class="contentsignin">登录后复制</div></div></li>
</ul>
<p>我个人觉得，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">placeholder</pre><div class="contentsignin">登录后复制</div></div>是个好东西，但别指望它能替代明确的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">label</pre><div class="contentsignin">登录后复制</div></div>标签，毕竟有些用户可能不会注意到它。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">maxlength</pre><div class="contentsignin">登录后复制</div></div>在某些场景下非常有用，比如微博字数限制，但也要考虑用户体验，过短的限制会让人抓狂。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">required</pre><div class="contentsignin">登录后复制</div></div>配合客户端JavaScript验证可以提升用户体验，但最终的安全性还得靠<a style="color:#f60; text-decoration:underline;" title="后端" href="https://www.php.cn/zt/17190.html" target="_blank">后端</a>验证，因为<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>的验证很容易被绕过。合理利用这些属性，可以在不增加太多JavaScript代码的情况下，让表单变得更健壮、更用户友好。</p><p>以上就是HTML文本域怎么创建_HTML的textarea标签多行文本输入的详细内容，更多请关注php中文网其它相关文章！</p>                <div class="wzconBq" style="display: inline-flex;">
                    <span>相关标签：</span>
                    <div class="wzcbqd" style="display:flex;">
                        <a onclick="hits_log(2,'www',this);" href-data="/zt/15716.html" target="_blank">css</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/15724.html" target="_blank">javascript</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/15731.html" target="_blank">java</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/15763.html" target="_blank">html</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/15813.html" target="_blank">前端</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/15948.html" target="_blank">html5</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/16180.html" target="_blank">浏览器</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/16808.html" target="_blank">微博</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/17190.html" target="_blank">后端</a> <a onclick="hits_log(2,'www',this);" href-data="/zt/21185.html" target="_blank">邮箱</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=JavaScript" target="_blank">JavaScript</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=html5" target="_blank">html5</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=css" target="_blank">css</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=html" target="_blank">html</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=字符串" target="_blank">字符串</a> <a onclick="hits_log(2,'www',this);" href-data="/search?q=input" target="_blank">input</a>                       
                    </div>
                   
                </div>
                
                                <div class="everysee">
                    <h2>大家都在看：</h2>
                    <div>
                                        <a target="_blank"  href="/faq/1875402.html" title="Linux怎么写HTML并运行_Linux编写并运行HTML步骤【指南】">Linux怎么写HTML并运行_Linux编写并运行HTML步骤【指南】</a>
                                        <a target="_blank"  href="/faq/1875359.html" title="html5怎么设置实线_html5用CSS border-style:solid设元素实线边框【设置】">html5怎么设置实线_html5用CSS border-style:solid设元素实线边框【设置】</a>
                                        <a target="_blank"  href="/faq/1875347.html" title="html如何播放_在HTML中播放音频或视频文件【音频】">html如何播放_在HTML中播放音频或视频文件【音频】</a>
                                        <a target="_blank"  href="/faq/1875346.html" title="js如何让HTML分段_使用JavaScript动态分割HTML内容【分割】">js如何让HTML分段_使用JavaScript动态分割HTML内容【分割】</a>
                                        <a target="_blank"  href="/faq/1875326.html" title="mac 怎么使用html5_mac浏览器直接打开html5文件支持触控操作【使用】">mac 怎么使用html5_mac浏览器直接打开html5文件支持触控操作【使用】</a>
                                        </div>
                </div>
                          
                </div>
                            </div>
                
            <!-- <div class="ask_line-container" >
                <div class="ask_line"></div>
                <button type="button" class="ask_text test-iframe-handle">
                没有解决问题？点击使用智能助手
                </button>
                <div class="ask_line"></div>
            </div> -->
                            <div class="community flexRow newcommunity">
                    <div class="comleft flexRow newcomlimg">
                        <a target="_blank"  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 target="_blank"  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 target="_blank"  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 target="_blank"  class="wzcf-sc articleICollection " data-id="1527437">
                                            <img src="/static/lhimages/shoucang_2x.png">
                        <span>收藏</span>
                                    </a>

                <a target="_blank"   class="wzcf-dz articlegoodICollection " data-id="1527437">
                                            <img src="/static/images/images/icon37.png">
                        <span>点赞</span>
                                    </a>
            </div>



            <div class="wzconOtherwz">
                                    <a target="_blank"  href="/faq/1527426.html">
                        <span>上一篇：HTML定义列表怎么用_HTML的dl dt dd标签使用教程</span>
                    </a>
                                    <a target="_blank"  href="/faq/1527452.html">
                        <span>下一篇：深入理解OpenType字体特性在Web中的应用与限制</span>
                    </a>
                            </div>
            <div class="wzconShengming">
                <img src="/static/images/images/benzhanshengming.png" />
                <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div>
            </div>

                       <!-- PC-文章底部 -->
                        <div class="wzconZzwz">
                <div class="wzconZzwztitle">作者最新文章</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873645.html" title="phpcn{$vo.title}">学堂云网页版快速进入 学堂云在线课堂网页版入口</a>
                            </div>
                            <div>2025-12-21 12:49:02</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873664.html" title="phpcn{$vo.title}">Canva图层蒙版怎么用_Canva图层蒙版在线设计应用技巧</a>
                            </div>
                            <div>2025-12-21 12:54:09</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873677.html" title="phpcn{$vo.title}">Hotels订春节出境游套票怎搭配_Hotels春节出境游套票机酒组合技巧【实操】</a>
                            </div>
                            <div>2025-12-21 12:57:08</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873732.html" title="phpcn{$vo.title}">网页微信怎么切换账号_网页微信切换账号步骤【攻略】</a>
                            </div>
                            <div>2025-12-21 13:11:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873738.html" title="phpcn{$vo.title}">学生党买笔记本电脑看什么_学生本性价比排行挑选要点【干货】</a>
                            </div>
                            <div>2025-12-21 13:13:02</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873762.html" title="phpcn{$vo.title}">vivo隐私设置如何开启双重认证_vivo隐私设置双重认证开启与验证【教程】</a>
                            </div>
                            <div>2025-12-21 13:21:07</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873770.html" title="phpcn{$vo.title}">QQ邮箱怎样恢复已清空垃圾箱_QQ邮箱恢复垃圾箱步骤【攻略】</a>
                            </div>
                            <div>2025-12-21 13:23:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873808.html" title="phpcn{$vo.title}">如何在HTML中正确显示汉字_编码设置与兼容处理【教程】</a>
                            </div>
                            <div>2025-12-21 13:38:02</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873857.html" title="phpcn{$vo.title}">Minecraft网页版超极速入口 Minecraft浏览器官方正版一键畅玩</a>
                            </div>
                            <div>2025-12-21 13:52:46</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank"  target="_blank" href="/faq/1873859.html" title="phpcn{$vo.title}">以太坊跌破3000美元后企稳：Fusaka升级助力ETH反弹</a>
                            </div>
                            <div>2025-12-21 13:53:40</div>
                        </li>
                                    </ul>
            </div>
                        <div class="wzconZzwz">
                <div class="wzconZzwztitle">最新问题</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875831.html"  target="_blank" title="html的代码怎么运行_运行html代码方法【教程】" class="wdcdcTitle">html的代码怎么运行_运行html代码方法【教程】</a>
                            <a target="_blank"  href="/faq/1875831.html" class="wdcdcCons">运行HTML代码只需文本编辑器和浏览器。1.用记事本或VSCode等编辑器编写代码，保存为.html文件（如index.html）。2.双击文件或右键选择浏览器打开，即可查看网页效果。3.修改代码后保存，刷新页面即实时预览，推荐使用支持语法高亮的编辑器提升效率。4.若需解决file://协议限制，可使用live-server或Python搭建本地服务器：Node.js用户运行live-server，Python用户执行python-mhttp.server，访问http://localhost:</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-22 03:35:11</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">998</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875822.html"  target="_blank" title="电脑如何下html5_电脑下载HTML5资源与离线使用技巧【方法】" class="wdcdcTitle">电脑如何下html5_电脑下载HTML5资源与离线使用技巧【方法】</a>
                            <a target="_blank"  href="/faq/1875822.html" class="wdcdcCons">若需离线使用HTML5资源，可采用四种方法：一、用浏览器开发者工具手动保存页面及关联资源；二、用HTTrack整站下载并修复路径；三、通过npm或git获取开源项目源码并本地运行；四、用SingleFile扩展生成自包含单HTML文件。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-22 03:15:18</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">570</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875804.html"  target="_blank" title="html5如何制作翻页_HTML5制作翻页效果动画教程【翻页】" class="wdcdcTitle">html5如何制作翻页_HTML5制作翻页效果动画教程【翻页】</a>
                            <a target="_blank"  href="/faq/1875804.html" class="wdcdcCons">HTML5可通过五种方式实现纸质书籍翻页效果：一、CSS33D变换模拟翻页；二、Canvas逐帧绘制物理翻页；三、PageFlip.js库快速集成；四、SVG路径动态裁剪；五、WebGL（Three.js）构建高保真3D翻页。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-22 02:39:12</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">215</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875780.html"  target="_blank" title="node.js怎么运行html_node.js运行html方法【教程】" class="wdcdcTitle">node.js怎么运行html_node.js运行html方法【教程】</a>
                            <a target="_blank"  href="/faq/1875780.html" class="wdcdcCons">使用Node.js运行HTML文件需搭建本地服务器，可通过三种方式实现：一、利用内置http模块创建服务器，引入http和fs模块读取index.html并监听3000端口；二、使用Express框架，初始化项目后安装express，通过express.static中间件托管public目录下的HTML文件；三、借助VSCode的LiveServer扩展，右键HTML文件选择“OpenwithLiveServer”实现自动刷新预览，适用于开发调试。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-22 01:51:20</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">395</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875463.html"  target="_blank" title="HTML如何设置元素间隔_内外边距调整技巧【教程】" class="wdcdcTitle">HTML如何设置元素间隔_内外边距调整技巧【教程】</a>
                            <a target="_blank"  href="/faq/1875463.html" class="wdcdcCons">应合理使用CSS的margin、padding、box-sizing、flex布局及自定义属性来精确控制HTML元素间距；margin控制元素外部距离，padding调整内容与边框距离，box-sizing改变尺寸计算方式，flex的gap等属性可间接管理子项间隙，CSS变量支持动态响应式间距管理。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:09:09</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">547</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875460.html"  target="_blank" title="html如何全选_实现HTML页面内容全选功能【全选】" class="wdcdcTitle">html如何全选_实现HTML页面内容全选功能【全选】</a>
                            <a target="_blank"  href="/faq/1875460.html" class="wdcdcCons">应使用window.getSelection()与Range对象手动构建全选，因document.execCommand("selectAll")已废弃；需创建Range、selectNodeContents目标元素、清空并添加选区；支持限定范围、Ctrl+A快捷键及user-select禁用时的样式临时调整。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:08:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">952</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875451.html"  target="_blank" title="html5图片怎么显示_HTML5用img标签src引图或CSS背景图显示图片【显示】" class="wdcdcTitle">html5图片怎么显示_HTML5用img标签src引图或CSS背景图显示图片【显示】</a>
                            <a target="_blank"  href="/faq/1875451.html" class="wdcdcCons">HTML5图片显示异常的五种解决方法：一、用img标签配src/alt属性；二、用CSSbackground-image设背景图；三、用picture+source实现响应式切换；四、内联SVG代码嵌入矢量图；五、用dataURL嵌入小图Base64编码。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:06:07</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">697</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875447.html"  target="_blank" title="html5怎么添加空格_HTML5用 或CSS letter-spacing加空格间距【添加】" class="wdcdcTitle">html5怎么添加空格_HTML5用 或CSS letter-spacing加空格间距【添加】</a>
                            <a target="_blank"  href="/faq/1875447.html" class="wdcdcCons">在HTML5中实现多空格或调节字符间距，应使用不可折叠空格（如 ）、CSS的letter-spacing、padding/margin、white-space属性或伪元素；普通空格会被浏览器合并，无法直接生效。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:04:37</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">111</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875437.html"  target="_blank" title="safari如何切换html5_Safari启用HTML5模式与播放器切换技巧【教程】" class="wdcdcTitle">safari如何切换html5_Safari启用HTML5模式与播放器切换技巧【教程】</a>
                            <a target="_blank"  href="/faq/1875437.html" class="wdcdcCons">Safari中HTML5视频无法播放等问题，需依次启用HTML5模式、设置video标签属性、绕过自动播放限制、禁用QuickTime插件、模拟用户代理。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:01:37</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">965</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1875436.html"  target="_blank" title="html5怎么改_HT5用编辑器改标签CSS JS代码保存刷新预览【修改】" class="wdcdcTitle">html5怎么改_HT5用编辑器改标签CSS JS代码保存刷新预览【修改】</a>
                            <a target="_blank"  href="/faq/1875436.html" class="wdcdcCons">HTML5页面修改与实时预览需三步：一、用VSCode等编辑器修改HTML/CSS/JS并保存；二、用LiveServer插件实现保存后自动刷新；三、通过浏览器DevTools临时调试，再将确认修改回写源文件。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-21 22:01:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">604</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>相关专题</div>
                    <a target="_blank"  href="/faq/zt" target="_blank">更多>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jsszcd"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202306/20/2023062017455159983.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jsszcd" class="title-a-spanl"><span>js获取数组长度的方法</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jssxym"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202307/04/2023070409584996422.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jssxym" class="title-a-spanl"><span>js刷新当前页面</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jssswr"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202307/04/2023070410160418152.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jssswr" class="title-a-spanl"><span>js四舍五入</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jsscjddff"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202309/01/2023090117024286721.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jsscjddff" class="title-a-spanl"><span>js删除节点的方法</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/javascriptzy"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202309/04/2023090411084899588.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/javascriptzy" class="title-a-spanl"><span>JavaScript转义字符</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jsscsjsdff"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202309/04/2023090411300156430.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jsscsjsdff" class="title-a-spanl"><span>js生成随机数的方法</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/rhqyjavascrip"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202309/12/2023091210411962381.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/rhqyjavascrip" class="title-a-spanl"><span>如何启用JavaScript</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jssymbol"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202309/20/2023092011360778721.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jssymbol" class="title-a-spanl"><span>Js中Symbol类详解</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>
        <!-- <script type="text/javascript" smua="d=p&s=b&u=u2839468&w=366&h=270" src="https://www.nkscdn.com/smu/o.js"></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 target="_blank"  style="height: auto;" href="/faq/1875831.html">html的代码怎么运行_运行html代码方法【教程】</a>
                                </div>
                            </li>
                                        
                            <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a target="_blank"  style="height: auto;" href="/faq/1875822.html">电脑如何下html5_电脑下载HTML5资源与离线使用技巧【方法】</a>
                                </div>
                            </li>
                                        
                            <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a target="_blank"  style="height: auto;" href="/faq/1875780.html">node.js怎么运行html_node.js运行html方法【教程】</a>
                                </div>
                            </li>
                                        
                            <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a target="_blank"  style="height: auto;" href="/faq/1875451.html">html5图片怎么显示_HTML5用img标签src引图或CSS背景图显示图片【显示】</a>
                                </div>
                            </li>
                                        
                            <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a target="_blank"  style="height: auto;" href="/faq/1875426.html">如何修改HTML按钮样式_CSS美化设计指南【攻略】</a>
                                </div>
                            </li>
                                        <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a target="_blank"  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 target="_blank"  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"  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"  target="_blank" href="/course/1672.html" title="AngularJS教程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/090/68998d18b4142615.png" alt="AngularJS教程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank"  target="_blank" href="/course/1672.html">AngularJS教程</a>
                                    <div class="wzrthreerb">
                                        <div >18865次学习</div>
                                                                                    <a target="_blank"  class="courseICollection" data-id="1672"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                            </div>
                                </div>
                            </li>
                                                        <li>
                                <a target="_blank"  target="_blank" href="/course/1660.html" title="CSS教程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/090/68774990cfb6f919.jpg" alt="CSS教程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank"  target="_blank" href="/course/1660.html">CSS教程</a>
                                    <div class="wzrthreerb">
                                        <div >154689次学习</div>
                                                                                    <a target="_blank"  class="courseICollection" data-id="1660"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                            </div>
                                </div>
                            </li>
                                                        <li>
                                <a target="_blank"  target="_blank" href="/course/1617.html" title="ThinkPHP6.x API接口--十天技能课堂" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/067/65603b73b5002648.png" alt="ThinkPHP6.x API接口--十天技能课堂"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank"  target="_blank" href="/course/1617.html">ThinkPHP6.x API接口--十天技能课堂</a>
                                    <div class="wzrthreerb">
                                        <div >10577次学习</div>
                                                                                    <a target="_blank"  class="courseICollection" data-id="1617"><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"  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"  target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >68781次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                <div class="wzrthreerb">
                                    <div >1503919次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a>
                                <div class="wzrthreerb">
                                    <div >532169次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a>
                                <div class="wzrthreerb">
                                    <div >1257760次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a>
                                <div class="wzrthreerb">
                                    <div >773940次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="801"><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"  target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程 从入门到精通"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1696.html">最新Python教程 从入门到精通</a>
                                <div class="wzrthreerb">
                                    <div >5393次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >68781次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >7837次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a>
                                <div class="wzrthreerb">
                                    <div >5024次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  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"  target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a>
                                <div class="wzrthreerb">
                                    <div >46882次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1650"><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>


        <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=1527437&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 target="_blank"  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=`+"1527437"+`&query=参考https://www.php.cn`+"/faq/1527437.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="wzrFour">
            <div class="wzrfour-title">
                <div>最新下载</div>
                <a target="_blank"  href="/xiazai">更多>
                </a>
            </div>
                            <div class="swiper-container  sjyx_banSwiperwz">
                    <ul class="swiper-wrapper">
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8587" target="_blank" title="新鲜有机肉类宣传网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/005/173613957275112.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="新鲜有机肉类宣传网站模板">
                                </a>
                            </li>
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8590" target="_blank" title="驾照考试驾校HTML5网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/011/174954240445579.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="驾照考试驾校HTML5网站模板">
                                </a>
                            </li>
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8588" target="_blank" title="HTML5房地产公司宣传网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/018/173613957345012.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="HTML5房地产公司宣传网站模板">
                                </a>
                            </li>
                                                <div class="clear"></div>
                    </ul>
                    <div class="swiper-pagination"></div>
                </div>
                        
            <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"  target="_blank"  title="jQuery点击文字滚动Scrollocue插件" href="/xiazai/js/8073">[文字特效] jQuery点击文字滚动Scrollocue插件</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="CSS3聚光灯下倒影文字特效" href="/xiazai/js/8072">[文字特效] CSS3聚光灯下倒影文字特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  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"  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"  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"  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"  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"  target="_blank"  title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0" target="_blank">[企业站源码] 雅龙智能装备工业设备类WordPress主题1.0</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11352" title="威发卡自动发卡系统" target="_blank">[电商源码] 威发卡自动发卡系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11351" title="卡密分发系统" target="_blank">[电商源码] 卡密分发系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11350" title="中华陶瓷网" target="_blank">[电商源码] 中华陶瓷网</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11349" title="简洁粉色食品公司网站" target="_blank">[电商源码] 简洁粉色食品公司网站</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11348" title="极速网店系统" target="_blank">[电商源码] 极速网店系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统" target="_blank">[电商源码] 淘宝妈妈_淘客推广系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11346" title="积客B2SCMS商城系统" target="_blank">[电商源码] 积客B2SCMS商城系统</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4114"  target="_blank"  title="极简线条香槟庆祝海报矢量模板">[网站素材] 极简线条香槟庆祝海报矢量模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4113"  target="_blank"  title="手绘健身房运动器材矢量素材">[网站素材] 手绘健身房运动器材矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4112"  target="_blank"  title="色彩缤纷新鲜水果矢量素材">[网站素材] 色彩缤纷新鲜水果矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4111"  target="_blank"  title="复古美式早午餐海报矢量模板">[网站素材] 复古美式早午餐海报矢量模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4110"  target="_blank"  title="卡通圣诞老人驯鹿圣诞矢量素材">[网站素材] 卡通圣诞老人驯鹿圣诞矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4109"  target="_blank"  title="圣诞新年快乐主题海报设计源文件下载">[网站素材] 圣诞新年快乐主题海报设计源文件下载</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4108"  target="_blank"  title="手绘肉类海鲜食材合集矢量素材">[网站素材] 手绘肉类海鲜食材合集矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4107"  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 target="_blank"  href="/xiazai/code/8590"  target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8589"  target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8588"  target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8587"  target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8586"  target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8585"  target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8584"  target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  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>
<!--主体 end-->
<!--底部-->
<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a>
                        <a target="_blank"  href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"  target="_blank" title="讲师合作" class="cBlack">讲师合作</a>
                        <a target="_blank"  href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>
                        <a target="_blank"  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 target="_blank"  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 target="_blank"  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>
            <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-2025 <a target="_blank"  href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a target="_blank"  href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a target="_blank"  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 src="/static/js/cdn.js?v=1.0.1"></script>



<!--底部 end-->
<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=1527437&time=1766350141"></script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1766350141"></script>
<script>article_status = "1522150";</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%E6%96%87%E6%9C%AC%E5%9F%9F%E6%80%8E%E4%B9%88%E5%88%9B%E5%BB%BA_HTML%E7%9A%84textarea%E6%A0%87%E7%AD%BE%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5',
                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>
<!--底部浮动层-->
<!--
    <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" 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>
<!--侧导航 end-->
<!-- 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>
</body>
</html>