HTML表单如何实现富文本编辑？怎样添加文本格式工具？

原生HTML/CSS无法实现富文本编辑，contentEditable虽提供基础但存在跨浏览器兼容性差、无内置工具栏、输出难控制等问题；推荐使用第三方库因其封装了复杂性，提供一致API、丰富功能、良好安全机制和易用性，显著提升开发效率与用户体验。

HTML表单实现富文本编辑，通常我们是借助JavaScript库或者浏览器原生的

contentEditable

属性来达成目的。至于如何添加文本格式工具，那是在这个编辑能力的基础上，构建一套用户界面（UI）来触发相应的格式化操作。

解决方案

要让一个普通的文本输入区域变成可以编辑文字格式的“富文本”区域，我们主要有两种路径可以走，当然，大多数时候，第二种才是真正靠谱的选择。

首先，浏览器自身提供了一个

contentEditable

属性。你可以在任何HTML元素上设置它，比如一个

或者

，一旦设置，这个元素就变成了可编辑的区域。用户可以直接在里面输入文字，甚至粘贴带有格式的内容。它的好处是原生、轻量，不需要引入任何外部库，对于一些极简的需求，这或许是个快速的起点。但说实话，这只是给了你一块画布，至于怎么画出好看的画，以及画笔、颜料这些工具，都得自己一点点去造。比如，你想实现个加粗功能，就得写JavaScript代码去监听按钮点击，然后用

document.execCommand('bold', false, null)

这样的API去操作选中的文本。问题在于，

execCommand

这个东西，它的行为在不同浏览器之间可能会有微妙的差异，生成的HTML也可能不那么干净或者语义化，而且很多高级功能（比如图片上传、表格插入）几乎不可能靠它原生实现。

所以，更实际、更主流的做法是采用第三方JavaScript富文本编辑器库。这简直是前端开发者的福音。这些库，像TinyMCE、CKEditor、Quill、Draft.js（如果你用React的话），或者最近很火的TipTap，它们已经帮你把上面提到的所有复杂性都封装好了。它们通常会把一个普通的

