HTML 全面解析，从基础到高级html
HTML 全面解析，从基础到高级html，
本文目录导读：
- HTML 的基本概念
- HTML 的常用标签
- <a href="www.example.com">点击这里</a>
在这个例子中，
href是一个属性，用于描述链接的URL。4. HTML 标签的嵌套
HTML 标签是嵌套的，外层标签包裹内层标签，形成一个树状结构。这种嵌套结构使得网页内容层次分明，易于理解和管理。
例如：
<!DOCTYPE html> <html> <head>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } </style> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> <div class="container"> <h2>子标题</h2> <p>这是子标题的内容。</p> </div> </main> <footer> <p>脚本社区</p> </footer> </body> </html>在这个例子中，
html标签是整个网页的结构，head和body是网页的两个部分，header和footer是body的两个部分，h1和p是header和body的内容，div是body的一个子元素，class是div的一个属性。三、HTML 的样式">、
用于定义标题的层次，通常放置在
<header>或<main>标签中。 - 链接标签：用于定义超链接，通常放置在
<p>标签中。 - 图片标签：
用于定义图片，通常放置在
<p>标签中。 - 列表标签：
- 、
- 、
- 用于定义列表，
<li>用于定义列表项。 - 表格标签：
、
、 、 用于定义表格， <tr>用于定义表格行，<th>和<td>用于定义表格头和表格数据。3. HTML 标签的属性
HTML 标签可以有属性，用于描述标签的属性。属性通常用
属性名，用于描述属性的值。例如：<a href="www.example.com">点击这里</a>
在这个例子中，
href是一个属性，用于描述链接的URL。4. HTML 标签的嵌套
HTML 标签是嵌套的，外层标签包裹内层标签，形成一个树状结构。这种嵌套结构使得网页内容层次分明，易于理解和管理。
例如：
<!DOCTYPE html> <html> <head>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } </style> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> <div class="container"> <h2>子标题</h2> <p>这是子标题的内容。</p> </div> </main> <footer> <p>脚本社区</p> </footer> </body> </html>在这个例子中，
html标签是整个网页的结构，head和body是网页的两个部分，header和footer是body的两个部分，h1和p是header和body的内容，div是body的一个子元素，class是div的一个属性。三、HTML 的样式
- HTML 的响应式设计
- HTML 的进阶应用
HTML（HyperText Markup Language，超文本标记语言）是 WWW（万维网）的基础，是构建网页 most essential 的语言，无论是响应式设计、动态网页还是移动应用，都离不开 HTML，本文将从 HTML 的基础开始，逐步深入，全面解析 HTML 的功能和应用。
HTML 的基本概念
HTML 是一种标记语言，用于定义网页的结构和内容，它由一系列标签组成，每个标签代表一个网页元素，如标题、段落、图片、链接等，HTML 的结构化特性使得网页内容易于组织和管理。
HTML 标签的分类
HTML 标签可以分为以下几类：
- 标签名：用于标识一个 HTML 元素，如
<title>、、 - 属性：用于描述标签的属性，如
src、alt、class等，HTML 标签之间的内容,用于描述网页的逻辑结构。
HTML 标签的嵌套
HTML 标签是嵌套的，外层标签包裹内层标签，形成一个树状结构，这种嵌套结构使得网页内容层次分明,易于理解和管理。
<!DOCTYPE html> <html> <head>我的网页</title> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> </main> <footer> <p>脚本社区</p> </footer> </body> </html>在这个例子中，
html标签是整个网页的结构，head和body是网页的两个部分，header和footer是body的两个部分，h1和p是header和body的内容。HTML 的常用标签
HTML 中有大量常用的标签，每个标签都有其特定的功能，以下是一些常用的 HTML 标签： 标签**：
用于设置网页的标题，通常放置在 <code><head></code> 标签中。</p> <ul> <li><strong>段落标签</strong>：<p>用于定义一段文字，是网页的主要内容，标签**：<h1>、<h2 id="id3">、<h3>用于定义标题的层次，通常放置在 <code><header></code> 或 <code><main></code> 标签中。</li> <li><strong>链接标签</strong>：<a>用于定义超链接，通常放置在 <code><p></code> 标签中。</li> <li><strong>图片标签</strong>：<img>用于定义图片，通常放置在 <code><p></code> 标签中。</li> <li><strong>列表标签</strong>：<ul>、<li>、<ol>用于定义列表，<code><li></code> 用于定义列表项。</li> <li><strong>表格标签</strong>：<table>、<tr>、<th>、<td>用于定义表格，<code><tr></code> 用于定义表格行，<code><th></code> 和 <code><td></code> 用于定义表格头和表格数据。</li> </ul> <h3>HTML 标签的属性</h3> <p>HTML 标签可以有属性，用于描述标签的属性，属性通常用 <code>属性名</code>,用于描述属性的值。</p> <pre class="brush:html;toolbar:false"><a href="www.example.com">点击这里</a></pre> <p>在这个例子中，<code>href</code> 是一个属性,用于描述链接的URL。</p> <h3>HTML 标签的嵌套</h3> <p>HTML 标签是嵌套的，外层标签包裹内层标签，形成一个树状结构，这种嵌套结构使得网页内容层次分明,易于理解和管理。</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } </style> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> <div class="container"> <h2>子标题</h2> <p>这是子标题的内容。</p> </div> </main> <footer> <p>脚本社区</p> </footer> </body> </html></pre> <p>在这个例子中，<code>html</code> 标签是整个网页的结构，<code>head</code> 和 <code>body</code> 是网页的两个部分，<code>header</code> 和 <code>footer</code> 是 <code>body</code> 的两个部分，<code>h1</code> 和 <code>p</code> 是 <code>header</code> 和 <code>body</code> 的内容，<code>div</code> 是 <code>body</code> 的一个子元素，<code>class</code> 是 <code>div</code> 的一个属性。</p> <h2>HTML 的样式</h2> <p>HTML 的样式是通过 CSS（Cascading Style Sheets）来实现的，CSS 是一种样式表语言,用于定义网页元素的外观和行为。</p> <h3>CSS 的基本概念</h3> <p>CSS 是一种样式表语言，用于定义网页元素的外观和行为，CSS 可以用于定义颜色、字体、布局、布局、定位等属性。</p> <h3>CSS 的语法</h3> <p>CSS 的语法包括：</p> <ul> <li><strong>关键字</strong>：用于定义样式，如 <code>color</code>、<code>font-family</code>、<code>padding</code> 等。</li> <li><strong>值</strong>：用于定义样式的具体内容，如 <code>red</code>、<code>Arial</code>、<code>10px</code> 等。</li> <li><strong>规则</strong>：用于定义样式的应用范围，如 、<code>body</code>、<code>header</code> 等。</li> </ul> <h3>CSS 的应用</h3> <p>CSS 可以用于定义网页元素的外观和行为。</p> <pre class="brush:html;toolbar:false"><style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { color: red; font-size: 24px; } p { color: black; font-size: 18px; } } </style> <!DOCTYPE html> <html> <head>我的网页</title> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> </main> <footer> <p>脚本社区</p> </footer> </body> </html></pre> <p>在这个例子中，<code>body</code> 标签定义了网页的整体样式，<code>h1</code> 标签定义了标题的样式，<code>p</code> 标签定义了段落的样式。</p> <h2 id="id4">HTML 的响应式设计</h2> <p>响应式设计（Responsive Design）是使网页在不同设备上适配，包括手机、平板、电脑等,响应式设计是现代网页设计的重要组成部分。</p> <h3>响应式设计的原理</h3> <p>响应式设计的原理是通过 CSS 的 <code>media query</code> 来定义不同设备上的样式。<code>media query</code> 是一种查询,用于定义不同设备上的样式。</p> <h3>响应式设计的应用</h3> <p>响应式设计可以用于定义不同设备上的样式。</p> <pre class="brush:html;toolbar:false"><style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { color: red; font-size: 24px; } p { color: black; font-size: 18px; } @media (max-width: 600px) { h1 { font-size: 20px; } p { font-size: 16px; } } } </style> <!DOCTYPE html> <html> <head>我的网页</title> </head> <body> <header> <h1>网页标题</h1> </header> <main> <p>这是我写的文字。</p> </main> <footer> <p>脚本社区</p> </footer> </body> </html></pre> <p>在这个例子中，<code>@media (max-width: 600px)</code> 定义了当屏幕宽度小于等于 600px 时的样式，<code>h1</code> 和 <code>p</code> 的样式在小设备上会变小。</p> <h2 id="id5">HTML 的进阶应用</h2> <p>HTML 的进阶应用包括：</p> <ul> <li><strong>动态 HTML</strong>：通过 JavaScript 和 AJAX 来实现动态网页。</li> <li><strong>微缩放</strong>：通过 CSS 的 <code>@media</code> 查询来定义不同设备上的样式。</li> <li><strong>响应式设计</strong>：通过 CSS 的 <code>media query</code> 来定义不同设备上的样式。</li> <li><strong>移动优化</strong>：通过 CSS 的 <code>media query</code> 来定义移动设备上的样式。</li> </ul> <h3>动态 HTML</h3> <p>动态 HTML 是通过 JavaScript 和 AJAX 来实现的网页，动态 HTML 可以用于定义动态内容，如数据表单、动态图片等。</p> <h3>微缩放</h3> <p>微缩放是通过 CSS 的 <code>media query</code> 来定义不同设备上的样式，微缩放可以用于定义不同设备上的样式，如屏幕宽度、分辨率等。</p> <h3>响应式设计</h3> <p>响应式设计是通过 CSS 的 <code>media query</code> 来定义不同设备上的样式，响应式设计可以用于定义不同设备上的样式，如屏幕宽度、分辨率等。</p> <h3>移动优化</h3> <p>移动优化是通过 CSS 的 <code>media query</code> 来定义移动设备上的样式，移动优化可以用于定义移动设备上的样式，如屏幕宽度、分辨率等。</p> <p>HTML 是 WWW 的基础，是构建网页的 essential 工具，HTML 的基本概念包括标签、属性、嵌套和样式，HTML 的样式是通过 CSS 来实现的，响应式设计是通过 CSS 的 <code>media query</code> 来定义不同设备上的样式，HTML 的进阶应用包括动态 HTML、微缩放、响应式设计和移动优化。</p> <p>通过学习 HTML，你可以掌握网页的基本结构和功能，为后续学习 JavaScript、CSS 和前端开发打下基础，HTML 是一个简单而强大的工具，可以用于构建静态和动态网页,响应式设计和移动优化是现代网页设计的重要组成部分。</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://www.yuyanstream.com/dianjing/4570.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/1.jpg" alt="俄罗斯，充满魅力的旅游胜地俄罗斯旅游" title="俄罗斯，充满魅力的旅游胜地俄罗斯旅游"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4570.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-07-09</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://www.yuyanstream.com/dianjing/4569.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/9.jpg" alt="SF传奇，星际迷航的隐秘文明传奇sf" title="SF传奇，星际迷航的隐秘文明传奇sf"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4569.html" class="text-reset fw-bold">SF传奇，星际迷航的隐秘文明传奇sf</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-07-09</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://www.yuyanstream.com/dianjing/4562.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/7.jpg" alt="聚焦中央五套体育直播，全面解析中国体育盛事的黄金传播渠道中央5台体育直播" title="聚焦中央五套体育直播，全面解析中国体育盛事的黄金传播渠道中央5台体育直播"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4562.html" class="text-reset fw-bold">聚焦中央五套体育直播，全面解析中国体育盛事的黄金传播渠道中央5台体育直播</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-07-09</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>1</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://www.yuyanstream.com/dianjing/4561.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="中国男篮 vs 开拓者，一场充满悬念的NBA季中赛中国男篮vs开拓者" title="中国男篮 vs 开拓者，一场充满悬念的NBA季中赛中国男篮vs开拓者"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4561.html" class="text-reset fw-bold">中国男篮 vs 开拓者，一场充满悬念的NBA季中赛中国男篮vs开拓者</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-07-09</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://www.yuyanstream.com/dianjing/4557.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/5.jpg" alt="2022年卡塔尔世界杯直播观看指南，如何享受这场全球盛事世界杯直播观看" title="2022年卡塔尔世界杯直播观看指南，如何享受这场全球盛事世界杯直播观看"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4557.html" class="text-reset fw-bold">2022年卡塔尔世界杯直播观看指南，如何享受这场全球盛事世界杯直播观看</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-07-09</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>1</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://www.yuyanstream.com/dianjing/4556.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/4.jpg" alt="上海，连接东西方的国际之门上海东亚" title="上海，连接东西方的国际之门上海东亚"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.yuyanstream.com/dianjing/4556.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-07-09</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://www.yuyanstream.com/zb_system/cmd.php?act=cmt&postid=4537&key=1751001dc28204c0d520e37c31621456"> <input type="hidden" name="inpId" id="inpId" value="4537"> <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://www.yuyanstream.com/shijiebei/4571.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://www.yuyanstream.com/dianjing/4570.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://www.yuyanstream.com/dianjing/4569.html" class="text-reset">SF传奇，星际迷航的隐秘文明传奇sf</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://www.yuyanstream.com/tiyu/4568.html" class="text-reset">今日NBA，KD与字母哥的巅峰对决今日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://www.yuyanstream.com/tiyu/4567.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://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/4.jpg" alt="澳客，澳大利亚球迷的灵魂与力量澳客"> </div> <div class="col-9"> <h6><a href="https://www.yuyanstream.com/dianjing/91.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-05-28</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/7.jpg" alt="雨燕360体育免费直播NBA，开启您的球赛新体验雨燕360体育免费直播nba"> </div> <div class="col-9"> <h6><a href="https://www.yuyanstream.com/tiyu/23.html" class="stretched-link text-reset fw-bold">雨燕360体育免费直播NBA，开启您的球赛新体验雨燕360体育免费直播nba</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-05-27</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/5.jpg" alt="今晚CCTV5直播国足对阵，赛事亮点全解析今晚国足直播cctv5直播"> </div> <div class="col-9"> <h6><a href="https://www.yuyanstream.com/dianjing/529.html" class="stretched-link text-reset fw-bold">今晚CCTV5直播国足对阵，赛事亮点全解析今晚国足直播cctv5直播</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-06-02</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="中国体育直播，从传统到现代的转型之路中国体育直播"> </div> <div class="col-9"> <h6><a href="https://www.yuyanstream.com/dianjing/127.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-05-29</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.yuyanstream.com/zb_users/theme/RanGame/usr/random/2.jpg" alt="中国女篮，荣耀与精神的双重闪耀中国女篮"> </div> <div class="col-9"> <h6><a href="https://www.yuyanstream.com/dianjing/79.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-05-28</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://www.yuyanstream.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://www.yuyanstream.com/zb_users/theme/RanGame/assets/lib/swiper/swiper-bundle.min.js?v=2.1"></script> <script src="https://www.yuyanstream.com/zb_users/theme/RanGame/assets/js/lib.js?v=2.1"></script> <script src="https://www.yuyanstream.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><!--1,606.43 ms , 10 queries , 3657kb memory , 0 error-->
- 、