在网页开发中，HTML（超文本标记语言）是最基础且重要的语言之一。它用于构建网页的结构，定义了网页的内容和布局。HTML通过标签（tags）来标记文本、图像、链接等元素，使浏览器能够正确显示网页内容。本文将详细介绍HTML的基本结构、常用标签、表单元素、以及一些高级特性，帮助你全面理解并掌握HTML的使用。
1. HTML的基本结构
一个标准的HTML文档通常由以下几个部分组成：
Document
：声明文档类型，告诉浏览器这是一个HTML5文档。：根元素，所有其他元素都包含在这个标签内。：包含元数据（metadata），如字符集、视口设置、标题等。</code>：定义网页的标题，显示在浏览器的标题栏或标签页上。</li> <li><code><body></code>：包含网页的可见内容，如文本、图像、链接等。</li> </ul> <h3>2. 常用HTML标签</h3> <h4>2.1 标题标签</h4> <p>HTML提供了六个级别的标题标签，从<code><h1></code>到<code><h6></code>，<code><h1></code>是*别的标题，<code><h6></code>是*别的标题。</p> <pre><code class="language-html"><h1>这是一个一级标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3> <h4>这是一个四级标题</h4> <h5>这是一个五级标题</h5> <h6>这是一个六级标题</h6></code></pre> <h4>2.2 段落标签</h4> <p><code><p></code>标签用于定义段落，浏览器会自动在段落前后添加空白。</p> <pre><code class="language-html"><p>这是一个段落。</p> <p>这是另一个段落。</p></code></pre> <h4>2.3 链接标签</h4> <p><code><a></code>标签用于创建超链接，通过<code>href</code>属性指定链接的目标地址。</p> <pre><code class="language-html"><a href="https://www.example.com">访问Example网站</a></code></pre> <h4>2.4 图像标签</h4> <p><code><img></code>标签用于在网页中插入图像，<code>src</code>属性指定图像的路径，<code>alt</code>属性提供图像的替代文本。</p> <pre><code class="language-html"><img src="image.jpg" alt="描述图像内容" loading="lazy" title="描述图像内容"></code></pre> <h4>2.5 列表标签</h4> <p>HTML支持有序列表和无序列表，分别使用<code><ol></code>和<code><ul></code>标签，列表项使用<code><li></code>标签。</p> <pre><code class="language-html"><ul> <li>无序列表项1</li> <li>无序列表项2</li> </ul> <ol> <li>有序列表项1</li> <li>有序列表项2</li> </ol></code></pre> <h4>2.6 表格标签</h4> <p><code><table></code>标签用于创建表格，<code><tr></code>定义表格行，<code><td></code>定义表格单元格，<code><th></code>定义表头单元格。</p> <pre><code class="language-html"><table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table></code></pre> <h3>3. 表单元素</h3> <p style="text-align:center;"><img src="https://www.kuhaojianpu.com/uploads/20260417/1776395666542_af2b8b1f.jpg" alt="" style="display:block;margin:0 auto;max-width:100%;height:auto;" / loading="lazy" title=""></p> <p>表单是网页中用于收集用户输入的重要元素，常见的表单元素包括输入框、按钮、下拉列表等。</p> <h4>3.1 输入框</h4> <p><code><input></code>标签用于创建输入框，<code>type</code>属性指定输入框的类型，如<code>text</code>、<code>password</code>、<code>email</code>等。</p> <pre><code class="language-html"><label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"></code></pre> <h4>3.2 按钮</h4> <p><code><button></code>标签用于创建按钮，<code>type</code>属性指定按钮的类型，如<code>submit</code>、<code>reset</code>、<code>button</code>等。</p> <pre><code class="language-html"><button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button></code></pre> <h4>3.3 下拉列表</h4> <p><code><select></code>标签用于创建下拉列表，<code><option></code>标签定义列表项。</p> <pre><code class="language-html"><label for="cars">选择汽车:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select></code></pre> <h4>3.4 复选框和单选按钮</h4> <p><code><input></code>标签的<code>type</code>属性为<code>checkbox</code>或<code>radio</code>时，分别用于创建复选框和单选按钮。</p> <pre><code class="language-html"><label for="vehicle1">我有自行车</label> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="male">男</label> <input type="radio" id="male" name="gender" value="male"> <label for="female">女</label> <input type="radio" id="female" name="gender" value="female"></code></pre> <h3>4. HTML5新特性</h3> <p>HTML5引入了许多新特性，增强了网页的功能和表现力。</p> <h4>4.1 语义化标签</h4> <p>HTML5新增了语义化标签，如<code><header></code>、<code><footer></code>、<code><article></code>、<code><section></code>等，使网页结构更加清晰。</p> <pre><code class="language-html"><header> <h1>网站标题</h1> <nav> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> </header> <section> <h2>内容标题</h2> <p>这里是内容部分。</p> </section> <footer> <p>版权信息</p> </footer></code></pre> <h4>4.2 多媒体支持</h4> <p>HTML5支持直接在网页中嵌入音频和视频，使用<code><audio></code>和<code><video></code>标签。</p> <pre><code class="language-html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频元素。 </audio> <video controls width="320" height="240"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频元素。 </video></code></pre> <h4>4.3 表单增强</h4> <p>HTML5为表单引入了新的输入类型和属性，如<code>date</code>、<code>color</code>、<code>range</code>、<code>placeholder</code>、<code>required</code>等。</p> <pre><code class="language-html"><label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> <label for="favcolor">选择颜色:</label> <input type="color" id="favcolor" name="favcolor"> <label for="volume">音量:</label> <input type="range" id="volume" name="volume" min="0" max="100"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required></code></pre> <h3>5. 总结</h3> <p>HTML是构建网页的基础，掌握其基本结构和常用标签是网页开发的*步。通过本文的介绍，你应该对HTML有了全面的了解，包括如何创建标题、段落、链接、图像、列表、表格等元素，以及如何使用表单收集用户输入。此外，HTML5的新特性如语义化标签、多媒体支持和表单增强，进一步提升了网页的功能和用户体验。</p> <p>在实际开发中，HTML通常与CSS（层叠样式表）和JavaScript结合使用，分别负责网页的样式和交互。掌握HTML是学习网页开发的基础，希望你通过本文的学习，能够熟练运用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="/wangzhanjiansheseo/3963.html">企业网站设计攻略是什么？</a></div> <div class="next">下一篇：<a href="/wangzhanjiansheseo/3970.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="/wangzhanjiansheseo/5832.html" title="产品详情页TDK模板与转化率关系">产品详情页TDK模板与转化率关系</a></p> </li> <li> <p class="related-item-title"><a href="/wangzhanjiansheseo/5826.html" title="php pathinfo">php pathinfo</a></p> </li> <li> <p class="related-item-title"><a href="/wangzhanjiansheseo/5824.html" title="网站页面微交互设计提升留存率">网站页面微交互设计提升留存率</a></p> </li> <li> <p class="related-item-title"><a href="/wangzhanjiansheseo/5821.html" title="网站被降权需要从哪几个方面去改善？">网站被降权需要从哪几个方面去改善？</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="/wangzhanjiansheseo/5832.html" title="产品详情页TDK模板与转化率关系">产品详情页TDK模板与转化率关系</a> <div class="item-date">2026-05-07 16:50</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5826.html" title="php pathinfo">php pathinfo</a> <div class="item-date">2026-05-07 16:50</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5824.html" title="网站页面微交互设计提升留存率">网站页面微交互设计提升留存率</a> <div class="item-date">2026-05-07 16:50</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5821.html" title="网站被降权需要从哪几个方面去改善？">网站被降权需要从哪几个方面去改善？</a> <div class="item-date">2026-05-07 16:50</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5819.html" title="vue3 ref dom">vue3 ref dom</a> <div class="item-date">2026-05-07 16:49</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5816.html" title="高端网站制作全流程标准解析">高端网站制作全流程标准解析</a> <div class="item-date">2026-05-07 16:49</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5809.html" title="浅谈导致网站文章不收录的原因有哪些呢？">浅谈导致网站文章不收录的原因有哪些呢？</a> <div class="item-date">2026-05-07 16:49</div> </li> <li role="listitem"> <a href="/wangzhanjiansheseo/5804.html" title="高效网站设计服务全流程解">高效网站设计服务全流程解</a> <div class="item-date">2026-05-07 16:49</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="/wangzhanjiansheseo/3021.html" title="网站建设常用插件推荐">网站建设常用插件推荐</a> <div class="hot-meta">2026-03-31 11:10 · 1006 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/1054.html" title="【如何用品牌认知SEO打造搜索可见性，实现品牌提及爆发？】">【如何用品牌认知SEO打造搜索可见性，实现品牌提及爆发？】</a> <div class="hot-meta">2026-02-23 11:11 · 1006 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/2615.html" title="第一方数据：打造企业未来的核心资产">第一方数据：打造企业未来的核心资产</a> <div class="hot-meta">2026-03-23 11:10 · 1005 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/1237.html" title="网站迁移不掉排名的关键策略与实操指南">网站迁移不掉排名的关键策略与实操指南</a> <div class="hot-meta">2026-02-26 11:13 · 1005 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/567.html" title="【解密服务器端缓存：如何让网站飞起来？】">【解密服务器端缓存：如何让网站飞起来？】</a> <div class="hot-meta">2026-02-12 11:10 · 1005 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/3216.html" title="网站建设市场洞察助你决胜千里">网站建设市场洞察助你决胜千里</a> <div class="hot-meta">2026-04-03 11:11 · 1004 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/712.html" title="JavaScript SEO揭秘：动态内容优化的实战策略">JavaScript SEO揭秘：动态内容优化的实战策略</a> <div class="hot-meta">2026-02-14 11:14 · 1004 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/620.html" title="网站SSL证书安装指南：提升安全与搜索排名的关键">网站SSL证书安装指南：提升安全与搜索排名的关键</a> <div class="hot-meta">2026-02-13 11:10 · 1004 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/2329.html" title="Content本地化：破解全球市场的关键密码">Content本地化：破解全球市场的关键密码</a> <div class="hot-meta">2026-03-18 11:10 · 1003 阅读</div> </div> </li> <li role="listitem"> <span class="num"></span> <div class="hot-info"> <a href="/wangzhanjiansheseo/1216.html" title="破解遗留系统SEO难题，实现网站优化新突破">破解遗留系统SEO难题，实现网站优化新突破</a> <div class="hot-meta">2026-02-26 11:11 · 1003 阅读</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> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=" rel="nofollow" target="_blank">鲁ICP备2026005306号-47</a> </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 --> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"3Pc17QBTplVyQTJT",ck:"3Pc17QBTplVyQTJT"})</script> </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=3964","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=3964","aid":3964};</script> <script type="text/javascript" src="/public/static/common/js/view_arcrank.js?v=v1.6.4"></script> </body> </html>