HTML表单的基本组成元素有哪些

HTML表单核心由form、input、textarea、select、label和button等元素构成，form定义数据提交的action和method，input通过type属性实现多种输入功能，label提升可访问性，button支持灵活的提交与重置操作，结合fieldset和legend可对表单进行逻辑分组，提升结构清晰度与用户体验。
HTML表单的核心组成元素主要包括了容器标签
，以及一系列用于收集用户输入的控件，比如最常见的
、多行文本的
</pre>
<div class="contentsignin"></div>
</div>
<p>、下拉选择的</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p>，还有用于关联文本的</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><label></pre>
<div class="contentsignin"></div>
</div>
<p>和可点击的</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><button></pre>
<div class="contentsignin"></div>
</div>
<p>。这些是构建任何交互式表单的基础骨架。</p>
<p>HTML表单，在我看来，是Web交互最古老也最核心的机制之一。它远不止是几个输入框那么简单，它代表着用户与服务器之间数据交换的桥梁。从最基础的登录注册，到复杂的订单提交，都离不开这些基本元素。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签是整个表单的“外壳”，它定义了表单数据提交的终点（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p> 属性，指向处理表单数据的URL）和方式（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">method</pre>
<div class="contentsignin"></div>
</div>
<p> 属性，通常是</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">GET</pre>
<div class="contentsignin"></div>
</div>
<p>或</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">POST</pre>
<div class="contentsignin"></div>
</div>
<p>）。没有它，你的所有输入控件就只是页面上的摆设，无法将数据发送出去。我记得刚开始学习的时候，总是忘记给</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">form</pre>
<div class="contentsignin"></div>
</div>
<p>加上</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p>和</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">method</pre>
<div class="contentsignin"></div>
</div>
<p>，结果点击提交按钮后页面毫无反应，那会儿真是挠头。</p>
<p>接着就是表单的“灵魂”—— </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签。它的多样性简直令人惊叹。通过改变 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">type</pre>
<div class="contentsignin"></div>
</div>
<p> 属性，它可以是单行文本框（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">text</pre>
<div class="contentsignin"></div>
</div>
<p>）、密码框（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">password</pre>
<div class="contentsignin"></div>
</div>
<p>）、复选框（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">checkbox</pre>
<div class="contentsignin"></div>
</div>
<p>）、单选按钮（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">radio</pre>
<div class="contentsignin"></div>
</div>
<p>）、提交按钮（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">submit</pre>
<div class="contentsignin"></div>
</div>
<p>）、文件上传（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">file</pre>
<div class="contentsignin"></div>
</div>
<p>），甚至是HTML5引入的日期（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">date</pre>
<div class="contentsignin"></div>
</div>
<p>）、时间（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">time</pre>
<div class="contentsignin"></div>
</div>
<p>）、颜色（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">color</pre>
<div class="contentsignin"></div>
</div>
<p>）等。这一个标签几乎承担了大部分的用户输入需求。比如：</p>
<p>立即学习“<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/qianduan" title="前端" target="_blank">前端</a></span>免费学习笔记（深入）”；</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'></pre>
<div class="contentsignin"></div>
</div>
<p>而对于多行文本输入，我们有专门的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><textarea></pre>
<div class="contentsignin"></div>
</div>
<p>。它比 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">input type="text"</pre>
<div class="contentsignin"></div>
</div>
<p> 更适合长篇幅的文字输入，比如留言或评论。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">rows</pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">cols</pre>
<div class="contentsignin"></div>
</div>
<p> 属性可以控制其初始大小，但最终用户通常可以通过拖拽来调整。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签则用来创建下拉菜单，让用户从预设的选项中选择一个或多个。每个选项都由 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签包裹。这在需要限制用户输入范围时非常有用，比如选择国家、省份或产品分类。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'>    美国    中国</pre>
<div class="contentsignin"></div>
</div>
<p>为了提升用户体验和可访问性，</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><label></pre>
<div class="contentsignin"></div>
</div>
<p> 标签是不可或缺的。它将一段描述性文本与表单控件关联起来。当用户点击 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">label</pre>
<div class="contentsignin"></div>
</div>
<p> 文本时，关联的控件就会获得焦点。这对于屏幕阅读器用户尤其重要，也方便了鼠标用户点击小尺寸的复选框或单选按钮。它的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">for</pre>
<div class="contentsignin"></div>
</div>
<p> 属性应该与关联控件的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">id</pre>
<div class="contentsignin"></div>
</div>
<p> 属性相匹配。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'><label for="username">用户名:</label></pre>
<div class="contentsignin"></div>
</div>
<p>最后，我们有 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><button></pre>
<div class="contentsignin"></div>
</div>
<p> 标签。虽然 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 也能创建提交按钮，但 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><button></pre>
<div class="contentsignin"></div>
</div>
<p> 提供了更大的灵活性，你可以在按钮内部放置文本、图标甚至其他HTML元素。它的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">type</pre>
<div class="contentsignin"></div>
</div>
<p> 属性可以设置为 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">submit</pre>
<div class="contentsignin"></div>
</div>
<p>（提交表单）、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">reset</pre>
<div class="contentsignin"></div>
</div>
<p>（重置表单）或 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">button</pre>
<div class="contentsignin"></div>
</div>
<p>（普通按钮，通常配合JavaScript使用）。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'><button type="submit">提交表单</button><button type="reset">重置</button></pre>
<div class="contentsignin"></div>
</div>
<p>此外，还有 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><fieldset></pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><legend></pre>
<div class="contentsignin"></div>
</div>
<p> 标签，它们常被用来对相关的<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/biaodanyuansu" title="表单元素" target="_blank">表单元素</a></span>进行分组，提供语义上的组织结构和视觉上的边框。这对于长表单尤其有用，可以提高可读性和用户理解。</p>
<h3>如何提升HTML表单的用户体验与可访问性？</h3>
<p>表单设计不仅仅是把元素堆砌起来，更重要的是让用户用得舒服、用得明白。从我的经验来看，用户体验和可访问性是评价一个表单好坏的关键指标。</p>
<p>首先，<strong>标签（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><label></pre>
<div class="contentsignin"></div>
</div>
<p>）的正确使用是基石</strong>。我见过太多表单，标签只是简单的文本，没有与输入框通过 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">for</pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">id</pre>
<div class="contentsignin"></div>
</div>
<p> 关联起来。这不仅让屏幕阅读器无法正确解读，也让用户在点击标签时无法聚焦到对应的输入框，尤其是在移动设备上，点击小小的复选框简直是噩梦。一个好的实践是确保每个输入控件（除了 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">submit</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">reset</pre>
<div class="contentsignin"></div>
</div>
<p> 等按钮）都有一个明确关联的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><label></pre>
<div class="contentsignin"></div>
</div>
<p>。</p>
<p>其次，<strong>利用HTML5的语义化输入类型</strong>。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">input type="email"</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">type="tel"</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">type="number"</pre>
<div class="contentsignin"></div>
</div>
<p> 等不仅能提供浏览器层面的基本验证，还能在移动设备上唤起相应的键盘布局，极大地简化了用户输入。想象一下，输入邮箱时弹出一个带@符号的键盘，是不是比普通文本键盘方便多了？</p>
<p>再者，<strong>提供清晰的提示和反馈</strong>。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">placeholder</pre>
<div class="contentsignin"></div>
</div>
<p> 属性可以给输入框一个灰色的提示文本，告诉用户应该输入什么格式的内容。而当用户输入错误时，及时、明确的错误提示至关重要。这通常需要结合JavaScript来实现客户端验证，比如在用户离开输入框（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">blur</pre>
<div class="contentsignin"></div>
</div>
<p> 事件）时立即检查输入是否有效。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'>邮箱格式不正确</pre>
<div class="contentsignin"></div>
</div>
<p>这里 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">required</pre>
<div class="contentsignin"></div>
</div>
<p> 属性也扮演了重要角色，它告诉浏览器这个字段是必填的，可以触发浏览器内置的验证提示。</p>
<p>最后，<strong>逻辑分组和焦点管理</strong>。使用 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><fieldset></pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><legend></pre>
<div class="contentsignin"></div>
</div>
<p> 对相关联的表单元素进行分组，可以帮助用户理解表单的结构。同时，考虑表单元素的Tab键顺序，确保用户可以通过键盘顺畅地导航。对于复杂的表单，可以考虑使用 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">tabindex</pre>
<div class="contentsignin"></div>
</div>
<p> 属性来微调焦点顺序，尽管通常情况下浏览器默认的顺序已经足够好。</p>
<h3>HTML表单数据提交的常见方法和注意事项？</h3>
<p>当用户填完表单并点击提交，数据是如何发送到服务器的呢？这主要由 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">method</pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p> 属性决定，但背后还有一些值得注意的细节。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p> 属性指定了表单数据将被发送到哪个URL。这个URL通常是一个服务器端的脚本或API端点，它会接收并处理这些数据。如果 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p> 属性为空或者省略，数据通常会提交到当前页面的URL。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">method</pre>
<div class="contentsignin"></div>
</div>
<p> 属性则定义了数据提交的HTTP方法，最常用的是 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">GET</pre>
<div class="contentsignin"></div>
</div>
<p> 和 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">POST</pre>
<div class="contentsignin"></div>
</div>
<p>。</p>
<p><strong></p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">GET</pre>
<div class="contentsignin"></div>
</div>
<p> 方法</strong>：数据会以URL查询字符串的形式附加在 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">action</pre>
<div class="contentsignin"></div>
</div>
<p> URL后面。比如 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">yourserver.com/submit?username=test&password=123</pre>
<div class="contentsignin"></div>
</div>
<p>。它的主要特点是数据暴露在URL中，有长度限制，且不适合提交敏感信息。通常用于获取数据或进行搜索。<strong></p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">POST</pre>
<div class="contentsignin"></div>
</div>
<p> 方法</strong>：数据会放在HTTP请求体中发送，不会显示在URL里，也没有严格的长度限制。这是提交敏感信息（如密码）、大量数据或文件上传的首选方法。</p>
<p>一个常见的陷阱是，如果你的表单包含文件上传字段（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p>），那么 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p> 标签必须额外设置 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">enctype="multipart/form-data"</pre>
<div class="contentsignin"></div>
</div>
<p> 属性，并且 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">method</pre>
<div class="contentsignin"></div>
</div>
<p> 必须是 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">POST</pre>
<div class="contentsignin"></div>
</div>
<p>。否则，文件数据将无法正确上传。我曾经就因为忘记这个 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">enctype</pre>
<div class="contentsignin"></div>
</div>
<p>，导致文件上传功能始终不工作，排查了很久才发现是这个小细节。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'></pre>
<div class="contentsignin"></div>
</div>
<p>此外，<strong>客户端验证</strong>（通过HTML5属性如 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">required</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">pattern</pre>
<div class="contentsignin"></div>
</div>
<p> 或JavaScript）和<strong>服务器端验证</strong>是相辅相成的。客户端验证能即时反馈，提升用户体验，减少不必要的服务器请求。但服务器端验证是必不可少的，因为客户端验证可以被绕过，服务器必须对所有接收到的数据进行再次验证，以确保数据的完整性和安全性。</p>
<h3>除了基本元素，还有哪些进阶的表单功能或优化技巧？</h3>
<p>在掌握了表单的基本构成后，我们还可以探索一些更高级的功能和优化技巧，让表单更加强大和智能。</p>
<p><strong>HTML5新增的输入类型和属性</strong>：除了前面提到的 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">email</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">tel</pre>
<div class="contentsignin"></div>
</div>
<p> 等，还有 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">url</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">search</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">range</pre>
<div class="contentsignin"></div>
</div>
<p>（滑块）、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">color</pre>
<div class="contentsignin"></div>
</div>
<p>（颜色选择器）等。这些类型不仅提供了更好的语义，浏览器也会根据这些类型提供更友好的UI或验证。例如，</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">input type="range"</pre>
<div class="contentsignin"></div>
</div>
<p> 就能直接生成一个滑块控件，而不需要借助JavaScript库。</p>
<p><strong></p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">datalist</pre>
<div class="contentsignin"></div>
</div>
<p> 标签</strong>：这个标签可以为 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">input</pre>
<div class="contentsignin"></div>
</div>
<p> 元素提供预设的建议列表，而不是强制用户从列表中选择。当用户在输入框中打字时，浏览器会显示一个下拉列表，包含与用户输入匹配的建议项。这在提供搜索建议或常用选项时非常有用。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class='brush:html;toolbar:false;'>                </pre>
<div class="contentsignin"></div>
</div>
<p><strong>自定义验证和错误处理</strong>：虽然HTML5自带了一些验证，但很多时候我们需要更复杂的验证逻辑或更友好的错误提示。这时，JavaScript就派上用场了。我们可以监听 </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">input</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">change</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">blur</pre>
<div class="contentsignin"></div>
</div>
<p> 等事件，实时检查用户输入，并根据验证结果动态显示错误信息。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">setCustomValidity()</pre>
<div class="contentsignin"></div>
</div>
<p> 方法是JavaScript中一个强大的工具，可以用来设置自定义的验证消息。</p>
<p><strong>AJAX表单提交</strong>：传统的表单提交会导致页面刷新，这在某些场景下会中断用户体验。通过JavaScript和</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">fetch</pre>
<div class="contentsignin"></div>
</div>
<p> API或</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">XMLHttpRequest</pre>
<div class="contentsignin"></div>
</div>
<p>对象，我们可以实现异步表单提交（AJAX）。这意味着表单数据可以在不刷新页面的情况下发送到服务器，服务器返回的数据也可以局部更新页面内容，从而提供更流畅的交互体验。这对于评论提交、点赞等功能非常常见。</p>
<p><strong>前端框架与组件库</strong>：在现代Web开发中，我们很少会从零开始手写所有表单逻辑。React、Vue、Angular等前端框架提供了更高级的表单处理机制，比如数据绑定、状态管理和组件化。同时，许多UI组件库（如Ant Design、Element UI、Bootstrap）也提供了美观且功能丰富的表单组件，可以大大提高开发效率和用户体验。这些库通常已经处理了验证、错误提示、布局等复杂问题。</p>
<p>这些进阶的技巧和工具，让我们能够构建出不仅仅是功能可用，而且用户体验优秀、开发效率更高的表单。</p>
<p>以上就是HTML表单的基本组成元素有哪些的详细内容，更多请关注创想鸟其它相关文章！</p>
<div class="entry-readmore"><div class="entry-readmore-btn"></div></div>                                                        <div class="entry-copyright"><p>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。<br>
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。<br>
发布者：程序猿，转转请注明出处：<span>https://www.chuangxiangniao.com/p/1574241.html</span></p></div>                        </div>

                        <div class="entry-tag"><a href="https://www.chuangxiangniao.com/p/tag/bootstrap" rel="tag">bootstrap</a><a href="https://www.chuangxiangniao.com/p/tag/html" rel="tag">html</a><a href="https://www.chuangxiangniao.com/p/tag/htmlbiaodan" rel="tag">html表单</a><a href="https://www.chuangxiangniao.com/p/tag/java" rel="tag">java</a><a href="https://www.chuangxiangniao.com/p/tag/javascript" rel="tag">javascript</a><a href="https://www.chuangxiangniao.com/p/tag/react" rel="tag">react</a><a href="https://www.chuangxiangniao.com/p/tag/vue" rel="tag">vue</a><a href="https://www.chuangxiangniao.com/p/tag/word" rel="tag">word</a><a href="https://www.chuangxiangniao.com/p/tag/qianduan" rel="tag">前端</a><a href="https://www.chuangxiangniao.com/p/tag/biaodanyuansu" rel="tag">表单元素</a></div>
                        <div class="entry-action">
                            <div class="btn-zan" data-id="1574241"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div>
                                                            <div class="btn-dashang">
                                    <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-cny-circle-fill"></use></svg></i> 打赏                                    <span class="dashang-img dashang-img2">
                                                                                    <span>
                                                <img src="//cdn.chuangxiangniao.com/me/2025/10/wx.jpg" alt="微信扫一扫"/>
                                                    微信扫一扫                                            </span>
                                                                                                                            <span>
                                                <img src="//cdn.chuangxiangniao.com/me/2025/10/zfb.jpg" alt="支付宝扫一扫"/>
                                                    支付宝扫一扫                                            </span>
                                                                            </span>
                                </div>
                                                    </div>

                        <div class="entry-bar">
                            <div class="entry-bar-inner">
                                                                <div class="entry-bar-info entry-bar-info2">
                                    <div class="info-item meta">
                                                                                    <a class="meta-item j-heart" href="javascript:;" data-id="1574241"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a>                                        <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a>                                                                            </div>
                                    <div class="info-item share">
                                                                                    <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="1574241" data-qrcode="https://www.chuangxiangniao.com/p/1574241.html">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报                                            </a>
                                                                                    <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i>                                            </a>
                                                                            </div>
                                    <div class="info-item act">
                                        <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="entry-author">
    <h3 class="entry-author-title">关于作者</h3>    <div class="entry-author-inner">
        <div class="entry-author-avatar">
            <a class="avatar j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a>
        </div>
        <div class="entry-author-content">
            <div class="entry-author-info">
                <h4 class="entry-author-name">
                    <a class="j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3">程序猿<span class="user-group">签约作者</span></a>
                </h4>
                <div class="entry-author-action">
                    <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button><button type="button" class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg></i>私信</button>                </div>
            </div>
                            <div class="entry-author-stats">            <div class="user-stats-item">
                <b>393.8K</b>
                <span>文章</span>
            </div>
                    <div class="user-stats-item">
                <b>0</b>
                <span>评论</span>
            </div>
                    <div class="user-stats-item">
                <b>1</b>
                <span>粉丝</span>
            </div>
        </div>
                        <div class="entry-author-description">这个人很懒，什么都没有留下～</div>        </div>
    </div>
