head标签是网页的“幕后指挥部”，包含元信息、标题、资源链接、脚本和样式，直接影响SEO、加载速度和社交分享表现。
HTML文档的
head
标签，其实就是网页的“大脑”或者说“幕后指挥部”。它不直接显示任何可见内容给用户，但却承载了大量关于网页的元数据、样式链接、脚本引用以及其他重要配置信息。简单来说，它告诉浏览器和搜索引擎这个页面是什么、怎么显示、怎么与其他服务交互。
解决方案
在我看来，
head
标签里放的东西，主要可以分成几大类，每一类都各有其用，且都至关重要。
首先是元信息（Metadata）。这是最核心的部分，通过
标签来定义。比如，
charset="UTF-8"
告诉浏览器用什么字符编码来解析页面，这直接关系到中文会不会乱码；
viewport
设置，如
，这对于响应式设计至关重要，它决定了页面在不同设备（尤其是手机）上的缩放和显示行为。还有描述页面内容的
和关键词
，这些是搜索引擎了解你页面的重要线索。当然，还有一些不那么常用但偶尔有用的，比如作者信息、页面刷新指令等。
然后是页面标题（Title）。这个通过
</pre> <div class="contentsignin"></div> </div> <p> 标签来定义，它会显示在浏览器标签页、书签以及搜索引擎结果页上。坦白说，一个好的页面标题，不仅能吸引用户点击，对SEO的帮助也是实打实的。</p> <p>立即学习“前端免费学习笔记（深入）”；</p> <p>接着是<strong>外部资源链接（Links）</strong>。这主要是通过 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></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;"></pre> <div class="contentsignin"></div> </div> <p>，它决定了页面的视觉风格。另外，网站的图标（Favicon），也就是浏览器标签页上那个小图标，也是通过 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 来引用的。高级一点的，还有预加载资源（</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">preload</pre> <div class="contentsignin"></div> </div> <p>）、预连接（</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">preconnect</pre> <div class="contentsignin"></div> </div> <p>）等，这些都关乎页面的加载性能。</p> <p><strong>脚本（Scripts）</strong>也是一部分，虽然我们常说为了性能最好把JavaScript脚本放在</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">body</pre> <div class="contentsignin"></div> </div> <p>标签的末尾，但有些关键的脚本，比如Google Analytics的统计代码，或者某些需要页面初始化就运行的配置脚本，还是会放在</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>里。这通常通过 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 标签来实现。</p> <p>最后，还有<strong>内部样式（Internal Styles）</strong>。如果页面有一些局部或临时的CSS样式，不想单独建立一个CSS文件，也可以直接在 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 标签内写入。不过，这在大型项目中并不推荐，因为不利于维护和复用。</p> <p>总的来说，</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签里的内容，虽然看不见摸不着，却是整个网页正常运行、良好表现的基础。</p> <h3>优化搜索引擎：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签如何影响网站排名与用户体验？</h3><p>说到SEO和用户体验，</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签简直就是兵家必争之地。你放进去的每一个元素，都可能悄悄地影响你的网站在搜索引擎中的表现，以及用户对你页面的第一印象。</p> <p>最直接的影响来自</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"><title></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>是它理解页面主题的关键信息之一。一个包含相关关键词、简洁明了的标题，不仅能帮助搜索引擎判断页面的相关性，更重要的是，它会直接显示在搜索结果中。用户在看到搜索结果时，往往就是通过标题来决定是否点击的。所以，一个有吸引力的标题，直接关系到你的点击率（CTR）。</p> <p>紧随其后的是</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>。这个描述虽然不再直接影响排名，但它会作为你页面在搜索结果中的摘要。如果你的描述写得好，能够准确概括页面内容，并诱导用户点击，那么用户体验和间接的排名提升（通过更高的CTR）都会随之而来。反之，如果描述空洞或者缺失，搜索引擎可能会随机抓取页面内容作为摘要，效果就没那么可控了。</p> <p>此外，还有一些不那么显眼但同样重要的元素。比如，</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 标签，它告诉搜索引擎哪个URL是页面的“权威”版本，这对于避免重复内容问题至关重要，能有效集中页面的排名权重。再比如，针对国际化网站的</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>，它指导搜索引擎在不同语言或地区的用户面前展示最合适的页面版本。这些都是在幕后默默工作，却对网站的可见性和用户体验有着深远影响的。</p> <h3>提升加载速度：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签中的资源预加载与性能优化技巧</h3><p>网页的加载速度，在当下这个快节奏的时代，简直就是用户的命根子。而</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签，恰恰是优化页面加载性能的一个重要战场。</p> <p>我们知道，浏览器在解析HTML文档时，遇到外部资源（比如CSS文件、字体文件）的链接，会暂停渲染，去下载这些资源。如果这些关键资源能提前被浏览器感知并下载，那整个页面的渲染速度就会大大提升。这就是<strong>资源预加载</strong>的思路。</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 就是一个很好的例子。它告诉浏览器，“嘿，这个</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">critical.css</pre> <div class="contentsignin"></div> </div> <p>文件我很快就要用到，你先去下载吧，别等解析到它的时候再开始。” 这样，当浏览器真正需要渲染样式时，CSS文件可能已经下载好了，省去了等待时间。类似地，对于重要的JavaScript文件、字体文件或者图片，也可以使用</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">preload</pre> <div class="contentsignin"></div> </div> <p>。</p> <p>另外，</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 和 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> 也扮演着类似的角色。</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">preconnect</pre> <div class="contentsignin"></div> </div> <p> 告诉浏览器，我可能要从这个域名加载资源，你先建立好连接；</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">dns-prefetch</pre> <div class="contentsignin"></div> </div> <p> 则是提前进行DNS解析。这些都是在页面真正需要这些资源之前，提前做好准备工作，从而减少了后续请求的延迟。</p> <p>当然，也要注意平衡。虽然把所有关键资源都放进</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>里看起来很美，但如果过度预加载非关键资源，反而会占用带宽，延迟真正重要内容的渲染。对于JavaScript脚本，虽然有些会放在</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>，但如果脚本会阻塞页面渲染，通常我们会加上</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">defer</pre> <div class="contentsignin"></div> </div> <p>或</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">async</pre> <div class="contentsignin"></div> </div> <p>属性，或者干脆移到</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">body</pre> <div class="contentsignin"></div> </div> <p>末尾，让HTML和CSS先渲染出来，提升用户感知的加载速度。这是一个取舍和权衡的过程，需要根据实际项目情况来决定。</p> <h3>跨平台兼容与社交分享：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签如何塑造网页在不同环境下的表现？</h3><p>现代网页不仅仅是在桌面浏览器上显示，它还可能在手机、平板上被访问，甚至在社交媒体上被分享。</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</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;"></pre> <div class="contentsignin"></div> </div> <p> 就是核心。没有它，移动浏览器可能会以桌面模式渲染页面，导致字体过小、布局混乱。通过设置这个视口，我们才能确保页面在不同尺寸的移动设备上都能良好地进行响应式布局和显示。更进一步，一些移动浏览器还支持 </p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>，这能让浏览器顶部的<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/gongju" title="工具" target="_blank">工具</a></span>栏颜色与你的品牌色保持一致，提升用户在移动设备上的沉浸感。</p> <p>其次是<strong>社交媒体分享</strong>。当你把一个网页链接分享到<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/weixin" title="微信" target="_blank">微信</a></span>、<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/weibo" title="微博" target="_blank">微博</a></span>、Facebook或Twitter时，你通常会看到一个带有图片、标题和描述的预览卡片。这些漂亮的预览，就是通过</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签中的<strong>Open Graph (OG)</strong> 和 <strong>Twitter Cards</strong> 元数据来定义的。</p> <p>比如，针对Facebook和微信，你会用到一系列</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">og:</pre> <div class="contentsignin"></div> </div> <p>属性：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>而针对Twitter，则有类似的</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">twitter:</pre> <div class="contentsignin"></div> </div> <p>属性：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p> (定义卡片类型，比如大图摘要)</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>这些元数据让社交平台能够准确地抓取你想要展示的信息，确保你的内容在分享时以最吸引人的方式呈现。这不仅提升了内容的传播效率，也直接影响了品牌形象和用户体验。没有这些，你的链接分享出去可能就只有光秃秃的URL，没人会想点开。所以，</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;">head</pre> <div class="contentsignin"></div> </div> <p>标签里的这些配置，是现代网页不可或缺的一部分，它让你的内容能够更好地融入到整个互联网的生态系统中。</p> <p>以上就是HTML中head标签内部通常放置什么内容的详细内容，更多请关注创想鸟其它相关文章！</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/1573986.html</span></p></div> </div> <div class="entry-tag"><a href="https://www.chuangxiangniao.com/p/tag/css" rel="tag">css</a><a href="https://www.chuangxiangniao.com/p/tag/facebook" rel="tag">facebook</a><a href="https://www.chuangxiangniao.com/p/tag/go" rel="tag">go</a><a href="https://www.chuangxiangniao.com/p/tag/head" rel="tag">head</a><a href="https://www.chuangxiangniao.com/p/tag/html" rel="tag">html</a><a href="https://www.chuangxiangniao.com/p/tag/java" rel="tag">java</a><a href="https://www.chuangxiangniao.com/p/tag/javascript" rel="tag">javascript</a><a href="https://www.chuangxiangniao.com/p/tag/word" rel="tag">word</a><a href="https://www.chuangxiangniao.com/p/tag/gongju" rel="tag">工具</a><a href="https://www.chuangxiangniao.com/p/tag/weixin" rel="tag">微信</a><a href="https://www.chuangxiangniao.com/p/tag/weibo" 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="1573986"><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="1573986"><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="1573986" data-qrcode="https://www.chuangxiangniao.com/p/1573986.html"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报 </a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow noopener noreferrer" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow noopener noreferrer" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow noopener noreferrer" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow noopener noreferrer" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i> </a> <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow noopener noreferrer" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> <div class="entry-author"> <h3 class="entry-author-title">关于作者</h3> <div class="entry-author-inner"> <div class="entry-author-avatar"> <a class="avatar j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a> </div> <div class="entry-author-content"> <div class="entry-author-info"> <h4 class="entry-author-name"> <a class="j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3">程序猿<span class="user-group">签约作者</span></a> </h4> <div class="entry-author-action"> <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button><button type="button" class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg></i>私信</button> </div> </div> <div class="entry-author-stats"> <div class="user-stats-item"> <b>393.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/175647727593434.jpg?imageMogr2/crop/480x300/gravity/center"> <a href="https://www.chuangxiangniao.com/p/1573984.html" title="使用 Cheerio 进行 Class 选择器操作详解" rel="prev"> <span>使用 Cheerio 进行 Class 选择器操作详解</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日 15:55:24</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/175651626633023.png"> <a href="https://www.chuangxiangniao.com/p/1573988.html" title="怎样为HTML文档添加外部CSS样式表" rel="next"> <span>怎样为HTML文档添加外部CSS样式表</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日 15:55:46</span> </div> </div> </div> <div class="entry-related-posts"> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item item2"> <div class="item-img"> <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1573984.html" title="使用 Cheerio 进行 Class 选择器操作详解" 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="使用 Cheerio 进行 Class 选择器操作详解" decoding="async" fetchpriority="high" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647727593434.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/1573984.html" target="_blank" rel="bookmark"> 使用 Cheerio 进行 Class 选择器操作详解 </a> </h3> <div class="item-excerpt"> <p>本文旨在帮助开发者理解和掌握如何使用 Cheerio 库进行 Class 选择器操作，从网页中提取特定元素及其子元素的内容。我们将通过示例代码，详细介绍如何利用 Cheerio 选择器获取目标元素，并遍历其子元素，最终提取所需文本信息。 Cheerio 是一个快速、灵活、简洁的 Node.js 库，…</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/1573984.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/1573982.html" title="Cheerio中类选择器与子元素提取的实战指南" 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="Cheerio中类选择器与子元素提取的实战指南" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647732572110.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/1573982.html" target="_blank" rel="bookmark"> Cheerio中类选择器与子元素提取的实战指南 </a> </h3> <div class="item-excerpt"> <p>本文深入探讨了如何使用Cheerio库有效地利用类选择器来选取HTML元素及其直接子元素，并提取它们的文本内容。通过实例代码，详细解析了.className > *选择器组合的用法，以及如何结合.get()和.map()方法实现高效的数据抓取，帮助开发者精准定位并处理网页结构中的特定信息。 1…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card"> <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>程序猿</span> </a> </div> <span class="item-meta-li date">2025年12月22日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1573982.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/1573980.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/175647750256462.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/1573980.html" target="_blank" rel="bookmark"> 如何创建HTML文档的超链接 </a> </h3> <div class="item-excerpt"> <p>创建超链接需用标签并设置href属性，可链接外部页面、内部文件或页面锚点，通过target=”_blank”和rel=”noopener noreferrer”实现安全新窗口打开，使用描述性链接文本、定期检查死链、保障无障碍访问为最佳实践，图片或块级元…</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/1573980.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/1573978.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/175647751318557.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/1573978.html" target="_blank" rel="bookmark"> HTML中如何插入水平线 </a> </h3> <div class="item-excerpt"> <p>使用标签可插入表示主题分隔的水平线，它从视觉元素演变为具有语义功能的标签，通过CSS可自定义样式如颜色、粗细和渐变效果；在仅需视觉分隔时，推荐用结合CSS实现，以保持语义清晰。 在HTML中，插入水平线最直接、最核心的方式就是使用 标签。它代表着内容中的一个主题性变化（thematic break）…</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/1573978.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/1573976.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/175647756366863.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/1573976.html" target="_blank" rel="bookmark"> HTML中如何创建搜索输入框 </a> </h3> <div class="item-excerpt"> <p>答案：创建搜索输入框需使用HTML的，并结合无障碍属性、CSS样式和JavaScript实现清除按钮与搜索建议功能，提升用户体验与可访问性。 创建搜索输入框，本质上就是使用HTML的 元素，并设置其 type 属性为”search”。当然，这只是最基础的。 解决方案 要创建一…</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/1573976.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/1573972.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/175647786662458.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/1573972.html" target="_blank" rel="bookmark"> 如何设置HTML文档的视口属性 </a> </h3> <div class="item-excerpt"> <p>视口属性是移动端网页适配的关键，通过设置width=device-width使页面宽度匹配设备屏幕，initial-scale=1.0确保初始不缩放，避免内容过小或频繁缩放带来的不良体验。若不设置，浏览器可能以默认大宽度渲染并缩放，导致显示模糊或操作不便。minimum-scale、maximum-…</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/1573972.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/1573970.html" title="如何实现内容加载状态" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何实现内容加载状态" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647798766513.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/1573970.html" target="_blank" rel="bookmark"> 如何实现内容加载状态 </a> </h3> <div class="item-excerpt"> <p>实现内容加载状态需管理加载中、成功、错误三种状态，通过视觉反馈提升用户体验。使用局部或全局状态管理组件加载，结合骨架屏、Spinner或进度条等指示器，根据场景选择合适方案；错误时提供友好提示与重试机制，空数据时给予明确指引；在复杂应用中，推荐使用React Query等数据请求库统一管理状态，简化…</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/1573970.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/1573968.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/175647846489727.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/1573968.html" target="_blank" rel="bookmark"> HTML文档的基本结构包含哪些主要标签 </a> </h3> <div class="item-excerpt"> <p>HTML文档基本结构包括、、和。其中，定义元数据如标题、字符集（UTF-8）以避免乱码，标签用于设置keywords、description、viewport等信息，引入CSS，加载JavaScript，包含页面主体内容。 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/1573968.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/1573966.html" title="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="canvas如何保存绘图状态" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647852872238.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/1573966.html" target="_blank" rel="bookmark"> canvas如何保存绘图状态 </a> </h3> <div class="item-excerpt"> <p>Canvas通过context.save()和context.restore()管理绘图状态，前者保存当前样式、变换、剪辑路径等状态到栈中，后者恢复最近保存的状态，确保局部操作不影响全局绘制。 Canvas保存绘图状态主要依靠 context.save() 和 context.restore() 这…</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/1573966.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/1573962.html" title="url输入框有什么特殊验证" 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="url输入框有什么特殊验证" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647966343381.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/1573962.html" target="_blank" rel="bookmark"> url输入框有什么特殊验证 </a> </h3> <div class="item-excerpt"> <p>防止恶意URL需结合前端后端验证，使用正则校验格式，限制协议类型，实施黑白名单、CSP策略，并对URL编码处理，同时优化用户体验如自动补全和实时验证。 通常，URL输入框需要验证输入的文本是否符合URL的格式规范，并且可能需要处理一些安全相关的验证。 解决方案 URL输入框的特殊验证主要集中在以下几…</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/1573962.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/1573958.html" title="CSS background-image 使用指南：解决图片显示异常问题" 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 background-image 使用指南：解决图片显示异常问题" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647968825750.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/1573958.html" target="_blank" rel="bookmark"> CSS background-image 使用指南：解决图片显示异常问题 </a> </h3> <div class="item-excerpt"> <p>本教程深入探讨CSS中background-image属性不生效的常见原因及解决方案。重点分析了选择器优先级、图片路径正确性、元素尺寸限制等关键因素，并提供了最佳实践和代码示例，帮助开发者有效诊断并解决背景图片无法正常显示的问题，确保网页视觉效果按预期呈现。 常见问题分析 在使用css的backgr…</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/1573958.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/1573956.html" title="如何设置资源优先级" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何设置资源优先级" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175648026881233.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/1573956.html" target="_blank" rel="bookmark"> 如何设置资源优先级 </a> </h3> <div class="item-excerpt"> <p>设置资源优先级需识别关键任务，利用操作系统（如Linux的nice、cgroups，Windows的任务管理器）和应用层工具（异步I/O、线程池、缓存、限流熔断）进行精细化管理，结合网络QoS与存储I/O优先级，并通过监控持续调优，确保核心业务高效稳定运行。 设置资源优先级，说白了，就是告诉你的系统…</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/1573956.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/1573954.html" title="使用嵌套 Flexbox 构建导航栏的样式指南" 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="使用嵌套 Flexbox 构建导航栏的样式指南" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647350078295.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/1573954.html" target="_blank" rel="bookmark"> 使用嵌套 Flexbox 构建导航栏的样式指南 </a> </h3> <div class="item-excerpt"> <p>本文档旨在指导开发者如何使用嵌套 Flexbox 创建灵活且易于维护的导航栏。通过结合 Flexbox 的布局能力和 CSS 的定位属性，可以实现复杂的导航栏结构，同时避免样式冲突和布局问题。本文将提供详细的代码示例和解释，帮助读者理解 Flexbox 的工作原理，并掌握创建复杂导航栏布局的技巧。 …</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/1573954.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/1573952.html" title="div和span标签在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="div和span标签在HTML中有什么不同" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647367011606.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/1573952.html" target="_blank" rel="bookmark"> div和span标签在HTML中有什么不同 </a> </h3> <div class="item-excerpt"> <p>div是块级元素，独占一行并占据父容器全宽，适合构建页面结构；span是行内元素，只占内容所需宽度，用于文本内局部样式或操作。 div 和 span 标签在HTML中最根本的区别在于它们的显示行为： div 是一个块级元素，它会独占一行并占据父容器的全部可用宽度；而 span 是一个行内元素，它只占…</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/1573952.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/1573950.html" title="使用 CSS Flexbox 实现嵌套布局及定位" 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 Flexbox 实现嵌套布局及定位" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647457959306.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/1573950.html" target="_blank" rel="bookmark"> 使用 CSS Flexbox 实现嵌套布局及定位 </a> </h3> <div class="item-excerpt"> <p>本文旨在讲解如何使用 CSS Flexbox 创建复杂的嵌套布局，重点解决在嵌套 Flexbox 结构中，内层元素的样式调整影响外层元素布局的问题。通过结合 position: absolute 和 transform 属性，实现对内层元素的精确定位，从而避免对父级 Flexbox 容器的布局产生不…</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/1573950.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/1573948.html" title="datetime属性怎么设置" 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="datetime属性怎么设置" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647498254112.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/1573948.html" target="_blank" rel="bookmark"> datetime属性怎么设置 </a> </h3> <div class="item-excerpt"> <p>datetime属性支持ISO 8601标准的多种格式，如YYYY-MM-DD、YYYY-MM-DDTHH:mm:ss、带时区偏移的时间、仅时间、周数、天数及持续时间等；格式错误会导致机器无法解析，影响SEO、可访问性和脚本执行；datetime值可与显示时间不同，建议保持一致或用JavaScrip…</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/1573948.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/1573946.html" title="如何实现固定定位元素" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何实现固定定位元素" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647505151272.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/1573946.html" target="_blank" rel="bookmark"> 如何实现固定定位元素 </a> </h3> <div class="item-excerpt"> <p>使用position: fixed实现元素固定定位，使其相对于视口定位且不随滚动移动，常用于导航栏等场景；需配合top、left等属性设置位置，并注意z-index层级、内容遮挡、滚动条、transform影响及可访问性问题；可通过padding预留空间、媒体查询响应式调整、合理规划z-index、…</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/1573946.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/1573942.html" title="使用 Cheerio 进行 Class 选择器操作：获取子元素文本内容" 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="使用 Cheerio 进行 Class 选择器操作：获取子元素文本内容" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647510572998.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/1573942.html" target="_blank" rel="bookmark"> 使用 Cheerio 进行 Class 选择器操作：获取子元素文本内容 </a> </h3> <div class="item-excerpt"> <p>本文旨在指导开发者如何使用 Cheerio 库有效地选择和提取 HTML 元素中的子元素文本内容。通过结合示例代码，详细讲解如何利用 Cheerio 的 class 选择器以及 children() 和 text() 方法，轻松获取目标元素的文本数据。本文将帮助您更好地理解和运用 Cheerio，提…</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/1573942.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/1573940.html" title="如何设置输入框的占位文字" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何设置输入框的占位文字" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647546253364.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/1573940.html" target="_blank" rel="bookmark"> 如何设置输入框的占位文字 </a> </h3> <div class="item-excerpt"> <p>答案：输入框占位文字通过HTML的placeholder属性设置，可结合JavaScript动态控制、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/1573940.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/1573938.html" title="如何实现分页加载更多" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何实现分页加载更多" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647546270600.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/1573938.html" target="_blank" rel="bookmark"> 如何实现分页加载更多 </a> </h3> <div class="item-excerpt"> <p>分页加载通过拆分数据并滚动加载提升性能，需监听滚动事件，计算scrollTop、clientHeight和scrollHeight判断触底，结合offset缓冲触发loadMoreData函数，该函数基于currentPage和pageSize发起请求，后端用LIMIT和OFFSET实现分页，前端需…</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/1573938.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/1573986.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://www.chuangxiangniao.com/login?modal-type=login">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="wpcom-btn btn-primary btn-xs submit">提交</button></div></div> </div><!-- #respond --> </div><!-- .comments-area --> </article> </main> <aside class="sidebar"> <div class="widget widget_html_myimg"><script id="w2898_19187">(function () {var zy = document.createElement("script");var flowExchange = window.location.protocol.split(":")[0];var http = flowExchange === "https"?"https":"http";zy.src = http+"://exchange.2898.com/index/flowexchange/getGoods?id=19187&sign=4de6b0e8762acf54f7fbff868909cdae";var s = document.getElementsByTagName("script");for(var i=0;i< s.length;i++){if(s[i].id){if(s[i].id == "w2898_19187"){s[i].parentNode.insertBefore(zy, s[i]);continue;}}}})();</script></div><div class="widget widget_profile"><div class="profile-cover"><img class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//bing.img.run/rand_uhd.php" alt="程序猿"></div> <div class="avatar-wrap"> <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar-link"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a></div> <div class="profile-info"> <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="profile-name"><span class="author-name">程序猿</span><span class="user-group">签约作者</span></a> <p class="author-description">这个人很懒，什么都没有留下～</p> <div class="profile-stats"> <div class="profile-stats-inner"> <div class="user-stats-item"> <b>393.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/1573988.html" title="怎样为HTML文档添加外部CSS样式表">怎样为HTML文档添加外部CSS样式表</a></li> <li><a href="https://www.chuangxiangniao.com/p/1573986.html" title="HTML中head标签内部通常放置什么内容">HTML中head标签内部通常放置什么内容</a></li> <li><a href="https://www.chuangxiangniao.com/p/1573984.html" title="使用 Cheerio 进行 Class 选择器操作详解">使用 Cheerio 进行 Class 选择器操作详解</a></li> <li><a href="https://www.chuangxiangniao.com/p/1573982.html" title="Cheerio中类选择器与子元素提取的实战指南">Cheerio中类选择器与子元素提取的实战指南</a></li> <li><a href="https://www.chuangxiangniao.com/p/1573980.html" title="如何创建HTML文档的超链接">如何创建HTML文档的超链接</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/1573988.html" title="怎样为HTML文档添加外部CSS样式表">怎样为HTML文档添加外部CSS样式表</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/1573986.html" title="HTML中head标签内部通常放置什么内容"> <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中head标签内部通常放置什么内容" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175651650476434.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573986.html" title="HTML中head标签内部通常放置什么内容">HTML中head标签内部通常放置什么内容</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/1573984.html" title="使用 Cheerio 进行 Class 选择器操作详解"> <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="使用 Cheerio 进行 Class 选择器操作详解" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647727593434.jpg?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573984.html" title="使用 Cheerio 进行 Class 选择器操作详解">使用 Cheerio 进行 Class 选择器操作详解</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/1573982.html" title="Cheerio中类选择器与子元素提取的实战指南"> <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="Cheerio中类选择器与子元素提取的实战指南" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647732572110.jpg?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573982.html" title="Cheerio中类选择器与子元素提取的实战指南">Cheerio中类选择器与子元素提取的实战指南</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/1573980.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/175647750256462.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573980.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/1573978.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/175647751318557.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573978.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/1573976.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/175647756366863.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573976.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/1573972.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/175647786662458.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573972.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/1573970.html" title="如何实现内容加载状态"> <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何实现内容加载状态" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175647798766513.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573970.html" title="如何实现内容加载状态">如何实现内容加载状态</a></p> <p class="item-date">2025年12月22日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1573968.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/175647846489727.png?imageMogr2/crop/480x300/gravity/center" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1573968.html" title="HTML文档的基本结构包含哪些主要标签">HTML文档的基本结构包含哪些主要标签</a></p> <p class="item-date">2025年12月22日</p> </div> </li> </ul> </div><div class="widget widget_tags"><h3 class="widget-title"><span>热门标签</span></h3> <div class="tagcloud"> <a href="https://www.chuangxiangniao.com/p/tag/ai" title="ai">ai</a> <a href="https://www.chuangxiangniao.com/p/tag/gongju" title="工具">工具</a> <a href="https://www.chuangxiangniao.com/p/tag/liulanqi" title="浏览器">浏览器</a> <a href="https://www.chuangxiangniao.com/p/tag/app" title="app">app</a> <a href="https://www.chuangxiangniao.com/p/tag/php" title="php">php</a> <a href="https://www.chuangxiangniao.com/p/tag/java" title="java">java</a> <a href="https://www.chuangxiangniao.com/p/tag/windows" title="windows">windows</a> <a href="https://www.chuangxiangniao.com/p/tag/go" title="go">go</a> <a href="https://www.chuangxiangniao.com/p/tag/diannao" title="电脑">电脑</a> <a href="https://www.chuangxiangniao.com/p/tag/js" title="js">js</a> <a href="https://www.chuangxiangniao.com/p/tag/win" title="win">win</a> <a href="https://www.chuangxiangniao.com/p/tag/linux" title="linux">linux</a> <a href="https://www.chuangxiangniao.com/p/tag/python" title="python">python</a> <a href="https://www.chuangxiangniao.com/p/tag/red" title="red">red</a> <a href="https://www.chuangxiangniao.com/p/tag/c%20%20" title="c++">c++</a> <a href="https://www.chuangxiangniao.com/p/tag/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/weishenme" title="为什么">为什么</a> <a href="https://www.chuangxiangniao.com/p/tag/2025" title="2025">2025</a> <a href="https://www.chuangxiangniao.com/p/tag/json" title="json">json</a> <a href="https://www.chuangxiangniao.com/p/tag/git" title="git">git</a> <a href="https://www.chuangxiangniao.com/p/tag/jiaoyisuo" title="交易所">交易所</a> <a href="https://www.chuangxiangniao.com/p/tag/qubie" title="区别">区别</a> <a href="https://www.chuangxiangniao.com/p/tag/bian-4" title="币安">币安</a> <a href="https://www.chuangxiangniao.com/p/tag/jiamihuobi" title="加密货币">加密货币</a> </div> </div><div class="widget widget_links"><h3 class="widget-title"><span>旗下站点</span></h3> <ul class='xoxo blogroll'> <li><a href="https://www.chuangxiangniao.com/xin/" target="_blank">信用人生</a></li> <li><a href="https://www.ankegu.com/" target="_blank">免费在线测八字</a></li> <li><a href="https://www.chuangxiangniao.com/" target="_blank">创想鸟</a></li> <li><a href="https://www.chuangxiangniao.com/pay/">复利引擎</a></li> <li><a href="https://www.chuangxiangniao.com/she/" target="_blank">奢社</a></li> <li><a href="https://www.chuangxiangniao.com/law/" target="_blank">法外狂徒</a></li> <li><a href="https://www.chuangxiangniao.com/wifi/" target="_blank">玩转路由网</a></li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-icon"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-4095" class="menu-item menu-item-4095"><a target="1" href="https://www.chuangxiangniao.com/falyushengming">法律声明</a></li> <li id="menu-item-4099" class="menu-item menu-item-4099"><a target="1" href="https://www.chuangxiangniao.com/about">关于我们</a></li> <li id="menu-item-4098" class="menu-item menu-item-4098"><a target="1" href="https://www.chuangxiangniao.com/contact">联系我们</a></li> <li id="menu-item-4097" class="menu-item menu-item-4097"><a target="1" href="https://www.chuangxiangniao.com/yonghuxieyi">用户协议</a></li> <li id="menu-item-4094" class="menu-item menu-item-privacy-policy menu-item-4094"><a target="1" rel="privacy-policy" href="https://www.chuangxiangniao.com/yinsizhengce">隐私政策</a></li> <li id="menu-item-4096" class="menu-item menu-item-4096"><a target="1" href="https://www.chuangxiangniao.com/mianzeshengming">版权及免责声明</a></li> </ul> <div class="copyright"> <p>版权声明：本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。</p> <p>如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao#163.com （请把#更换@）举报，一经查实，本站将立刻删除。</p> <p>Copyright © 2019-2025 <a href="https://www.chuangxiangniao.com/" target="_blank" rel="noopener noreferrer">创想鸟</a> 版权所有 <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">皖ICP备2024035995号-1</a></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> <a href="https://www.chuangxiangniao.com/sitemap/sitemap.xml" target="_blank" aria-label="icon"> <i class="wpcom-icon fa fa-sitemap sns-icon"></i> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg');"></span> </a> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-1 action-pos-1" style="bottom:450px;"> <div class="action-item"> <i class="wpcom-icon fa fa-wechat action-item-icon"></i> <div class="action-item-inner action-item-type-1"> <img class="action-item-img" src="//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg" alt="关注微信"> </div> </div> <div class="action-item j-share"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/www/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/justnews/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="imwpf-this-page"> var g_this_page = { "type": "post", "id": 1573986, "terms": [{"id":49069,"tax":"category"},{"id":190,"tax":"post_tag"},{"id":269,"tax":"post_tag"},{"id":126,"tax":"post_tag"},{"id":21617,"tax":"post_tag"},{"id":113,"tax":"post_tag"},{"id":147,"tax":"post_tag"},{"id":146,"tax":"post_tag"},{"id":105,"tax":"post_tag"},{"id":118,"tax":"post_tag"},{"id":354,"tax":"post_tag"},{"id":513,"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":"1573986","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":"1573986","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":"1573986"}; //# 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":"1573986","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/1573986.html","url":"https://www.chuangxiangniao.com/p/1573986.html","headline":"HTML中head标签内部通常放置什么内容","description":"head标签是网页的“幕后指挥部”，包含元信息、标题、资源链接、脚本和样式，直接影响SEO、加载速度和社交分享表现。 HTML文档的 head 标签，其实就是网页的“大脑”或者说“幕后指挥部”。它不直接显示任何可见内容给用户，但却承载了大量关于网页的元数据、样式链接、脚本引用以及其他重要配置信息。简…","datePublished":"2025-12-22T15:55:37+08:00","dateModified":"2025-12-22T15:55:37+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/175651650476434.png"]}</script> <script>console.log('命中缓存\n缓存页加载耗时: 0.0058s\n缓存页生成时间: 2025-12-22 18:47:17')</script></body> </html><!--cached by imwpcache 2025-12-22 18:47:17-->