老哥⦁经典AI导航
AI资讯

零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览

2025-07-03
8478次阅读
零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览
? 别再怕！HTML5 入门真没你想的那么难

很多人一听到 “编程”“代码” 就头大，尤其是零基础的朋友，总觉得 HTML5 是程序员的专属。但我跟你说，HTML5 其实是最适合新手入门的编程语言，它就像网页的 “骨架”，你写的每一行代码，都能直接变成你看到的文字、图片、按钮 —— 这种即时反馈的快感，学起来根本不枯燥！

我当初刚接触 HTML5 时，连 “标签” 是什么都不知道，对着教程里的一脸懵。但跟着敲了 3 天代码后，居然自己做出了一个简单的个人介绍页，那种成就感现在想起来还挺激动的。所以真的别担心基础，今天这篇内容，就是给纯小白准备的 “保姆级指南”，从最基础的概念到能上手写代码，一步都不会落下。

? 先搞懂：HTML5 到底是个啥？

简单说，HTML5 是用来构建网页结构的标记语言。你现在打开的任何一个网页，小到一个标题，大到整个页面布局，背后都有 HTML5 的影子。它不是什么高深的技术，更像是一套 “规则”—— 用特定的 “标签” 告诉浏览器：“这段是标题”“这个是图片”“那块是导航栏”。

和之前的 HTML 版本比，HTML5 最大的进步是加入了语义化标签和多媒体支持。比如以前用一堆
堆出一个导航栏，现在直接用

可能有人会问，学 HTML5 需要什么准备？真不用啥高端设备，一台能上网的电脑就行。编辑器？刚开始用记事本都能写，后期再换专业工具也不迟。关键是敢动手敲，哪怕对着教程抄代码，抄着抄着就有感觉了。

? 核心标签：这些 “积木” 你必须会

HTML5 的标签就像搭房子的积木，不同的积木有不同的用法。先记几个最基础的，保证你看完就能写一段简单的页面。

：整个 HTML 文档的 “根标签”，所有内容都得包在它里面。就像你写作文，总得有个开头和结尾吧？就是那个 “开头”，对应的结尾是（所有标签都要成对出现， closing tag 别漏了！）。