</div>                        <div class="entry-page">
                    <div class="entry-page-prev j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654332397654.png?imageMogr2/crop/480x300/gravity/center">
                <a href="https://www.chuangxiangniao.com/p/1574239.html" title="HTML中如何实现画布绘图" rel="prev">
                    <span>HTML中如何实现画布绘图</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span>
                    <span class="pull-right">2025年12月22日 16:08:36</span>
                </div>
            </div>
                            <div class="entry-page-next j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://img.php.cn/upload/article/001/221/864/175654314392028.png">
                <a href="https://www.chuangxiangniao.com/p/1574243.html" title="如何实现自定义提示" rel="next">
                    <span>如何实现自定义提示</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span>
                    <span class="pull-left">2025年12月22日 16:08:48</span>
                </div>
            </div>
            </div>
                                                                <div class="entry-related-posts">
                            <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574239.html" title="HTML中如何实现画布绘图" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现画布绘图" decoding="async" fetchpriority="high" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654332397654.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574239.html" target="_blank" rel="bookmark">
                                 HTML中如何实现画布绘图            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案：HTML中通过元素结合JavaScript的2D API实现绘图，利用getContext(‘2d’)获取绘图上下文，通过fillRect、arc、fillText等方法绘制图形、文字和路径，并可设置样式与交互；与SVG相比，Canvas基于像素、适合高性能动态渲染如游…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574239.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574237.html" target="_blank" rel="bookmark">
                                 使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1574237.html" title="使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654428646357.jpg"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span>        </a>
        <div class="item-excerpt">
            <p>本文详细介绍了如何利用CSS Flexbox实现页面元素的灵活布局，特别是如何在不影响其他元素的情况下，将一个特定的页脚div垂直排列。通过在父容器上设置display: flex并配合flex-direction: column，可以轻松实现子元素的垂直堆叠，同时利用align-self等属性保持…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月22日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574237.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574235.html" title="CSS Grid布局实战：构建高效页面结构与常见问题解析" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CSS Grid布局实战：构建高效页面结构与常见问题解析" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654584593163.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574235.html" target="_blank" rel="bookmark">
                                 CSS Grid布局实战：构建高效页面结构与常见问题解析            </a>
        </h3>
        <div class="item-excerpt">
            <p>本教程旨在指导读者使用CSS Grid布局技术构建清晰高效的网页结构。我们将详细介绍如何通过CSS定义网格区域、列和行，并将其应用于HTML元素。文章还将强调正确的HTML标签闭合在确保CSS样式正确渲染中的关键作用，并通过实例代码演示一个完整的CSS Grid布局实现，帮助初学者避免常见错误。 1…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574235.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574233.html" title="使用CSS Grid布局在HTML中创建网格" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用CSS Grid布局在HTML中创建网格" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654670087028.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574233.html" target="_blank" rel="bookmark">
                                 使用CSS Grid布局在HTML中创建网格            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文将指导您如何使用CSS Grid布局在HTML页面中创建网格结构。我们将从HTML结构开始，然后详细介绍如何使用CSS将页面元素放置到网格中，最终实现灵活且响应式的布局。通过本文，您将掌握CSS Grid的基本概念和用法，并能将其应用到您的Web项目中。 HTML 结构 首先，我们需要创建一个基…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574233.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574231.html" title="使用 CSS Grid 创建 HTML 布局" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用 CSS Grid 创建 HTML 布局" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654692555615.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574231.html" target="_blank" rel="bookmark">
                                 使用 CSS Grid 创建 HTML 布局            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文将详细介绍如何使用 CSS Grid 布局创建复杂的 HTML 页面结构。通过结合 CSS 和 HTML，我们可以轻松实现各种网格布局，例如头部、导航栏、侧边栏、内容区域和页脚等。文章将提供详细的代码示例和步骤，帮助你快速掌握 CSS Grid 布局技术，并构建出美观、响应式的网页。 准备 HT…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574231.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574229.html" title="CSS Grid布局入门：从基础到实践，构建灵活的网页结构" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CSS Grid布局入门：从基础到实践，构建灵活的网页结构" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654741992926.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574229.html" target="_blank" rel="bookmark">
                                 CSS Grid布局入门：从基础到实践，构建灵活的网页结构            </a>
        </h3>
        <div class="item-excerpt">
            <p>本教程旨在指导初学者如何使用CSS Grid布局构建灵活的网页结构。我们将详细介绍CSS Grid的核心概念，包括网格容器、网格项以及grid-template-areas等关键属性，并通过实际代码示例演示如何创建复杂的二维布局。文章还将强调正确的HTML结构和标签闭合的重要性，以确保CSS样式能正…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574229.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574226.html" target="_blank" rel="bookmark">
                                 CSS Grid布局实战：构建高效网页结构的秘诀            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1574226.html" title="CSS Grid布局实战：构建高效网页结构的秘诀" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654744761970.jpg"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175836240640976.jpg"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="/static/images/card_xiazai.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="/static/images/cardxiayige-3.png"></i></span>        </a>
        <div class="item-excerpt">
            <p>本教程深入探讨如何利用HTML和CSS Grid布局构建高效、响应式的网页结构。我们将重点讲解CSS Grid的核心属性，如display: grid和grid-template-areas，并通过实际示例演示如何定义网格区域。同时，强调了正确的HTML标签闭合对于CSS Grid正常渲染的重要性，…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月22日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574226.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574224.html" title="HTML中如何实现进度指示" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现进度指示" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654128467884.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574224.html" target="_blank" rel="bookmark">
                                 HTML中如何实现进度指示            </a>
        </h3>
        <div class="item-excerpt">
            <p>最直接实现进度指示的方式是使用HTML的元素，结合CSS自定义样式以解决跨浏览器差异，并通过JavaScript动态更新value属性实现动态进度，同时需同步更新ARIA属性以保障可访问性。 在HTML中实现进度指示，最直接且语义化的方式就是使用 元素。它提供了一个浏览器原生支持的进度条，可以表示任…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574224.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574222.html" title="HTML中如何创建分组框" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何创建分组框" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654134719523.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574222.html" target="_blank" rel="bookmark">
                                 HTML中如何创建分组框            </a>
        </h3>
        <div class="item-excerpt">
            <p>使用和可创建语义化分组框，提升表单结构清晰度、用户体验与可访问性，正确搭配使用并合理样式化能确保功能与设计兼备。 在HTML中，要创建一个视觉上和语义上都清晰的分组框，我们主要依赖 和 这两个标签。它们协同工作，能很好地将相关的表单控件或内容组织在一起，提升页面的可读性和用户体验。 说起HTML里的…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574222.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574220.html" title="nav标签应该在什么情况下使用" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="nav标签应该在什么情况下使用" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654140431161.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574220.html" target="_blank" rel="bookmark">
                                 nav标签应该在什么情况下使用            </a>
        </h3>
        <div class="item-excerpt">
            <p>nav标签用于标识页面主要导航区块，提升语义化与可访问性，应仅包裹核心导航链接（如主菜单、页脚导航、页面目录等），避免滥用在内容引用或相关链接中。 nav 标签主要用于标识页面上的主要导航区块。它是一个语义化的HTML5元素，旨在明确地告诉浏览器和辅助技术（如屏幕阅读器）：“这里包含的是网站的核心导…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574220.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574218.html" title="HTML中如何实现回到顶部" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现回到顶部" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654147225717.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574218.html" target="_blank" rel="bookmark">
                                 HTML中如何实现回到顶部            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案：实现“回到顶部”功能需HTML添加按钮、CSS设置样式与定位、JavaScript控制显示与滚动。设计时应考虑触发时机、位置样式、可访问性及平滑滚动体验。兼容性方面需处理老旧浏览器降级、移动端触摸区域与无障碍支持，可通过特性检测和prefers-reduced-motion适配用户偏好，确保多…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574218.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574216.html" title="HTML中如何实现工具栏" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现工具栏" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654164281688.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574216.html" target="_blank" rel="bookmark">
                                 HTML中如何实现工具栏            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案：HTML%ignore_a_1%通过语义化结构、CSS布局与交互逻辑实现，需确保无障碍性、合理使用Flexbox或Grid布局，并可集成第三方库提升效率。 HTML中实现工具栏，核心在于将一系列功能性元素（如按钮、链接、输入框）组织成一个视觉上统一、逻辑上相关的区域。这通常通过语义化的HTML…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574216.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574214.html" title="HTML中如何设置按钮元素" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何设置按钮元素" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654176132584.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574214.html" target="_blank" rel="bookmark">
                                 HTML中如何设置按钮元素            </a>
        </h3>
        <div class="item-excerpt">
            <p>最直接设置HTML按钮的方式是使用标签，因其语义化强、内容模型灵活，可嵌套文字、图标等元素，支持type、disabled、onclick等属性，并可通过CSS实现丰富样式和交互反馈，优于按钮；在表单中需注意默认提交行为、重复提交、验证及状态管理等问题，推荐优先使用并结合JavaScript控制行为…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574214.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574212.html" title="什么是HTML的行内元素和块级元素" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是HTML的行内元素和块级元素" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654188298494.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574212.html" target="_blank" rel="bookmark">
                                 什么是HTML的行内元素和块级元素            </a>
        </h3>
        <div class="item-excerpt">
            <p>行内元素默认并排显示、宽度由内容决定且不可设宽高，块级元素独占一行、可设宽高并默认撑满父容器；通过CSS的display属性可改变元素显示类型，其中inline-block兼具行内排列与块级盒模型特性，是实现水平布局的重要手段。 在HTML的世界里，我们遇到的每一个元素，骨子里都带着自己的“脾气”—…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574212.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574210.html" title="如何设置HTML表单的提交方式" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何设置HTML表单的提交方式" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654194193441.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574210.html" target="_blank" rel="bookmark">
                                 如何设置HTML表单的提交方式            </a>
        </h3>
        <div class="item-excerpt">
            <p>HTML表单提交方式由method和action属性决定，method=”GET”将数据附加到URL，适用于获取数据；method=”POST”将数据封装在请求体中，适合提交敏感或大量数据。action指定提交目标URL，可为相对或绝对路径。GET请求…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574210.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574208.html" title="optgroup标签有什么作用" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="optgroup标签有什么作用" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654200274570.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574208.html" target="_blank" rel="bookmark">
                                 optgroup标签有什么作用            </a>
        </h3>
        <div class="item-excerpt">
            <p>optgroup标签的核心作用是为select下拉菜单中的option提供语义化分组，通过label属性定义分组标题，提升长列表的可读性与导航效率，同时支持disabled属性统一禁用整组选项，增强用户体验和屏幕阅读器的可访问性，适用于地理、分类等多场景，但需避免过度使用并确保label清晰。 op…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574208.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574206.html" target="_blank" rel="bookmark">
                                 使用CSS Flexbox实现特定区域内容的垂直布局            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1574206.html" title="使用CSS Flexbox实现特定区域内容的垂直布局" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654206396300.jpg"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://%7B%%20static%20"></i></span>        </a>
        <div class="item-excerpt">
            <p>本教程将详细介绍如何利用CSS Flexbox实现网页特定区域（如页脚）内容的垂直排列，同时不影响页面其他部分的布局。通过将目标容器设置为Flex容器并指定flex-direction: column，可以轻松实现元素的垂直堆叠，从而优化页面结构和可读性。 在网页开发中，我们经常需要对特定区域（如导…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月22日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574206.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574204.html" title="map和area标签怎么用" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="map和area标签怎么用" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654207325245.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574204.html" target="_blank" rel="bookmark">
                                 map和area标签怎么用            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案是使用map和area标签可创建图像热点，但响应式设计中因坐标固定易错位，需用JavaScript动态调整或改用SVG、CSS覆盖层等现代方案更优。 map 和 area 标签是HTML中用来创建“图像热点”的机制。简单来说，它们允许你在一张图片的不同区域上定义可点击的链接，让图片的特定部分能够…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574204.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574202.html" title="如何设置链接的下载属性" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何设置链接的下载属性" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654212143269.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574202.html" target="_blank" rel="bookmark">
                                 如何设置链接的下载属性            </a>
        </h3>
        <div class="item-excerpt">
            <p>使用download属性可强制文件下载而非预览，支持自定义文件名，但跨域时受限，需结合服务器Content-Disposition头处理；JavaScript可通过Blob和createObjectURL实现动态内容下载。 想要让用户点击链接直接下载文件，而不是在浏览器里直接打开预览？其实很简单，H…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574202.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574200.html" title="HTML中如何实现引用文献" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现引用文献" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654242788107.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1574200.html" target="_blank" rel="bookmark">
                                 HTML中如何实现引用文献            </a>
        </h3>
        <div class="item-excerpt">
            <p>使用和标签实现基础引用，结合CSS美化样式，JavaScript增强交互，通过、模态框或分页管理大量文献，利用Citation.js或后端处理APA/MLA格式，借助Zotero、数据库或Git实现高效维护。 HTML实现引用文献，核心在于使用 标签，以及结合 标签创建链接，指向参考文献的详细信息。…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月22日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1574200.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
