在网站建设中，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></code>，用于嵌入图片。</p> <pre><code class="language-html"><img src="image.jpg" alt="描述文本" loading="lazy" title="描述文本"></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> <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></code> 标签。</p> <pre><code class="language-html"><img src="image.jpg" alt="描述文本" loading="lazy" title="描述文本"></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> <section class="tags"> <span class="tags-title"><i class="fas fa-tags"></i> 标签：</span> <ul> </ul> </section> <div id="postnavi"> <div class="prev">上一篇：<a href="/seozonghezixun/3088.html">网站建设如何适配旧版IE浏览器？</a></div> <div class="next">下一篇：<a href="/seozonghezixun/3091.html">网站建设中是否包含公众号菜单跳转？</a></div> </div> <section class="related" aria-labelledby="related-title"> <h2 class="boxtitle" id="related-title"><i class="fas fa-newspaper" aria-hidden="true"></i> 相关推荐</h2> <ul> <li> <p class="related-item-title"><a href="/seozonghezixun/3310.html" title="网站制作技术革新打造智能门户">网站制作技术革新打造智能门户</a></p> </li> <li> <p class="related-item-title"><a href="/seozonghezixun/3311.html" title="bing打不开">bing打不开</a></p> </li> <li> <p class="related-item-title"><a href="/seozonghezixun/3308.html" title="网站建设后如何进行维护和更新？">网站建设后如何进行维护和更新？</a></p> </li> <li> <p class="related-item-title"><a href="/seozonghezixun/3299.html" title="SEO优化助力网站建设流量突破">SEO优化助力网站建设流量突破</a></p> </li> </ul> </section> </article> </div> </main> <aside class="sidebar" role="complementary" aria-label="侧边栏内容"> <style> /* 文章详情页侧边栏 - 简洁资讯风格 */ .sidebar { background: transparent !important; position: sticky !important; top: 20px !important; float: right !important; width: 23% !important; } .sidebar .widget { background: #fff; border-radius: 8px; padding: 0; margin-bottom: 20px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; } .sidebar .widget-title { font-size: 15px !important; color: #1f2937 !important; border-bottom: 1px solid #f0f0f0 !important; padding: 15px 18px !important; margin: 0 !important; position: relative; padding-left: 28px !important; font-weight: 600; } .sidebar .widget-title::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 3px !important; height: 14px !important; background: #4e73a4 !important; border-radius: 2px !important; } /* 相关资讯 - 同栏目文章 */ .widget-related .widget-title::before { background: #4e73a4 !important; } .related-list { list-style: none; margin: 0; padding: 0; } .related-list li { border-bottom: 1px solid #f5f5f5 !important; padding: 12px 15px !important; transition: background 0.2s ease; } .related-list li:last-child { border-bottom: none !important; } .related-list li:hover { background: #f8fafc; } .related-list li a { font-size: 14px !important; color: #374151 !important; line-height: 1.5 !important; transition: color 0.2s ease; display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } .related-list li a:hover { color: #4e73a4 !important; } .related-list .item-date { font-size: 12px; color: #9ca3af; margin-top: 4px; } /* 热门资讯 - 带序号 */ .widget-hot .widget-title::before { background: #ea580c !important; } .hot-list { list-style: none; margin: 0; padding: 0; } .hot-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px !important; border-bottom: 1px solid #f5f5f5 !important; transition: background 0.2s ease; } .hot-list li:last-child { border-bottom: none !important; } .hot-list li:hover { background: #f8fafc; } .hot-list .num { flex: 0 0 20px; height: 20px; background: #e5e7eb; color: #6b7280; font-size: 12px; text-align: center; line-height: 20px; border-radius: 3px; font-weight: 500; } .hot-list li:nth-child(1) .num { background: #ef4444; color: #fff; } .hot-list li:nth-child(2) .num { background: #f97316; color: #fff; } .hot-list li:nth-child(3) .num { background: #eab308; color: #fff; } .hot-list .hot-info { flex: 1; min-width: 0; } .hot-list .hot-info a { font-size: 14px !important; color: #374151 !important; line-height: 1.5 !important; transition: color 0.2s ease; display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } .hot-list .hot-info a:hover { color: #4e73a4 !important; } .hot-list .hot-meta { font-size: 12px; color: #9ca3af; margin-top: 4px; } /* 热词TOP20 - 标签云 */ .widget-tags .widget-title::before { background: #10b981 !important; } .tags-cloud { padding: 15px; display: flex; flex-wrap: wrap; gap: 8px; } .tags-cloud a { display: inline-block; padding: 5px 12px; background: #f3f4f6; color: #4b5563; font-size: 13px; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; } .tags-cloud a:hover { background: #4e73a4; color: #fff; border-color: #4e73a4; } /* 热门标签高亮 - 前3个 */ .tags-cloud a:nth-child(1), .tags-cloud a:nth-child(2), .tags-cloud a:nth-child(3) { background: #fef3c7; color: #b45309; border-color: #fcd34d; } .tags-cloud a:nth-child(1):hover, .tags-cloud a:nth-child(2):hover, .tags-cloud a:nth-child(3):hover { background: #f59e0b; color: #fff; border-color: #f59e0b; } /* 响应式 */ @media (max-width: 992px) { .sidebar { width: 100% !important; float: none !important; position: relative !important; top: 0 !important; margin-top: 20px; } } </style> <!-- 相关资讯 - 同栏目文章 --> <section class="widget widget-related" aria-labelledby="related-title"> <h2 class="widget-title" id="related-title">相关资讯</h2> <ul class="related-list" role="list"> <li role="listitem"> <a href="/seozonghezixun/3310.html" title="网站制作技术革新打造智能门户">网站制作技术革新打造智能门户</a> <div class="item-date">2026-04-04 11:19</div> </li> <li role="listitem"> <a href="/seozonghezixun/3311.html" title="bing打不开">bing打不开</a> <div class="item-date">2026-04-04 11:19</div> </li> <li role="listitem"> <a href="/seozonghezixun/3308.html" title="网站建设后如何进行维护和更新？">网站建设后如何进行维护和更新？</a> <div class="item-date">2026-04-04 11:19</div> </li> <li role="listitem"> <a href="/seozonghezixun/3299.html" title="SEO优化助力网站建设流量突破">SEO优化助力网站建设流量突破</a> <div class="item-date">2026-04-04 11:18</div> </li> <li role="listitem"> <a href="/seozonghezixun/3296.html" title="网站页面锚文本密度控制标准">网站页面锚文本密度控制标准</a> <div class="item-date">2026-04-04 11:18</div> </li> <li role="listitem"> <a href="/seozonghezixun/3292.html" title="高效网站设计理念升级驱动品牌全网营销">高效网站设计理念升级驱动品牌全网营销</a> <div class="item-date">2026-04-04 11:17</div> </li> <li role="listitem"> <a href="/seozonghezixun/3286.html" title="企业网站建设中必须注意的10个细节">企业网站建设中必须注意的10个细节</a> <div class="item-date">2026-04-04 11:17</div> </li> <li role="listitem"> <a href="/seozonghezixun/3280.html" title="专业网站建设助力企业数字转型">专业网站建设助力企业数字转型</a> <div class="item-date">2026-04-04 11:16</div> </li> </ul> </section> <!-- 热门资讯 - 按点击排序 --> <section class="widget widget-hot" aria-labelledby="hot-title"> <h2 class="widget-title" id="hot-title">热门资讯</h2> <ul class="hot-list" role="list"> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/1947.html" title="掌握LSI关键词，优化内容深度实现SEO飞跃">掌握LSI关键词，优化内容深度实现SEO飞跃</a> <div class="hot-meta">2026-03-12 11:10 · 1004 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/964.html" title="SEO插件集成：解锁Yoast与Rank Math的无限潜力">SEO插件集成：解锁Yoast与Rank Math的无限潜力</a> <div class="hot-meta">2026-02-21 11:11 · 1004 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/1198.html" title="企业成熟期SEO振兴指南：系统重构与创新实践">企业成熟期SEO振兴指南：系统重构与创新实践</a> <div class="hot-meta">2026-02-25 11:15 · 1003 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/976.html" title="如何打造SEO友好的内容管理SEO策略，让编辑工具助你一臂之力">如何打造SEO友好的内容管理SEO策略，让编辑工具助你一臂之力</a> <div class="hot-meta">2026-02-21 11:12 · 1003 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/2395.html" title="Session Recordings会话记录：揭秘用户行为操作流程的黄金武器">Session Recordings会话记录：揭秘用户行为操作流程的黄金武器</a> <div class="hot-meta">2026-03-19 11:10 · 1002 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/2076.html" title="如何利用Microdata微数据优化页面结构提升搜索排名">如何利用Microdata微数据优化页面结构提升搜索排名</a> <div class="hot-meta">2026-03-14 11:10 · 1001 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/1415.html" title="法律合规的SEO策略，助力网站稳定增长与风险控制">法律合规的SEO策略，助力网站稳定增长与风险控制</a> <div class="hot-meta">2026-03-01 11:11 · 1001 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/3091.html" title="网站建设中是否包含公众号菜单跳转？">网站建设中是否包含公众号菜单跳转？</a> <div class="hot-meta">2026-04-01 11:10 · 1000 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/2326.html" title="如何提升“People Also Ask”相关提问的内容覆盖与问题解答效果">如何提升“People Also Ask”相关提问的内容覆盖与问题解答效果</a> <div class="hot-meta">2026-03-18 11:10 · 1000 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/seozonghezixun/1960.html" title="【如何挖掘People Also Ask相关提问实现内容拓展】">【如何挖掘People Also Ask相关提问实现内容拓展】</a> <div class="hot-meta">2026-03-12 11:10 · 999 阅读</div> </div> </li> </ul> </section> <!-- 热词TOP20 - 热门标签 --> <section class="widget widget-tags" aria-labelledby="tags-title"> <h2 class="widget-title" id="tags-title">热词TOP20</h2> <nav class="tags-cloud" aria-label="热门标签"> </nav> </section> </aside> </div> <footer class="footer" role="contentinfo"> <style> .footer { width: 100% !important; margin-left: 0 !important; background: #1f2937; padding: 0; border-top: none; color: #9ca3af; font-size: 13px; position: relative; overflow: visible; } .footer::before { display: none; } .footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 分类快速链接区域 - 优化布局 *//* 底部导航 - 改为横向布局 */ .footer-nav { display: flex; /* 核心：改为flex横向布局 */ flex-wrap: wrap; /* 超出换行，适配响应式 */ align-items: flex-start; padding: 40px 0 30px; border-bottom: 1px solid #374151; gap: 25px 40px; /* 调整横向间距 */ justify-content: center; /* 整体居中（可选，根据需求去掉） */ } .footer-nav-col { min-width: 120px; /* 最小宽度，避免挤压 */ flex: 0 0 auto; /* 不拉伸，保持自身宽度 */ } .footer-nav-col h3 { color: #fff; font-size: 14px; font-weight: 600; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid #4e73a4; display: inline-block; } .footer-nav-col h3 a { color: #fff; text-decoration: none; transition: color 0.2s ease; } .footer-nav-col h3 a:hover { color: #4e73a4; } .footer-nav-col ul { list-style: none; margin: 0; padding: 0; } .footer-nav-col li { margin-bottom: 8px; } .footer-nav-col li a { color: #9ca3af; text-decoration: none; font-size: 13px; transition: all 0.2s ease; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .footer-nav-col li a:hover { color: #fff; padding-left: 5px; } .footer-nav-col li a::before { content: '›'; margin-right: 6px; color: #4e73a4; } .footer-nav-col li.more-link a { color: #4e73a4; font-size: 12px; } .footer-nav-col li.more-link a:hover { color: #fff; } /* 底部信息区 */ .footer-bottom { padding: 25px 0; } .footer .copyright { float: none !important; text-align: center !important; margin-bottom: 15px; } .footer .copyright p { margin: 0; line-height: 1.8; color: #9ca3af; } .footer .copyright a { color: #9ca3af; text-decoration: none; } .footer .copyright a:hover { color: #fff; } .footer .seo-links { text-align: center; margin-bottom: 15px; } .footer .seo-links a { color: #6b7280 !important; text-decoration: none; padding: 5px 12px; font-size: 12px; display: inline-block; transition: color 0.2s ease; } .footer .seo-links a:hover { color: #9ca3af !important; } .footer .other { float: none !important; text-align: center !important; } .footer .other a { color: #9ca3af !important; text-decoration: none; padding: 6px 15px; border: 1px solid #374151; border-radius: 4px; transition: all 0.2s ease; display: inline-block; font-size: 12px; margin: 0 5px; } .footer .other a:hover { background: #374151; color: #fff !important; } /* 响应式 - 适配横向布局 */ @media (max-width: 992px) { .footer-nav { gap: 20px 30px; /* 中等屏幕缩小间距 */ } } @media (max-width: 768px) { .footer-nav { justify-content: flex-start; /* 小屏幕左对齐 */ padding: 30px 0 20px; } .footer-nav-col { min-width: 100px; } } @media (max-width: 480px) { .footer-nav { flex-direction: column; /* 超小屏幕变回单列垂直 */ gap: 20px 0; } } </style> <div class="footer-inner"> <!-- 分类快速链接 - 横向布局版 --> <nav class="footer-nav" aria-label="底部分类导航"> <!-- 每个栏目作为独立的横向项 --> <div class="footer-nav-col" role="menubar-item"> <h3><a href="/jishuseo/" title="技术SEO" role="menuitem">技术SEO</a></h3> </div> <!-- 每个栏目作为独立的横向项 --> <div class="footer-nav-col" role="menubar-item"> <h3><a href="/wangzhanjiansheseo/" title="网站建设SEO" role="menuitem">网站建设SEO</a></h3> </div> <!-- 每个栏目作为独立的横向项 --> <div class="footer-nav-col" role="menubar-item"> <h3><a href="/kehuanliseo/" title="客户案例SEO" role="menuitem">客户案例SEO</a></h3> </div> <!-- 每个栏目作为独立的横向项 --> <div class="footer-nav-col" role="menubar-item"> <h3><a href="/seozonghezixun/" title="SEO综合咨询" role="menuitem">SEO综合咨询</a></h3> </div> </nav> </div> <!-- 底部信息 --> <div class="footer-bottom"> <div class="copyright"> <p>Copyright © 酷核科讯 版权所有 </p> </div> <!-- SEO友情链接区域 --> <nav class="seo-links" aria-label="友情链接"> </nav> <nav class="other" aria-label="页脚导航"> <a href="http://www.kuhaojianpu.com/sitemap.xml" target="_blank" rel="sitemap" title="网站地图">XML地图</a> </nav> </div> </div> </footer> <!-- 百度自动推送代码 - 提升收录 --> <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> <!-- 全局SEO增强组件 --> <!-- 全局SEO增强组件 - 提升用户体验和页面停留时间 --> <style> /* 阅读进度条 */ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #4e73a4 0%, #3d5a80 100%); z-index: 9999; transition: width 0.1s ease; } /* 返回顶部按钮 */ .back-to-top { position: fixed; bottom: 80px; right: 20px; width: 45px; height: 45px; background: #4e73a4; color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 15px rgba(78, 115, 164, 0.3); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #3d5a80; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(78, 115, 164, 0.4); } /* 快速导航浮窗 */ .quick-nav { position: fixed; bottom: 140px; right: 20px; z-index: 998; } .quick-nav-btn { width: 45px; height: 45px; background: #fff; border: 1px solid #e5e7eb; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #6b7280; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: all 0.3s ease; } .quick-nav-btn:hover { background: #4e73a4; color: #fff; border-color: #4e73a4; } .quick-nav-menu { position: absolute; bottom: 55px; right: 0; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); padding: 10px 0; min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .quick-nav:hover .quick-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .quick-nav-menu a { display: block; padding: 10px 18px; color: #374151; font-size: 13px; text-decoration: none; transition: all 0.2s ease; } .quick-nav-menu a:hover { background: #f3f4f6; color: #4e73a4; } .quick-nav-menu a i { margin-right: 8px; width: 16px; text-align: center; } /* 侧边快捷工具栏 */ .side-tools { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 997; display: none; } @media (min-width: 1400px) { .side-tools { display: block; } } .side-tools a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; color: #6b7280; font-size: 14px; text-decoration: none; transition: all 0.2s ease; position: relative; } .side-tools a:hover { background: #4e73a4; color: #fff; border-color: #4e73a4; } .side-tools a .tooltip { position: absolute; right: 50px; background: #1f2937; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; } .side-tools a:hover .tooltip { opacity: 1; visibility: visible; } /* 页面加载进度 */ .page-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .page-loading.loaded { opacity: 0; pointer-events: none; } .page-loading .spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: #4e73a4; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* 响应式隐藏 */ @media (max-width: 768px) { .back-to-top, .quick-nav { right: 15px; } .back-to-top { bottom: 70px; width: 40px; height: 40px; } .quick-nav { bottom: 120px; } .quick-nav-btn { width: 40px; height: 40px; } } </style> <!-- 阅读进度条 --> <div class="reading-progress" id="readingProgress"></div> <!-- 返回顶部按钮 --> <button class="back-to-top" id="backToTop" aria-label="返回顶部" title="返回顶部"> <i class="fas fa-chevron-up"></i> </button> <!-- 快速导航 --> <div class="quick-nav"> <button class="quick-nav-btn" aria-label="快速导航"> <i class="fas fa-th-large"></i> </button> <nav class="quick-nav-menu" aria-label="快速导航菜单"> <a href="http://www.kuhaojianpu.com"><i class="fas fa-home"></i>网站首页</a> <a href="/jishuseo/"><i class="fas fa-folder"></i>技术SEO</a> <a href="/wangzhanjiansheseo/"><i class="fas fa-folder"></i>网站建设SEO</a> <a href="/kehuanliseo/"><i class="fas fa-folder"></i>客户案例SEO</a> <a href="/seozonghezixun/"><i class="fas fa-folder"></i>SEO综合咨询</a> </nav> </div> <!-- 侧边快捷工具 --> <aside class="side-tools" aria-label="快捷工具"> <a href="http://www.kuhaojianpu.com" title="首页"> <i class="fas fa-home"></i> <span class="tooltip">返回首页</span> </a> <a href="/jishuseo/" title="技术SEO"> <i class="fas fa-folder"></i> <span class="tooltip">技术SEO</span> </a> <a href="/wangzhanjiansheseo/" title="网站建设SEO"> <i class="fas fa-folder"></i> <span class="tooltip">网站建设SEO</span> </a> <a href="/kehuanliseo/" title="客户案例SEO"> <i class="fas fa-folder"></i> <span class="tooltip">客户案例SEO</span> </a> <a href="/seozonghezixun/" title="SEO综合咨询"> <i class="fas fa-folder"></i> <span class="tooltip">SEO综合咨询</span> </a> <a href="http://www.kuhaojianpu.com/sitemap.html" title="网站地图"> <i class="fas fa-sitemap"></i> <span class="tooltip">网站地图</span> </a> </aside> <script> (function() { // 阅读进度条 var progressBar = document.getElementById('readingProgress'); if (progressBar) { window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var progress = (scrollTop / docHeight) * 100; progressBar.style.width = progress + '%'; }); } // 返回顶部按钮 var backToTop = document.getElementById('backToTop'); if (backToTop) { window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { backToTop.classList.add('visible'); } else { backToTop.classList.remove('visible'); } }); backToTop.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); } // 页面加载完成 window.addEventListener('load', function() { var loading = document.querySelector('.page-loading'); if (loading) { loading.classList.add('loaded'); setTimeout(function() { loading.remove(); }, 300); } }); })(); </script> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </div> <!-- 新增：图片懒加载 + alt/title 补充脚本 --> <script> // 等待页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 获取文章内容里的所有图片 const articleImages = document.querySelectorAll('#maximg img'); // 文章标题（作为alt/title的兜底内容） const articleTitle = "网站建设中必须掌握的HTML基础知识"; // 遍历所有图片，补充属性 articleImages.forEach(function(img, index) { // 1. 懒加载：优先使用原生loading="lazy"，兼容性更好 if (!img.hasAttribute('loading')) { img.setAttribute('loading', 'lazy'); } // 2. 补充alt属性（SEO必备，图片加载失败时显示） if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') { // 优先从图片URL提取文件名，没有则用文章标题+序号 const imgSrc = img.getAttribute('src') || ''; let altText = ''; altText = `${articleTitle}-图片${index + 1}`; img.setAttribute('alt', altText); } // 3. 补充title属性（鼠标悬停时显示） if (!img.hasAttribute('title') || img.getAttribute('title').trim() === '') { // 复用alt属性的值作为title，保持一致性 img.setAttribute('title', img.getAttribute('alt')); } // 4. 兜底：对不支持原生lazy的老旧浏览器，补充简易懒加载 if (!('loading' in HTMLImageElement.prototype)) { img.setAttribute('data-src', img.getAttribute('src')); img.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); // 透明占位图 // 监听滚动，实现懒加载 const lazyLoad = function() { const rect = img.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom > 0) { img.setAttribute('src', img.getAttribute('data-src')); window.removeEventListener('scroll', lazyLoad); } }; window.addEventListener('scroll', lazyLoad); // 首次执行一次，避免首屏图片不加载 lazyLoad(); } }); }); </script> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/global.js"></script> <script type="text/javascript">var ey_1564127251 = {"ClosePage":0,"get_url":"\/index.php?m=api&c=Ajax&a=get_arcrank&aid=3089","buy_url":"\/index.php?m=user&c=Media&a=media_order_buy&_ajax=1","VideoLogicUrl":"\/index.php?m=api&c=Ajax&a=video_logic&_ajax=1","LevelCentreUrl":"\/index.php?m=user&c=Level&a=level_centre&aid=3089","aid":3089};</script> <script type="text/javascript" src="/public/static/common/js/view_arcrank.js?v=v1.6.4"></script> </body> </html>