bethash头像
bethash
2025年10月29日 11:10
2

从零开始学HTML，掌握网页开发的基础html

从零开始学HTML，掌握网页开发的基础html，

本文目录导读：

  1. HTML的基本概念
  2. HTML的基本结构
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="zh-CN"> <head>我的网页</title> <!-- 元标签和样式表 --> </head> <body> <!-- 网页内容 --> </body> </html>

    三、HTML的基本标签">。标签表示网页的开始，类似于

    作为网页标题的作用。

    3. HTML文档的结构

    一个典型的HTML文档结构如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>我的网页</title>
    <!-- 元标签和样式表 -->
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

    三、HTML的基本标签

  4. ：超链接，用于跳转到其他网页。
  5. ...：插入图片，用于丰富网页内容。
  6. ：插入表单元素，如文本框、 selects、drops 等。
  7. ：分隔区域，用于布局和样式设计。
  8. ：文本装饰，用于突出显示或特殊显示。
  9. 、：文本加粗和斜体，用于文字修饰。
  10. 、：对齐和分隔线，用于布局设计。

    11. 3. 标签的嵌套

    HTML标签是树状结构，可以嵌套使用。例如：

    <h1>Hello, World!</h1>
<p>Hello, Again!</p>

    这段代码表示一个包含两个段落的网页。

    4. 标签的自定义

    可以通过自定义标签来简化代码。例如：

    <!-- 自定义标签 -->
<div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph.</p>
</div>

    这段代码中，使用自定义标签包裹内容，使代码更易读。

    四、HTML的样式设计">、：设置网页标题的层级，

    为一级标题，

    为二级标题，

    为三级标题。
  11. ：设置段落，用于分隔内容。
  12. ：超链接，用于跳转到其他网页。
  13. ...：插入图片，用于丰富网页内容。
  14. ：插入表单元素，如文本框、 selects、drops 等。
  15. ：分隔区域，用于布局和样式设计。
  16. ：文本装饰，用于突出显示或特殊显示。
  17. 、：文本加粗和斜体，用于文字修饰。
  18. 、：对齐和分隔线，用于布局设计。

    19. 3. 标签的嵌套

    HTML标签是树状结构，可以嵌套使用。例如：

    <h1>Hello, World!</h1>
<p>Hello, Again!</p>

    这段代码表示一个包含两个段落的网页。

    4. 标签的自定义

    可以通过自定义标签来简化代码。例如：

    <!-- 自定义标签 -->
<div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph.</p>
</div>

    这段代码中，使用自定义标签包裹内容，使代码更易读。

    四、HTML的样式设计
  19. HTML的布局与分隔
  20. HTML的高级功能
  21. HTML的未来发展

HTML，即HyperText Markup Language，是万维网的基础语言，主要用于创建和构建网页，它是World Wide Web（全球网络）的核心，所有网页都以HTML为基础构建，无论是简单的个人简介页，还是复杂的电子商务网站，都离不开HTML的支持，掌握HTML的基本知识，是学习 web 开发的第一步。

HTML的基本概念

HTML的全称与作用

HTML的全称是HyperText Markup Language，意为超文本标记语言，它是一种用于描述网页结构和内容的标记语言，HTML通过一系列标签来定义网页的结构，如标题、段落、超链接等,这些标签告诉浏览器如何显示和处理内容。

HTML与CSS的关系

HTML是网页的“骨架”，而CSS是网页的“肉”和“灵魂”，CSS（Cascading Style Sheets，层次式样式表）用于样式设计，美化网页的外观，HTML和CSS是 web 开发中最为基础的两门技术，两者结合使用,才能制作出专业的网页。

HTML的版本

目前主流的HTML版本有HTML4和HTML5，HTML4是早期版本，功能较为基础；而HTML5则是更加强大和灵活的版本，支持更多的功能，如CDATA段、外部样式表（CSS）等,本文将主要以HTML5为基础进行讲解。

HTML的基本结构

HTML文档的基本组成

一个完整的HTML文档通常包括以下几个部分：

  • HTML5元标签：用于指定文档的元数据，如语言、字符集等。
  • <!DOCTYPE html>：声明文档使用的HTML版本和字符集。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。
  • ：HTML文档的根标签,表示整个网页的开始。
  • ：包含元标签和 CSS 样式表的区域。**：网页的标题,用于描述网页内容。
    • ：表示元标签和样式表的结束。
  • ：网页的主要内容区域,用于显示网页内容。
    • ：表示网页内容的结束,整个网页的结束。