</ul>                        </div>
                    
<div id="comments" class="entry-comments">
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/p/1574241.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://www.chuangxiangniao.com/login?modal-type=login">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="wpcom-btn btn-primary btn-xs submit">提交</button></div></div>	</div><!-- #respond -->
		</div><!-- .comments-area -->
                </article>
                    </main>
            <aside class="sidebar">
        <div class="widget widget_html_myimg"><script id="w2898_19187">(function () {var zy = document.createElement("script");var flowExchange = window.location.protocol.split(":")[0];var http = flowExchange === "https"?"https":"http";zy.src = http+"://exchange.2898.com/index/flowexchange/getGoods?id=19187&sign=4de6b0e8762acf54f7fbff868909cdae";var s = document.getElementsByTagName("script");for(var i=0;i< s.length;i++){if(s[i].id){if(s[i].id == "w2898_19187"){s[i].parentNode.insertBefore(zy, s[i]);continue;}}}})();</script></div><div class="widget widget_profile"><div class="profile-cover"><img class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//bing.img.run/rand_uhd.php" alt="程序猿"></div>            <div class="avatar-wrap">
                <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar-link"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a></div>
            <div class="profile-info">
                <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="profile-name"><span class="author-name">程序猿</span><span class="user-group">签约作者</span></a>
                <p class="author-description">这个人很懒，什么都没有留下～</p>
                        <div class="profile-stats">
            <div class="profile-stats-inner">
                            <div class="user-stats-item">
                <b>393.8K</b>
                <span>文章</span>
            </div>
                    <div class="user-stats-item">
                <b>0</b>
                <span>评论</span>
            </div>
                    <div class="user-stats-item">
                <b>1</b>
                <span>粉丝</span>
            </div>
                    </div>
        </div>
    <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button><button type="button" class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg></i>私信</button>            </div>
                        <div class="profile-posts">
                <h3 class="widget-title"><span>最近文章</span></h3>
                <ul>                    <li><a href="https://www.chuangxiangniao.com/p/1574243.html" title="如何实现自定义提示">如何实现自定义提示</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1574241.html" title="HTML表单的基本组成元素有哪些">HTML表单的基本组成元素有哪些</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1574239.html" title="HTML中如何实现画布绘图">HTML中如何实现画布绘图</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1574237.html" title="使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧">使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1574235.html" title="CSS Grid布局实战：构建高效页面结构与常见问题解析">CSS Grid布局实战：构建高效页面结构与常见问题解析</a></li>
                </ul>            </div>
                        </div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>最新发布</span></h3>            <ul>
                                    <li class="item">
                                                <div class="item-content item-no-thumb">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574243.html" title="如何实现自定义提示">如何实现自定义提示</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574241.html" title="HTML表单的基本组成元素有哪些">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML表单的基本组成元素有哪些" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654326512852.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574241.html" title="HTML表单的基本组成元素有哪些">HTML表单的基本组成元素有哪些</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574239.html" title="HTML中如何实现画布绘图">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现画布绘图" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654332397654.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574239.html" title="HTML中如何实现画布绘图">HTML中如何实现画布绘图</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574237.html" title="使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654428646357.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574237.html" title="使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧">使用CSS Flexbox实现垂直布局：一个页脚Div的独立翻转技巧</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574235.html" title="CSS Grid布局实战：构建高效页面结构与常见问题解析">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CSS Grid布局实战：构建高效页面结构与常见问题解析" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654584593163.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574235.html" title="CSS Grid布局实战：构建高效页面结构与常见问题解析">CSS Grid布局实战：构建高效页面结构与常见问题解析</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574233.html" title="使用CSS Grid布局在HTML中创建网格">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用CSS Grid布局在HTML中创建网格" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654670087028.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574233.html" title="使用CSS Grid布局在HTML中创建网格">使用CSS Grid布局在HTML中创建网格</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574231.html" title="使用 CSS Grid 创建 HTML 布局">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用 CSS Grid 创建 HTML 布局" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654692555615.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574231.html" title="使用 CSS Grid 创建 HTML 布局">使用 CSS Grid 创建 HTML 布局</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574229.html" title="CSS Grid布局入门：从基础到实践，构建灵活的网页结构">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CSS Grid布局入门：从基础到实践，构建灵活的网页结构" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654741992926.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574229.html" title="CSS Grid布局入门：从基础到实践，构建灵活的网页结构">CSS Grid布局入门：从基础到实践，构建灵活的网页结构</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574226.html" title="CSS Grid布局实战：构建高效网页结构的秘诀">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CSS Grid布局实战：构建高效网页结构的秘诀" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654744761970.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574226.html" title="CSS Grid布局实战：构建高效网页结构的秘诀">CSS Grid布局实战：构建高效网页结构的秘诀</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1574224.html" title="HTML中如何实现进度指示">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML中如何实现进度指示" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175654128467884.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1574224.html" title="HTML中如何实现进度指示">HTML中如何实现进度指示</a></p>
                            <p class="item-date">2025年12月22日</p>
                        </div>
                    </li>
                            </ul>
        </div><div class="widget widget_tags"><h3 class="widget-title"><span>热门标签</span></h3>        <div class="tagcloud">
                            <a href="https://www.chuangxiangniao.com/p/tag/ai" title="ai">ai</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/gongju" title="工具">工具</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/liulanqi" title="浏览器">浏览器</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/app" title="app">app</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/php" title="php">php</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/java" title="java">java</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/windows" title="windows">windows</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/go" title="go">go</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/diannao" title="电脑">电脑</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/js" title="js">js</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/win" title="win">win</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/linux" title="linux">linux</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/python" title="python">python</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/red" title="red">red</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/c%20%20" title="c++">c++</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/css" title="css">css</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/o" title="o">o</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/html" title="html">html</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/mysql" title="mysql">mysql</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/javascript" title="javascript">javascript</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/a" title="a">a</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/caozuoxitong" title="操作系统">操作系统</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/weishenme" title="为什么">为什么</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/2025" title="2025">2025</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/json" title="json">json</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/git" title="git">git</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/jiaoyisuo" title="交易所">交易所</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/qubie" title="区别">区别</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/bian-4" title="币安">币安</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/jiamihuobi" title="加密货币">加密货币</a>
                    </div>
        </div><div class="widget widget_links"><h3 class="widget-title"><span>旗下站点</span></h3>
	<ul class='xoxo blogroll'>