：放页面的 “元信息”，比如标题、编码格式这些，用户在页面上看不到，但浏览器和搜索引擎需要它。里面最常用的是</code>标签，就是你打开网页时，浏览器标签栏显示的文字 —— 这个一定要写，对 SEO 很重要！</div><br> <div><code><body></code>：所有用户能看到的内容，都在这里面。标题、段落、图片、按钮…… 全往这里塞。比如你想写一段文字，就用<code><p></code>标签：<code><p>这是一段文字</p></code>，保存后打开，就能看到黑色的文字了。</div><br> <div>标题标签必须单独说一下：<code><h1></code>到<code><h6></code>，数字越小，字体越大。<code><h1></code>一般是页面的主标题，一个页面最好只放一个，对 SEO 友好；<code><h2></code>可以当小标题，以此类推。别小看这些标签，<strong>搜索引擎爬取页面时，会重点看标题标签的层级</strong>，乱用水深着呢。</div><br> <div>还有个超实用的标签：<code><a></code>，用来做链接。格式是<code><a href="/u.html#">点击跳转</a></code>，比如<code>去百度</code>，点击 “去百度” 就能跳转到百度首页。注意 href 后面的网址一定要写全，http 或 https 不能少，不然跳不动！</div><br> <div>?️ 图片标签：<code><img></code>。这个标签有点特殊，它不需要 closing tag，直接写成<code><img src="图片地址" alt="图片描述"></code>。src 是图片的路径（可以是网上的图片链接，也可以是本地图片的位置），alt 是当图片加载不出来时显示的文字 —— 这个 alt 属性超重要，<strong>对 SEO 和无障碍访问都是必须的</strong>，千万别偷懒不写。</div><br> <div>? 属性：给标签 “加特效” 的小技巧</div><br> <div>标签就像一个空盒子，属性就是给盒子 “上色”“贴标签” 的工具。比如<code><p></code>标签默认是黑色文字，加个<code>style</code>属性就能改样式：<code><p style="color: red; font-size: 20px;">这段文字是红色20号字</p></code>。</div><br> <div>最常用的属性有这几个：</div><br> <div><code>class</code>和<code>id</code>：给标签起名字，方便后面用 CSS 或 JavaScript 控制。区别是 class 可以重复用在多个标签上，id 在一个页面里必须唯一。比如<code><p>简介1</p><p>简介2</p></code>，两个段落都能用 统一设置样式。</div><br> <div><code>href</code>：只用于<code><a></code>标签，指定链接地址，前面提过了，不多说。</div><br> <div><code>src</code>：用于<code><img></code>和<code><script></code>等标签，指定资源的路径，比如图片地址、脚本文件地址。</div><br> <div><code>alt</code>：只用于<code><img></code>，前面也强调了，记住 “有图就有 alt”。</div><br> <div><code>title</code>：鼠标悬停在元素上时显示的提示文字。比如<code><a href="/u.html#" title="这是百度首页">去百度</a></code>，鼠标放上去就会弹出 “这是百度首页” 的提示，对用户体验很友好。</div><br> <div>属性的写法都是 “属性名 ="属性值""，注意引号要用英文状态下的，中文引号会导致代码失效 —— 这点新手超容易踩坑，我当初因为这个调试了半天，气死！</div><br> <div>? 语义化：让代码 “会说话” 的秘密</div><br> <div>这部分必须重点说！<strong>语义化是 HTML5 的灵魂</strong>，也是新手最容易忽略的点。很多人图省事，不管什么内容都用<code><div></code>标签堆，看起来页面能显示，但对搜索引擎和后续维护来说就是灾难。</div><br> <div>什么是语义化？简单说，就是<strong>用合适的标签表达合适的内容</strong>。比如导航栏用<code><nav></code>，文章主体用<code><article></code>，页脚用<code><footer></code>，侧边栏用<code><aside></code>。这些标签和<code><div></code>功能上差不多，但语义明确，浏览器和搜索引擎一看就知道 “这块是干嘛的”。</div><br> <div>举个例子：以前写导航栏可能是<code><div>...</div></code>，现在直接用<code><nav>...</nav></code>。看起来就差个标签名，但效果天差地别 —— 搜索引擎会给语义化标签更高的权重，因为它能更准确地理解页面结构，从而提升你的页面排名。</div><br> <div>对开发者来说，语义化代码也更好维护。一个几百行的页面，全是<code><div></code>的话，找个元素得翻半天；用了<code><header></code> <code><main></code> <code><footer></code>，一眼就知道哪个部分是哪个，效率高多了。</div><br> <div>再举几个常用的语义化标签：</div><br> <div><code><header></code>：页面或区块的头部，通常放 logo、标题、导航。</div><br> <div><code><main></code>：页面的主要内容，一个页面最好只出现一次。</div><br> <div><code><section></code>：一个独立的区块，比如文章里的一个章节。</div><br> <div><code><article></code>：独立的文章内容，比如一篇博客、一条新闻。</div><br> <div><code><footer></code>：页脚，放版权信息、联系方式啥的。</div><br> <div>刚开始可能觉得麻烦，不如<code><div></code>万能，但逼着自己用几次就习惯了。<strong>记住，学 HTML5 不只是为了 “能写出页面”，更是为了写出 “好页面”</strong>，语义化就是第一步。</div><br> <div>? 免费教程：这些资源比付费课还香</div><br> <div>别再乱花钱买 HTML5 课程了！网上免费的优质资源一大把，我整理了几个亲测好用的，零基础也能跟着学：</div><br> <ol> <li>MDN Web Docs（developer.mozilla.org/zh-CN/docs/Web/HTML）</li> </ol><br> <div>这是<strong>所有前端开发者的 “圣经”</strong>，由 Mozilla 维护，内容权威到不行。HTML5 的每个标签、每个属性都有详细解释，还有实例代码，甚至告诉你 “这个标签在哪个浏览器不兼容”。最棒的是它有 “交互示例”，可以直接在页面上改代码，实时看效果，对新手太友好了。</div><br> <ol start="2"> <li>W3Schools（www.w3schools.com/html/）</li> </ol><br> <div>老牌教程网站，特点是<strong>简单直白，步骤清晰</strong>。每个知识点都配了 “Try it Yourself” 按钮，点进去就能打开在线编辑器，左边写代码，右边实时预览效果。缺点是有些翻译有点生硬，建议结合英文原版看，但整体不影响学习。</div><br> <ol start="3"> <li>菜鸟教程（www.runoob.com/html/html5-intro.html）</li> </ol><br> <div>中文教程里的佼佼者，内容接地气，例子都是中文场景（比如 “这是一个标题”“这是一张图片”），新手看着不费劲。它的 “在线编辑器” 功能也很赞，写完代码点 “运行” 就能看到效果，还能一键保存代码，方便下次接着写。</div><br> <ol start="4"> <li>freeCodeCamp（www.freecodecamp.org/chinese/）</li> </ol><br> <div>这个更像 “闯关游戏”，把知识点拆成一个个小任务，比如 “用<code><h1></code>标签写一个标题”“用<code><a></code>标签做一个链接”，完成任务才能解锁下一关。学完所有任务，还能做几个实战项目，比如个人主页、 tribute 页面，成就感拉满。</div><br> <div>这些资源都有一个共同点：<strong>边学边练</strong>。千万别只看不动手，代码这东西，眼睛会了不算会，手敲出来才算。哪怕照着教程抄，抄的时候多想想 “这个标签为什么这么用”，进步会飞快。</div><br> <div>? 交互式代码工具：实时预览太爽了</div><br> <div>写代码最烦的就是 “写完不知道效果”，尤其是新手，改一行代码就得保存、刷新页面，来回折腾。这时候交互式代码工具就派上大用场了 —— 左边写代码，右边秒出效果，简直是神器！</div><br> <ol> <li>CodePen（codepen.io）</li> </ol><br> <div>我用得最多的工具，界面简洁，功能强大。点右上角 “New Pen”，左边三个框分别写 HTML、CSS、JavaScript，右边就是实时预览区。写完可以直接分享链接，或者导出代码。社区里还有无数大神的作品，能直接看他们的源代码，偷师学艺超方便。</div><br> <ol start="2"> <li>JSFiddle（jsfiddle.net）</li> </ol><br> <div>和 CodePen 类似，也是分区域写代码，实时预览。它的优势是可以选择不同的 JavaScript 库（比如 jQuery），适合后面学了 CSS 和 JS 后用。界面稍微朴素点，但胜在稳定，加载速度快。</div><br> <ol start="3"> <li>Stackblitz（stackblitz.com）</li> </ol><br> <div>如果想做稍微复杂点的项目，比如带框架的页面，选它准没错。它能模拟本地开发环境，支持自动补全、错误提示，写完还能部署到网上，生成一个可访问的网址。新手刚开始可能觉得功能太多，但用熟了会离不开。</div><br> <ol start="4"> <li>浏览器自带开发者工具</li> </ol><br> <div>这个必须提！其实不用第三方工具，你现在用的浏览器（Chrome、Edge、Firefox）就有实时编辑功能。在网页上右键 “检查”，就能打开开发者工具，点 “Elements” 面板，找到对应的 HTML 代码，直接改 —— 改完立马能看到效果，超适合用来 “拆解” 别人的网页：看到哪个效果想学，直接看它的代码是怎么写的。</div><br> <div>刚开始用这些工具时，可能会觉得眼花缭乱，但记住：<strong>我们主要用它们来写 HTML 代码，看实时效果</strong>，不用急着学 CSS 和 JS 的部分。先把 HTML 标签练熟，再慢慢拓展其他知识。</div><br> <div>? 学习路线：零基础 30 天入门计划</div><br> <div>最后给个小建议，零基础的朋友可以按这个节奏学：</div><br> <div>第 1-3 天：搞懂 HTML5 基本概念，学会<code><html></code> <code><head></code> <code><body></code> <code><h1>-<h6></code> <code><p></code>这些基础标签，用在线工具写一段带标题和段落的文字。</div><br> <div>第 4-7 天：学<code><a></code> <code><img></code>标签，尝试做一个带链接和图片的页面，比如 “我的相册”，放几张图片，加几个跳转链接。</div><br> <div>第 8-12 天：重点学语义化标签，把之前写的页面改成用<code><header></code> <code><nav></code> <code><main></code> <code><footer></code>等标签，对比一下和全用<code><div></code>的区别。</div><br> <div>第 13-20 天：学常用属性（class、id、src、href 等），尝试给标签加样式（比如用 style 属性改颜色、字体），用交互式工具做一个简单的个人介绍页。</div><br> <div>第 21-30 天：找一个喜欢的简单网页（比如博客首页），试着模仿它的结构，用学到的标签和属性 “抄” 一个出来。抄的时候多思考 “它为什么用这个标签”，而不是盲目复制。</div><br> <div>30 天下来，你绝对能从 “啥都不会” 变成 “能独立写简单页面”。记住，<strong>HTML5 不难，难的是坚持动手</strong>。遇到报错别慌，90% 的问题都是拼写错误（比如标签没关、引号用了中文），仔细检查代码就行。</div><br> <div>最后说句大实话：现在网页开发越来越卷，但 HTML5 是绕不开的基础。不管你以后想做前端开发、自媒体（自己搭网站），还是单纯想多一项技能，花点时间把 HTML5 学会，绝对不亏。</div><br> <div>赶紧挑一个免费教程，打开一个交互式工具，敲下你的第一行 HTML 代码吧 ——<code><p>我开始学HTML5啦！</p></code>，就从这行开始，你已经比昨天的自己进步了。</div><br> <div>【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】</div><br> </div> </div> <!-- 标签和分享 --> <div class="flex flex-col md:flex-row justify-between items-start md:items-center pt-8 mt-8 border-t border-gray-200 dark:border-gray-700"> <div class="mb-4 md:mb-0"> <span class="text-gray-700 dark:text-gray-300 mr-2">标签：</span> <span class="news-tag bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full text-sm">AI资讯</span> </div> <div class="flex space-x-3"> <span class="text-gray-700 dark:text-gray-300">分享：</span> <a href="javascript:void(0)" onclick="shareToWeChat()" class="social-share w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览', window.location.href)" class="social-share w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400"> <i class="fa-brands fa-weibo"></i> </a> <a href="javascript:void(0)" onclick="shareToTwitter('零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览', window.location.href)" class="social-share w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white"> <i class="fa-brands fa-twitter"></i> </a> <a href="javascript:void(0)" onclick="copyLink()" class="social-share w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-400"> <i class="fa-solid fa-link"></i> </a> </div> </div> </div> <!-- 上一篇/下一篇 --> <div class="flex flex-col md:flex-row justify-between gap-6 mb-8"> <a href="/ai/zLEAh0lnk9FEkxtFcWWkhjm0UYFsCRQ4h6bv5l3bz3q.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5"> <div class="flex items-center"> <i class="fa-solid fa-arrow-left text-gray-500 dark:text-gray-400 mr-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i> <div> <p class="text-gray-500 dark:text-gray-400 text-sm mb-1">上一篇</p> <h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">大家字幕组字幕制作教程 2025 新版！社区互动助力获取优质字幕资源</h3> </div> </div> </a> <a href="/ai/4Y9zJj2feXQ2o1LkFj4dYjocvmkmfWnzsRDUIFNzH7y.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5"> <div class="flex items-center text-right flex-row-reverse"> <i class="fa-solid fa-arrow-right text-gray-500 dark:text-gray-400 ml-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i> <div> <p class="text-gray-500 dark:text-gray-400 text-sm mb-1">下一篇</p> <h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">更新速度快的字幕组推荐！大家字幕组海量资源专业翻译质量高</h3> </div> </div> </a> </div> <!-- 评论区 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-gray-800 dark:text-white">用户评论 (0)</h3> <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center"> <i class="fa-solid fa-pen mr-2"></i> 发表评论 </button> </div> <div class="space-y-6"> <!-- 暂无评论 --> <div class="text-center py-8"> <i class="fa-regular fa-comments text-5xl text-gray-300 dark:text-gray-600 mb-4"></i> <p class="text-gray-500 dark:text-gray-400">暂无评论，快来发表第一条评论吧！</p> </div> </div> </div> </div> <!-- 右侧边栏 --> <div class="w-full lg:w-1/4"> <!-- 网站信息 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mr-4"> <i class="fa-solid fa-robot text-white text-xl"></i> </div> <div> <h3 class="font-bold text-gray-800 dark:text-white">AI导航</h3> <p class="text-gray-600 dark:text-gray-400 text-sm">AI资源与工具导航</p> </div> </div> <p class="text-gray-700 dark:text-gray-300 text-sm"> 汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。关注前沿AI技术发展与实际应用案例。 </p> <div class="flex space-x-3 mt-4"> <a href="javascript:void(0)" onclick="shareToTwitter('零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-twitter"></i> </a> <a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('零基础入门 HTML5：免费教程涵盖标签属性与语义化，附交互式代码实时预览', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-weibo"></i> </a> </div> </div> <!-- 热门资讯排行榜 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8"> <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">热门资讯榜</h3> <div class="space-y-4"> <!-- 排行项目 1 --> <a href="/ai/yAeANHXxP4bv4vKVicA17fB0pKpaZbo4QiHpuH2nrIY.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 1 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 移动端 AI Office Bo </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 749次阅读 </p> </div> </a> <!-- 排行项目 2 --> <a href="/ai/BzSZEuueqshpJyW6wW7Xaaeju3Sy1ob7uQiAQO6vRXi.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 2 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 隐私新规下 Facebook 广 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 187次阅读 </p> </div> </a> <!-- 排行项目 3 --> <a href="/ai/2TOzaQOpJvYSR2algHPUcglcqa4k6vNnc5OmcCOWBtK.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-700 to-amber-800 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 3 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 极客修家电维修收费标准 2025 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 359次阅读 </p> </div> </a> <!-- 排行项目 4 --> <a href="/ai/7qM6xXdsmLVhCrz0ZYH1QOgTeZd73Oy3FElwO91TBoY.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 4 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> AI 识别高光靠谱吗？Frame </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 912次阅读 </p> </div> </a> <!-- 排行项目 5 --> <a href="/ai/fsPTmTVQiMy44EJAe2OJyRET75P58q3LUr5gg0p2yOQ.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 5 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Panda 智能任务管理应用 2 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 582次阅读 </p> </div> </a> <!-- 排行项目 6 --> <a href="/ai/aborNm98C37K8apXiNPUSaumzibnwSewn9kJX69nCyI.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 6 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 设计师必备！Adobe Know </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 944次阅读 </p> </div> </a> <!-- 排行项目 7 --> <a href="/ai/cPEaFZlcO3apWL7ORZzpnnNohKJsdVd7M7r8OKGB3W.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 7 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 超星网 2025 在线教育平台： </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 218次阅读 </p> </div> </a> <!-- 查看全部按钮 --> <!-- <div class="pt-4"> <a href="news.php" class="text-blue-600 dark:text-blue-400 hover:underline text-sm flex items-center"> 查看全部热门资讯 <i class="fa-solid fa-arrow-right ml-2 text-xs"></i> </a> </div> --> </div> </div> <!-- 推荐资讯 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6"> <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">推荐阅读</h3> <div class="space-y-5"> <!-- 推荐项目 --> <a href="/ai/hvIUSwaSpWaWslVInxAVvH7QolvWCgRhvCXa5GIZ1iw.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/06/1b8213d2e575f92d20ed7d1aed9b1e1b.jpg" alt="雅书计算机电子书怎么免费下载？海量资源每日更新别错过！" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 雅书计算机电子书怎么免费下载？ </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/O3IQoS9UDPn9oukNuSVTtTbTKkfeVglFNsFpwJRYgAg.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/07/ec60f876cadac5a0e940c86fd148d8bb.jpg" alt="199IT 行业数据报告怎么用？市场分析技巧全攻略" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 199IT 行业数据报告怎么用 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/EC11zBOifYKTpOTjoMXu1kyrYqHxOp7vmWUecKJ46GA.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/07/3c9a952952ab23502670996510e166bf.jpg" alt="如何用 Castmagic 高效创作？多语言转录一键生成播客指南" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 如何用 Castmagic 高 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/pf0pCVU55UVd2HeV9n7VgbE7hOsygVdaIsJCnzZFKnC.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/06/4aa0d3aeaa1fc1b663db9df6c0da4675.jpg" alt="Kazimir.ai 与传统工具对比：200 万 + 名人图像生成，多场景营销艺术创作优选" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Kazimir.ai 与传统工 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/OKJJCqcY7Xp19Rz0jree09nwpcuYuPmxSttJALgpywU.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/07/7d3b992e74cc3da8aff5a3ea714ed7d5.jpg" alt="Doubly Currency Converter：160 + 货币实时更新，无国界购物体验轻松实现" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Doubly Currency </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> </div> </div> </div> </div> </main> <!-- 页脚 --> <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-16 py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center mb-4"> <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center"> <i class="fa-solid fa-robot text-white text-xl"></i> </div> <span class="text-xl font-bold text-gray-800 dark:text-white ml-2">AI导航</span> </div> <p class="text-gray-600 dark:text-gray-400 text-sm"> 汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。 </p> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">快速链接</h3> <ul class="space-y-2"> <li><a href="/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">首页</a></li> <li><a href="/hotsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">热门工具</a></li> <li><a href="/newsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">最新资源</a></li> <li><a href="/ai/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">Ai资讯</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">热门分类</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">对话AI</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">图像生成</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">编程开发</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">视频处理</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">订阅更新</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4"> 获取最新AI工具和资源推荐 </p> <div class="flex"> <input type="email" placeholder="您的邮箱地址" class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500" > <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> <i class="fa-solid fa-paper-plane"></i> </button> </div> </div> </div> <div class="border-t border-gray-200 dark:border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-500 dark:text-gray-500 text-sm"> © 2023 AI导航. 保留所有权利。 </p> <p class="text-gray-500 dark:text-gray-500 text-sm"> <a href="http://beian.miit.gov.cn/" rel="nofollow">ICP备案：豫B2-20110008-14</a> </p> <div class="flex space-x-4 mt-4 md:mt-0"> <a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio"> <i class="fa-brands fa-weibo"></i> </a> <a href="javascript:void(0)" onclick="shareToTwitter('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition"> <i class="fa-brands fa-twitter"></i> </a> </div> </div> </div> </footer> <script src="/staticai/qrcode.min.js"></script> <script> // 分享功能 function shareToWeChat() { // 获取当前页面URL const url = window.location.href; // 创建二维码容器 const qrModal = document.createElement('div'); qrModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; const qrContainer = document.createElement('div'); qrContainer.className = 'bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-sm w-full relative'; // 创建标题 const title = document.createElement('h3'); title.className = 'text-xl font-bold text-gray-800 dark:text-white mb-4 text-center'; title.textContent = '微信扫码分享'; // 创建关闭按钮 const closeBtn = document.createElement('button'); closeBtn.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'; closeBtn.innerHTML = '<i class="fa-solid fa-times"></i>'; closeBtn.onclick = () => document.body.removeChild(qrModal); // 创建QR码容器 const qrBox = document.createElement('div'); qrBox.className = 'flex justify-center items-center mb-4'; // 提示文字 const hint = document.createElement('p'); hint.className = 'text-center text-gray-600 dark:text-gray-400 text-sm'; hint.textContent = '请使用微信"扫一扫"扫描上方二维码'; // 组装DOM qrContainer.appendChild(title); qrContainer.appendChild(qrBox); qrContainer.appendChild(hint); qrContainer.appendChild(closeBtn); qrModal.appendChild(qrContainer); document.body.appendChild(qrModal); // 检查QRCode库是否已加载 if (typeof QRCode === 'function') { // 使用QRCode.js生成二维码 try { new QRCode(qrBox, { text: url, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } catch (e) { // 如果生成二维码失败，回退到使用图片形式 qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`; } } else { // 如果QRCode库未加载，使用外部API生成二维码图片 qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`; } // 点击模态框背景关闭 qrModal.addEventListener('click', function(e) { if (e.target === qrModal) { document.body.removeChild(qrModal); } }); } function shareToWeibo(title, url) { const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`; window.open(weiboUrl, '_blank', 'width=700,height=500'); } function shareToTwitter(title, url) { const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(twitterUrl, '_blank', 'width=700,height=500'); } // 深色模式切换 const themeToggle = document.getElementById('theme-toggle'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); // 初始化主题 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && prefersDarkScheme.matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } themeToggle.addEventListener('click', () => { if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); } }); // 移动端菜单切换 const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileNav = document.getElementById('mobile-nav'); mobileMenuButton.addEventListener('click', () => { mobileNav.classList.toggle('open'); }); // 处理系统主题变化 prefersDarkScheme.addEventListener('change', e => { if (!localStorage.getItem('theme')) { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } }); </script> </body> </html> <script> function copyLink() { const url = window.location.href; // 使用现代API复制到剪贴板 if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(url) .then(() => { showNotification('链接已复制到剪贴板'); }) .catch(err => { console.error('无法复制链接: ', err); fallbackCopyLink(url); }); } else { fallbackCopyLink(url); } } function fallbackCopyLink(text) { // 创建临时输入框 const input = document.createElement('input'); input.style.position = 'fixed'; input.style.opacity = 0; input.value = text; document.body.appendChild(input); input.select(); // 尝试复制 try { const successful = document.execCommand('copy'); if (successful) { showNotification('链接已复制到剪贴板'); } else { showNotification('复制失败，请手动复制链接', 'error'); } } catch (err) { console.error('无法复制链接: ', err); showNotification('复制失败，请手动复制链接', 'error'); } // 移除临时元素 document.body.removeChild(input); } function showNotification(message, type = 'success') { // 创建通知元素 const notification = document.createElement('div'); notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} transition-all duration-300 transform translate-y-full opacity-0`; notification.textContent = message; document.body.appendChild(notification); // 显示通知 setTimeout(() => { notification.style.transform = 'translateY(0)'; notification.style.opacity = '1'; }, 10); // 3秒后隐藏通知 setTimeout(() => { notification.style.transform = 'translateY(full)'; notification.style.opacity = '0'; // 动画结束后移除元素 setTimeout(() => { document.body.removeChild(notification); }, 300); }, 3000); } </script> </body> </html>