HTML 全面解析,从基础到高级html

HTML 全面解析,从基础到高级html,

本文目录导读:

  1. HTML 的基本概念
  2. HTML 的常用标签
  3. <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 标签是整个网页的结构,headbody 是网页的两个部分,headerfooterbody 的两个部分,h1pheaderbody 的内容,divbody 的一个子元素,classdiv 的一个属性。

    三、HTML 的样式">、

    用于定义标题的层次,通常放置在 <header><main> 标签中。

  4. 链接标签用于定义超链接,通常放置在 <p> 标签中。
  5. 图片标签用于定义图片,通常放置在 <p> 标签中。
  6. 列表标签
      1. 用于定义列表,<li> 用于定义列表项。
      2. 表格标签:、、
        用于定义表格,<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 标签是整个网页的结构,headbody 是网页的两个部分,headerfooterbody 的两个部分,h1pheaderbody 的内容,divbody 的一个子元素,classdiv 的一个属性。

        三、HTML 的样式
      3. HTML 的响应式设计
      4. HTML 的进阶应用
      5. HTML(HyperText Markup Language,超文本标记语言)是 WWW(万维网)的基础,是构建网页 most essential 的语言,无论是响应式设计、动态网页还是移动应用,都离不开 HTML,本文将从 HTML 的基础开始,逐步深入,全面解析 HTML 的功能和应用。

        HTML 的基本概念

        HTML 是一种标记语言,用于定义网页的结构和内容,它由一系列标签组成,每个标签代表一个网页元素,如标题、段落、图片、链接等,HTML 的结构化特性使得网页内容易于组织和管理。

        HTML 标签的分类

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

        • 标签名:用于标识一个 HTML 元素,如 <title>
          等。
        • 属性:用于描述标签的属性,如 srcaltclass 等,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 标签是整个网页的结构,headbody 是网页的两个部分,headerfooterbody 的两个部分,h1pheaderbody 的内容。

        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-->