<li><a href="https://www.chuangxiangniao.com/xin/" target="_blank">信用人生</a></li>
<li><a href="https://www.ankegu.com/" target="_blank">免费在线测八字</a></li>
<li><a href="https://www.chuangxiangniao.com/" target="_blank">创想鸟</a></li>
<li><a href="https://www.chuangxiangniao.com/pay/">复利引擎</a></li>
<li><a href="https://www.chuangxiangniao.com/she/" target="_blank">奢社</a></li>
<li><a href="https://www.chuangxiangniao.com/law/" target="_blank">法外狂徒</a></li>
<li><a href="https://www.chuangxiangniao.com/wifi/" target="_blank">玩转路由网</a></li>

	</ul>
</div>
    </aside>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <div class="footer-col-wrap footer-with-icon">
                        <div class="footer-col footer-col-copy">
                <ul class="footer-nav hidden-xs"><li id="menu-item-4095" class="menu-item menu-item-4095"><a target="1" href="https://www.chuangxiangniao.com/falyushengming">法律声明</a></li>
<li id="menu-item-4099" class="menu-item menu-item-4099"><a target="1" href="https://www.chuangxiangniao.com/about">关于我们</a></li>
<li id="menu-item-4098" class="menu-item menu-item-4098"><a target="1" href="https://www.chuangxiangniao.com/contact">联系我们</a></li>
<li id="menu-item-4097" class="menu-item menu-item-4097"><a target="1" href="https://www.chuangxiangniao.com/yonghuxieyi">用户协议</a></li>
<li id="menu-item-4094" class="menu-item menu-item-privacy-policy menu-item-4094"><a target="1" rel="privacy-policy" href="https://www.chuangxiangniao.com/yinsizhengce">隐私政策</a></li>
<li id="menu-item-4096" class="menu-item menu-item-4096"><a target="1" href="https://www.chuangxiangniao.com/mianzeshengming">版权及免责声明</a></li>
</ul>                <div class="copyright">
                    <p>版权声明：本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。</p>