HTML5的根标签

HTML5的根标签是，而不是

或

。标签表示网页的开始，类似于

作为网页标题的作用。

HTML文档的结构

一个典型的HTML文档结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>我的网页</title>
    <!-- 元标签和样式表 -->
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

HTML的基本标签

标签的分类

HTML标签可以分为以下几类：

  • 标签名：用于标识网页元素，如、<h1>、<p>等。</li> <li><strong>属性</strong>：用于设置标签的属性值，如 FontSize、Color、Border等，标签之间的文字内容,用于描述网页内容。</li> </ul> <h3>常用的 HTML 标签</h3> <p>以下是常用的 HTML 标签及其作用：**：设置网页标题。</p> <ul> <li><strong><h1>、<h2 id="id4">、：设置网页标题的层级，<h1>，<h2>，<h3>。</li> <li><strong>：设置段落,用于分隔内容。</li> <li><strong><a href="#"></strong>：超链接,用于跳转到其他网页。</li> <li><strong><img src="..." alt="从零开始学HTML，掌握网页开发的基础" /></strong>：插入图片,用于丰富网页内容。</li> <li><strong><input type="..." value="..."/></strong>：插入表单元素，如文本框、 selects、drops 等。</li> <li><strong>：分隔区域,用于布局和样式设计。</li> <li><strong>：文本装饰,用于突出显示或特殊显示。</li> <li><strong><strong>、：文本加粗和斜体,用于文字修饰。</li> <li><strong><center>、：对齐和分隔线,用于布局设计。</li> </ul> <h3>标签的嵌套</h3> <p>HTML标签是树状结构,可以嵌套使用。</p> <pre class="brush:html;toolbar:false"><h1>Hello, World!</h1> <p>Hello, Again!</p></pre> <p>这段代码表示一个包含两个段落的网页。</p> <h3>标签的自定义</h3> <p>可以通过自定义标签来简化代码。</p> <pre class="brush:html;toolbar:false"><!-- 自定义标签 --> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a sample paragraph.</p> </div></pre> <p>这段代码中，使用自定义标签<container>,使代码更易读。</p> <h2>HTML的样式设计</h2> <h3>CSS的作用</h3> <p>CSS（Cascading Style Sheets）是 HTML 的样式表，用于美化网页外观，CSS 包括颜色、字体、边距、布局等样式。</p> <h3>外部样式表</h3> <p>为了使代码更规范，通常将 CSS 放在 HTML 的外部样式表中,外部样式表的声明方式有两种：</p> <ul> <li><strong>.html 样式表</strong>：直接在 HTML 标签内部声明。</li> <li><strong>.css 样式表</strong>：将 CSS 存储在外部文件中,并通过链接引用。</li> </ul> <h3>内部样式表</h3> <p>将 CSS 直接嵌入 HTML 标签内部,语法格式如下：</p> <pre class="brush:html;toolbar:false"><style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } </style></pre> <h3>样式表的引用</h3> <p>外部样式表可以通过链接引用的方式引入 HTML 文档中。</p> <pre class="brush:html;toolbar:false"><style type="text/css"> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } </style> <!-- 引用外部样式表 --> <link rel="stylesheet" href="style.css"></pre> <h3>样式表的组织</h3> <p>为了使样式表更清晰,通常将样式表分为：</p> <ul> <li><strong>通用样式</strong>：适用于所有元素。</li> <li><strong>特定样式</strong>：针对特定元素或类名进行样式设置。</li> </ul> <h2 id="id5">HTML的布局与分隔</h2> <h3>分割区域</h3> <p>HTML 提供了几个分隔区域,用于布局设计：</p> <ul> <li><strong>：整个网页的根标签。</li> <li><strong>：包含元标签和外部样式表。**：网页标题。</li> <li><strong>区域。</li> </ul> <h3>标签的嵌套</h3> <p>通过嵌套标签,可以实现复杂的布局设计。</p> <pre class="brush:html;toolbar:false"><div class="header"> <h1>Welcome to My Website</h1> <p>This is a sample header.</p> </div> <div class="content"> <h2>This is a sample content.</h2> <p>This is a sample paragraph.</p> </div> <div class="footer"> <p>This is a sample footer.</p> </div></pre> <p>这段代码中，使用<header>、<content>和<footer>标签分别表示网页的不同区域。</p> <h3>标签的组合</h3> <p>通过组合标签,可以实现更复杂的布局设计。</p> <pre class="brush:html;toolbar:false"><div class="main"> <div class="header"> <h1>Welcome to My Website</h1> </div> <div class="content"> <h2>This is a sample content.</h2> <p>This is a sample paragraph.</p> </div> <div class="footer"> <p>This is a sample footer.</p> </div> </div></pre> <p>这段代码中，使用嵌套的<header>、<content>和<footer>标签,将内容分隔成三个区域。</p> <h3>标签的样式</h3> <p>通过自定义标签的样式,可以实现更灵活的布局设计。</p> <pre class="brush:html;toolbar:false"><style> .header { font-size: 24px; color: #ff0000; text-align: center; } .content { font-size: 18px; color: #333333; } .footer { font-size: 12px; color: #666666; text-align: center; } </style> <div class="main"> <div class="header"> <h1>Welcome to My Website</h1> </div> <div class="content"> <h2>This is a sample content.</h2> <p>This is a sample paragraph.</p> </div> <div class="footer"> <p>This is a sample footer.</p> </div> </div></pre> <p>这段代码中，通过自定义标签的样式,实现了不同区域的样式统一。</p> <h2 id="id6">HTML的高级功能</h2> <h3>表单元素</h3> <p>HTML 提供了多种表单元素，用于用户交互,常见的表单元素包括：</p> <ul> <li><strong>：文本输入框。</li> <li><strong>：单选框。</li> <li><strong>：多选框。</li> <li><strong>：按钮,用于触发操作。</li> <li><strong>：表单容器,用于组织表单元素。</li> </ul> <h3>表单的嵌套</h3> <p>通过嵌套表单元素,可以实现更复杂的用户交互。</p> <pre class="brush:html;toolbar:false"><form> <input type="text" name="name" placeholder="Enter your name"> <button type="submit">Submit</button> </form></pre> <p>这段代码中，使用<form>标签包裹输入和按钮元素,使表单更易组织和读取。</p> <h3>表单的样式</h3> <p>通过 CSS,可以对表单元素进行样式设计。</p> <pre class="brush:html;toolbar:false"><style> input[type="text"] { width: 100px; padding: 5px; } button[type="submit"] { background-color: #4CAF50; color: white; padding: 10px; border: none; } </style> <form> <input type="text" name="name" placeholder="Enter your name"> <button type="submit">Submit</button> </form></pre> <p>这段代码中，通过 CSS 设计了输入框和按钮的样式。</p> <h3>表单的验证</h3> <p>为了实现表单验证，可以使用 JavaScript 和 CSS 来绑定表单元素。</p> <pre class="brush:html;toolbar:false"><input type="text" name="name" id="name" pattern="\d{10}"></pre> <p>这段代码中，使用 pattern 属性对输入进行验证,确保输入的格式正确。</p> <h2 id="id7">HTML的未来发展</h2> <h3>HTML5</h3> <p>HTML5 是 HTML 的最新版本，引入了多选框、外部样式表、外部脚本等新功能，HTML5 使网页开发更加灵活和强大。</p> <h3>HTML4</h3> <p>HTML4 是 HTML 的早期版本，功能相对基础，HTML4 的使用场景较少，但仍然是学习 HTML 的基础。</p> <h3>HTML Full Form</h3> <p>HTML Full Form 是 HTML 的全功能版本，支持所有 HTML5 功能，学习 HTML Full Form 是掌握 HTML 的关键。</p> <h3>HTML5 的优势</h3> <p>HTML5 引入了以下新功能：</p> <ul> <li><strong>多选框</strong>：<select>标签的多选属性,用于支持多选。</li> <li><strong>外部样式表</strong>：通过 <link> 标签引用外部样式表。</li> <li><strong>外部脚本</strong>：通过 <script> 标签引用外部脚本。</li> <li><strong>CDATA 段</strong>：用于包含不可见的字符。</li> <li><strong>实体引用</strong>：用于简化代码。</li> </ul> <h3>HTML5 的应用</h3> <p>HTML5 被广泛应用于现代网页开发，支持更多功能和特性,使网页开发更加灵活和高效。</p> <p>HTML 是 web 开发的基础语言，掌握 HTML 的基本知识和结构，是学习 web 开发的第一步，通过学习 HTML 的基本语法、标签、样式设计和布局，可以制作出功能强大的网页，随着 HTML5 的引入，HTML 将更加灵活和强大，为 web 开发提供了更多可能性。</p>从零开始学HTML，掌握网页开发的基础html， </div> <!-- 广告位AD3 --> <ul class="article-tag list-inline mb-4 mt-2 text-center"> </ul> <div class="sharebox d-flex justify-content-center my-3"> <div class="sharebtn"> <div class="sharing" data-initialized="true"> <a href="#" class="share-icon icon-wechat">微信</a> <a href="#" class="share-icon icon-qq">QQ</a> <a href="#" class="share-icon icon-qzone">QQ空间</a> <a href="#" class="share-icon icon-weibo">微博</a> </div> </div> </div> </div> <div class="related my-4 box p-4 pb-0 mb-0"> <div class="row"> <div class="h4 mb-3"><i class="icon-patch-plus"></i>相关文章</div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12126.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/9.jpg" alt="勋章，文明的印记与精神的象征勋章" title="勋章，文明的印记与精神的象征勋章"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12126.html" class="text-reset fw-bold">勋章，文明的印记与精神的象征勋章</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>0</li> </ul> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12117.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="亚足联直播，全球足坛的年度盛事亚体直播" title="亚足联直播，全球足坛的年度盛事亚体直播"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12117.html" class="text-reset fw-bold">亚足联直播，全球足坛的年度盛事亚体直播</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>3</li> </ul> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12115.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="中央八项规定的精神与实践中央八项规定" title="中央八项规定的精神与实践中央八项规定"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12115.html" class="text-reset fw-bold">中央八项规定的精神与实践中央八项规定</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>4</li> </ul> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12104.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="交易篮网，开启体育投资新纪元txnba" title="交易篮网，开启体育投资新纪元txnba"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12104.html" class="text-reset fw-bold">交易篮网，开启体育投资新纪元txnba</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>2</li> </ul> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12103.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/5.jpg" alt="rollback，从数据库事务到企业级应用的全面解析rollback" title="rollback，从数据库事务到企业级应用的全面解析rollback"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12103.html" class="text-reset fw-bold">rollback，从数据库事务到企业级应用的全面解析rollback</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>2</li> </ul> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="card mb-4 overflow-hidden"> <div class="card-fold position-relative"> <a href="https://soccer-yuyan.com/dianjing/12094.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/4.jpg" alt="从零开始学HTML，掌握网页开发的基础html" title="从零开始学HTML，掌握网页开发的基础html"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://soccer-yuyan.com/dianjing/12094.html" class="text-reset fw-bold">从零开始学HTML，掌握网页开发的基础html</a> </h4> <ul class="data nav align-items-center small"> <li class="nav-item me-3"><i class="rgicon rg-timer me-1"></i>2025-10-29</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>2</li> </ul> </div> </div> </div> </div> </div> <div class="post_comments mt-4 box p-4" id="comments"> <div id="comt-respond" class="commentpost"> <h4><b>发表评论</b><span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4> <form id="frmSumbit" target="_self" method="post" action="https://soccer-yuyan.com/zb_system/cmd.php?act=cmt&postid=12094&key=a2b534d32309a4b96a4081da90f9be7b"> <input type="hidden" name="inpId" id="inpId" value="12094"> <input type="hidden" name="inpRevID" id="inpRevID" value="0"> <div class="comt-box"> <div class="form-group liuyan form-name"> <input type="text" id="inpName" class="text rounded-2" value="" name="inpName" tabindex="1" placeholder="用户名"> </div> <div class="form-group liuyan form-email"> <input type="text" id="inpEmail" class="text rounded-2" name="inpEmail" tabindex="2" placeholder="邮箱"> </div> <div class="form-group liuyan form-www"> <input type="text" id="inpHomePage" class="text rounded-2" name="inpHomePage" tabindex="3" placeholder="网址"> </div> </div> <div id="comment-tools"> <div class="tools_text"> <textarea placeholder="留下你的真知灼见..." name="txaArticle" id="txaArticle" class="rounded-2 text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea> </div> </div> <div class="psumbit"> <input name="sumbit" type="submit" tabindex="6" value="发布" onclick="return zbp.comment.post()" class="button btn btn-primary"> </div> </form> </div> </div> </main> <aside class="aside col-lg-3 mt-5 mt-lg-0"> <div class="row g-0"> <div id="new_art" class="sidebar p-4 mb-4"> <h4 class="d-flex pb-3 align-items-center justify-content-between"> <svg t="1731321555375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1451" width="24" height="24"><path d="M315.7504 108.032h334.8992a236.4416 236.4416 0 0 1 236.4416 236.4416v433.2544a158.72 158.72 0 0 1-158.72 158.72H393.5744a236.4416 236.4416 0 0 1-236.4416-236.544V266.6496a158.72 158.72 0 0 1 158.72-158.72z" fill="#6FCBF6" p-id="1452"></path><path d="M640.8192 246.4256H298.8544a141.7216 141.7216 0 0 0-141.7216 141.7216v302.08a246.2208 246.2208 0 0 0 246.1696 246.2208h325.1712a158.72 158.72 0 0 0 158.72-158.72V492.6976a246.2208 246.2208 0 0 0-246.3744-246.272z" fill="#68BEF3" p-id="1453"></path><path d="M640.8192 384.8192H298.8544a141.7728 141.7728 0 0 0-141.7216 141.7728v163.5328a246.2208 246.2208 0 0 0 246.1696 246.2208h325.1712a158.72 158.72 0 0 0 158.72-158.72v-146.5344a246.2208 246.2208 0 0 0-246.3744-246.272z" fill="#5CAAF0" p-id="1454"></path><path d="M640.8192 523.2128H298.8544a141.7728 141.7728 0 0 0-141.7216 141.7728v34.9184a236.4416 236.4416 0 0 0 236.4416 236.4416h334.8992a158.72 158.72 0 0 0 158.72-158.72v-8.2432a246.2208 246.2208 0 0 0-246.3744-246.1696z" fill="#4F94EB" p-id="1455"></path><path d="M876.1344 835.5328a246.2208 246.2208 0 0 0-235.52-174.08H298.8544a141.6704 141.6704 0 0 0-134.3488 97.024 236.4928 236.4928 0 0 0 229.0688 177.7152h334.8992a158.72 158.72 0 0 0 147.6608-100.6592z" fill="#3A8CE6" p-id="1456"></path><path d="M676.5056 361.9328H367.7184c-22.0672 0-39.9872-16.4352-39.9872-36.7616s17.92-36.7616 39.9872-36.7616h308.7872c22.0672 0 39.9872 16.4864 39.9872 36.7616s-17.92 36.7616-39.9872 36.7616zM577.3824 555.4688H367.7184c-22.0672 0-39.9872-16.4864-39.9872-36.7616s17.92-36.7616 39.9872-36.7616h209.92c22.1184 0 40.0384 16.4352 40.0384 36.7616s-18.176 36.7616-40.2944 36.7616z" fill="#FFFFFF" p-id="1457"></path></svg> <!--系统侧栏--> <span class="ms-1 me-auto">最新文章</span> </h4> <ul class="widget new_art"> <li class="new-art"> <div class="d-flex card-body"> <p class="title truncate-line1"><i class="pe-1 rgicon rg-o"></i><a href="https://soccer-yuyan.com/dianjing/12126.html" class="text-reset">勋章，文明的印记与精神的象征勋章</a></p> </div> </li> <li class="new-art"> <div class="d-flex card-body"> <p class="title truncate-line1"><i class="pe-1 rgicon rg-o"></i><a href="https://soccer-yuyan.com/shijiebei/12125.html" class="text-reset">公司注册指南，从零开始到成功运营公司注册</a></p> </div> </li> <li class="new-art"> <div class="d-flex card-body"> <p class="title truncate-line1"><i class="pe-1 rgicon rg-o"></i><a href="https://soccer-yuyan.com/shijiebei/12124.html" class="text-reset">最新推荐，免费观看NBA比赛直播的神器免费观看nba比赛直播的软件</a></p> </div> </li> <li class="new-art"> <div class="d-flex card-body"> <p class="title truncate-line1"><i class="pe-1 rgicon rg-o"></i><a href="https://soccer-yuyan.com/shijiebei/12123.html" class="text-reset">畅享免费，探索CCTV与地方台的无限可能免费看cctv和地方台</a></p> </div> </li> <li class="new-art"> <div class="d-flex card-body"> <p class="title truncate-line1"><i class="pe-1 rgicon rg-o"></i><a href="https://soccer-yuyan.com/tiyu/12122.html" class="text-reset">你把，从物品到文明的传递你把</a></p> </div> </li></ul> </div> <div id="rand_art" class="sidebar p-4 mb-4"> <h4 class="d-flex pb-3 align-items-center justify-content-between"> <svg t="1731321709574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1789" width="24" height="24"><path d="M931.84 472.4736l-91.2896-91.0848V252.6208A62.1568 62.1568 0 0 0 778.24 190.4128h-128.6656L558.4896 99.328a62.1568 62.1568 0 0 0-87.9616 0L379.4432 190.4128H250.88a62.208 62.208 0 0 0-62.4128 62.208v128.768L97.28 472.4736a62.2592 62.2592 0 0 0 0 87.9616l91.0848 91.0848v128.768A62.208 62.208 0 0 0 250.88 842.496h128.5632l91.0848 91.0848a62.2592 62.2592 0 0 0 87.9616 0l91.0848-91.0848H778.24a62.1568 62.1568 0 0 0 62.1568-62.208v-128.768L931.84 560.4352a62.1568 62.1568 0 0 0 0-87.9616z" fill="#4FE99D" p-id="1790"></path><path d="M924.8256 567.296l-84.2752-84.2752V354.2528A62.208 62.208 0 0 0 778.24 291.84h-128.6656l-91.0848-90.88a62.2592 62.2592 0 0 0-87.9616 0L379.4432 291.84H250.88a62.208 62.208 0 0 0-62.4128 62.4128v128.768L104.2432 567.296l84.224 84.224v128.768A62.208 62.208 0 0 0 250.88 842.496h128.5632l91.0848 91.0848a62.2592 62.2592 0 0 0 87.9616 0l91.0848-91.0848H778.24a62.208 62.208 0 0 0 62.1568-62.208v-128.768z" fill="#4EE5A1" p-id="1791"></path><path d="M836.7104 584.704V455.68a62.208 62.208 0 0 0-62.208-62.208h-128.768l-91.0848-90.8288a62.1568 62.1568 0 0 0-87.9616 0L375.6032 393.6768H246.8352A62.208 62.208 0 0 0 184.6272 455.68v129.024l-31.488 31.488 35.328 35.328v128.768A62.208 62.208 0 0 0 250.88 842.496h128.5632l91.0848 91.0848a62.2592 62.2592 0 0 0 87.9616 0l91.0848-91.0848H778.24a62.208 62.208 0 0 0 62.1568-62.208v-128.768l31.488-31.488z" fill="#45DDA3" p-id="1792"></path><path d="M840.5504 557.568A62.208 62.208 0 0 0 778.24 495.36h-128.6656L558.4896 404.48a62.1568 62.1568 0 0 0-87.9616 0L379.4432 495.36H250.88a62.208 62.208 0 0 0-62.4128 62.208v222.72A62.208 62.208 0 0 0 250.88 842.496h128.5632l91.0848 91.0848a62.2592 62.2592 0 0 0 87.9616 0l91.0848-91.0848H778.24a62.208 62.208 0 0 0 62.1568-62.208v-222.72z" fill="#48D3A1" p-id="1793"></path><path d="M250.88 842.496h128.5632l91.0848 91.0848a62.2592 62.2592 0 0 0 87.9616 0l91.0848-91.0848H778.24a62.208 62.208 0 0 0 61.44-51.6096l-2.9184-2.9184v-128.768a62.208 62.208 0 0 0-62.208-62.208h-128.8192l-91.0848-91.0848a62.2592 62.2592 0 0 0-87.9616 0L375.6032 596.992H246.8352a62.1568 62.1568 0 0 0-61.44 51.6096l2.8672 2.9184v128.768A62.208 62.208 0 0 0 250.88 842.496z" fill="#3ACC9B" p-id="1794"></path><path d="M470.4768 681.9328a56.832 56.832 0 0 1-43.264-19.8656l-111.4112-129.8944a40.96 40.96 0 1 1 62.1568-53.3504l91.392 106.496 173.1072-228.2496a40.96 40.96 0 0 1 65.28 49.5104l-191.7952 252.8256a56.832 56.832 0 0 1-43.7248 22.528z" fill="#FFFFFF" p-id="1795"></path></svg> <!--系统侧栏--> <span class="ms-1 me-auto">随机文章</span> <small class="refresh text-primary" onclick="refresh()"><i class="rgicon rg-cached me-1"></i>换一换</small> </h4> <ul class="widget rand_art"> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/4.jpg" alt="探索LOLO直播，一场关于直播行业的深度解析lolo直播"> </div> <div class="col-9"> <h6><a href="https://soccer-yuyan.com/dianjing/11912.html" class="stretched-link text-reset fw-bold">探索LOLO直播，一场关于直播行业的深度解析lolo直播</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-10-27</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="华体会体育，推动全球体育产业发展的引领者华体会体育"> </div> <div class="col-9"> <h6><a href="https://soccer-yuyan.com/dianjing/11580.html" class="stretched-link text-reset fw-bold">华体会体育，推动全球体育产业发展的引领者华体会体育</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-10-23</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/4.jpg" alt="看球通，现代球迷的便捷助手看球通"> </div> <div class="col-9"> <h6><a href="https://soccer-yuyan.com/shijiebei/12068.html" class="stretched-link text-reset fw-bold">看球通，现代球迷的便捷助手看球通</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-10-29</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/3.jpg" alt="房山吧，社交媒体新星的崛起之路房山吧"> </div> <div class="col-9"> <h6><a href="https://soccer-yuyan.com/tiyu/11601.html" class="stretched-link text-reset fw-bold">房山吧，社交媒体新星的崛起之路房山吧</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-10-23</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://soccer-yuyan.com/zb_users/theme/RanGame/usr/random/9.jpg" alt="英冠直播，现代体育赛事的数字化革命英冠直播"> </div> <div class="col-9"> <h6><a href="https://soccer-yuyan.com/shijiebei/11829.html" class="stretched-link text-reset fw-bold">英冠直播，现代体育赛事的数字化革命英冠直播</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-10-26</div> </div> </div> </li></ul> </div></div> </aside> </div> </div> </section> <button type="button" id="backtotop" class="position-fixed text-center border-0 p-0"> <i class="rgicon rg-up"></i> </button> <footer class="footer w-100"> <div class="container footer-wrap"> <div class="row align-items-center"> <div class="col-lg-4 misc"> <p class="copyright-text">© 2025 <a href="https://soccer-yuyan.com/">雨燕直播- NBA直播- 专业体育赛事直播平台</a>版权所有 </p> </div> <div class="foot-sharing col-lg-4 text-center"> <ul class="sharing social-profile list-style" data-initialized="true"> <li><a href="javascript:;" rel="nofollow" class="share-icon icon-wechat">微信</a></li> <li><a href="javascript:;" rel="nofollow" class="share-icon icon-qq">QQ</a></li> <li><a href="javascript:;" rel="nofollow" class="share-icon icon-weibo">微博</a></li> <li><a href="javascript:;" rel="nofollow" class="share-icon icon-qzone">QQ空间</a></li> </ul> </div> <div class="col-lg-4 desc"> <div class="footer-right"> <p>雨燕直播[永久网址:363050.com]是一个专业为球迷提供免费直播的平台,雨燕直播提供最全面专业的体育直播、体育视频、体育图文、体育赛事、体育评论，内容涵盖世界杯/欧洲杯/国足/NBA/CBA/篮球/意甲/西甲/德甲/足球/综合体育/英超/意甲/法甲/葡超/荷甲/英冠/欧冠/亚冠/欧联/中超等赛事！欧洲杯等各大足球高清赛事,全天24小时赛事不间断,与美女主播一起零距离互动,看体育赛事尽在雨燕直播。</p> </div> </div> </div> </div> </footer> <script src="https://soccer-yuyan.com/zb_users/theme/RanGame/assets/lib/swiper/swiper-bundle.min.js?v=2.1"></script> <script src="https://soccer-yuyan.com/zb_users/theme/RanGame/assets/js/lib.js?v=2.1"></script> <script src="https://soccer-yuyan.com/zb_users/theme/RanGame/assets/js/main.js?v=2.1"></script> <script> document.addEventListener('DOMContentLoaded', function() { const navLinks = document.querySelectorAll('.game-nav .nav-link'); const sections = document.querySelectorAll('.content-section'); function setActiveTab() { const scrollPosition = window.scrollY; sections.forEach((section, index) => { const sectionTop = section.offsetTop - 100; const sectionBottom = sectionTop + section.offsetHeight; if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) { navLinks.forEach(link => link.classList.remove('active')); navLinks[index].classList.add('active'); } }); } setActiveTab(); window.addEventListener('scroll', setActiveTab); navLinks.forEach(link => { link.addEventListener('click', function() { navLinks.forEach(l => l.classList.remove('active')); this.classList.add('active'); }); }); }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const carousel = document.querySelector('.carousel'); const items = document.querySelectorAll('.carousel-box'); const prevButton = document.querySelector('.carousel-button.prev'); const nextButton = document.querySelector('.carousel-button.next'); const lightbox = document.querySelector('.lightbox'); if (!lightbox) { console.log('Lightbox element not found'); return; } const lightboxImg = lightbox.querySelector('img'); const lightboxClose = document.querySelector('.lightbox-close'); let currentIndex = 0; const totalItems = items.length; const itemsPerView = window.innerWidth <= 768 ? 2 : 4; // 响应式显示数量 const maxIndex = totalItems - itemsPerView; let isDragging = false; let startPos = 0; let currentTranslate = 0; let prevTranslate = 0; let animationID = 0; // 轮播图功能 function updateCarousel(index) { currentIndex = index; const offset = -currentIndex * (100 / itemsPerView); carousel.style.transform = `translateX(${offset}%)`; } function nextSlide() { currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1; updateCarousel(currentIndex); } function prevSlide() { currentIndex = currentIndex <= 0 ? maxIndex : currentIndex - 1; updateCarousel(currentIndex); } // 自动轮播 let autoplayInterval = setInterval(nextSlide, 3000); // 鼠标悬停时暂停自动轮播 carousel.addEventListener('mouseenter', () => { clearInterval(autoplayInterval); }); carousel.addEventListener('mouseleave', () => { autoplayInterval = setInterval(nextSlide, 3000); }); // 按钮点击事件 prevButton.addEventListener('click', () => { clearInterval(autoplayInterval); prevSlide(); }); nextButton.addEventListener('click', () => { clearInterval(autoplayInterval); nextSlide(); }); // 拖拽功能 function touchStart(event) { isDragging = true; startPos = getPositionX(event); animationID = requestAnimationFrame(animation); carousel.style.cursor = 'grabbing'; } function touchMove(event) { if (isDragging) { const currentPosition = getPositionX(event); currentTranslate = prevTranslate + currentPosition - startPos; } } function touchEnd() { isDragging = false; cancelAnimationFrame(animationID); carousel.style.cursor = 'grab'; const movedBy = currentTranslate - prevTranslate; if (movedBy < -100 && currentIndex < maxIndex) { currentIndex += 1; } if (movedBy > 100 && currentIndex > 0) { currentIndex -= 1; } updateCarousel(currentIndex); } function getPositionX(event) { return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX; } function animation() { setSliderPosition(); if (isDragging) requestAnimationFrame(animation); } function setSliderPosition() { carousel.style.transform = `translateX(${currentTranslate}px)`; } // 添加触摸和鼠标事件监听器 carousel.addEventListener('mousedown', touchStart); carousel.addEventListener('touchstart', touchStart); carousel.addEventListener('mousemove', touchMove); carousel.addEventListener('touchmove', touchMove); carousel.addEventListener('mouseup', touchEnd); carousel.addEventListener('touchend', touchEnd); carousel.addEventListener('mouseleave', touchEnd); // 灯箱功能 items.forEach(item => { item.addEventListener('click', () => { if (!isDragging) { const imgSrc = item.querySelector('img').src; lightboxImg.src = imgSrc; lightbox.classList.add('active'); } }); }); // 关闭灯箱 lightboxClose.addEventListener('click', () => { lightbox.classList.remove('active'); }); // 点击灯箱背景关闭 lightbox.addEventListener('click', (e) => { if (e.target === lightbox) { lightbox.classList.remove('active'); } }); // 键盘事件 document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { prevSlide(); } else if (e.key === 'ArrowRight') { nextSlide(); } else if (e.key === 'Escape' && lightbox.classList.contains('active')) { lightbox.classList.remove('active'); } }); // 响应式处理 window.addEventListener('resize', () => { const newItemsPerView = window.innerWidth <= 768 ? 2 : 5; if (newItemsPerView !== itemsPerView) { location.reload(); // 简单处理：当视图改变时刷新页面 } }); }); </script> </body> </html><!--169.07 ms , 10 queries , 3707kb memory , 0 error-->