</pre>
<div class="contentsignin"></div>
</div>
<p>或者</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><div></pre>
<div class="contentsignin"></div>
</div>
<p>转换成一个功能齐全的富文本编辑区域。这些库内部可能也用到了</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">contentEditable</pre>
<div class="contentsignin"></div>
</div>
<p>，但它们在其上构建了一层抽象，抹平了浏览器差异，提供了统一且强大的API。</p>
<p><span>立即学习“前端免费学习笔记（深入）”；</p>
<p>添加文本格式工具，对这些库来说简直是小菜一碟。它们通常自带一套完整的工具栏UI，包含加粗、斜体、下划线、字体大小、颜色、列表、链接、图片上传等等常见功能。你只需要在初始化编辑器的时候，通过配置项选择你需要哪些工具，甚至可以自定义工具栏的布局和样式。这些工具按钮背后，其实就是调用了编辑器库提供的相应API，来对当前选中的文本或者插入点进行操作。比如点击“加粗”按钮，编辑器就会在内部调用其API，将选中的文本包裹在</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><strong></pre>
<div class="contentsignin"></div>
</div>
<p>或</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"><b></pre>
<div class="contentsignin"></div>
</div>
<p>标签中。整个过程对开发者来说非常友好，大大节省了开发时间和精力。</p>
<h3>原生HTML/CSS实现富文本编辑有哪些局限性，为何推荐使用第三方库？</h3>
<p>谈到富文本编辑，很多人可能初次接触时会想：“不就是改改字体颜色、加个粗吗？HTML和CSS应该能搞定吧？”嗯，理论上，如果你只是想让一段静态文本显示成某种样式，那确实是HTML和CSS的本职工作。但我们这里说的是“编辑”，是用户能实时、动态地去改变文本的格式。原生HTML/CSS在这方面，能力几乎为零。它们是描述性语言，不是交互性工具。</p>
<p>真正能让元素“可编辑”的是JavaScript和</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">contentEditable</pre>
<div class="contentsignin"></div>
</div>
<p>属性。但即便有了</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">contentEditable</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;">contentEditable</pre>
<div class="contentsignin"></div>
</div>
<p>在不同浏览器中的行为表现并不完全一致，尤其是在处理复制粘贴、复杂格式（如表格、嵌套列表）时，生成的HTML结构可能会大相径庭。这对于追求一致性用户体验的Web应用来说，简直是灾难。你可能需要写大量的条件判断和兼容性代码，这无疑增加了开发和维护的复杂度。</p>
<p>其次，<strong>没有内置的UI和工具</strong>。</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">contentEditable</pre>
<div class="contentsignin"></div>
</div>
<p>仅仅是让一个区域可编辑，至于“加粗”按钮、“斜体”按钮，以及它们如何与编辑区域交互，你得从零开始构建。这意味着你要自己设计并实现整个工具栏的样式、逻辑，监听用户选择文本的变化，然后用</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">document.execCommand</pre>
<div class="contentsignin"></div>
</div>
<p>等API去操作DOM。这工作量可不小，而且</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">execCommand</pre>
<div class="contentsignin"></div>
</div>
<p>本身也有些脾气，比如它对某些复杂操作的支持并不理想，或者生成的HTML不够语义化。</p>
<p>再者，<strong>输出内容的控制和清理</strong>是个老大难问题。用户从Word或其他地方粘贴内容进来，往往会带入大量冗余、不规范的HTML标签和样式，导致最终保存到数据库的富文本内容非常臃肿且难以管理。原生方式下，你得自己写复杂的正则或者DOM解析逻辑去清理这些“脏”HTML，这不仅技术难度高，而且容易出错，还可能引入安全漏洞（比如XSS攻击）。</p>
<p>所以，第三方富文本编辑器库的价值就凸显出来了。它们就是为了解决这些痛点而生的。它们：</p>
<p><strong>提供了强大的抽象层</strong>：屏蔽了</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">contentEditable</pre>
<div class="contentsignin"></div>
</div>
<p>的底层差异，确保在不同浏览器下行为一致。<strong>自带丰富的UI和工具栏</strong>：开箱即用，省去了大量的UI设计和交互逻辑开发工作。<strong>提供了更高级的功能</strong>：图片上传、表格编辑、代码高亮、Markdown支持、实时预览等，这些都是原生难以实现的。<strong>更好地控制输出</strong>：许多库提供了配置项来控制生成的HTML结构，甚至可以进行一定程度的HTML清理，虽然服务器端验证依然是必须的。<strong>活跃的社区和维护</strong>：这意味着遇到问题能找到解决方案，有新的功能会及时更新，安全性也能得到保障。</p>
<p>在我看来，除非你的富文本需求极其简单，简单到只需要用户能输入文字，不需要任何格式化，否则，选择一个成熟的第三方库，是更明智、更高效、更少“踩坑”的方案。</p>
<h3>选择富文本编辑器时，需要考虑哪些关键因素？</h3>
<p>选择一个合适的富文本编辑器，就像选择一个趁手的兵器，得看你的战场和打法。市面上的编辑器种类繁多，各有千秋，如果盲目选择，后期可能会遇到不少麻烦。我通常会从以下几个方面去权衡：</p>
<p><strong>功能集与需求匹配度</strong>：这是最基础的。你到底需要哪些功能？仅仅是加粗、斜体、列表？还是需要图片上传、表格编辑、代码块、数学公式、实时预览、协作编辑？有些编辑器以轻量著称，功能相对精简；有些则功能非常全面，但也可能体积较大。明确你的核心需求，避免过度选择或功能不足。</p>
<p><strong>集成与定制的便捷性</strong>：这个编辑器好不好“塞”进你的项目？是基于原生JavaScript，还是更适合特定的前端框架（比如React的Draft.js、Quill，Vue的TipTap）？它的API是否清晰易懂？UI是否容易定制，能和你的产品设计风格保持一致？有些编辑器提供了丰富的配置项和主题，有些则需要更深层次的CSS和JS修改。</p>
<p><strong>性能与包体积</strong>：用户体验是王道。编辑器加载速度快不快？在处理大量内容时是否流畅？尤其对于移动端应用，编辑器的JavaScript和CSS文件大小（Bundle Size）非常关键。一个臃肿的编辑器可能会显著增加页面加载时间，影响用户体验。有些编辑器支持按需加载模块，这能有效控制初始加载体积。</p>
<p><strong>社区活跃度与文档支持</strong>：一个活跃的社区意味着当你遇到问题时，更容易找到解决方案或得到帮助。高质量、最新的官方文档，以及丰富的示例代码，能大大降低学习成本和开发难度。检查一下GitHub上的Star数量、Issues活跃度、最近的更新频率，这些都是衡量一个项目健康度的指标。</p>
<p><strong>许可协议（Licensing）</strong>：这一点常常被忽视，但非常重要。有些优秀的编辑器是完全开源免费的（如MIT许可证），可以随意用于商业项目。有些则提供免费版（通常功能受限）和商业付费版，或者有特定的开源协议（如GPL），在商业应用中可能需要购买授权。务必在项目初期就了解清楚，避免后期法律风险。</p>
<p><strong>安全性考量</strong>：富文本编辑器处理的是用户输入，这意味着潜在的XSS（跨站脚本攻击）风险。一个好的编辑器应该在设计时就考虑到安全性，并提供一些清理机制（虽然这通常是服务器端的责任）。了解编辑器在处理粘贴内容、HTML输出方面的策略。</p>
<p><strong>可访问性（Accessibility, A11y）</strong>：你的产品是否需要满足无障碍访问标准？一个优秀的富文本编辑器应该考虑到残障用户，提供键盘导航、屏幕阅读器兼容性等功能。这不仅是合规性要求，也是提升用户体验的重要一环。</p>
<p>没有哪个编辑器是完美的，关键在于找到最适合你项目需求的那个。我通常会先选出两三个备选项，然后分别做个小Demo，亲自体验一下它们的集成过程、API调用和定制能力，最后再做决定。</p>
<h3>如何安全地处理富文本编辑器的用户输入，防止XSS攻击？</h3>
<p>说实话，富文本编辑器带来的便利性是巨大的，但它也像一把双刃剑，其中最锋利的一面，就是潜在的<strong>XSS（Cross-Site Scripting）攻击风险</strong>。因为富文本的本质就是HTML，而HTML是可以包含脚本的。如果用户输入了恶意脚本，并且这些脚本未经处理就被渲染到其他用户的浏览器上，那后果不堪设想——数据窃取、会话劫持，甚至篡改页面内容，都可能发生。</p>
<p>所以，处理富文本编辑器的用户输入，<strong>安全性是重中之重，而且必须是多层防御</strong>。</p>
<p><strong>服务器端HTML Sanitization（净化/清理）——这是第一道也是最关键的防线。</strong></p>
<p><strong>绝不能信任客户端的任何输入。</strong> 即使你的富文本编辑器在前端做了再多的清理，恶意的用户总有办法绕过前端验证，直接发送恶意数据到你的服务器。<strong>使用专业的HTML净化库。</strong> 不要尝试自己写正则来清理HTML，那几乎是不可能完成的任务，你总会漏掉一些巧妙的攻击方式。对于Node.js，可以使用</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">DOMPurify</pre>
<div class="contentsignin"></div>
</div>
<p>（它也可以在浏览器端使用，但服务器端使用更安全）；对于Java，可以考虑OWASP ESAPI的HTML Sanitizer；PHP有HTML Purifier；Python有Bleach等等。<strong>白名单机制，而非黑名单。</strong> 这是核心原则。不要去尝试移除“所有坏的东西”，而是明确规定“只允许这些好的东西”。这意味着你只允许特定的HTML标签（例如</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">p</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">br</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">strong</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">em</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">a</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">img</pre>
<div class="contentsignin"></div>
</div>
<p>等），特定的属性（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">href</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">src</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">alt</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">title</pre>
<div class="contentsignin"></div>
</div>
<p>等），以及特定的CSS样式（如果允许的话）。所有不在白名单上的标签和属性都会被移除。尤其要禁止</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">script</pre>
<div class="contentsignin"></div>
</div>
<p>标签、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">iframe</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">object</pre>
<div class="contentsignin"></div>
</div>
<p>等可能执行脚本的标签，以及</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">onclick</pre>
<div class="contentsignin"></div>
</div>
<p>, </p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">onerror</pre>
<div class="contentsignin"></div>
</div>
<p>等事件属性，还有</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">javascript:</pre>
<div class="contentsignin"></div>
</div>
<p>协议的URL。</p>
<p><strong>客户端富文本编辑器配置（辅助作用，非安全保障）</strong></p>
<p>许多富文本编辑器本身也提供了HTML清理功能。你可以配置它们在用户输入或粘贴时，自动移除不安全的标签或属性。<strong>但请记住：</strong> 客户端的清理主要是为了改善用户体验，比如清理从Word粘贴过来的冗余HTML，让编辑区域的内容更干净。它<strong>绝不能</strong>替代服务器端的安全校验。恶意用户可以绕过你的前端JS，直接提交恶意数据。</p>
<p><strong>Content Security Policy (CSP)——额外的安全层。</strong></p>
<p>在你的Web服务器上配置严格的CSP头部。CSP可以限制浏览器可以加载和执行的资源（如脚本、样式、图片等）的来源。通过CSP，你可以禁止内联脚本（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">unsafe-inline</pre>
<div class="contentsignin"></div>
</div>
<p>）、限制脚本只能从你的域名加载（</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">script-src 'self'</pre>
<div class="contentsignin"></div>
</div>
<p>），或者完全禁用某些类型的资源。这即使在XSS攻击发生时，也能大大降低其危害，因为恶意脚本可能因为CSP的限制而无法执行。</p>
<p><strong>渲染时的上下文转义（Contextual Escaping）</strong></p>
<p>当你在页面上显示用户提交的富文本内容时，虽然内容已经经过服务器端净化，但在某些特定场景下，仍然需要进行上下文转义。例如，如果你要把富文本内容插入到HTML属性中（虽然这种情况不常见），或者插入到JavaScript字符串中，那就需要使用相应的HTML实体编码或JavaScript字符串转义函数。这能防止因为误解内容而导致的二次注入。</p>
<p>总而言之，处理富文本安全问题，核心理念是：<strong>永远不要信任用户的输入</strong>。服务器端的严格净化是基石，配合CSP和客户端的辅助清理，才能构建一个相对安全的富文本处理流程。这块儿说实话挺让人头疼的，但为了用户数据和系统安全，这些步骤一个都不能少。</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/1571939.html</span></p></div>                        </div>

                        <div class="entry-tag"><a href="https://www.chuangxiangniao.com/p/tag/access" rel="tag">access</a><a href="https://www.chuangxiangniao.com/p/tag/apidiaoyong" rel="tag">api调用</a><a href="https://www.chuangxiangniao.com/p/tag/css" rel="tag">css</a><a href="https://www.chuangxiangniao.com/p/tag/git" rel="tag">git</a><a href="https://www.chuangxiangniao.com/p/tag/htmlyuansu" rel="tag">html元素</a><a href="https://www.chuangxiangniao.com/p/tag/python" rel="tag">python</a><a href="https://www.chuangxiangniao.com/p/tag/vue" rel="tag">vue</a><a href="https://www.chuangxiangniao.com/p/tag/gongju" rel="tag">工具</a><a href="https://www.chuangxiangniao.com/p/tag/liulanqi" rel="tag">浏览器</a></div>
                        <div class="entry-action">
                            <div class="btn-zan" data-id="1571939"><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="1571939"><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="1571939" data-qrcode="https://www.chuangxiangniao.com/p/1571939.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>392.7K</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/175524841234856.png?imageMogr2/crop/480x300/gravity/center">
                <a href="https://www.chuangxiangniao.com/p/1571934.html" title="怎样在HTML中插入一个YouTube视频？ 视频嵌入教程" rel="prev">
                    <span>怎样在HTML中插入一个YouTube视频？ 视频嵌入教程</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日 14:11:43</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/175524672463980.png">
                <a href="https://www.chuangxiangniao.com/p/1571941.html" title="menu和menuitem标签有什么用？菜单项如何定义？" rel="next">
                    <span>menu和menuitem标签有什么用？菜单项如何定义？</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日 14:11:49</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 item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1571934.html" target="_blank" rel="bookmark">
                                 怎样在HTML中插入一个YouTube视频？ 视频嵌入教程            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1571934.html" title="怎样在HTML中插入一个YouTube视频？ 视频嵌入教程" 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/175524841234856.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="https://cdn.chuangxiangniao.com/www/2025/12/175524841383796.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="https://cdn.chuangxiangniao.com/www/2025/12/175524841379982.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="https://cdn.chuangxiangniao.com/www/2025/12/175524841347470.png"></i></span>        </a>
        <div class="item-excerpt">
            <p>要嵌入youtube视频并实现自定义控制和响应式布局，首先使用youtube提供的iframe代码并添加自定义参数，其次通过css实现响应式设计，最后利用youtube iframe player api添加自定义控件。1. 获取嵌入代码：在youtube视频下方点击“分享”→“嵌入”，复制显示的i…</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/1571934.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/1571932.html" title="Python网络爬虫：处理JavaScript动态加载内容的策略" 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="Python网络爬虫：处理JavaScript动态加载内容的策略" decoding="async" fetchpriority="high" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524842116268.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/1571932.html" target="_blank" rel="bookmark">
                                 Python网络爬虫：处理JavaScript动态加载内容的策略            </a>
        </h3>
        <div class="item-excerpt">
            <p>在进行网页数据抓取时，传统的BeautifulSoup结合Requests库仅能获取页面的静态HTML内容。然而，现代网站普遍采用JavaScript动态加载数据，导致BeautifulSoup无法捕获这些渲染后的内容，例如表格数据。本文将深入探讨这一问题，并提供利用Selenium等工具来模拟浏览…</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/1571932.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/1571930.html" title="HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？" 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表单如何实现SEO优化？怎样让搜索引擎索引内容？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524943016813.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/1571930.html" target="_blank" rel="bookmark">
                                 HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？            </a>
        </h3>
        <div class="item-excerpt">
            <p>HTML表单的SEO优化核心在于提升表单的语义化、可访问性和内容可见性，使其从动态交互“黑洞”转变为搜索引擎可理解的透明入口。首先，通过使用正确的HTML5标签（如、、）、关联label与input的for和id属性、精确设置type、name等属性，赋予表单字段明确的语义身份，帮助搜索引擎理解其用…</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/1571930.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/1571928.html" title="HTML如何设置表单输入提示？placeholder属性的用法是什么？" 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如何设置表单输入提示？placeholder属性的用法是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175522962656150.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/1571928.html" target="_blank" rel="bookmark">
                                 HTML如何设置表单输入提示？placeholder属性的用法是什么？            </a>
        </h3>
        <div class="item-excerpt">
            <p>placeholder属性是html表单中用于输入提示的核心方法，通过在input或textarea标签中添加placeholder属性可直接设置提示文字，如“请输入用户名”，用户开始输入时提示自动消失；该属性在现代浏览器如chrome、firefox、safari、edge中广泛支持，但在ie9及…</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/1571928.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/1571926.html" title="HTML如何设置锁定样式？locked伪类的用法是什么？" 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如何设置锁定样式？locked伪类的用法是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523082730745.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/1571926.html" target="_blank" rel="bookmark">
                                 HTML如何设置锁定样式？locked伪类的用法是什么？            </a>
        </h3>
        <div class="item-excerpt">
            <p>要锁定html元素的样式，核心是阻止用户交互，需结合css和javascript实现；1. 使用 pointer-events: none 和 user-select: none 禁用鼠标事件和文本选择，并可设置透明度提示锁定状态；2. 覆盖:hover和:focus等默认样式，恢复背景色和光标；3…</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/1571926.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/1571924.html" title="表单的enctype属性有什么作用？何时需要设置multipart/form-data？" 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="表单的enctype属性有什么作用？何时需要设置multipart/form-data？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523154721037.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/1571924.html" target="_blank" rel="bookmark">
                                 表单的enctype属性有什么作用？何时需要设置multipart/form-data？            </a>
        </h3>
        <div class="item-excerpt">
            <p>表单enctype属性决定数据编码方式，上传文件时必须设为multipart/form-data，因默认的application/x-www-form-urlencoded无法处理二进制数据，会导致文件内容损坏或丢失。 表单的enctype属性用于指定表单数据的编码方式，决定了数据如何发送到服务器。…</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/1571924.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/1571922.html" title="HTML如何制作粒子效果？canvas怎么绘制动态点？" 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如何制作粒子效果？canvas怎么绘制动态点？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523317441321.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/1571922.html" target="_blank" rel="bookmark">
                                 HTML如何制作粒子效果？canvas怎么绘制动态点？            </a>
        </h3>
        <div class="item-excerpt">
            <p>实现html canvas粒子效果需先创建canvas标签并获取上下文；2. 定义粒子类，包含位置、颜色、速度等属性及绘制和更新方法；3. 初始化多个粒子并加入数组；4. 使用requestanimationframe创建动画循环，每帧清空画布并更新粒子；5. 优化性能可通过减少粒子数量、避免冗余绘…</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/1571922.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/1571920.html" title="表单中的A/B测试怎么实现？如何比较不同表单版本？" 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="表单中的A/B测试怎么实现？如何比较不同表单版本？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523562222407.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/1571920.html" target="_blank" rel="bookmark">
                                 表单中的A/B测试怎么实现？如何比较不同表单版本？            </a>
        </h3>
        <div class="item-excerpt">
            <p>表单a/b测试的核心是通过科学方法比较不同版本以确定最优方案，具体做法包括明确测试目标、选择单一变量设计变体、合理分配流量、精准收集数据并进行统计显著性分析，常见测试点涵盖cta按钮、字段设计、布局流程、错误提示和信任信号等，分析时需确保足够样本量、关注主次指标、评估统计显著性、控制测试时长并做用户…</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/1571920.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/1571918.html" title="HTML如何设置字幕样式？cue伪类的作用是什么？" 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如何设置字幕样式？cue伪类的作用是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523586732650.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/1571918.html" target="_blank" rel="bookmark">
                                 HTML如何设置字幕样式？cue伪类的作用是什么？            </a>
        </h3>
        <div class="item-excerpt">
            <p>核心答案是使用html的标签加载webvtt字幕文件，并通过css的::cue伪类设置样式。1. 准备webvtt格式字幕文件，确保时间戳和文本正确；2. 在标签中使用引入字幕，设置src、kind、srclang和label属性；3. 使用css的video::cue选择器定义字幕样式，如颜色、字…</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/1571918.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/1571916.html" title="解决CSS背景图片不显示：深入解析与调试指南" 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背景图片不显示：深入解析与调试指南" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523617719643.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/1571916.html" target="_blank" rel="bookmark">
                                 解决CSS背景图片不显示：深入解析与调试指南            </a>
        </h3>
        <div class="item-excerpt">
            <p>本教程旨在解决CSS背景图片无法正常显示的问题，重点探讨了CSS选择器（特别是html与body的选择）、文件路径的正确使用，并强调了图片文件本身完整性的重要性。通过本文，读者将学会如何有效地为网页设置背景图片，掌握常见的调试技巧，确保背景图片按预期显示。 网页背景图片设置基础 在网页开发中，使用C…</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/1571916.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/1571914.html" title="解决CSS背景图片不显示问题：路径、元素选择器与调试技巧" 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背景图片不显示问题：路径、元素选择器与调试技巧" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523689916093.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/1571914.html" target="_blank" rel="bookmark">
                                 解决CSS背景图片不显示问题：路径、元素选择器与调试技巧            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文旨在解决CSS背景图片无法正常显示的核心问题，特别是针对新手常犯的路径错误和元素选择器误用。我们将深入探讨background-image属性在body元素上的正确应用，解析相对路径的原理与常见陷阱，并强调检查图片文件完整性的重要性。通过本文，读者将掌握有效的调试方法和最佳实践，确保网页背景图片…</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/1571914.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/1571912.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/175523749392092.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/1571912.html" target="_blank" rel="bookmark">
                                 HTML表单如何实现多因素认证？怎样添加额外的安全层？            </a>
        </h3>
        <div class="item-excerpt">
            <p>多因素认证（MFA）通过将登录拆分为多个服务器验证步骤，在用户提交用户名密码后，利用HTML表单作为接口收集第二因素（如验证码、生物识别），实现安全增强。 HTML表单实现多因素认证（MFA）的本质，是在用户提交了第一层（通常是用户名和密码）验证信息后，通过服务器端逻辑，引导用户进入一个额外的、要求…</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/1571912.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/1571910.html" title="CSS背景图片不显示：路径、元素选择器与调试技巧" 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背景图片不显示：路径、元素选择器与调试技巧" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523952566896.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/1571910.html" target="_blank" rel="bookmark">
                                 CSS背景图片不显示：路径、元素选择器与调试技巧            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文旨在解决CSS背景图片不显示这一常见问题，重点探讨了图片路径的正确设置方法、body与html元素在背景设置上的选择差异，并强调了图片文件本身的完整性检查。通过专业指南和代码示例，帮助开发者理解并规避CSS背景设置中的常见陷阱，确保背景图片能够正确加载并显示，提升网页视觉效果。 1. 理解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/1571910.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/1571908.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/175524012538131.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/1571908.html" target="_blank" rel="bookmark">
                                 HTML表单开发：解决标签文本在单选按钮前不显示的常见问题            </a>
        </h3>
        <div class="item-excerpt">
            <p>本教程探讨了HTML表单中标签文本（尤其是在单选按钮前）不显示的常见问题。核心原因在于前置HTML元素（如label和select）未正确闭合，导致浏览器解析错误。文章通过具体案例分析，提供正确的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/1571908.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/1571906.html" title="HTML如何设置画中画媒体控制样式？picture-in-picture-media-controls伪类的作用是什么？" 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如何设置画中画媒体控制样式？picture-in-picture-media-controls伪类的作用是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524024798432.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/1571906.html" target="_blank" rel="bookmark">
                                 HTML如何设置画中画媒体控制样式？picture-in-picture-media-controls伪类的作用是什么？            </a>
        </h3>
        <div class="item-excerpt">
            <p>通过::picture-in-picture-media-controls伪类自定义画中画控件样式，结合object-fit处理视频自适应，使用JavaScript检测pictureInPictureEnabled支持性，并注意跨域、兼容性与用户体验等最佳实践。 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/1571906.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/1571904.html" title="HTML表单元素嵌套与显示：以Radio输入框标签为例" 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表单元素嵌套与显示：以Radio输入框标签为例" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524036433998.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/1571904.html" target="_blank" rel="bookmark">
                                 HTML表单元素嵌套与显示：以Radio输入框标签为例            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文探讨HTML表单中标签文本无法在Radio输入框上方显示的问题。核心原因在于前置HTML元素（如和）未正确闭合，导致浏览器解析异常。文章详细介绍了正确的HTML结构，并强调了元素闭合、代码缩进及利用开发者工具进行调试的重要性，旨在帮助开发者构建结构清晰、可维护的Web表单。 问题现象与分析 在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/1571904.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/1571902.html" title="HTML表单如何实现文件拖拽上传？drop事件怎么处理？" 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表单如何实现文件拖拽上传？drop事件怎么处理？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524072247092.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/1571902.html" target="_blank" rel="bookmark">
                                 HTML表单如何实现文件拖拽上传？drop事件怎么处理？            </a>
        </h3>
        <div class="item-excerpt">
            <p>文件拖拽上传通过HTML5的dragover和drop事件实现，核心是阻止默认行为并读取dataTransfer中的文件数据，利用FormData和fetch API上传。为提升体验，可添加拖拽样式反馈、进度条、错误提示及文件类型大小限制。大文件上传需分片处理，使用File.slice()分割文件，…</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/1571902.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/1571900.html" title="表单中的formaction属性有什么用？如何覆盖表单的action属性？" 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="表单中的formaction属性有什么用？如何覆盖表单的action属性？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524252736711.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/1571900.html" target="_blank" rel="bookmark">
                                 表单中的formaction属性有什么用？如何覆盖表单的action属性？            </a>
        </h3>
        <div class="item-excerpt">
            <p>formaction 属性能解决单个表单多目标提交的问题，其最大作用场景包括多功能提交按钮（如“保存草稿”与“发布”）、a/b测试、条件分支流程，它不直接影响表单验证，验证仍由 required 等属性控制，但可与 formnovalidate 配合实现跳过验证，最佳实践包括明确按钮意图、结合 fo…</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/1571900.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/1571898.html" title="表单中的Serverless怎么应用？如何用云函数处理提交？" 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="表单中的Serverless怎么应用？如何用云函数处理提交？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175518480395151.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/1571898.html" target="_blank" rel="bookmark">
                                 表单中的Serverless怎么应用？如何用云函数处理提交？            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案：Serverless处理表单通过云函数直接响应前端提交，无需自建后端服务器。用户提交表单时，数据发送至云函数API网关，函数从请求体获取数据并解析，支持application/x-www-form-urlencoded、JSON及multipart/form-data格式，后者需借助库处理文件…</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/1571898.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/1571896.html" title="HTML如何设置时间显示？time标签的作用是什么？" 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如何设置时间显示？time标签的作用是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175518510347287.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/1571896.html" target="_blank" rel="bookmark">
                                 HTML如何设置时间显示？time标签的作用是什么？            </a>
        </h3>
        <div class="item-excerpt">
            <p>格式化时间显示的关键在于使用datetime属性和标签内文本，datetime遵循ISO 8601标准，文本可本地化展示，结合JavaScript可动态格式化，提升SEO与兼容性。 HTML中设置时间显示主要通过 标签结合 datetime 属性来实现。 datetime 属性定义了机器可读的时间格…</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/1571896.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/1571939.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>392.7K</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/1571941.html" title="menu和menuitem标签有什么用？菜单项如何定义？">menu和menuitem标签有什么用？菜单项如何定义？</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1571939.html" title="HTML表单如何实现富文本编辑？怎样添加文本格式工具？">HTML表单如何实现富文本编辑？怎样添加文本格式工具？</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1571934.html" title="怎样在HTML中插入一个YouTube视频？ 视频嵌入教程">怎样在HTML中插入一个YouTube视频？ 视频嵌入教程</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1571932.html" title="Python网络爬虫：处理JavaScript动态加载内容的策略">Python网络爬虫：处理JavaScript动态加载内容的策略</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1571930.html" title="HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？">HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？</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/1571941.html" title="menu和menuitem标签有什么用？菜单项如何定义？">menu和menuitem标签有什么用？菜单项如何定义？</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/1571939.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/175524798520811.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571939.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/1571934.html" title="怎样在HTML中插入一个YouTube视频？ 视频嵌入教程">
                                    <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中插入一个YouTube视频？ 视频嵌入教程" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524841234856.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571934.html" title="怎样在HTML中插入一个YouTube视频？ 视频嵌入教程">怎样在HTML中插入一个YouTube视频？ 视频嵌入教程</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/1571932.html" title="Python网络爬虫：处理JavaScript动态加载内容的策略">
                                    <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="Python网络爬虫：处理JavaScript动态加载内容的策略" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524842116268.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571932.html" title="Python网络爬虫：处理JavaScript动态加载内容的策略">Python网络爬虫：处理JavaScript动态加载内容的策略</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/1571930.html" title="HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？">
                                    <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表单如何实现SEO优化？怎样让搜索引擎索引内容？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175524943016813.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571930.html" title="HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？">HTML表单如何实现SEO优化？怎样让搜索引擎索引内容？</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/1571928.html" title="HTML如何设置表单输入提示？placeholder属性的用法是什么？">
                                    <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如何设置表单输入提示？placeholder属性的用法是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175522962656150.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571928.html" title="HTML如何设置表单输入提示？placeholder属性的用法是什么？">HTML如何设置表单输入提示？placeholder属性的用法是什么？</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/1571926.html" title="HTML如何设置锁定样式？locked伪类的用法是什么？">
                                    <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如何设置锁定样式？locked伪类的用法是什么？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523082730745.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571926.html" title="HTML如何设置锁定样式？locked伪类的用法是什么？">HTML如何设置锁定样式？locked伪类的用法是什么？</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/1571924.html" title="表单的enctype属性有什么作用？何时需要设置multipart/form-data？">
                                    <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="表单的enctype属性有什么作用？何时需要设置multipart/form-data？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523154721037.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571924.html" title="表单的enctype属性有什么作用？何时需要设置multipart/form-data？">表单的enctype属性有什么作用？何时需要设置multipart/form-data？</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/1571922.html" title="HTML如何制作粒子效果？canvas怎么绘制动态点？">
                                    <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如何制作粒子效果？canvas怎么绘制动态点？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523317441321.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571922.html" title="HTML如何制作粒子效果？canvas怎么绘制动态点？">HTML如何制作粒子效果？canvas怎么绘制动态点？</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/1571920.html" title="表单中的A/B测试怎么实现？如何比较不同表单版本？">
                                    <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="表单中的A/B测试怎么实现？如何比较不同表单版本？" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175523562222407.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1571920.html" title="表单中的A/B测试怎么实现？如何比较不同表单版本？">表单中的A/B测试怎么实现？如何比较不同表单版本？</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/o" title="o">o</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/css" title="css">css</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/2025" title="2025">2025</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/weishenme" title="为什么">为什么</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": 1571939,
    "terms": [{"id":49069,"tax":"category"},{"id":175,"tax":"post_tag"},{"id":333,"tax":"post_tag"},{"id":190,"tax":"post_tag"},{"id":205,"tax":"post_tag"},{"id":347,"tax":"post_tag"},{"id":284,"tax":"post_tag"},{"id":144,"tax":"post_tag"},{"id":118,"tax":"post_tag"},{"id":116,"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":"1571939","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":"1571939","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":"1571939"};
//# 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":"1571939","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/1571939.html","url":"https://www.chuangxiangniao.com/p/1571939.html","headline":"HTML表单如何实现富文本编辑？怎样添加文本格式工具？","description":"原生HTML/CSS无法实现富文本编辑，contentEditable虽提供基础但存在跨浏览器兼容性差、无内置工具栏、输出难控制等问题；推荐使用第三方库因其封装了复杂性，提供一致API、丰富功能、良好安全机制和易用性，显著提升开发效率与用户体验。 HTML表单实现富文本编辑，通常我们是借助JavaS…","datePublished":"2025-12-22T14:11:45+08:00","dateModified":"2025-12-22T14:11:45+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/175524798520811.png"]}</script>
<script>console.log('命中缓存\n缓存页加载耗时: 0.0467s\n缓存页生成时间: 2025-12-22 16:46:26')</script></body>
</html><!--cached by imwpcache 2025-12-22 16:46:26-->