CSS怎么设置只读_CSS实现表单只读样式与禁用状态教程-css教程-PHP中文网

答案：CSS通过样式美化由HTML属性（如readonly或disabled）定义的表单状态，其中readonly允许内容复制但不可编辑且值可提交，disabled则完全禁用交互且值不提交，二者需配合CSS强化视觉区分，并可通过JavaScript实现动态控制与交互反馈优化。

css怎么设置只读_css实现表单只读样式与禁用状态教程

CSS本身不能直接让一个表单元素变成“只读”或“禁用”，它主要负责为那些通过HTML属性（如

readonly

或

disabled

）设置了状态的元素提供视觉上的样式。换句话说，CSS是“化妆师”，决定了只读或禁用状态下的表单元素看起来是什么样子，而真正让它们“只读”或“禁用”的是HTML属性和/或JavaScript。

解决方案

要实现表单元素的只读样式与禁用状态，我们主要依赖HTML的

readonly

和

disabled

属性，然后用CSS来美化这些状态。这就像给不同的情绪穿上不同的衣服，让它们一眼就能被识别出来。

1. 只读状态 (

readonly

) 的CSS设置：

readonly

属性主要用于

</pre>等文本输入元素。它允许用户看到内容，甚至可以选中和复制，但不能修改。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class='brush:css;toolbar:false;'>/* 针对所有具有readonly属性的输入框和文本域 */
input[readonly],
textarea[readonly] {
    background-color: #f0f0f0; /* 浅灰色背景，视觉上表示不可编辑 */
    border: 1px solid #ccc;    /* 稍微柔和的边框 */
    color: #555;               /* 字体颜色可以稍深，保持可读性 */
    cursor: default;           /* 鼠标指针变为默认箭头，表示不可交互修改 */
    /* 移除焦点时的外边框，避免与只读状态冲突 */
    outline: none;
    /* 某些浏览器可能会有默认的阴影或高亮，这里可以重置 */
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* 更好的实践是，在获得焦点时，也保持只读的视觉效果 */
input[readonly]:focus,
textarea[readonly]:focus {
    background-color: #e9e9e9; /* 焦点时略微变深，但仍是只读样式 */
    border-color: #bbb;
}</pre><p><strong>2. 禁用状态 (<pre class="brush:php;toolbar:false;">disabled</pre>) 的CSS设置：</strong></p>
<p><pre class="brush:php;toolbar:false;">disabled</pre>属性适用于更广泛的表单元素，包括<pre class="brush:php;toolbar:false;"><input></pre>, <pre class="brush:php;toolbar:false;"><textarea></pre>, <pre class="brush:php;toolbar:false;"><select></pre>, <pre class="brush:php;toolbar:false;"><button></pre>等。被禁用的元素不仅不可编辑，也不可交互（不能点击、不能获取焦点），并且其值不会随表单一起提交。</p><pre class='brush:css;toolbar:false;'>/* 针对所有具有disabled属性的表单元素 */
input[disabled],
textarea[disabled],
select[disabled],
button[disabled] {
    background-color: #e0e0e0; /* 更深的灰色背景，强调不可用 */
    border: 1px solid #bbb;    /* 更明显的边框 */
    color: #999;               /* 字体颜色更浅，表示内容不可用 */
    cursor: not-allowed;       /* 鼠标指针变为“禁止”符号，强烈提示不可操作 */
    opacity: 0.7;              /* 整体透明度降低，增强禁用感 */
    /* 确保禁用状态下无法获得焦点，虽然浏览器通常会处理，但显式声明更保险 */
    pointer-events: none;      /* 阻止所有鼠标事件，包括点击和悬停 */
    /* 移除焦点时的外边框 */
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* 对于按钮，可能需要特别处理点击反馈 */
button[disabled]:active {
    pointer-events: none; /* 再次强调不可点击 */
}</pre><p>通过这些CSS规则，我们就能让带有<pre class="brush:php;toolbar:false;">readonly</pre>或<pre class="brush:php;toolbar:false;">disabled</pre>属性的表单元素在视觉上与普通可编辑/可用元素区分开来，提升用户体验。我个人觉得，视觉上的区分度越明显，用户操作起来就越不容易出错。</p>
<h3>为什么我的只读输入框看起来和普通输入框一样？解决只读样式不明显的问题</h3>
<p>这确实是个常见的问题，尤其是在没有明确设置CSS样式时。<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>对<pre class="brush:php;toolbar:false;">readonly</pre>和<pre class="brush:php;toolbar:false;">disabled</pre>属性的默认样式支持，说实话，往往比较“佛系”，不够突出。有时候，一个只读的输入框，除了光标可能变了一下，其他地方跟普通输入框几乎没<a style="color:#f60; text-decoration:underline;" title="区别" href="https://www.php.cn/zt/27988.html" target="_blank">区别</a>，这会让用户感到困惑：“我到底能不能改这里？”</p>
<p>要解决这个问题，核心思想就是“强化视觉对比”。我们需要主动介入，用CSS覆盖掉那些不够鲜明的默认样式，给只读和禁用状态一个“专属的身份标识”。</p>
<p><strong>强化只读状态的视觉对比：</strong></p>
<ul>
<li>
<strong>背景色：</strong> 这是最直观的区分方式。给只读输入框一个浅灰色（<pre class="brush:php;toolbar:false;">#f0f0f0</pre>或更浅的颜色），而可编辑的输入框保持白色。这样，用户一眼就能看出哪些是“信息展示区”，哪些是“数据输入区”。</li>
<li>
<strong>边框：</strong> 默认边框可能不够明显。可以把只读输入框的边框颜色调浅一点，或者用虚线边框，甚至完全去掉边框，只保留背景色，这取决于你想要的效果。比如，<pre class="brush:php;toolbar:false;">border: 1px solid #ddd;</pre> 甚至 <pre class="brush:php;toolbar:false;">border: none;</pre>。</li>
<li>
<strong>文本颜色：</strong> 保持可读性的前提下，可以稍微调暗文本颜色，比如<pre class="brush:php;toolbar:false;">color: #666;</pre>，与可编辑状态的<pre class="brush:php;toolbar:false;">#333</pre>形成对比。</li>
<li>
<strong>光标样式：</strong> <pre class="brush:php;toolbar:false;">cursor: default;</pre> 是必须的，它明确告诉用户这里不能输入。</li>
<li>
<strong>焦点处理：</strong> 很多时候，只读元素也能获得焦点。但既然是只读，焦点时的外边框（<pre class="brush:php;toolbar:false;">outline</pre>）就显得多余，甚至会误导用户。所以，<pre class="brush:php;toolbar:false;">outline: none;</pre> 是个好习惯。</li>
</ul>
<p><strong>代码示例（强化版）：</strong></p><pre class='brush:css;toolbar:false;'>/* 强化只读状态的视觉效果 */
input[readonly],
textarea[readonly] {
    background-color: #f8f8f8; /* 极浅灰色背景 */
    border: 1px dashed #e0e0e0; /* 虚线边框，暗示不可编辑 */
    color: #777; /* 稍浅的文字颜色 */
    cursor: default;
    padding: 8px 12px; /* 保持与普通输入框一致的内边距，避免跳动 */
    border-radius: 4px; /* 统一圆角 */
    /* 移除所有可能影响只读状态的阴影或过渡效果 */
    box-shadow: none;
    transition: background-color 0.2s ease-in-out; /* 增加一点平滑过渡 */
}

input[readonly]:hover,
textarea[readonly]:hover {
    background-color: #f5f5f5; /* 鼠标悬停时略微变色，但仍是只读 */
}

input[readonly]:focus,
textarea[readonly]:focus {
    background-color: #f8f8f8; /* 焦点时保持只读样式 */
    border-color: #e0e0e0;
    outline: none; /* 移除浏览器默认的焦点轮廓 */
}</pre><p>通过这些更细致的样式调整，只读输入框的“不可编辑”属性就能一目了然了。我发现，这种视觉上的清晰度，对于提升用户体验来说，简直是事半功倍。</p>
<h3>只读与禁用：功能上有何本质区别？避免混淆，选择正确状态</h3>
<p>在表单设计中，<pre class="brush:php;toolbar:false;">readonly</pre>和<pre class="brush:php;toolbar:false;">disabled</pre>这两个HTML属性常常让人纠结，它们在视觉上都能让元素看起来“不可编辑”，但骨子里，它们的行为逻辑和适用场景却大相径庭。理解这些本质区别，是正确使用它们的关键，否则可能会导致<a style="color:#f60; text-decoration:underline;" title="数据丢失" href="https://www.php.cn/zt/38926.html" target="_blank">数据丢失</a>或用户体验受损。</p>
<p><strong><pre class="brush:php;toolbar:false;">readonly</pre> (只读) 属性：</strong></p>
<ul>
<li>
<strong>核心功能：</strong> 阻止用户修改输入框或文本域的值。用户可以查看、选中、复制其中的内容。</li>
<li>
<strong>数据提交：</strong> <strong>重要！</strong> 带有<pre class="brush:php;toolbar:false;">readonly</pre>属性的元素，其值会随着表单一起提交到服务器。</li>
<li>
<strong>交互性：</strong> 用户可以聚焦（tab键可以选中），可以复制内容，但不能输入或修改。</li>
<li>
<strong>适用场景：</strong><ul>
<li>显示预设的、用户不可修改但又需要提交的数据，比如一个系统生成的订单号、一个不可更改的用户ID。</li>
<li>展示计算结果，这些结果需要随<a style="color:#f60; text-decoration:underline;" title="表单提交" href="https://www.php.cn/zt/39720.html" target="_blank">表单提交</a>，但不需要用户手动输入。</li>
<li>在某些编辑流程中，某个字段在特定条件下暂时不允许修改，但其当前值仍是有效数据。</li>
</ul>
</li>
</ul>
<p><strong><pre class="brush:php;toolbar:false;">disabled</pre> (禁用) 属性：</strong></p>
<ul>
<li>
<strong>核心功能：</strong> 使表单元素完全不可用。用户不能与它进行任何交互（不能点击、不能输入、不能选中、不能聚焦）。</li>
<li>
<strong>数据提交：</strong> <strong>极其重要！</strong> 带有<pre class="brush:php;toolbar:false;">disabled</pre>属性的元素，其值<strong>不会</strong>随着表单一起提交到服务器。</li>
<li>
<strong>交互性：</strong> 元素变灰，不可聚焦，鼠标指针通常变为“禁止”符号。对辅助技术（如屏幕阅读器）而言，它也是不可操作的。</li>
<li>
<strong>适用场景：</strong><ul>
<li>当某个功能或选项在当前状态下完全不可用时（例如，未选择前置选项时，后续选项被禁用）。</li>
<li>在表单提交后，为防止用户重复提交或修改，将所有输入元素禁用。</li>
<li>某些表单元素需要根据用户权限或业务逻辑动态启用/禁用。</li>
</ul>
</li>
</ul>
<p><strong>我的看法和经验：</strong></p>
<p>在我多年的<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>实践中，我发现很多人会混淆这两者，尤其是在处理表单提交逻辑时。如果一个字段的值对后端至关重要，但又不想让用户修改，那么<pre class="brush:php;toolbar:false;">readonly</pre>是你的朋友。而如果一个字段在当前语境下完全不相关，或者其存在本身就是一种“错误”状态，且不希望其值被提交，那<pre class="brush:php;toolbar:false;">disabled</pre>就是正确的选择。</p>
<p>举个例子，用户注册时，如果<a style="color:#f60; text-decoration:underline;" title="邮箱" href="https://www.php.cn/zt/21185.html" target="_blank">邮箱</a>已经存在，你可以让邮箱输入框变成<pre class="brush:php;toolbar:false;">readonly</pre>并显示已注册的邮箱，同时旁边提示“此邮箱已注册”，引导用户找回密码。但如果你希望用户重新输入一个邮箱，那么旧的邮箱输入框就应该<pre class="brush:php;toolbar:false;">disabled</pre>掉，或者直接清空，因为它不再是有效数据。</p>
<p>所以，在选择时，先问自己两个问题：</p><div class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/ai/2237" title="Seko"><img
										src="https://img.php.cn/upload/ai_manual/001/246/273/68d8db3477cef612.png" alt="Seko"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/ai/2237" title="Seko">Seko</a>
									<p>商汤科技推出的创编一体的AI短视频创作Agent</p>
								</div>
								<a href="/ai/2237" title="Seko" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div>
<ol>
<li>这个元素的值，我需要它随表单提交吗？</li>
<li>我希望用户能与这个元素进行任何形式的交互吗（哪怕只是选中或聚焦）？</li>
</ol>
<p>这两个问题的答案，基本就能帮你做出正确的判断。</p>
<h3>如何优雅地处理只读/禁用状态下的交互反馈？用户体验优化技巧</h3>
<p>光是让只读和禁用元素看起来不一样还不够，真正好的用户体验，体现在细节和交互反馈上。一个“优雅”的只读/禁用状态，不仅仅是视觉上的区分，更应该在用户尝试交互时，给出恰当的反馈，避免困惑和挫败感。</p>
<p><strong>1. 鼠标指针的精细化控制：</strong></p>
<ul>
<li>
<strong>只读 (<pre class="brush:php;toolbar:false;">readonly</pre>)：</strong> 理想情况下，光标应该保持<pre class="brush:php;toolbar:false;">default</pre>（默认箭头），表明这里是文本，可以选中，但不能输入。如果设置成<pre class="brush:php;toolbar:false;">text</pre>（文本输入光标），可能会误导用户尝试输入。</li>
<li>
<strong>禁用 (<pre class="brush:php;toolbar:false;">disabled</pre>)：</strong> 毫无疑问，<pre class="brush:php;toolbar:false;">not-allowed</pre>（禁止符号）是最佳选择。它明确地告诉用户“这里不能点，不能操作”。</li>
</ul>
<p><strong>2. 焦点管理与辅助功能：</strong></p>
<ul>
<li>
<strong>只读 (<pre class="brush:php;toolbar:false;">readonly</pre>)：</strong><ul>
<li>只读元素仍然可以获得焦点（通过Tab键），这对于需要复制其中内容的场景是很有用的。</li>
<li>在焦点时，避免出现默认的蓝色或黑色边框，因为它通常暗示“可编辑”。使用<pre class="brush:php;toolbar:false;">outline: none;</pre>，或者自定义一个不那么突兀的焦点样式，比如一个非常细的灰色边框。</li>
<li>对于屏幕阅读器用户，<pre class="brush:php;toolbar:false;">readonly</pre>元素仍然会被朗读，并且会被标识为只读。</li>
</ul>
</li>
<li>
<strong>禁用 (<pre class="brush:php;toolbar:false;">disabled</pre>)：</strong><ul>
<li>禁用元素不应获得焦点。浏览器通常会自动处理这一点，但如果遇到自定义组件，可能需要确保<pre class="brush:php;toolbar:false;">tabindex="-1"</pre>并结合<pre class="brush:php;toolbar:false;">pointer-events: none;</pre>。</li>
<li>对于屏幕阅读器，<pre class="brush:php;toolbar:false;">disabled</pre>元素会被标识为禁用，并且通常会被跳过，或者告知用户其不可用。</li>
</ul>
</li>
</ul>
<p><strong>3. 悬停（Hover）提示：</strong></p>
<p>这是一个非常重要的用户体验增强点。当用户将鼠标悬停在一个被禁用或只读的元素上时，可以提供一个简短的提示，解释为什么它处于这种状态。这通常需要结合JavaScript来实现，但CSS可以负责提示框的样式。</p>
<ul><li>
<strong>示例（结合JS和CSS）：</strong><pre class='brush:html;toolbar:false;'><input type="text" value="订单已完成，不可修改" readonly data-tooltip="订单状态已锁定">
<button disabled data-tooltip="请先选择商品">提交订单</button></pre><pre class='brush:css;toolbar:false;'>/* 假设你有一个通用的tooltip样式 */
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    /* ... 其他tooltip样式，如背景、颜色、定位等 ... */
    white-space: nowrap;
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    z-index: 100;
    /* 可能需要JS来精确计算位置，但CSS可以定义基本行为 */
}</pre><p>这种方式能有效减少用户的疑惑，提升界面的“亲和力”。</p>
</li></ul>
<p><strong>4. 状态切换的平滑过渡：</strong></p>
<p>如果表单元素的状态会动态地在可编辑/只读/禁用之间切换（比如通过JavaScript），那么添加CSS过渡效果会让用户体验更流畅。</p><pre class='brush:css;toolbar:false;'>input, textarea, select, button {
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}</pre><p>当JavaScript添加或移除<pre class="brush:php;toolbar:false;">readonly</pre>/<pre class="brush:php;toolbar:false;">disabled</pre>属性时，背景色、边框、文字颜色等会平滑地变化，而不是突然跳变，这让界面看起来更精致。</p>
<p><strong>我的思考：</strong></p>
<p>我个人觉得，很多时候我们只关注了功能实现，却忽略了这些微小的交互细节。一个看似简单的只读或禁用状态，背后蕴含着用户对界面“反馈”的期待。如果一个按钮是禁用的，用户点击它却没有丝毫反应，也没有任何提示，他们可能会觉得是网站出了问题，而不是自己操作不当。所以，花点心思在这些交互反馈上，绝对是值得的投入。</p>
<h3>当CSS无法满足需求时：JavaScript的介入（动态控制与复杂场景）</h3>
<p>虽然CSS在美化只读和禁用状态上表现出色，但它毕竟是“静态”的。一旦涉及到根据用户行为、数据状态或业务逻辑来动态改变表单元素的只读或禁用状态，纯CSS就显得力不从心了。这时候，JavaScript就必须登场了，它扮演着“指挥家”的角色，根据不同的条件来切换元素的“情绪”。</p>
<p><strong>1. 动态添加/移除属性：</strong></p>
<p>这是JavaScript最基本的用途，用于根据程序逻辑来控制元素的<pre class="brush:php;toolbar:false;">readonly</pre>或<pre class="brush:php;toolbar:false;">disabled</pre>属性。</p><pre class='brush:javascript;toolbar:false;'>// 获取表单元素
const myInput = document.getElementById('myInputField');
const myButton = document.getElementById('mySubmitButton');
const myCheckbox = document.getElementById('myCheckbox');

// 示例1：根据某个条件，让输入框变为只读
function makeInputReadonly(isReadonly) {
    if (isReadonly) {
        myInput.setAttribute('readonly', 'readonly'); // 添加readonly属性
        // 也可以直接设置 myInput.readOnly = true;
    } else {
        myInput.removeAttribute('readonly'); // 移除readonly属性
        // 也可以设置 myInput.readOnly = false;
    }
}

// 示例2：根据复选框的状态，启用或禁用按钮
myCheckbox.addEventListener('change', function() {
    if (this.checked) {
        myButton.removeAttribute('disabled'); // 勾选时启用按钮
        // 也可以设置 myButton.disabled = false;
    } else {
        myButton.setAttribute('disabled', 'disabled'); // 未勾选时禁用按钮
        // 也可以设置 myButton.disabled = true;
    }
});

// 初始调用
makeInputReadonly(true); // 页面加载时先设置为只读</pre><p><strong>2. 处理复杂的业务逻辑：</strong></p>
<p>在实际项目中，表单字段之间的联动关系往往很复杂。比如，只有当用户选择了某个下拉菜单项后，另一个文本输入框才变得可编辑。</p><pre class='brush:javascript;toolbar:false;'>const selectField = document.getElementById('mySelect');
const dependentInput = document.getElementById('dependentInput');

selectField.addEventListener('change', function() {
    if (this.value === 'customOption') { // 假设选择“自定义”时才可编辑
        dependentInput.removeAttribute('readonly');
        dependentInput.focus(); // 自动聚焦，提升体验
    } else {
        dependentInput.setAttribute('readonly', 'readonly');
        dependentInput.value = ''; // 清空内容，避免提交错误数据
    }
});

// 页面加载时，根据默认选择项设置初始状态
if (selectField.value !== 'customOption') {
    dependentInput.setAttribute('readonly', 'readonly');
}</pre><p><strong>3. 结合API进行数据加载与状态管理：</strong></p>
<p>当从后端API加载数据填充表单时，我们可能需要根据返回的数据状态来决定哪些字段是只读的。</p><pre class='brush:javascript;toolbar:false;'>
async function loadUserData(userId) {
    try {
        const response =</pre>					</div>
					<div class="artmoreart ">
													<div class="artdp artptit"><span></span>
								<p>相关文章</p>
							</div>
							<div class="artmores flexColumn">
																	<a class="artmrlis flexRow" href="/faq/2015432.html" title="css 浮动元素遮挡其他内容怎么办_z-index 与 clear 使用"><b></b>
										<p class="overflowclass">css 浮动元素遮挡其他内容怎么办_z-index 与 clear 使用</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2015354.html" title="css定位属性与元素对齐_如何通过left、right、top、bottom精确控制"><b></b>
										<p class="overflowclass">css定位属性与元素对齐_如何通过left、right、top、bottom精确控制</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2015338.html" title="css布局侧边栏固定内容滚动_通过 position sticky/fixed 与 flex 配合"><b></b>
										<p class="overflowclass">css布局侧边栏固定内容滚动_通过 position sticky/fixed 与 flex 配合</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2015308.html" title="css过渡动画中断或重置怎么办_利用transitionend事件监听处理"><b></b>
										<p class="overflowclass">css过渡动画中断或重置怎么办_利用transitionend事件监听处理</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2015270.html" title="css 初级项目页面滚动体验不好怎么改善_利用 overflow 控制滚动区域"><b></b>
										<p class="overflowclass">css 初级项目页面滚动体验不好怎么改善_利用 overflow 控制滚动区域</p>
									</a>
															</div>
													<div class="artmoretabs flexRow">
								<p>相关标签:</p>
								<div class="mtbs flexRow">
									<a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15716.html" target="_blank">css</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/27093.html" target="_blank">css教程</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15724.html" target="_blank">javascript</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15731.html" target="_blank">java</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15763.html" target="_blank">html</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15802.html" target="_blank">js</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15813.html" target="_blank">前端</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/16180.html" target="_blank">浏览器</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/17539.html" target="_blank">ai</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/21185.html" target="_blank">邮箱</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/27988.html" target="_blank">区别</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/38926.html" target="_blank">数据丢失</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/39720.html" target="_blank">表单提交</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=JavaScript" target="_blank">JavaScript</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=css" target="_blank">css</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=html" target="_blank">html</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=select" target="_blank">select</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=指针" target="_blank">指针</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=pointer" target="_blank">pointer</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=JS" target="_blank">JS</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=default" target="_blank">default</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=border" target="_blank">border</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=input" target="_blank">input</a>								</div>
							</div>
						
						<p class="statement">本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</p>
						<div class="lastanext flexRow">
													<a class="lastart flexRow" href="/faq/1478935.html" title="如何通过CSS的url()函数动态加载字体资源？url()优化字体样式管理"><span>上一篇：</span>如何通过CSS的url()函数动态加载字体资源？url()优化字体样式管理</a>
													<a class="nextart flexRow" href="/faq/1478994.html" title="CSS里怎么换行_CSS控制文本换行与空白处理教程"><span>下一篇：</span>CSS里怎么换行_CSS控制文本换行与空白处理教程</a>
												</div>
					</div>

					<div class="artlef-down ">
													<div class="authormore ">
								<div class="rightdTitle flexRow">
									<div class="title-left flexRow"> <b></b>
										<p>作者最新文章</p>
									</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004286.html" title="Vectr文件可导入PS吗_Vectr导入PS操作流程【基础】"><b></b>
												<p class="overflowclass">Vectr文件可导入PS吗_Vectr导入PS操作流程【基础】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 20:50</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004346.html" title="NetBeans如何运行PHP脚本_NetBeans运PHP脚本要点【精要】"><b></b>
												<p class="overflowclass">NetBeans如何运行PHP脚本_NetBeans运PHP脚本要点【精要】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:01</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004354.html" title="DesignsAI怎么根据情绪配色_DesignsAI情绪配色怎样设定【设定】"><b></b>
												<p class="overflowclass">DesignsAI怎么根据情绪配色_DesignsAI情绪配色怎样设定【设定】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:04</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004360.html" title="MetaHumanCreator连Houdini如何细调AI动画_MetaHumanCreator连Houdini细调AI动画法【指南】"><b></b>
												<p class="overflowclass">MetaHumanCreator连Houdini如何细调AI动画_MetaHumanCreator连Houdini细调AI动画法【指南】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:06</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004370.html" title="Bing国际版简洁搜索入口-Bing官方网页高效访问通道"><b></b>
												<p class="overflowclass">Bing国际版简洁搜索入口-Bing官方网页高效访问通道</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:09</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004381.html" title="TV浏览器在线安装地址 电视浏览器官网直达入口"><b></b>
												<p class="overflowclass">TV浏览器在线安装地址 电视浏览器官网直达入口</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:13</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004385.html" title="AI写作鹅怎么快速起爆款标题_给主题加热点词提点击欲【诀窍】"><b></b>
												<p class="overflowclass">AI写作鹅怎么快速起爆款标题_给主题加热点词提点击欲【诀窍】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:14</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004416.html" title="Synthesia如何快速做AI动画视频_Synthesia快速制作AI动画视频窍门【速学】"><b></b>
												<p class="overflowclass">Synthesia如何快速做AI动画视频_Synthesia快速制作AI动画视频窍门【速学】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:23</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004419.html" title="html空格符号怎么打_常用html空格代码输入方式【汇总】"><b></b>
												<p class="overflowclass">html空格符号怎么打_常用html空格代码输入方式【汇总】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:24</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2004434.html" title="AI绘画PixAI如何换装不违和_AI绘画PixAI换装自然法【攻略】"><b></b>
												<p class="overflowclass">AI绘画PixAI如何换装不违和_AI绘画PixAI换装自然法【攻略】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-19 21:28</p>
											</div>
										</div>
								</div>
															</div>
						
						<div class="moreAi ">
							<div class="rightdTitle flexRow">
								<div class="title-left flexRow"> <b></b>
									<p>热门AI工具</p>
								</div>
								<a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a>
							</div>

							<div class="moreailist flexRow">
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/723" title="DeepSeek" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="DeepSeek" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">DeepSeek</p>
												<p class="overflowclass abriptwo">幻方量化公司旗下的开源大模型平台</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/code/open-plat" title="开放平台" class="aidcontbp flexRow flexcenter">开放平台</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/726" title="豆包大模型" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680204067325.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="豆包大模型" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">豆包大模型</p>
												<p class="overflowclass abriptwo">字节跳动自主研发的一系列大型语言模型</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/725" title="通义千问" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974228210.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="通义千问" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">通义千问</p>
												<p class="overflowclass abriptwo">阿里巴巴推出的全能AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/854" title="腾讯元宝" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="腾讯元宝" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">腾讯元宝</p>
												<p class="overflowclass abriptwo">腾讯混元平台推出的AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/office/docs" title="文档处理" class="aidcontbp flexRow flexcenter">文档处理</p>
																													<p href="/ai/tag/office/excel" title="Excel 表格" class="aidcontbp flexRow flexcenter">Excel 表格</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/724" title="文心一言" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974557049.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="文心一言" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">文心一言</p>
												<p class="overflowclass abriptwo">文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/1507" title="讯飞写作" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a4153cd86671.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="讯飞写作" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">讯飞写作</p>
												<p class="overflowclass abriptwo">基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																													<p href="/ai/tag/text/write" title="写作工具" class="aidcontbp flexRow flexcenter">写作工具</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/1115" title="即梦AI" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8f7c530c315.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="即梦AI" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">即梦AI</p>
												<p class="overflowclass abriptwo">一站式AI创作平台，免费AI图片和视频生成。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/image/image-titching" title="图片拼接" class="aidcontbp flexRow flexcenter">图片拼接</p>
																													<p href="/ai/tag/image/image-create" title="图画生成" class="aidcontbp flexRow flexcenter">图画生成</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/808" title="ChatGPT" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679970194596.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="ChatGPT" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">ChatGPT</p>
												<p class="overflowclass abriptwo">最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679976181507.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="智谱清言 - 免费全能的AI助手" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">智谱清言 - 免费全能的AI助手</p>
												<p class="overflowclass abriptwo">智谱清言 - 免费全能的AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/office/pdf" title="PDF 文档" class="aidcontbp flexRow flexcenter">PDF 文档</p>
																											</div>
																							</div>
										</a>
									</div>
															</div>




						</div>

					</div>


				</div>


			</div>
			<div class="conRight artdtilRight ">
				<div class="artrig-adv ">
                    <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>
				<div class="hotzt artdtzt">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关专题</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a>
					</div>
					<div class="hotztuls flexColumn">
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jsszcd" class="aClass flexRow hotzta" title="js获取数组长度的方法"><img
										src="https://img.php.cn/upload/subject/202306/20/2023062017455159983.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js获取数组长度的方法" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jsszcd" class="aClass flexRow hotztra overflowclass" title="js获取数组长度的方法">js获取数组长度的方法</a>
									<p class="aClass flexRow hotztrp overflowclass">在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">557</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.06.20</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jssxym" class="aClass flexRow hotzta" title="js刷新当前页面"><img
										src="https://img.php.cn/upload/subject/202307/04/2023070409584996422.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js刷新当前页面" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jssxym" class="aClass flexRow hotztra overflowclass" title="js刷新当前页面">js刷新当前页面</a>
									<p class="aClass flexRow hotztrp overflowclass">js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">394</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.07.04</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jssswr" class="aClass flexRow hotzta" title="js四舍五入"><img
										src="https://img.php.cn/upload/subject/202307/04/2023070410160418152.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js四舍五入" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jssswr" class="aClass flexRow hotztra overflowclass" title="js四舍五入">js四舍五入</a>
									<p class="aClass flexRow hotztrp overflowclass">js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">754</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.07.04</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jsscjddff" class="aClass flexRow hotzta" title="js删除节点的方法"><img
										src="https://img.php.cn/upload/subject/202309/01/2023090117024286721.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js删除节点的方法" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jsscjddff" class="aClass flexRow hotztra overflowclass" title="js删除节点的方法">js删除节点的方法</a>
									<p class="aClass flexRow hotztrp overflowclass">js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">478</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.01</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/javascriptzy" class="aClass flexRow hotzta" title="JavaScript转义字符"><img
										src="https://img.php.cn/upload/subject/202309/04/2023090411084899588.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="JavaScript转义字符" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/javascriptzy" class="aClass flexRow hotztra overflowclass" title="JavaScript转义字符">JavaScript转义字符</a>
									<p class="aClass flexRow hotztrp overflowclass">JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">454</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.04</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jsscsjsdff" class="aClass flexRow hotzta" title="js生成随机数的方法"><img
										src="https://img.php.cn/upload/subject/202309/04/2023090411300156430.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js生成随机数的方法" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jsscsjsdff" class="aClass flexRow hotztra overflowclass" title="js生成随机数的方法">js生成随机数的方法</a>
									<p class="aClass flexRow hotztrp overflowclass">js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">1031</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.04</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/rhqyjavascrip" class="aClass flexRow hotzta" title="如何启用JavaScript"><img
										src="https://img.php.cn/upload/subject/202309/12/2023091210411962381.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="如何启用JavaScript" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/rhqyjavascrip" class="aClass flexRow hotztra overflowclass" title="如何启用JavaScript">如何启用JavaScript</a>
									<p class="aClass flexRow hotztrp overflowclass">JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">658</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.12</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jssymbol" class="aClass flexRow hotzta" title="Js中Symbol类详解"><img
										src="https://img.php.cn/upload/subject/202309/20/2023092011360778721.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Js中Symbol类详解" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jssymbol" class="aClass flexRow hotztra overflowclass" title="Js中Symbol类详解">Js中Symbol类详解</a>
									<p class="aClass flexRow hotztrp overflowclass">javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">554</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.20</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/htmlbjxgjchj" class="aClass flexRow hotzta" title="html编辑相关教程合集"><img
										src="https://img.php.cn/upload/subject/202601/21/2026012121462999524.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="html编辑相关教程合集" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/htmlbjxgjchj" class="aClass flexRow hotztra overflowclass" title="html编辑相关教程合集">html编辑相关教程合集</a>
									<p class="aClass flexRow hotztrp overflowclass">本专题整合了html编辑相关教程合集，阅读专题下面的文章了解更多详细内容。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">37</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2026.01.21</p>
										</div>
									</div>
								</div>
							</div>
											</div>
				</div>

				<div class="hotdownload ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>热门下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a>
					</div>
					<div class="hotdownTab">
						<div class="hdTabs flexRow">
							<div class="check" data-id="onef">网站特效 <b></b> </div> /
							<div class="" data-id="twof">网站源码 <b></b></div> /
							<div class="" data-id="threef">网站素材 <b></b></div> /
							<div class="" data-id="fourf">前端模板 <b></b></div>
						</div>
						<ul class="onef">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="门户网站jQuery相册代码" href="/xiazai/js/8574"><span>[图片特效]</span><span>门户网站jQuery相册代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="html5+css3现代感注册表单" href="/xiazai/js/8573"><span>[表单按钮]</span><span>html5+css3现代感注册表单</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery鼠标经过图片翻牌切换代码" href="/xiazai/js/8572"><span>[图片特效]</span><span>jQuery鼠标经过图片翻牌切换代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery电网分分步骤注册表单代码" href="/xiazai/js/8571"><span>[表单按钮]</span><span>jQuery电网分分步骤注册表单代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="Tooltip验证提示HTML5表单" href="/xiazai/js/8570"><span>[表单按钮]</span><span>Tooltip验证提示HTML5表单</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="css3实现结账Form表单 css3实现结账Form表单网页特效" href="/xiazai/js/8569"><span>[表单按钮]</span><span>css3实现结账Form表单 css3实现结账Form表单网页特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="简单js图片加载从模糊到清晰代码" href="/xiazai/js/8568"><span>[图片特效]</span><span>简单js图片加载从模糊到清晰代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="表单Checkbox元素美化特效" href="/xiazai/js/8567"><span>[表单按钮]</span><span>表单Checkbox元素美化特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="正益无线首页jQuery焦点图" href="/xiazai/js/8566"><span>[图片特效]</span><span>正益无线首页jQuery焦点图</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery仿去哪儿城市选择代码" href="/xiazai/js/8565"><span>[表单按钮]</span><span>jQuery仿去哪儿城市选择代码</span></a>
									</div>
								</li>
													</ul>
						<ul class="twof" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11355" title="openaishop"><span>[电商源码]</span><span>openaishop</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313"><span>[其它模板]</span><span>思翔企(事)业单位文件柜 build 20080313</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0"><span>[企业站源码]</span><span>雅龙智能装备工业设备类WordPress主题1.0</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11352" title="威发卡自动发卡系统"><span>[电商源码]</span><span>威发卡自动发卡系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11351" title="卡密分发系统"><span>[电商源码]</span><span>卡密分发系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11350" title="中华陶瓷网"><span>[电商源码]</span><span>中华陶瓷网</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11349" title="简洁粉色食品公司网站"><span>[电商源码]</span><span>简洁粉色食品公司网站</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11348" title="极速网店系统"><span>[电商源码]</span><span>极速网店系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统"><span>[电商源码]</span><span>淘宝妈妈_淘客推广系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11346" title="积客B2SCMS商城系统"><span>[电商源码]</span><span>积客B2SCMS商城系统</span> </a>
									</div>
								</li>
													</ul>
						<ul class="threef" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4234" title="手绘文艺书本咖啡海报矢量素材"><span>[网站素材]</span><span>手绘文艺书本咖啡海报矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4233" title="情人节香水宣传折页PSD模板设计下载"><span>[网站素材]</span><span>情人节香水宣传折页PSD模板设计下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4232" title="2026新春喜庆红色边框矢量素材"><span>[网站素材]</span><span>2026新春喜庆红色边框矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4231" title="绿色风格旅行竖版海报PSD素材下载"><span>[网站素材]</span><span>绿色风格旅行竖版海报PSD素材下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4230" title="极简非洲草原风景装饰矢量素材"><span>[网站素材]</span><span>极简非洲草原风景装饰矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4229" title="网络金融货币宣传海报设计下载"><span>[网站素材]</span><span>网络金融货币宣传海报设计下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4228" title="复古手绘红酒奶酪菜单矢量模板"><span>[网站素材]</span><span>复古手绘红酒奶酪菜单矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4227" title="橙色复古户外探险卡片矢量模板"><span>[网站素材]</span><span>橙色复古户外探险卡片矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4226" title="小清新情人节海报传单模板PSD下载"><span>[网站素材]</span><span>小清新情人节海报传单模板PSD下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4225" title="复古户外探险森林黑熊矢量素材"><span>[网站素材]</span><span>复古户外探险森林黑熊矢量素材</span> </a>
									</div>
								</li>
													</ul>
						<ul class="fourf" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8590"  title="驾照考试驾校HTML5网站模板"><span>[前端模板]</span><span>驾照考试驾校HTML5网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8589"  title="驾照培训服务机构宣传网站模板"><span>[前端模板]</span><span>驾照培训服务机构宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8588"  title="HTML5房地产公司宣传网站模板"><span>[前端模板]</span><span>HTML5房地产公司宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8587"  title="新鲜有机肉类宣传网站模板"><span>[前端模板]</span><span>新鲜有机肉类宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8586"  title="响应式天气预报宣传网站模板"><span>[前端模板]</span><span>响应式天气预报宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8585"  title="房屋建筑维修公司网站CSS模板"><span>[前端模板]</span><span>房屋建筑维修公司网站CSS模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8584"  title="响应式志愿者服务网站模板"><span>[前端模板]</span><span>响应式志愿者服务网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8583"  title="创意T恤打印店网站HTML5模板"><span>[前端模板]</span><span>创意T恤打印店网站HTML5模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8582"  title="网页开发岗位简历作品展示网页模板"><span>[前端模板]</span><span>网页开发岗位简历作品展示网页模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8581"  title="响应式人力资源机构宣传网站模板"><span>[前端模板]</span><span>响应式人力资源机构宣传网站模板</span> </a>
									</div>
								</li>
													</ul>
					</div>
					<script>
						$('.hdTabs>div').click(function (e) {
							$('.hdTabs>div').removeClass('check')
							$(this).addClass('check')
							$('.hotdownTab>ul').css('display', 'none')
							$('.' + e.currentTarget.dataset.id).show()
						})
					</script>

				</div>

				<div class="artrig-adv ">
					<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>



				<div class="xgarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php商城系统" href="/xiazai/code/11178">php商城系统</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="淘源码商城PHP淘宝查信誉" href="/xiazai/code/11177">淘源码商城PHP淘宝查信誉</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP房产程序[BBWPS]" href="/xiazai/code/11165">PHP房产程序[BBWPS]</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP简约自动发卡平台个人版" href="/xiazai/code/11128">PHP简约自动发卡平台个人版</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="ERMEB域名PHP离线网络授权系统" href="/xiazai/code/11040">ERMEB域名PHP离线网络授权系统</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="Difeye-敏捷的轻量级PHP框架" href="/xiazai/code/11037">Difeye-敏捷的轻量级PHP框架</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="大泉州汽车网PHP整站程序" href="/xiazai/code/10963">大泉州汽车网PHP整站程序</a></div>
										</div>

				</div>

				<div class="jpkc">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>精品课程</p>
						</div>
						<a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a>
					</div>
					<div class=" jpkcTab">
						<div class=" jpkcTabs flexRow">
							<div class="check" data-id="onefd">相关推荐 <b></b> </div> /
							<div class="" data-id="twofd">热门推荐 <b></b></div> /
							<div class="" data-id="threefd">最新课程 <b></b></div>
						</div>
						<div class="onefd jpktabd">
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1683.html" title="Sass 教程">
									<img src="https://img.php.cn/upload/course/000/000/090/689da3d823e1e854.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Sass 教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1683.html" title="Sass 教程"
										class="rirightp overflowclass">Sass 教程</a>

									<div class="risrdown flexRow">
										<p>共14课时 | 0.8万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1673.html" title="Bootstrap 5教程">
									<img src="https://img.php.cn/upload/course/000/000/090/6899a24dcdf73781.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Bootstrap 5教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1673.html" title="Bootstrap 5教程"
										class="rirightp overflowclass">Bootstrap 5教程</a>

									<div class="risrdown flexRow">
										<p>共46课时 | 3万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1660.html" title="CSS教程">
									<img src="https://img.php.cn/upload/course/000/000/090/68774990cfb6f919.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="CSS教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1660.html" title="CSS教程"
										class="rirightp overflowclass">CSS教程</a>

									<div class="risrdown flexRow">
										<p>共754课时 | 22.1万人学习</p>
									</div>
								</div>
							</div>
												</div>

						<div class="twofd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
										<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
											class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 9.5万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)">
										<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"
											class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>

										<div class="risrdown flexRow">
											<p>共79课时 | 151.4万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程">
										<img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"
											class="rirightp overflowclass">phpStudy极速入门视频教程</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 53.4万人学习</p>
										</div>
									</div>
								</div>
													</div>

						<div class="threefd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通">
											<img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新Python教程 从入门到精通" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通"
												class="rirightp overflowclass">最新Python教程 从入门到精通</a>

											<div class="risrdown flexRow">
												<p>共4课时 | 11.6万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
												class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共6课时 | 9.5万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="PHP新手语法线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学"
												class="rirightp overflowclass">PHP新手语法线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共13课时 | 0.9万人学习</p>
											</div>
										</div>
									</div>
														</div>
						<script>
							$('.jpkcTabs>div').click(function (e) {
								$('.jpkcTabs>div').removeClass('check')
								$(this).addClass('check')
								$('.jpkcTab .jpktabd').css('display', 'none')
								$('.' + e.currentTarget.dataset.id).show()
							})
						</script>

					</div>
				</div>

				<div class="zxarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>最新文章</p>
						</div>
						<a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 想让元素在焦点变化时平滑过渡怎么办_设置属性过渡持续时间和缓动函数" href="/faq/2015475.html">css 想让元素在焦点变化时平滑过渡怎么办_设置属性过渡持续时间和缓动函数</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css伪类:focus输入框样式如何自定义_通过聚焦状态和边框颜色实现" href="/faq/2015454.html">css伪类:focus输入框样式如何自定义_通过聚焦状态和边框颜色实现</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css flexbox 是否适合做整体页面布局_通过使用场景分析说明" href="/faq/2015438.html">css flexbox 是否适合做整体页面布局_通过使用场景分析说明</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 浮动元素遮挡其他内容怎么办_z-index 与 clear 使用" href="/faq/2015432.html">css 浮动元素遮挡其他内容怎么办_z-index 与 clear 使用</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css定位属性与元素对齐_如何通过left、right、top、bottom精确控制" href="/faq/2015354.html">css定位属性与元素对齐_如何通过left、right、top、bottom精确控制</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css布局侧边栏固定内容滚动_通过 position sticky/fixed 与 flex 配合" href="/faq/2015338.html">css布局侧边栏固定内容滚动_通过 position sticky/fixed 与 flex 配合</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css过渡动画中断或重置怎么办_利用transitionend事件监听处理" href="/faq/2015308.html">css过渡动画中断或重置怎么办_利用transitionend事件监听处理</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 初级项目页面滚动体验不好怎么改善_利用 overflow 控制滚动区域" href="/faq/2015270.html">css 初级项目页面滚动体验不好怎么改善_利用 overflow 控制滚动区域</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 设置最小宽度会改变盒模型吗_从尺寸限制与盒模型关系解析" href="/faq/2015173.html">css 设置最小宽度会改变盒模型吗_从尺寸限制与盒模型关系解析</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 想让网格元素在手机端堆叠怎么办_使用网格列数调整和媒体查询实现堆叠" href="/faq/2015005.html">css 想让网格元素在手机端堆叠怎么办_使用网格列数调整和媒体查询实现堆叠</a></div>
											</div>

				</div>






			</div>



		</div>

	</div>
	<!--底部-->
	<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow"  title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow"  title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow"  title="举报中心" class="cBlack">举报中心</a>
                        <a   href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"   title="讲师合作" class="cBlack">讲师合作</a>
                        <a  target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow"  title="广告合作" class="cBlack">广告合作</a>
                        <a  target="_blank" href="/new/"    title="最新文章列表" class="cBlack">最新更新</a>
                                                <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
                    <dd class="cont2">
                      <span class="ylwTopBox">
                        <a   href="javascript:;"  class="cBlack"><b class="icon1"></b>关注服务号</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>微信扫码<br/>关注PHP中文网服务号</p>
                          <img src="/static/images/examples/text16.png"/>
                        </em>
                      </span>
                        <span class="ylwTopBox">
                        <a   href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes"  class="cBlack"><b class="icon2"></b>技术交流群</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>QQ扫码<br/>加入技术交流群</p>
                          <img src="/static/images/examples/text18.png"/>
                        </em>
                      </span>
                        <div class="clear"></div>
                    </dd>
                </dl>
                
            </div>
            <div class="phpFootRight">
                <div class="phpFootMsg">
                    <span><img src="/static/images/examples/text17.png"/></span>
                    <dl>
                        <dt>PHP中文网订阅号</dt>
                        <dd>每天精选资源文章推送</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="phpFootCode">
        <div class="phpFootCodeIn"><p>Copyright 2014-2026 <a   href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a   href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a   href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><b></b></a></div>
    </div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>

<script src="/static/js/cdn.js?v=1.0.1"></script>



	<!--底部 end-->
	<!-- content -->
	<!--
    <div class="phpFudong">
        <div class="phpFudongIn">
            <div class="phpFudongImg"></div>
            <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div>
            <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
            <div class="phpFudongCode"><a   href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
            <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
            <div class="clear"></div>
        </div>
    </div>
-->	<!--底部浮动层 end-->
	<!--侧导航-->
	<style>
    .layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="/k24.html"  class="hover" title="PHP学习">
                    <b class="icon1"></b>
                    <p>PHP学习</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="https://www.php.cn/blog/detail/1047189.html" >
                    <b class="icon2"></b>
                    <p>技术支持</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="#">
                    <b class="icon6"></b>
                    <p>返回顶部</p>
                </a>
            </div>
        </div>
    </li>
</div>
	</body>

</html>

<script type="text/javascript" src="/hitsUp?type=article&id=1478987&time=1769049579">
</script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1769049579"></script>
<script>
	article_status = "1522150";
</script>
<input type="hidden" id="verifycode" value="/captcha.html">
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>
	

<script>
	function setCookie(name, value, iDay) { //name相当于键，value相当于值，iDay为要设置的过期时间（天）
		var oDate = new Date();
		oDate.setDate(oDate.getDate() + iDay);
		document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
	}

	function getCookie(name) {
		var cookieArr = document.cookie.split(";");
		for (var i = 0; i < cookieArr.length; i++) {
			var cookiePair = cookieArr[i].split("=");
			if (name == cookiePair[0].trim()) {
				return decodeURIComponent(cookiePair[1]);
			}
		}
		return null;
	}
</script>


<!-- Matomo -->
<script>
	var _paq = window._paq = window._paq || [];
	/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
	_paq.push(['trackPageView']);
	_paq.push(['enableLinkTracking']);
	(function () {
		var u = "https://tongji.php.cn/";
		_paq.push(['setTrackerUrl', u + 'matomo.php']);
		_paq.push(['setSiteId', '11']);
		var d = document,
			g = d.createElement('script'),
			s = d.getElementsByTagName('script')[0];
		g.async = true;
		g.src = u + 'matomo.js';
		s.parentNode.insertBefore(g, s);
	})();
</script>
<!-- End Matomo Code -->

<script>
	setCookie('is_article', 1, 1);
</script>

<script>
	var is_login = "0";
        var show = 0;
        var ceng = getCookie('ceng');
        //未登录复制显示登录按钮
        if(is_login == 0 && false){
            $(".code").hover(function(){
                $(this).find('.contentsignin').show();
            },function(){
                $(this).find('.contentsignin').hide();
            });
            //不给复制
            $('.code').bind("cut copy paste",function(e) {
                e.preventDefault();
            });
            $('.code .contentsignin').click(function(){
                $(document).trigger("api.loginpopbox");
            })
        }else{
            // 获取所有的 <pre> 元素
            var preElements = document.querySelectorAll('pre');
            preElements.forEach(function(preElement) {
                // 创建复制按钮
                var copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.textContent = '复制';
                // 添加点击事件处理程序
                copyButton.addEventListener('click', function() {
                    // 获取当前按钮所属的 <pre> 元素中的文本内容
                    var textContent = preElement.textContent.trim();
                    // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容
                    var tempTextarea = document.createElement('textarea');
                    tempTextarea.value = textContent;
                    // 将临时 textarea 添加到文档中
                    document.body.appendChild(tempTextarea);
                    // 选中临时 textarea 中的文本内容并执行复制操作
                    tempTextarea.select();
                    document.execCommand('copy');
                    // 移除临时 textarea 元素
                    document.body.removeChild(tempTextarea);
                    // 更新按钮文本为 "已复制"
                    this.textContent = '已复制';
                });

                // 创建AI写代码按钮
                var aiButton = document.createElement('button');
                aiButton.className = 'copy-button';
                aiButton.textContent = 'AI写代码';
                aiButton.style.marginLeft = '5px';
                aiButton.style.marginRight = '5px';
                // 添加点击事件处理程序
                aiButton.addEventListener('click', function() {
                // Generate a random number between 0 and 1
                        var randomChance = Math.random();

                    // If the random number is less than 0.5, open the first URL, else open the second
                    if (randomChance < 0.5) {
                        window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank');
                    } else {
                        window.open('https://click.aliyun.com/m/1000402709/', '_blank');
                    }
                });

                // 将按钮添加到 <pre> 元素前面
                preElement.parentNode.insertBefore(copyButton, preElement);
                preElement.parentNode.insertBefore(aiButton, preElement);
        });
        }
</script>