HTML基础教程:从结构到表单完整指南

954次浏览

 

在网页开发中,HTML(超文本标记语言)是最基础且重要的语言之一。它用于构建网页的结构,定义了网页的内容和布局。HTML通过标签(tags)来标记文本、图像、链接等元素,使浏览器能够正确显示网页内容。本文将详细介绍HTML的基本结构、常用标签、表单元素、以及一些高级特性,帮助你全面理解并掌握HTML的使用。

1. HTML的基本结构

一个标准的HTML文档通常由以下几个部分组成:




    
    
    Document




    




  • :声明文档类型,告诉浏览器这是一个HTML5文档。
  • :根元素,所有其他元素都包含在这个标签内。
  • :包含元数据(metadata),如字符集、视口设置、标题等。
  • </code>:定义网页的标题,显示在浏览器的标题栏或标签页上。</li> <li><code><body></code>:包含网页的可见内容,如文本、图像、链接等。</li> </ul> <h3>2. 常用HTML标签</h3><p style="text-align:center;margin:28px auto;"><img src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" src="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png" alt="HTML基础教程:从结构到表单完整指南(图1)" title="HTML基础教程:从结构到表单完整指南(图1)" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></p> <h4>2.1 标题标签</h4><p style="text-align:center;margin:34px auto;"><img src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" src="https://www.qiludns.com/uploads/20260607/1780779252715_ca8e9d84.png" alt="HTML基础教程:从结构到表单完整指南(图2)" title="HTML基础教程:从结构到表单完整指南(图2)" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></p> <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 title="HTML基础教程:从结构到表单完整指南(图3)" alt="HTML基础教程:从结构到表单完整指南(图3)" ></code>标签用于在网页中插入图像,<code>src</code>属性指定图像的路径,<code>alt</code>属性提供图像的替代文本。</p> <pre><code class="language-html"><img title="HTML基础教程:从结构到表单完整指南(图4)" src="image.jpg" alt="描述图像内容"></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>表单是网页中用于收集用户输入的重要元素,常见的表单元素包括输入框、按钮、下拉列表等。</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><p style="text-align:center;margin:14px auto;"><img src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" src="https://www.qiludns.com/uploads/20260607/1780779252908_53683d32.png" alt="HTML基础教程:从结构到表单完整指南(图3)" title="HTML基础教程:从结构到表单完整指南(图3)" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></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><p style="text-align:center;margin:28px auto;"><img src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" src="https://www.qiludns.com/uploads/20260607/1780779252852_311e17d4.png" alt="HTML基础教程:从结构到表单完整指南(图4)" title="HTML基础教程:从结构到表单完整指南(图4)" style="display:block;margin:0 auto;max-width:100%;height:auto;border-radius:6px;" loading="lazy"></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> <meta itemprop="image" content="https://www.qiludns.com/uploads/20260607/1780779252838_4c455cd9.png"> <meta itemprop="dateModified" content="2026-06-07T04:54:13+08:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display:none;"> <meta itemprop="name" content="辰飞雨SEO网"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/uploads/allimg/20260304/1-26030410102L60.png"> </div> </div> <div class="service_tags" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;"> <h5>标签:</h5> </div> <div class="service-prev-next" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;"> <div class="row"> <div class="col-md-6"> <a href="/news/4014.html" title="企业网站建设全流程解析及项目清单"><i class="fas fa-arrow-left"></i> 上一篇:企业网站建设全流程解析及项目清单</a> </div> <div class="col-md-6 text-md-right"> <a href="/news/4022.html" title="外贸长尾关键词怎么挖掘?精准流量提升策略">下一篇:外贸长尾关键词怎么挖掘?精准流量提升策略 <i class="fas fa-arrow-right"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Blog Detail Section End Here --> <!-- ==================== 推荐文章区域 ==================== --> <section class="pt-0"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="heading"> <h2>推荐阅读</h2> <img class="lazy" data-src="/template/pc/skin/image/icons/headin_border.png" src="/template/pc/skin/image/icons/headin_border.png" alt="headin_border"> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <article class="post-inner" itemscope itemtype="https://schema.org/BlogPosting"> <div class="entry-media"> <a href="/news/2466.html"> <img class="lazy" data-src="https://www.qiludns.com/uploads/20260421/1776717635827_ae5c9cb1.jpg" src="https://www.qiludns.com/uploads/20260421/1776717635827_ae5c9cb1.jpg" alt="如何选择网站建设公司|避坑指南全攻略 - 推荐阅读文章" title="如何选择网站建设公司|避坑指南全攻略" width="400" height="300" loading="lazy" itemprop="image"> </a> </div> <div class="inner-post"> <div class="entry-header"> <div class="entry-meta"> <span class="posted-on"> <a href="javascript:void(0)"><i class="far fa-clock" aria-hidden="true"></i> <time class="entry-date published" datetime="2026-04-21" itemprop="datePublished">2026-04-21</time></a> </span> </div> <a href="/news/2466.html" class="entry-title" itemprop="headline">如何选择网站建设公司|避坑指南全攻略</a> </div> <p class="entry-summary" itemprop="description">选择网站建设公司需明确需求与预算,考察资质、案例、技术能力及售后服务。本文提供实用避坑技巧,帮助您避开低价陷阱、虚假承诺等问题,找到靠谱的网站建设合作伙伴。</p> <meta itemprop="author" content="辰飞雨SEO网"> <link itemprop="url" href="/news/2466.html"> </div> </article> </div> <div class="col-lg-4 col-md-6"> <article class="post-inner" itemscope itemtype="https://schema.org/BlogPosting"> <div class="entry-media"> <a href="/news/310.html"> <img class="lazy" data-src="https://www.qiludns.com/uploads/20260216/1771188535105_97b8fc7d.jpg" src="https://www.qiludns.com/uploads/20260216/1771188535105_97b8fc7d.jpg" alt="文化创意产业网站创意元素融合策略 - 推荐阅读文章" title="文化创意产业网站创意元素融合策略" width="400" height="300" loading="lazy" itemprop="image"> </a> </div> <div class="inner-post"> <div class="entry-header"> <div class="entry-meta"> <span class="posted-on"> <a href="javascript:void(0)"><i class="far fa-clock" aria-hidden="true"></i> <time class="entry-date published" datetime="2026-02-16" itemprop="datePublished">2026-02-16</time></a> </span> </div> <a href="/news/310.html" class="entry-title" itemprop="headline">文化创意产业网站创意元素融合策略</a> </div> <p class="entry-summary" itemprop="description">文化创意产业网站的成功在于创意元素的有机融入。通过设计理念、视觉呈现、交互体验、内容创新及技术创新等多维度的融合,能够提升用户体验,增强文化表达,推动产业创新发展。</p> <meta itemprop="author" content="辰飞雨SEO网"> <link itemprop="url" href="/news/310.html"> </div> </article> </div> <div class="col-lg-4 col-md-6"> <article class="post-inner" itemscope itemtype="https://schema.org/BlogPosting"> <div class="entry-media"> <a href="/news/1107.html"> <img class="lazy" data-src="https://www.qiludns.com/uploads/20260317/1773693654774_d86ce07f.jpg" src="https://www.qiludns.com/uploads/20260317/1773693654774_d86ce07f.jpg" alt="网站制作如何实现个性定制|实用指南 - 推荐阅读文章" title="网站制作如何实现个性定制|实用指南" width="400" height="300" loading="lazy" itemprop="image"> </a> </div> <div class="inner-post"> <div class="entry-header"> <div class="entry-meta"> <span class="posted-on"> <a href="javascript:void(0)"><i class="far fa-clock" aria-hidden="true"></i> <time class="entry-date published" datetime="2026-03-17" itemprop="datePublished">2026-03-17</time></a> </span> </div> <a href="/news/1107.html" class="entry-title" itemprop="headline">网站制作如何实现个性定制|实用指南</a> </div> <p class="entry-summary" itemprop="description">网站制作如何实现个性定制?从明确目标、视觉风格、功能开发到移动优化,全面解析打造独特网站的核心技巧,提升用户体验与品牌辨识度。</p> <meta itemprop="author" content="辰飞雨SEO网"> <link itemprop="url" href="/news/1107.html"> </div> </article> </div> </div> </div> </section> <!-- Recommended Articles Section End Here --> </div> <!-- content End Here --> <!-- ==================== Footer Section Start Here ==================== --> <footer class="site-footer-home3"> <div class="main-footer"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <a href="https://www.qiludns.com" class="footer_title footer-logo">辰飞雨SEO网</a> <p class="footer_decription">辰飞雨SEO网专注于网站建设优化、SEO技术分享与行业动态。我们提供最新的公司新闻、行业新闻深度解析以及实用的技术学堂内容,帮助企业和个人提升网站排名与流量,掌握搜索引擎优化核心技巧。在这里,您可以获取专业的SEO解决方案、前沿的行业趋势分析和实战经验分享。</p> <ul class="footer_social_icon"> <li class="instagram"><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li> <li class="twitter"><a href="javascript:void(0)"><i class="fab fab fa-twitter"></i></a></li> <li class="pinterest"><a href="javascript:void(0)"><i class="fab fab fa-pinterest-p"></i></a></li> <li class="facebook"><a href="javascript:void(0)"><i class="fab fab fa-facebook-f"></i></a></li> </ul> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <h5>联系方式</h5> <ul class="footer_url"> <li><i class="fad fa-map-marker-alt"></i><a href="javascript:void(0)">山东省 济南市 历下区 舜华路街道 创新路 888 号 智慧大厦 1503 室</a></li> <li><i class="fal fa-envelope-open-text"></i><a href="qiludns@email.com">80893057@qq.com</a></li> <li><i class="fal fa-phone-alt"></i><a href="tel:0531-87654321"> 18691394093</a></li> <li><i class="far fa-globe"></i><a href="https://www.qiludns.com">https://www.qiludns.com</a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <h5>服务</h5> <ul class="ft-menu-list"> <li class="ft-menu-item"> <a href="/news/">新闻资讯</a> </li> <li class="ft-menu-item"> <a href="/technology/">SEO技术</a> </li> <li class="ft-menu-item"> <a href="/guanyuwomen/">关于我们</a> </li> <li class="ft-menu-item"> <a href="/contact-us/">联系我们</a> </li> <li class="ft-menu-item"> <a href="/fqa/">常见问题</a> </li> </ul> </div> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <h5>友情链接</h5> <ul class="ft-menu-list"> <li class="ft-menu-item"> <a href="https://wLtmuwu.com" title="物幕AI" target="_blank" rel="nofollow noopener">物幕AI</a> </li> <li class="ft-menu-item"> <a href="https://hnzsdzkj.com" title="众森 IT 新媒体资讯网" target="_blank" rel="nofollow noopener">众森 IT 新媒体资讯网</a> </li> </ul> </div> </div> </div> </div> </div> <div class="footer_after text-center"> <div class="container"> <p>Copyright ©2026 辰飞雨SEO网 版权所有<a href="http://www.eyoucms.com/plus/powerby.php" target="_blank"> Powered by EyouCms</a></p> <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">鲁ICP备2026005306号-42</a></br><a href="https://www.qiludns.com/sitemap.xml" title="网站地图">网站地图</a></p> <p style="color:#fff;">联系邮箱:80893057@qq.com    联系号码:18691394093</p> </div> </div> </footer> <!-- Footer Section End Here --> <a onclick="topFunction()" id="back-to-top" title="Go to top" style="display: block;"><i class="far fa-arrow-up"></i></a> <!-- ==================== JavaScript ==================== --> <script src="/template/pc/skin/js/bootstrap.bundle.min.js"></script> <script src="/template/pc/skin/js/owl.carousel.min.js"></script> <script src="/template/pc/skin/js/custom.js"></script> <!-- bootstrap js --> <script src="/template/pc/skin/js/bootstrap.bundle.min.js"></script> <!-- lazyload js --> <script src="/template/pc/skin/js/jquery.lazyload.min.js"></script> <!-- Carousel js --> <script src="/template/pc/skin/js/owl.carousel.min.js"></script> <!-- custom js --> <script src="/template/pc/skin/js/custom.js"></script> <!-- 修复文章内容图片懒加载 --> <script> $(document).ready(function() { // 处理文章内容中的懒加载图片 $('.service_content img.lazyload').each(function() { var dataSrc = $(this).attr('data-src'); if (dataSrc) { $(this).attr('src', dataSrc); $(this).removeClass('lazyload'); } }); // 初始化其他懒加载图片 $("img.lazy").lazyload({ effect: "fadeIn", threshold: 200 }); }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?98e992dc3b1432297a62d272ce60efad"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/public/static/common/js/footprint.js?v=v1.5.1"></script> <script type="text/javascript">footprint_1606269933('4021', '');</script> </body> </html>