网站建设中必须掌握的HTML基础知识
在网站建设中，HTML（超文本标记语言）是最基础且必须掌握的技术之一。HTML 是构建网页的骨架，它定义了网页的结构和内容。无论是简单的个人博客还是复杂的企业网站，HTML 都是不可或缺的。以下是在网站建设中必须掌握的 HTML 基础知识，涵盖了 HTML 的基本概念、常用标签、语义化、表单、多媒体嵌入以及现代 HTML5 的新特性。
1. HTML 的基本概念
HTML 是一种标记语言，用于描述网页的结构和内容。它由一系列标签（Tags）组成，这些标签定义了网页中的不同元素，如标题、段落、图片、链接等。HTML 文件通常以 .html 或 .htm 为扩展名。
- HTML 文档结构：一个标准的 HTML 文档包括以下部分：
网页标题 这是一个标题
这是一个段落。
：声明文档类型为 HTML5。：根元素，包含整个 HTML 文档。：包含元数据，如标题、字符集、样式表和脚本链接。</code>：定义网页的标题，显示在浏览器标签页上。</li> <li><code><body></code>：包含网页的可见内容。</li> </ul></li> </ul> <hr> <h3>2. 常用 HTML 标签</h3> <p>以下是一些常用的 HTML 标签及其用途：</p> <ul> <li> <p><strong>标题标签</strong>：<code><h1></code> 到 <code><h6></code>，用于定义标题，<code><h1></code> 是*标题，<code><h6></code> 是*标题。</p> <pre><code class="language-html"><h1>主标题</h1> <h2>副标题</h2></code></pre></li> <li> <p><strong>段落标签</strong>：<code><p></code>，用于定义段落。</p> <pre><code class="language-html"><p>这是一个段落。</p></code></pre></li> <li> <p><strong>链接标签</strong>：<code><a></code>，用于创建超链接。</p> <pre><code class="language-html"><a href="https://www.example.com">访问示例网站</a></code></pre></li> <li> <p><strong>图片标签</strong>：<code><img title="网站建设中必须掌握的HTML基础知识(图2)" alt="网站建设中必须掌握的HTML基础知识(图2)" ></code>，用于嵌入图片。</p> <pre><code class="language-html"><img title="网站建设中必须掌握的HTML基础知识(图3)" src="image.jpg" alt="描述文本"></code></pre></li> <li> <p><strong>列表标签</strong>：</p> <ul> <li>无序列表：<code><ul></code> 和 <code><li></code> <pre><code class="language-html"><ul> <li>项目1</li> <li>项目2</li> </ul></code></pre></li> <li>有序列表：<code><ol></code> 和 <code><li></code> <pre><code class="language-html"><ol> <li>*项</li> <li>第二项</li> </ol></code></pre></li> </ul></li> <li> <p><strong>表格标签</strong>：<code><table></code>、<code><tr></code>、<code><th></code>、<code><td></code>，用于创建表格。</p> <pre><code class="language-html"><table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table></code></pre></li> </ul> <hr> <h3>3. HTML 语义化</h3> <p>语义化是指使用合适的标签来描述内容的含义，而不仅仅是外观。语义化的 HTML 代码更易于理解和维护，同时有助于搜索引擎优化（SEO）和可访问性。</p> <ul> <li> <p><strong>语义化标签</strong>：</p> <ul> <li><code><header></code>：定义页眉或内容的头部。</li> <li><code><nav></code>：定义导航链接。</li> <li><code><main></code>：定义文档的主要内容。</li> <li><code><section></code>：定义文档中的一个独立部分。</li> <li><code><article></code>：定义独立的内容块，如博客文章或新闻。</li> <li><code><aside></code>：定义与主要内容相关但不直接相关的内容，如侧边栏。</li> <li><code><footer></code>：定义页脚或内容的尾部。</li> </ul> <p style="text-align:center;"><img title="网站建设中必须掌握的HTML基础知识(图4)" src="http://111.170.7.147:99/auto_img/2026/4/15/_compressed_external_20260415_001017_273068_8917.jpg" alt="网站建设中必须掌握的HTML基础知识(图4)" style="display:block;margin:0 auto;max-width:100%;height:auto;" /></p> <pre><code class="language-html"><header> <h1>网站标题</h1> <nav> <a href="/">首页</a> <a href="/about">关于我们</a> </nav> </header> <main> <article> <h2>文章标题</h2> <p>文章内容...</p> </article> </main> <footer> <p>版权所有 © 2023</p> </footer></code></pre></li> </ul> <hr> <h3>4. HTML 表单</h3> <p>表单是用户与网站交互的重要方式，用于收集用户输入的数据。</p> <ul> <li> <p><strong>表单标签</strong>：<code><form></code>，用于创建表单。</p> <pre><code class="language-html"><form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="提交"> </form></code></pre></li> <li> <p><strong>常用表单元素</strong>：</p> <ul> <li><code><input></code>：用于创建输入字段，如文本框、密码框、单选按钮等。</li> <li><code><textarea></code>：用于创建多行文本输入框。</li> <li><code><select></code> 和 <code><option></code>：用于创建下拉菜单。</li> <li><code><button></code>：用于创建按钮。</li> </ul></li> </ul> <hr> <h3>5. 多媒体嵌入</h3> <p>HTML 支持嵌入多媒体内容，如图片、音频和视频。</p> <ul> <li> <p><strong>图片</strong>：使用 <code><img title="网站建设中必须掌握的HTML基础知识(图2)" alt="网站建设中必须掌握的HTML基础知识(图2)" ></code> 标签。</p> <pre><code class="language-html"><img title="网站建设中必须掌握的HTML基础知识(图3)" src="image.jpg" alt="描述文本"></code></pre></li> <li> <p><strong>音频</strong>：使用 <code><audio></code> 标签。</p> <pre><code class="language-html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio></code></pre></li> <li> <p><strong>视频</strong>：使用 <code><video></code> 标签。</p> <pre><code class="language-html"><video controls width="320" height="240"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频播放。 </video></code></pre></li> </ul> <hr> <h3>6. HTML5 新特性</h3> <p>HTML5 引入了许多新特性，使网页开发更加强大和灵活。</p> <ul> <li><strong>语义化标签</strong>：如 <code><header></code>、<code><nav></code>、<code><article></code> 等。</li> <li><strong>多媒体支持</strong>：如 <code><audio></code> 和 <code><video></code> 标签。</li> <li><strong>表单增强</strong>：新增了多种输入类型，如 <code>email</code>、<code>date</code>、<code>range</code> 等。</li> <li><strong>本地存储</strong>：<code>localStorage</code> 和 <code>sessionStorage</code> 用于在客户端存储数据。</li> <li><strong>Canvas 和 SVG</strong>：用于绘制图形和动画。</li> </ul> <hr> <h3>7. *实践</h3> <ul> <li><strong>使用语义化标签</strong>：提高代码可读性和 SEO 效果。</li> <li><strong>保持代码整洁</strong>：使用缩进和注释，使代码易于维护。</li> <li><strong>优化图片和多媒体</strong>：使用合适的格式和大小，减少加载时间。</li> <li><strong>测试兼容性</strong>：确保网页在不同浏览器和设备上正常显示。</li> </ul> <hr> <h3>总结</h3> <p>HTML 是网站建设的基础，掌握其核心概念和常用标签是成为一名优秀开发者的*步。通过学习语义化、表单、多媒体嵌入以及 HTML5 的新特性，您可以构建出结构清晰、功能强大的网页。随着技术的不断发展，HTML 仍然是网页开发中不可或缺的工具，值得深入学习和实践。</p></div> <hr /> <div class="row"> <div class="col-lg-7 mb-25"> </div> <div class="col-lg-5 mb-25"> <ul class="share-this-post-list text-lg-end"> <li>分享本文:</li> <li><a href="https://service.weibo.com/share/share.php?url=https://www.jingzhunchuanmei.com/guanjianciyanjiu/5363.html&title=网站建设中必须掌握的HTML基础知识" target="_blank" class="facebook-color" rel="noopener"><i class="fab fa-weibo"></i></a></li> <li><a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.jingzhunchuanmei.com/guanjianciyanjiu/5363.html&title=网站建设中必须掌握的HTML基础知识" target="_blank" class="twitter-color" rel="noopener"><i class="fas fa-share-alt"></i></a></li> </ul> </div> </div> <div class="article-permalink mb-25"> <strong>本文链接：</strong><a href="https://www.jingzhunchuanmei.com/guanjianciyanjiu/5363.html">https://www.jingzhunchuanmei.com/guanjianciyanjiu/5363.html</a> </div> </article> <div class="box-comment-main mb-50"> <div class="block-title mb-30"> <h2 class="border-dark">上下篇导航</h2> </div> <ul class="category-widget mb-30"> <li><a href="/guanjianciyanjiu/5362.html">上一篇：免费香港主机空间申请助你开启网站新篇章<span></span></a></li> <li><a href="/guanjianciyanjiu/5364.html">下一篇：创新网站设计理念升级助力企业全网营销<span></span></a></li> </ul> </div> </div> <div class="col-lg-4"> <aside class="sidebar"> <div class="block-title mb-30"> <h2 class="border-dark">热门推荐</h2> </div> <div class="owl-carousel owl-theme carousel-arrow-style-1 mb-50"> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260527/1779884774691_1670f461.png" alt="如何通过网站建设实现精准市场定位？" title="如何通过网站建设实现精准市场定位？" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/6740.html" class="font-size-18">如何通过网站建设实现精准市场定位？</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-27</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260507/1778109026557_976d1118.png" alt="网站建设后如何配置SSL证书？" title="网站建设后如何配置SSL证书？" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/5979.html" class="font-size-18">网站建设后如何配置SSL证书？</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-07</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260529/1780016481331_db05c00c.png" alt="网站建设的方法有哪些" title="网站建设的方法有哪些" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/6946.html" class="font-size-18">网站建设的方法有哪些</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-29</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260428/1777365476077_49580373.png" alt="网站建设中如何提升用户停留时间？" title="网站建设中如何提升用户停留时间？" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/4687.html" class="font-size-18">网站建设中如何提升用户停留时间？</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-04-28</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260427/1777242991858_bbc1490c.png" alt="外贸网站案例展示技巧" title="外贸网站案例展示技巧" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/4526.html" class="font-size-18">外贸网站案例展示技巧</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-04-27</li> </ul> </div> </div> </div> <div class="item"> <div class="grid-style-1"> <div class="grid-style-1-img mb-10"> <img src="http://jingzhunchuanmei.com/uploads/20260520/1779229613313_7712946a.png" alt="网站制作报价模板怎么选？2026年实战避坑指南（附对比表）" title="网站制作报价模板怎么选？2026年实战避坑指南（附对比表）" loading="lazy" decoding="async" /> <a href="/guanjianciyanjiu/" class="post-label bg-danger">关键词研究</a> </div> <div class="grid-style-1-content"> <h4 class="grid-style-1-title mb-10"><a href="/guanjianciyanjiu/6286.html" class="font-size-18">网站制作报价模板怎么选？2026年实战避坑指南（附对比表）</a></h4> <ul class="post-meta list-inline d-flex align-items-center"> <li class="list-inline-item d-flex align-items-center">启芯精准传媒 SEO 资讯</li> <li class="list-inline-item">2026-05-20</li> </ul> </div> </div> </div> </div> <div class="block-title mb-30"> <h2 class="border-dark">相关文章</h2> </div> <ul class="trending-box mb-50"> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7546.html">第三方安全认证如何助力企业合规与风险防控？全面解析</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7545.html">高端网站制作如何实现全流程系统化升级？</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7534.html">免费网站资源大合集：学习工具娱乐一网打尽</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7525.html">Redis发布/订阅模式详解：优缺点与实战应用</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7524.html">企业如何精准选型CDN加速服务？深度解析五大关键要素</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7513.html">网站设计如何突破极限？极致秘诀大揭秘</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7512.html">外贸网站实现全球无缝购物体验的关键要素</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7507.html">亲测16款工具后，2026年最靠谱的可用网站推荐清单</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7503.html">掌握这8个心理学原理，提升落地页转化率！</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7495.html">企业网站设计全流程怎么规划？实战指南揭秘</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7494.html">滚动加载如何提升用户体验？全面解析</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7486.html">网站制作技术全解析：流程到优化的深度指南</a></h4> </li> </ul> <div class="block-title mb-30"> <h2 class="border-dark">最新文章</h2> </div> <ul class="trending-box mb-50"> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7546.html">第三方安全认证如何助力企业合规与风险防控？全面解析</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7545.html">高端网站制作如何实现全流程系统化升级？</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7534.html">免费网站资源大合集：学习工具娱乐一网打尽</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7525.html">Redis发布/订阅模式详解：优缺点与实战应用</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7524.html">企业如何精准选型CDN加速服务？深度解析五大关键要素</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7513.html">网站设计如何突破极限？极致秘诀大揭秘</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7512.html">外贸网站实现全球无缝购物体验的关键要素</a></h4> </li> <li> <div class="item-info">2026-06-02</div> <h4><a href="/guanjianciyanjiu/7507.html">亲测16款工具后，2026年最靠谱的可用网站推荐清单</a></h4> </li> </ul> </aside> </div> </div> </div> <link rel="stylesheet" type="text/css" href="/template/pc/skin/css/seo-footer.css?t=1777445529" /><footer class="seo-footer"> <!-- 顶部装饰带 --> <div class="seo-footer__deco"></div> <div class="seo-footer__inner container"> <!-- 品牌简介 --> <div class="seo-footer__col seo-footer__col--brand"> <h3 class="seo-footer__logo">启芯精准传媒 SEO 资讯</h3> <p class="seo-footer__desc"> 专注SEO优化、搜索引擎排名、网站流量增长与数字营销策略，为站长和企业提供实战干货与行业前沿资讯。 </p> <div class="seo-footer__tags"> <span>🔍 SEO优化</span> <span>📈 排名提升</span> <span>📊 数据分析</span> </div> </div> <!-- 栏目导航 --> <div class="seo-footer__col seo-footer__col--nav"> <h4 class="seo-footer__heading">快速导航</h4> <ul class="seo-footer__nav-list"> <li><a href="http://jingzhunchuanmei.com">网站首页</a></li> <li><a href="/seo_zixun/">SEO 资讯</a></li> <li><a href="/youhuajiaocheng/">优化教程</a></li> <li><a href="/guanjianciyanjiu/">关键词研究</a></li> <li><a href="/wangzhanyunying/">网站运营</a></li> <li><a href="/shizhananli/">实战案例</a></li> <li><a href="http://jingzhunchuanmei.com/sitemap.xml" target="_blank">XML 地图</a></li> </ul> </div> <!-- 联系方式 + 关于 --> <div class="seo-footer__col seo-footer__col--contact"> <h4 class="seo-footer__heading">联系与备案</h4> <ul class="seo-footer__info-list"> <li> <span class="seo-footer__info-icon">🏢</span> <span>启芯精准传媒 SEO 资讯</span> </li> <li> <span class="seo-footer__info-icon">🌐</span> <a href="http://jingzhunchuanmei.com">http://jingzhunchuanmei.com</a> </li> <li> <span class="seo-footer__info-icon">📋</span> <span><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">鲁ICP备2026018278号-45</a></span> </li> </ul> </div> </div> <!-- 版权栏 --> <div class="seo-footer__bottom"> <div class="container seo-footer__bottom-inner"> <p class="seo-footer__copyright"> Copyright © <span id="seoYear"></span> 启芯精准传媒 SEO 资讯 All Rights Reserved. </p> <p class="seo-footer__desc-mobile">启芯精准传媒 SEO 资讯专注分享 SEO 优化技巧、搜索引擎算法更新、网站运营策略、关键词排名方法、SEO 工具与实战案例，为站长与从业者提供专业 SEO 资讯。</p> </div> <div style="text-align: center;"> <p style="margin: 0; font-size: 14px; line-height: 1.5;color:#000"> 联系人电话：18632164144 | 联系人邮箱：yaling_chen0923@163.com </p> </div> </div> </footer> <!-- 返回顶部按钮 --> <button class="seo-scroll-top" id="seoScrollTop" aria-label="返回顶部"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/> </svg> </button> <script type="text/javascript" src="/template/pc/skin/mblog/js/jquery-3.6.0.min.js?t=1615440220"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/bootstrap.bundle.min.js?t=1708442068"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/owl.carousel.min.js?t=1524230530"></script><script type="text/javascript" src="/template/pc/skin/mblog/js/custom.js?t=1772623786"></script><!-- SEO utility: outbound rel, image lazy loading, and semantic enrichment --> <script> (function () { var origin = location.origin; // Harden external links and keep internal links clean. var links = document.querySelectorAll('a[href]'); for (var i = 0; i < links.length; i++) { var link = links[i]; var href = link.getAttribute('href') || ''; if (!href || href.indexOf('javascript:') === 0 || href.indexOf('#') === 0) continue; var isExternal = href.indexOf('http://') === 0 || href.indexOf('https://') === 0; if (isExternal && href.indexOf(origin) !== 0) { link.setAttribute('rel', 'nofollow noopener noreferrer'); if (!link.getAttribute('target')) link.setAttribute('target', '_blank'); } } // Normalize image accessibility and loading strategy. var allImgs = document.querySelectorAll('img'); var criticalQuota = 2; for (var j = 0; j < allImgs.length; j++) { var img = allImgs[j]; var alt = img.getAttribute('alt'); var title = img.getAttribute('title'); if (!alt || !alt.trim()) { alt = document.title; img.setAttribute('alt', alt); } if (!title || !title.trim()) { img.setAttribute('title', alt); } if (!img.getAttribute('decoding')) { img.setAttribute('decoding', 'async'); } var isCritical = false; if (criticalQuota > 0) { if (img.closest('.logo-brand') || img.closest('.header-middle .advertisement-banner') || img.closest('.featured-post-item-img') || img.closest('.single-post-img')) { isCritical = true; criticalQuota--; } } if (!img.getAttribute('loading')) { img.setAttribute('loading', isCritical ? 'eager' : 'lazy'); } if (isCritical && !img.getAttribute('fetchpriority')) { img.setAttribute('fetchpriority', 'high'); } } // Mark empty dynamic blocks so CSS can show graceful placeholders. function markEmptyBlocks(containerSelector, itemSelector) { var blocks = document.querySelectorAll(containerSelector); for (var k = 0; k < blocks.length; k++) { if (!blocks[k].querySelector(itemSelector)) { blocks[k].classList.add('is-empty'); } } } markEmptyBlocks('.trending-box, .category-widget, .tags-list', 'li'); markEmptyBlocks('.featured-post-carousel, .carousel-arrow-style-1, .instagram-carousel', '.item, .owl-item'); // Fallback article tags: build clickable keyword tags when article has no bound tags. function buildArticleKeywordTags() { var lists = document.querySelectorAll('.js-article-keywords'); if (!lists.length) return; for (var m = 0; m < lists.length; m++) { var list = lists[m]; if (list.querySelector('li')) continue; var rawKeywords = (list.getAttribute('data-keywords') || '').trim(); if (!rawKeywords) { var keywordsMeta = document.querySelector('meta[name="keywords"]'); rawKeywords = keywordsMeta ? (keywordsMeta.getAttribute('content') || '').trim() : ''; } if (!rawKeywords) continue; var searchBase = (list.getAttribute('data-search-base') || location.origin).replace(/\/+$/, ''); var items = rawKeywords .replace(/，/g, ',') .replace(/、/g, ',') .replace(/\|/g, ',') .replace(/;/g, ',') .split(','); var seen = {}; var count = 0; for (var n = 0; n < items.length && count < 10; n++) { var word = (items[n] || '').trim(); if (!word || seen[word]) continue; seen[word] = true; var li = document.createElement('li'); var a = document.createElement('a'); a.href = searchBase + '/index.php?m=home&c=Search&a=lists&keywords=' + encodeURIComponent(word); a.textContent = '#' + word; li.appendChild(a); list.appendChild(li); count++; } } } buildArticleKeywordTags(); // Keep home channel columns visually aligned on desktop. function equalizeHomeChannelColumns() { var cols = document.querySelectorAll('.home-channel-row .home-channel-col'); if (!cols.length) return; for (var i2 = 0; i2 < cols.length; i2++) { cols[i2].style.minHeight = ''; } if (window.innerWidth < 1200) return; var maxHeight = 0; for (var j2 = 0; j2 < cols.length; j2++) { var h = cols[j2].offsetHeight; if (h > maxHeight) maxHeight = h; } if (!maxHeight) return; for (var k2 = 0; k2 < cols.length; k2++) { cols[k2].style.minHeight = maxHeight + 'px'; } } var equalizeTimer = null; function scheduleEqualizeHomeChannelColumns() { if (equalizeTimer) window.clearTimeout(equalizeTimer); equalizeTimer = window.setTimeout(equalizeHomeChannelColumns, 80); } scheduleEqualizeHomeChannelColumns(); window.addEventListener('load', scheduleEqualizeHomeChannelColumns); window.addEventListener('resize', scheduleEqualizeHomeChannelColumns); })(); </script> <script> document.getElementById('seoYear').textContent = new Date().getFullYear(); // 返回顶部 (function() { var btn = document.getElementById('seoScrollTop'); window.addEventListener('scroll', function() { btn.style.display = window.scrollY > 500 ? 'flex' : 'none'; }); btn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); })(); </script> <script type="text/javascript" src="/public/static/common/js/footprint.js?v=v1.5.1"></script> <script type="text/javascript">footprint_1606269933('5363', '');</script> </body> </html>