bethash头像
bethash
2025年06月12日 08:51
2

从零开始学HTML，网页开发的基础入门指南html

从零开始学HTML，网页开发的基础入门指南html，

本文目录导读：

  1. 什么是HTML？
  2. HTML的基本结构
  3. 等）**：用于定义网页的标题和子标题的层级结构。
  4. 图片（：用于插入网页中的图片。
  5. 链接（：用于创建超链接，指向其他页面或资源。
  6. 表单（：用于创建用户提交表单的元素。
  7. 脚本标签（：用于插入JavaScript代码，用于动态网页的开发。

如何创建第一个HTML页面？
  • HTML标签的作用
  • 等）**：用于定义标题的层级结构。
  • 图片标签（：用于插入图片。
  • 链接标签（：用于创建超链接。
  • 表单标签（：用于创建表单。
  • 脚本标签（：用于插入JavaScript代码。

    • 创建第一个HTML页面
  • HTML的基础知识
  • HTML的用途
  • HTML的学习资源

    • 什么是HTML？

    HTML（HyperText Markup Language，超文本标记语言）是Web开发的基础语言，用于创建和构建网页，HTML通过一系列标签来定义网页的结构和内容,而这些标签之间的关系决定了网页的布局和显示效果。

    HTML是所有Web页面的基础，没有它，就没有现代互联网上的内容展示，无论是简单的个人博客，还是大型的电商网站，甚至社交媒体平台,都离不开HTML的支持。

    HTML的基本结构

    一个标准的HTML页面通常包括以下几个部分：

    1. HTML标签：用于定义网页的结构和内容，标签（）**：用于指定网页的标题,通常放置在页面的最顶部。</li> <li><strong>元标签（：用于添加一些基本的元数据，如页面的字符集、语言、重定向等。</li> <li><strong>（：用于定义网页的显示区域,也就是用户看到的部分。</li> <li><strong>头（：用于包含元标签和其他静态内容,如JavaScript脚本等。</li> <li><strong>段落（：用于定义网页的段落结构。<h1>，<h2 id="id3">等）**：用于定义网页的标题和子标题的层级结构。</li> <li><strong>图片（：用于插入网页中的图片。</li> <li><strong>链接（：用于创建超链接,指向其他页面或资源。</li> <li><strong>表单（：用于创建用户提交表单的元素。</li> <li><strong>脚本标签（：用于插入JavaScript代码,用于动态网页的开发。</li> </ol> <h2>如何创建第一个HTML页面？</h2> <p>要创建一个简单的HTML页面,只需要按照以下步骤操作：</p> <ol> <li><strong>打开文本编辑器</strong>：如Notepad、VS Code或Sublime Text等工具,输入以下代码：</li> </ol> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">我的第一个网页</title> </head> <body> <h1>欢迎来到我的第一个网页！</h1> <p>这是一个简单的HTML页面，用于展示基本的HTML结构和功能。</p> <a href="#">点击我看看</a> </body> </html></pre> <ol start="2"> <li> <p><strong>保存文件</strong>：将文件保存为<code>.html</code>格式，例如<code>index.html</code>。</p> </li> <li> <p><strong>打开浏览器</strong>：使用浏览器如Chrome、Firefox或Edge打开文件,即可看到页面。</p> </li> </ol> <h2 id="id4">HTML标签的作用</h2> <p>HTML标签是网页结构的基石，它们用于定义页面的布局和内容，常见的HTML标签包括： 标签（<title>）**：用于定义网页的标题。</p> <ul> <li><strong>段落标签（：用于定义段落，标签（<h1>，<h2 id="id5">等）**：用于定义标题的层级结构。</li> <li><strong>图片标签（：用于插入图片。</li> <li><strong>链接标签（：用于创建超链接。</li> <li><strong>表单标签（：用于创建表单。</li> <li><strong>脚本标签（：用于插入JavaScript代码。</li> </ul> <h2>创建第一个HTML页面</h2> <p>我们来尝试创建一个简单的HTML页面,展示HTML的基本结构和功能。</p> <ol> <li><strong>打开文本编辑器</strong>：输入以下代码：</li> </ol> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">我的第一个网页</title> </head> <body> <h1>欢迎来到我的第一个网页！</h1> <p>这是一个简单的HTML页面，用于展示基本的HTML结构和功能。</p> <a href="#">点击我看看</a> </body> </html></pre> <ol start="2"> <li> <p><strong>保存文件</strong>：将文件保存为<code>index.html</code>。</p> </li> <li> <p><strong>打开浏览器</strong>：使用浏览器如Chrome、Firefox或Edge打开文件,即可看到页面。</p> </li> </ol> <h2 id="id6">HTML的基础知识</h2> <ol> <li><strong>HTML5</strong>：现代版本的HTML，引入了新的语法和属性，如<code><article></code>、<code><section></code>等，以及<code>data-属性</code>等。</li> <li><strong>CSS</strong>：用于样式表,美化网页的外观。</li> <li><strong>JavaScript</strong>：用于动态网页开发,实现交互功能。</li> <li><strong>DOM</strong>：DOM（Document Object Model）是HTML和JavaScript交互的核心,用于操作网页元素。</li> </ol> <h2 id="id7">HTML的用途</h2> <ol> <li><strong>个人博客</strong>：用于创建个人博客或个人网站。</li> <li><strong>在线学习平台</strong>：用于构建在线学习平台,展示课程和教学内容。</li> <li><strong>电商网站</strong>：用于创建简单的电商网站,展示商品和订单信息。</li> <li><strong>社交媒体</strong>：用于创建个人社交媒体账号,展示个人动态和内容。</li> <li><strong>电子书阅读器</strong>：用于创建电子书阅读器,展示书籍和阅读内容。</li> </ol> <h2 id="id8">HTML的学习资源</h2> <ol> <li><strong>MDN Web Docs</strong>：官方的HTML文档,提供详细的技术说明和示例。</li> <li><strong>W3Schools</strong>：提供HTML教程和在线示例,适合初学者。</li> <li><strong>Codecademy</strong>：提供交互式的HTML课程,适合快速学习。</li> <li><strong>LeetCode</strong>：虽然主要是编程练习,但也有HTML相关的练习。</li> <li><strong>YouTube</strong>：有很多HTML学习视频,适合视觉学习者。</li> </ol> <p>HTML是Web开发的基础语言，学习HTML可以让你掌握网页的基本结构和功能，通过学习HTML，你可以创建简单的网页，展示个人作品，或者为其他项目提供基础支持，无论是个人博客、在线学习平台，还是电商网站，HTML都是不可或缺的工具，希望这篇文章能帮助你快速入门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://www.qiewin.com/tiyu/1584.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.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://www.qiewin.com/tiyu/1584.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-06-13</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.qiewin.com/tiyu/1583.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/10.jpg" alt="宽带测速，从入门到精通宽带测速" title="宽带测速，从入门到精通宽带测速"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.qiewin.com/tiyu/1583.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-06-13</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.qiewin.com/tiyu/1576.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/5.jpg" alt="国足直播免费观看入口，如何找到合法且安全的观看方式国足直播免费观看入口" title="国足直播免费观看入口，如何找到合法且安全的观看方式国足直播免费观看入口"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.qiewin.com/tiyu/1576.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-06-13</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://www.qiewin.com/tiyu/1575.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.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.qiewin.com/tiyu/1575.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-06-13</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.qiewin.com/tiyu/1573.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/8.jpg" alt="国信证券，中国证券行业的领军者国信证券" title="国信证券，中国证券行业的领军者国信证券"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.qiewin.com/tiyu/1573.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-06-13</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.qiewin.com/tiyu/1572.html" class="d-block ratio ratio-3x2"><img class="card-img" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/5.jpg" alt="咪咕视频官网，全面解析与下载指南咪咕视频官网" title="咪咕视频官网，全面解析与下载指南咪咕视频官网"></a> </div> <div class="card-body px-0 pt-3"> <h4 class="card-title truncate-line1"> <a href="https://www.qiewin.com/tiyu/1572.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-06-13</li> <li class="nav-item"><i class="rgicon rg-eye me-1"></i>3</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.qiewin.com/zb_system/cmd.php?act=cmt&postid=1511&key=517acc6145650ca780a1f4ad1e4b6e35"> <input type="hidden" name="inpId" id="inpId" value="1511"> <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.qiewin.com/dianjing/1586.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.qiewin.com/shijiebei/1585.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.qiewin.com/tiyu/1584.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.qiewin.com/tiyu/1583.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.qiewin.com/shijiebei/1582.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.qiewin.com/zb_users/theme/RanGame/usr/random/6.jpg" alt="CCTV5直播，中国直播领域的引领者与创新者cctv5直播"> </div> <div class="col-9"> <h6><a href="https://www.qiewin.com/tiyu/26.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-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.qiewin.com/zb_users/theme/RanGame/usr/random/8.jpg" alt="篮球直播在线观看，开启你的篮球观看新体验篮球直播在线观看"> </div> <div class="col-9"> <h6><a href="https://www.qiewin.com/shijiebei/406.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-06-01</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/8.jpg" alt="新浪NBA，中国用户与全球篮球运动的桥梁新浪nba"> </div> <div class="col-9"> <h6><a href="https://www.qiewin.com/tiyu/785.html" class="stretched-link text-reset fw-bold">新浪NBA，中国用户与全球篮球运动的桥梁新浪nba</a></h6> <div class="time small mt-1"><i class="rgicon rg-timer me-1"></i>2025-06-06</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/1.jpg" alt="深圳明天天气如何？深圳明天天气"> </div> <div class="col-9"> <h6><a href="https://www.qiewin.com/shijiebei/349.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-06-01</div> </div> </div> </li> <li class="card mb-3"> <div class="row g-3"> <div class="col-3"> <img class="rounded" src="https://www.qiewin.com/zb_users/theme/RanGame/usr/random/7.jpg" alt="哪吒，中华文化的守护者哪吒"> </div> <div class="col-9"> <h6><a href="https://www.qiewin.com/tiyu/511.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-06-02</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.qiewin.com/">企鹅体育直播- 世界杯体育赛事直播平台- 足球直播</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>企鹅体育直播免费看超清4K[永久网址:363050.com]世界杯、NBA直播、NFL橄榄球直播、足球直播、台球直播、CBA、欧冠意甲西甲，腾讯体育,NBA,足球,网球,赛程,NFL,篮球,央视网体育,CCTV5,CCTV体育赛事,体育节目,体育视频,体育直播,体育,NBA,姚明,意甲,欧冠,世界杯,欧洲杯,世界杯直播,欧洲杯直播，更有高颜值美女主播解说体育赛事。</p> </div> </div> </div> </div> </footer> <script src="https://www.qiewin.com/zb_users/theme/RanGame/assets/lib/swiper/swiper-bundle.min.js?v=2.1"></script> <script src="https://www.qiewin.com/zb_users/theme/RanGame/assets/js/lib.js?v=2.1"></script> <script src="https://www.qiewin.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><!--112.69 ms , 10 queries , 3633kb memory , 0 error-->