<p>如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao#163.com （请把#更换@）举报，一经查实，本站将立刻删除。</p>
<p>Copyright © 2019-2025 <a href="https://www.chuangxiangniao.com/" target="_blank" rel="noopener noreferrer">创想鸟</a> 版权所有 <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">皖ICP备2024035995号-1</a></p>
                </div>
            </div>
                        <div class="footer-col footer-col-sns">
                <div class="footer-sns">
                                                <a href="https://www.chuangxiangniao.com/sitemap/sitemap.xml" target="_blank" aria-label="icon">
                                <i class="wpcom-icon fa fa-sitemap sns-icon"></i>                                                            </a>
                                                    <a class="sns-wx" href="javascript:;" aria-label="icon">
                                <i class="wpcom-icon fa fa-wechat sns-icon"></i>                                <span style="background-image:url('//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg');"></span>                            </a>
                                        </div>
            </div>
                    </div>
    </div>
</footer>
            <div class="action action-style-0 action-color-1 action-pos-1" style="bottom:450px;">
                                                <div class="action-item">
                                    <i class="wpcom-icon fa fa-wechat action-item-icon"></i>                                                                        <div class="action-item-inner action-item-type-1">
                                        <img class="action-item-img" src="//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg" alt="关注微信">                                    </div>
                                </div>
                                                                                        <div class="action-item j-share">
                        <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i>                                            </div>
                                    <div class="action-item gotop j-top">
                        <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i>                                            </div>
                            </div>
        <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/www/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/justnews/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="imwpf-this-page">
