HTML 表单元素-html教程-PHP中文网

语法和示例

11。 “”元素

12. “<textarea>” element

Conclusion

首页

web前端

html教程

HTML 表单元素

PHPz

Sep 04, 2024 pm 04:14 PM

html html5 HTML Tutorial HTML Properties HTML tags

在Web开发技术（尤其是前端）中，“HTML”是我们用来显示网页（我们在网站上看到的页面）的基本或主要标记语言。有时，在 HTML 页面中，与其他内容显示一起，我们还需要接受一些用户输入（尤其是在动态网站中）。为了在 HTML 页面中获取用户输入，我们需要使用多个表单元素来正确创建这些表单，并且在这些表单的帮助下，我们正确获取用户输入并将这些输入（数据）放入我们的内部数据库中：后端。现在，我们知道 HTML 代码是在各种标签元素 (<>) 下编写的，因此，基本上，“HTML 表单元素”是在“

”内部使用的那些元素。标签，这些元素以及其他标准和独特的属性也给出了表单和结构，这让用户知道如何处理表单以及如何以结构方式进行。

解释 HTML 表单元素（包括语法和输出示例）

由于有多个 HTML 表单元素来创建表单并以结构化方式赋予表单适当的外观，因此下面对其中一些元素进行一一解释。

SL No.	Tags	Meanings / Descriptions
1		To define a HTML form for user inputs
2		To define input control
3		To specify a list of pre-defined options
4		To define group related elements
5		To define a secure input
6		To define a label of input
7		To define a caption for fieldset
8		To define a group of similar options.
9		To define an option for the drop-down.
10		To define a result
11		To define a list of the drop-down.
12	</p> </td> <td width="375"> <em> </em> <p>To define a multiline input area.</p> </td> </tr> </tbody> </table>SL 号</td> <td width="132">标签</td> <td width="375">含义/描述</td> </tr> <tr> <td> 1</td> <td width="132"></td> <td width="375">定义用户输入的 HTML 表单</td> </tr> <tr> <td> 2</td> <td width="132"></td> <td width="375">定义输入控件</td> </tr> <tr> <td> 3</td> <td width="132"></td> <td width="375">指定预定义选项列表</td> </tr> <tr> <td> 4</td> <td width="132"></td> <td width="375">定义组相关元素</td> </tr> <tr> <td> 5</td> <td width="132"></td> <td width="375">定义安全输入</td> </tr> <tr> <td> 6</td> <td width="132"></td> <td width="375">定义输入标签</td> </tr> <tr> <td> 7</td> <td width="132"></td> <td width="375">定义字段集的标题</td> </tr> <tr> <td> 8</td> <td width="132"><optgroup></optgroup></td> <td> 定义一组相似的选项。 </td> </tr> <tr> <td> 9</td> <td width="132"> <em> </em> </td> <td> 定义下拉选项。</td> </tr> <tr> <td width="132"> <em> </em> 10</td> <td width="132"> <em> </em> </td> <td width="375"> <em> </em> 定义结果</td> </tr> <tr> <td width="132"> <em> </em> 11</td> <td width="132"> <em> </em> </td> <td width="375"> <em> </em> 定义下拉列表。</td> </tr> <tr> <td width="132"> <em> </em> 12</td> <td> </td> <td width="375"> <em> </em> 定义多行输入区域。</td> </tr> 表><strong>注意：</strong>这里讨论的大多数 HTML 标签元素适用于最新的 HTML 语言版本 HTML5。标签元素<keygen> HTML5 不再支持；它实际上用于 HTML 的早期版本。 <h3 id="语法和示例">语法和示例</h3> <p>下面讨论带有输出的 HTML 表单元素的一些语法和示例：</p> <h4 id="元素">1. “”元素</h4> <p>此元素还可以包含许多其他元素，包括以下内容：</p> <ul> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <p>“</p> <form>”示例带有输入和提交按钮的元素： <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form action="/test_page.php" method="get"> Your Name: <input type="text" name="name"><br> <input type="submit" value="Submit"> </form></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/test_page.php"> Your name: <input type="text" name="Name" value="Raju"><br> <input type="submit" value="Submit"> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543770194399.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">2. “”元素</h4> <p><strong> </strong>该元素是内联元素，属于表单元素组。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form action="/test_page.php"> Input name: <input type="text" name="name"><br> Input age: <input type="text" name="age"><br> <input type="submit" value="Submit"> </form></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/action_page.php"> Input name: <input type="text" name="name" value=""><br> Input age: <input type="text" name="age" value=""><br> <input type="submit" value="Submit"> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543770458077.png" class="lazy" alt="HTML 表单元素" ><strong> </strong></p> <h4 id="元素">3. “”元素</h4> <p>它通常为 <input> 指定一个预定义的输入列表。用户可以从预定义列表中选择任何选项的元素。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input list="fruits"> <datalist id="fruits"> <option value="Mango"> <option value="Apple"> <option value="Banana"> <option value="Pomegranate"> <option value="Pineapple"> </datalist></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><! DOCTYPE html> <html> <body> <form action="/test_page.php" method="get"> <input list="fruits" name="fruit"> <datalist id="fruits"> <option value="Mango"> <option value="Apple"> <option value="Banana"> <option value="Pomegranate"> <option value="Pineapple"> </datalist> <input type="submit"> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543770666578.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">4. “”元素</h4> <p>此元素主要用于对表单中的相关元素进行分组，并在相似元素周围绘制一个框。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543771164146.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">5. “”元素</h4> <p>该元素可能位于表单之外，但它仍然可能是表单的一部分。通常，该元素用于指定一种或多种形式。 HTML5 版本中新使用此元素来生成加密密钥，以便通过基于 HTML 的网站中的表单传递加密数据。</p> <p><strong>语法：</strong></p> <p><code><keygen form="form_id"></code></p> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/test_page.php" method="get" id="secureform"> Username: <input type="text" name="user_name"> <input type="submit"> </form> <p>The below mentioned keygen field is outside of the form, but it's still a part of the above form.</p> Encryption: <keygen name="security" form="secureform"> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543771487086.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">6. “”元素</h4> <p>这个元素基本上给出了输入表单的名称，以使用户了解它应该是什么输入数据。它充当用户的指标。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label for="control id" > ... </label></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <head> <title>Example of HTML label tag</title> </head> <body> <form> <input type="radio" name="gender" value="boy" id="boy"> <label for="boy">Boy</label> <input type="radio" name="gender" value="girl" id="girl"> <label for="girl">Girl</label> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543772068306.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">7. “”元素</h4> <p>这个元素实际上定义了 </p> <fieldset> 的标题。元素。它是另一个元素的支撑元素，是组元素的一部分。 <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <head> <title>Example of HTML legend tag</title> </head> <body> <form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543772258001.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">8. “”元素</h4> <p>该元素是与组相关的元素，用于 HTML 表单中下拉列表中的选项。它可以帮助用户轻松处理长列表。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><select> <optgroup label="Kawasaki Bikes"> <option value="ninja300">Ninja 300</option> <option value="ninja450">Ninja 450</option> </optgroup> <optgroup label="Bajaj Bikes"> <option value="pulsar200">Pulsar 200</option> <option value="pulsar150">Pulsar 150</option> </optgroup> </select></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong><strong> </strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML legend tag</title> </head> <body> <select> <optgroup label="Kawasaki Bikes"> <option value="ninja300">Ninja 300</option> <option value="ninja450">Ninja 450</option> </optgroup> <optgroup label="Bajaj Bikes"> <option value="pulsar200">Pulsar 200</option> <option value="pulsar150">Pulsar 150</option> </optgroup> </select> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543772526128.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">9. “”元素</h4> <p>此元素用于表示 <select> 下下拉列表中的选项。元素;下拉列表必须至少包含一个选项。</select></p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="option-value"> ... </option></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML option tag</title> </head> <body> <form> <select> <option value="Bikes"> Bikes </option> <option value="Cars"> Cars </option> <option value="Buses"> Buses </option> </select> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543772857797.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">10。 “”元素</h4> <p>此元素主要用于显示计算的输出（例如在脚本计算中）。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><output> ... </output></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML output Tag</title> </head> <body> <form oninput="result.value=parseInt(x.value)+parseInt(y.value)"> <input type="range" id="x" value="50"> + <input type="number" id="y" value="100"> = <output name="result" for="x y"></output> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>输出：</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543773157607.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="元素">11。 “”元素</h4> <p>此元素用于从表单内的列表中进行选择。</p> <p><strong>语法：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><select> <option value="Bike">Bike</option> <option value="Car">Car</option> <option value="Bus">Bus</option> </select></pre><div class="contentsignin">登录后复制</div></div> <p><strong>代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML select Tag</title> </head> <body> <form> <select> <option value="Bike">Bike</option> <option value="Car">Car</option> <option value="Bus">Bus</option> </select> </form> </body> </html></pre><div class="contentsignin">登录后复制</div></div> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543773369304.png" class="lazy" alt="HTML 表单元素" ></p> <h4 id="lt-textarea-gt-element">12. “<textarea>” element</h4> <p>This element is used to define multi-line text inputs (e.g. for address).</p> <p><strong>Syntax:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <p>Put your Comment: <textarea cols="50" rows="6">Put here...</textarea> </p> </form></pre><div class="contentsignin">登录后复制</div></div> <p><strong>Codes:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML textarea Tag</title> </head> <body> <form> <p>Put your Comment: <textarea cols="30" rows="4">Put here...</textarea> </p> </form> </body> </html> </pre><div class="contentsignin">登录后复制</div></div> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543773533119.png" class="lazy" alt="HTML 表单元素" ></p> <h3 id="Conclusion">Conclusion</h3> <p>There are so many HTML form elements available; in this article, we have discussed some of the basic or native form elements. It helps us to create proper and functional HTML forms. The point to be noted is that most of the HTML form elements need a few attributes to be included along with them. Some of the elements depend on each other, which must be coded together. All the browsers may not display the elements which are already deprecated.</p> </fieldset> </form><p>以上是HTML 表单元素的详细内容。更多信息请关注PHP中文网其他相关文章！</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">本站声明</div> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>热门文章</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780570.html" title="R.E.P.O.能量晶体解释及其做什么（黄色晶体）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.能量晶体解释及其做什么（黄色晶体）</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780641.html" title="R.E.P.O.最佳图形设置" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最佳图形设置</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796785841.html" title="刺客信条阴影：贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影：贝壳谜语解决方案</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 周前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780618.html" title="威尔R.E.P.O.有交叉游戏吗？" class="phpgenera_Details_mainR4_bottom_title">威尔R.E.P.O.有交叉游戏吗？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh/article.html">显示更多</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>热AI工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用于从照片中去除衣服的在线人工智能工具。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免费脱衣服图片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脱衣机</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>免费生成ai无尽的。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh/ai">显示更多</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>热门文章</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780570.html" title="R.E.P.O.能量晶体解释及其做什么（黄色晶体）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.能量晶体解释及其做什么（黄色晶体）</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780641.html" title="R.E.P.O.最佳图形设置" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最佳图形设置</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796785841.html" title="刺客信条阴影：贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影：贝壳谜语解决方案</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 周前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/1796780618.html" title="威尔R.E.P.O.有交叉游戏吗？" class="phpgenera_Details_mainR4_bottom_title">威尔R.E.P.O.有交叉游戏吗？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 个月前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh/article.html">显示更多</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>热工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="记事本++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>记事本++7.3.1</h3> </a> <p>好用且免费的代码编辑器</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3汉化版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3汉化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禅工作室 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禅工作室 13.0.1</h3> </a> <p>功能强大的PHP集成开发环境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>视觉化网页开发工具</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神级代码编辑软件(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh/ai">显示更多</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>热门话题</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail邮箱登陆入口在哪里</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7546</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1382</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/steamdzhmcssmgs" title="steam的账户名称是什么格式" class="phpgenera_Details_mainR4_bottom_title">steam的账户名称是什么格式</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>83</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/winactivationkeyper" title="win11激活密钥永久" class="phpgenera_Details_mainR4_bottom_title">win11激活密钥永久</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>57</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh/faq/newyorktimesdailybrief" title="NYT连接提示和答案" class="phpgenera_Details_mainR4_bottom_title">NYT连接提示和答案</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>21</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>90</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh/faq/zt">显示更多</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600245.html" title="HTML 中的表格边框" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416492486715.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 中的表格边框" /> </a> <a href="https://www.php.cn/zh/faq/1796600245.html" title="HTML 中的表格边框" class="phphistorical_Version2_mids_title">HTML 中的表格边框</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">HTML 表格边框指南。在这里，我们以 HTML 中的表格边框为例，讨论定义表格边框的多种方法。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600238.html" title="HTML 左边距" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416482056439.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 左边距" /> </a> <a href="https://www.php.cn/zh/faq/1796600238.html" title="HTML 左边距" class="phphistorical_Version2_mids_title">HTML 左边距</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:48 PM</span> <p class="Articlelist_txts_p">HTML 左边距指南。在这里，我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600244.html" title="HTML 中的嵌套表" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416491283996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 中的嵌套表" /> </a> <a href="https://www.php.cn/zh/faq/1796600244.html" title="HTML 中的嵌套表" class="phphistorical_Version2_mids_title">HTML 中的嵌套表</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600271.html" title="HTML 表格布局" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416543391948.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 表格布局" /> </a> <a href="https://www.php.cn/zh/faq/1796600271.html" title="HTML 表格布局" class="phphistorical_Version2_mids_title">HTML 表格布局</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">HTML 表格布局指南。在这里，我们详细讨论 HTML 表格布局的值以及示例和输出。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600269.html" title="HTML 输入占位符" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416542577781.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 输入占位符" /> </a> <a href="https://www.php.cn/zh/faq/1796600269.html" title="HTML 输入占位符" class="phphistorical_Version2_mids_title">HTML 输入占位符</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">HTML 输入占位符指南。在这里，我们讨论 HTML 输入占位符的示例以及代码和输出。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600210.html" title="HTML 有序列表" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416432927533.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 有序列表" /> </a> <a href="https://www.php.cn/zh/faq/1796600210.html" title="HTML 有序列表" class="phphistorical_Version2_mids_title">HTML 有序列表</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span> <p class="Articlelist_txts_p">HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600227.html" title="在 HTML 中移动文本" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416455153019.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="在 HTML 中移动文本" /> </a> <a href="https://www.php.cn/zh/faq/1796600227.html" title="在 HTML 中移动文本" class="phphistorical_Version2_mids_title">在 HTML 中移动文本</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:45 PM</span> <p class="Articlelist_txts_p">HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh/faq/1796600246.html" title="HTML onclick 按钮" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416493797970.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML onclick 按钮" /> </a> <a href="https://www.php.cn/zh/faq/1796600246.html" title="HTML onclick 按钮" class="phphistorical_Version2_mids_title">HTML onclick 按钮</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。</p> </div> </div> <a href="https://www.php.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益在线PHP培训，帮助PHP学习者快速成长！</p> </div> <div class="footermid"> <a href="https://www.php.cn/zh/about/us.html">关于我们</a> <a href="https://www.php.cn/zh/about/disclaimer.html">免责声明</a> <a href="https://www.php.cn/zh/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <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> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744916776"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?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/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq \|\| []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY \|\| document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight \|\| document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>