var g_this_page = {
    "type": "post",
    "id": 1574241,
    "terms": [{"id":49069,"tax":"category"},{"id":289,"tax":"post_tag"},{"id":113,"tax":"post_tag"},{"id":242,"tax":"post_tag"},{"id":147,"tax":"post_tag"},{"id":146,"tax":"post_tag"},{"id":145,"tax":"post_tag"},{"id":144,"tax":"post_tag"},{"id":105,"tax":"post_tag"},{"id":152,"tax":"post_tag"},{"id":62947,"tax":"post_tag"}]
};console.log(g_this_page);
</script><div class="imwpcache_status_ok"></div><script type="text/javascript" id="main-js-extra">
/* <![CDATA[ */
var _wpcom_js = {"webp":"","ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","theme_url":"https://www.chuangxiangniao.com/wp-content/themes/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","share_items":{"weibo":{"title":"\u5fae\u535a","icon":"weibo"},"wechat":{"title":"\u5fae\u4fe1","icon":"wechat"},"qq":{"title":"QQ\u597d\u53cb","icon":"qq"},"qzone":{"title":"QQ\u7a7a\u95f4","icon":"qzone"},"douban":{"name":"douban","title":"\u8c46\u74e3","icon":"douban"},"mail":{"title":"\u90ae\u4ef6","icon":"mail-fill"}},"lightbox":"1","post_id":"1574241","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"484","fixed_sidebar":"1","dark_style":"2","font_url":"//fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap","follow_btn":"\u003Ci class=\"wpcom-icon wi\"\u003E\u003Csvg aria-hidden=\"true\"\u003E\u003Cuse xlink:href=\"#wi-add\"\u003E\u003C/use\u003E\u003C/svg\u003E\u003C/i\u003E\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"};
//# sourceURL=main-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/js/main.js?ver=6.21.2" id="main-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/js/icons-2.8.9.js?ver=2.8.9" id="wpcom-icons-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/js/comment-reply.js?ver=6.21.2" id="comment-reply-js"></script>
<script type="text/javascript" id="wwa-js-extra">
/* <![CDATA[ */
var _wwa_js = {"ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","post_id":"1574241","rewarded":""};
//# sourceURL=wwa-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/justweapp/js/script.js?ver=3.16.1" id="wwa-js"></script>
<script type="text/javascript" id="wp-postviews-cache-js-extra">
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","nonce":"72eaa4da6f","post_id":"1574241"};
//# sourceURL=wp-postviews-cache-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.78" id="wp-postviews-cache-js"></script>
<script type="text/javascript" id="wp-postviews-cache-js-after">
/* <![CDATA[ */
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
//# sourceURL=wp-postviews-cache-js-after
/* ]]> */
</script>
<script type="text/javascript" id="wpcom-member-js-extra">
/* <![CDATA[ */
var _wpmx_js = {"ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","plugin_url":"https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member/","max_upload_size":"52428800","post_id":"1574241","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https://www.chuangxiangniao.com/login?modal-type=login","register_url":"https://www.chuangxiangniao.com/register?modal-type=register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"},"hidden_content":"1","copy_post":"1","copy_post_text":"\u4ed8\u8d39\u89e3\u9501\u5f53\u524d\u6587\u7ae0\u590d\u5236\u6743\u9650","copy_post_container":".entry-content"};
//# sourceURL=wpcom-member-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member/js/index.js?ver=1.7.17" id="wpcom-member-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member-pro/js/index.js?ver=2.3.1" id="wpcom-member-pro-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/js/wp-embed.js?ver=6.21.2" id="wp-embed-js"></script>
 <!--百度自动推送代码开始-->
<script>
(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>
<!--百度自动推送代码结束-->
<!--360自动推送代码开始-->
<script>
(function(){
   var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?d7af82f5d5a7d431d4b53f4d0069f989":"https://jspassport.ssl.qhimg.com/11.0.1.js?d7af82f5d5a7d431d4b53f4d0069f989";
   document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>
<!--360自动推送代码结束-->
<!--头条自动推送代码开始-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?e1627df632cb7d8422ff5a171866ae673d0a9fd8a088d803a9d0f3c3bef0aa6adb92f43d4b1c8ff14071b55e1e71da09d918f66d1949fb3b81012c4e4e9e4a34644f149b0c276c07ebf664bf3622e408";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条自动推送代码结束-->
<!--百度统计代码开始-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?357b28aff465596d316075fdd7393426";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!--百度统计代码结束-->
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","@id":"https://www.chuangxiangniao.com/p/1574241.html","url":"https://www.chuangxiangniao.com/p/1574241.html","headline":"HTML表单的基本组成元素有哪些","description":"HTML表单核心由form、input、textarea、select、label和button等元素构成，form定义数据提交的action和method，input通过type属性实现多种输入功能，label提升可访问性，button支持灵活的提交与重置操作，结合fieldset和legend可…","datePublished":"2025-12-22T16:08:39+08:00","dateModified":"2025-12-22T16:08:39+08:00","author":{"@type":"Person","name":"程序猿","url":"https://www.chuangxiangniao.com/user/3","image":"http://cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg"},"image":["https://cdn.chuangxiangniao.com/www/2025/12/175654326512852.png"]}</script>
<script>console.log('命中缓存\n缓存页加载耗时: 0.0297s\n缓存页生成时间: 2025-12-22 19:05:35')</script></body>
</html><!--cached by imwpcache 2025-12-22 19:05:35-->