? 零基础学 HTML5 基础教程：免费获取标签属性知识，语义化实战附交互式示例
咱们今天要聊的 HTML5，可是网页开发的基石。不管你是想做个个人博客，还是搭建电商网站，都得从这儿起步。HTML5 就像是盖房子的砖头，有了它，网页的结构才能立起来。而且现在搜索引擎对 HTML5 的支持特别友好，学好它对网站的 SEO 也有帮助。
? HTML5 基础结构：搭建网页的骨架
HTML5 的基本结构其实很简单，就像搭积木一样。最外层得有个
比如，一个标准的 HTML5 文档开头是这样的：
html
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个 HTML5 页面title>
head>
<body>
body>
html>
这里面，
</code> 里的内容会显示在浏览器的标题栏上。</div><br>
<h3>?️ 常用标签及属性：给网页添砖加瓦</h3><br>
<div>接下来咱们聊聊常用的标签和属性。先从标题标签说起，<code><h1></code> 到 <code><h6></code> 分别代表一级标题到六级标题，<code><h1></code> 最大，<code><h6></code> 最小。比如写文章的时候，主标题用 <code><h1></code>，小标题用 <code><h2></code>，这样结构更清晰，搜索引擎也更容易理解内容。</div><br>
<div>段落标签 <code><p></code> 用来分段，一段文字就用一个 <code><p></code> 包起来。换行的话用 <code><br></code>，它是个单标签，直接写 <code><br></code> 就行。要是想在网页上画条水平线，就用 <code><hr></code>。</div><br>
<div>链接标签 <code><a></code> 也很常用，它的 <code>href</code> 属性指定跳转地址，<code>target="_blank"</code> 可以让链接在新窗口打开。比如：</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>https://www.example.com<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span><span>></span></span>点击访问示例网站<span><span><span></</span>a</span><span>></span></span>
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div></div><br>
<div>图片标签 <code><img></code> 用来插入图片，<code>src</code> 属性是图片地址，<code>alt</code> 属性是图片的替代文字，当图片加载不出来的时候，或者屏幕阅读器读取图片内容时就会用到。</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>image.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>这是一张示例图片<span>"</span></span><span>></span></span>
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div></div><br>
<h3>? 语义化实战：让网页更有内涵</h3><br>
<div>语义化就是用合适的标签来描述内容的含义，而不是只关心样式。比如导航栏用 <code><nav></code>，文章内容用 <code><article></code>，侧边栏用 <code><aside></code>，页脚用 <code><footer></code>。这样不仅代码更易读，搜索引擎和屏幕阅读器也能更好地理解网页结构。</div><br>
<div>举个例子，一个简单的网页结构可能是这样的：</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>header</span><span>></span></span>
<span><span><span><</span>h1</span><span>></span></span>网站标题<span><span><span></</span>h1</span><span>></span></span>
<span><span><span><</span>nav</span><span>></span></span>
<span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>/home<span>"</span></span><span>></span></span>首页<span><span><span></</span>a</span><span>></span></span>
<span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>/about<span>"</span></span><span>></span></span>关于我们<span><span><span></</span>a</span><span>></span></span>
<span><span><span></</span>nav</span><span>></span></span>
<span><span><span></</span>header</span><span>></span></span>
<span><span><span><</span>main</span><span>></span></span>
<span><span><span><</span>article</span><span>></span></span>
<span><span><span><</span>h2</span><span>></span></span>最新文章<span><span><span></</span>h2</span><span>></span></span>
<span><span><span><</span>p</span><span>></span></span>这里是文章内容...<span><span><span></</span>p</span><span>></span></span>
<span><span><span></</span>article</span><span>></span></span>
<span><span><span><</span>aside</span><span>></span></span>
<span><span><span><</span>h3</span><span>></span></span>热门推荐<span><span><span></</span>h3</span><span>></span></span>
<span><span><span><</span>ul</span><span>></span></span>
<span><span><span><</span>li</span><span>></span></span>推荐内容 1<span><span><span></</span>li</span><span>></span></span>
<span><span><span><</span>li</span><span>></span></span>推荐内容 2<span><span><span></</span>li</span><span>></span></span>
<span><span><span></</span>ul</span><span>></span></span>
<span><span><span></</span>aside</span><span>></span></span>
<span><span><span></</span>main</span><span>></span></span>
<span><span><span><</span>footer</span><span>></span></span>
<span><span><span><</span>p</span><span>></span></span>版权所有 © 2024<span><span><span></</span>p</span><span>></span></span>
<span><span><span></</span>footer</span><span>></span></span>
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div></div><br>
<div>这样的结构一目了然，每个部分都有明确的语义，维护起来也方便。</div><br>
<h3>? 交互式示例：让网页动起来</h3><br>
<div>HTML5 还支持一些简单的交互效果。比如表单元素，用户可以输入信息并提交。表单用 <code><form></code> 标签包裹，里面可以放各种输入类型，像文本框 <code><input type="text"></code>、密码框 <code><input type="password"></code>、单选框 <code><input type="radio"></code>、复选框 <code><input type="checkbox"></code> 等。</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>form</span><span>></span></span>
<span><span><span><</span>label</span><span>></span></span>姓名：<span><span><span></</span>label</span><span>></span></span>
<span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>username<span>"</span></span> <span>required</span><span>></span></span>
<span><span><span><</span>label</span><span>></span></span>邮箱：<span><span><span></</span>label</span><span>></span></span>
<span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>required</span><span>></span></span>
<span><span><span><</span>button</span> <span>type</span><span><span>=</span><span>"</span>submit<span>"</span></span><span>></span></span>提交<span><span><span></</span>button</span><span>></span></span>
<span><span><span></</span>form</span><span>></span></span>
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div></div><br>
<div>这里的 <code>required</code> 属性表示该字段是必填的，用户不填就提交不了表单。</div><br>
<div>要是想做更复杂的交互，比如绘图，就可以用 <code><canvas></code> 标签。虽然需要一些 JavaScript 配合，但基础的绘图还是很容易的。比如画个矩形：</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>canvas</span> <span>id</span><span><span>=</span><span>"</span>myCanvas<span>"</span></span> <span>width</span><span><span>=</span><span>"</span>200<span>"</span></span> <span>height</span><span><span>=</span><span>"</span>100<span>"</span></span><span>></span></span><span><span><span></</span>canvas</span><span>></span></span>
<span><span><span><</span>script</span><span>></span></span><span><span>
<span>var</span> canvas <span>=</span> <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>"myCanvas"</span><span>)</span><span>;</span>
<span>var</span> ctx <span>=</span> canvas<span>.</span><span>getContext</span><span>(</span><span>"2d"</span><span>)</span><span>;</span>
ctx<span>.</span><span>fillStyle</span> <span>=</span> <span>"#FF0000"</span><span>;</span>
ctx<span>.</span><span>fillRect</span><span>(</span><span>,</span> <span>,</span> <span>,</span> <span>)</span><span>;</span>
</span></span><span><span><span></</span>script</span><span>></span></span>
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div></div><br>
<div>这段代码会在网页上画一个红色的矩形。</div><br>
<h3>? HTML5 语法简化：更简洁的书写方式</h3><br>
<div>HTML5 的语法比以前更宽松了。标签不区分大小写，比如 <code><p></code> 和 <code><P></code> 是一样的。属性值也可以省略引号，只要属性值里没有特殊字符。像 <code><input type="text"></code> 可以写成 <code><input type=text></code>。</div><br>
<div>有些属性还可以简写，比如 <code>checked</code>、<code>readonly</code> 这些布尔属性，只要写上属性名，就表示值为 <code>true</code>。</div><br><div><div><div><div><div><div><div>html</div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 17.293a1 1 0 0 1-1.414 0L12 9l-8.293 8.293a1 1 0 0 1-1.414-1.414l8.293-8.293a2 2 0 0 1 2.828 0l8.293 8.293a1 1 0 0 1 0 1.414"></path></svg></span></div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4 4a1 1 0 0 1 1 1v3a3 3 0 0 0 3 3h11.086l-5.293-5.293a1 1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L19.086 13H8a5 5 0 0 1-5-5V5a1 1 0 0 1 1-1" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.797 16.856a8.28 8.28 0 0 0 6.27 2.87h.008A8.28 8.28 0 0 0 14.372 3.84a11.6 11.6 0 0 1-1.658 7.714 11.62 11.62 0 0 1-7.917 5.303M13.415 1.43a10.28 10.28 0 0 1-2.348 20.296 10.28 10.28 0 0 1-8.883-5.103c-.397-.74.155-1.605.912-1.609a9.617 9.617 0 0 0 9.011-12.258 1.093 1.093 0 0 1 1.308-1.326" clip-rule="evenodd"></path></svg></span></div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3v7a1 1 0 1 1-2 0V4h-6a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1M11.005 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 2.002 0v6h6.003a1 1 0 0 1 1 1"></path></svg></span></div></div></div></div><div><pre><code><span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>checkbox<span>"</span></span> <span>checked</span><span>></span></span> 选中我
</code></pre></div><div style="opacity: 0;"><div></div></div></div></div><div style="--offset-width: 793px; --offset-height: 83px; --left-side-width: 280px; --sash-pct: calc(35vw + var(--left-side-width));"><div data-visible="false"><div><div><div style="width: 100%; height: 100%;"><div data-theme="light"><div><div><div><div><span></span><span>html</span></div></div></div><div></div><div><div><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M21 3.5V17a2 2 0 0 1-2 2h-2v-2h2V3.5H9v2h5.857c1.184 0 2.143.895 2.143 2v13c0 1.105-.96 2-2.143 2H5.143C3.959 22.5 3 21.605 3 20.5v-13c0-1.105.96-2 2.143-2H7v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2m-6.143 4H5.143v13h9.714z" clip-rule="evenodd"></path></svg></span><span>复制</span></div><div aria-haspopup="true"><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 11.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M13.725 11.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M22 11.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"></path></svg></span></div><button type="button" aria-disabled="false"><span><span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M20.307 20.307a.997.997 0 0 0 .003-1.412l-6.845-6.844 6.845-6.845a.997.997 0 0 0-.003-1.412.997.997 0 0 0-1.412-.002l-6.844 6.844-6.845-6.845a.997.997 0 0 0-1.412.003.997.997 0 0 0-.002 1.412l6.844 6.844-6.845 6.845a.997.997 0 0 0 .003 1.412.997.997 0 0 0 1.412.003l6.844-6.845 6.845 6.845a.997.997 0 0 0 1.412-.003"></path></svg></span></span></button></div></div><div><div style="width: 100%; height: 100%;"><div><div style="min-height: 0px;"><div style="min-width: 0px;"><div><div><div data-language-input="html" data-language="html"><div><div aria-live="polite"></div><div><div aria-hidden="true" style="min-height: 112.375px; position: sticky;"><div><div style="height: 0px; visibility: hidden; pointer-events: none;">9</div><div style="height: 18.1875px; margin-top: 4px;">1</div><div style="height: 18.1875px;">2</div></div><div><div style="height: 0px; visibility: hidden; pointer-events: none;"><span>›</span></div><div style="height: 18.1875px; margin-top: 4px;"></div></div></div><div spellcheck="false" autocorrect="off" autocapitalize="off" writingsuggestions="false" translate="no" style="tab-size: 4;" role="textbox" aria-multiline="true" aria-readonly="true" data-language="html"><div><<span>input</span> <span>type</span>=<span>"checkbox"</span> <span>checked</span>><span> 选中我</span></div><div><br></div></div><div style="min-height: 28px;"></div><div aria-hidden="true" style="z-index: 150; animation-duration: 1200ms;"><div style="left: 65.6094px; top: 4px; height: 17px;"></div></div><div aria-hidden="true" style="z-index: -2;"></div></div></div></div><div style="top: 4px;"><img src="data:image/png;base64,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"></div></div></div></div></div></div></div></div></div></div></div><div></div></div></div></div></div><br>
<h3>? 总结</h3><br>
<div>HTML5 是网页开发的基础，掌握了它，你就迈出了前端开发的第一步。从基础结构到常用标签，再到语义化和交互效果，每一步都需要多练习。建议你多写代码，多参考别人的优秀案例，慢慢就能熟练运用了。</div><br>
<div>最后提醒一下，写代码的时候要注意规范，虽然 HTML5 语法宽松，但保持良好的代码习惯对后续的维护和学习都有好处。希望这篇教程能帮你顺利入门 HTML5，开启前端开发的大门！</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/QAWehn7VATc9QWCaVBgdcHMBiy2DxXv1cAdA1z28g9G.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">Adept.ai 移动端操作 2025 新版：低代码平台助力运营部门效率提升</h3>
</div>
</div>
</a>
<a href="/ai/sAp9qFRRoNLsTmFLjD9TbWWYuue4AbZFwJWlGsqKsGc.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">企业运营部门必备：Adept.ai 低代码平台实现工作流程自动化指南</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/PNQYkIwqxmgGqlekUi3Lxv0YSlcDkMeifT7iqr6Ij7W.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">
学生办公必备！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> 717次阅读
</p>
</div>
</a>
<!-- 排行项目 2 -->
<a href="/ai/CMsIoIHkAwsjc4p8tXtkhLKnP9sNgktNqt1cVcVAqbm.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">
HiDream-E1-Full </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> 23次阅读
</p>
</div>
</a>
<!-- 排行项目 3 -->
<a href="/ai/lNr2cXLeerpXYKTUhBXIlM2aZkrDLGe1WMxTy7sXikM.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">
Regulations.gov </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> 102次阅读
</p>
</div>
</a>
<!-- 排行项目 4 -->
<a href="/ai/Ww9AnoieYcvLChLDzATfIcz1eLCqqbN8VuXqUMI2Zba.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">
Banva vs 传统字幕工具： </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> 95次阅读
</p>
</div>
</a>
<!-- 排行项目 5 -->
<a href="/ai/TBDGilqsPU6sIlWTf0p5FcqnYUXd8PWX0RALsbn5G9q.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">
移动端设计资源下载首选 The </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> 913次阅读
</p>
</div>
</a>
<!-- 排行项目 6 -->
<a href="/ai/HPllwoifmm0Pw79ZrnzPIkp41dEEj96jO92gjSWvXEk.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">
Repl.it 在线 IDE 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> 863次阅读
</p>
</div>
</a>
<!-- 排行项目 7 -->
<a href="/ai/eClch7AaADPuJqdlghCFuJQzt1QSHzW47S78KxgTn5u.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">
AI Dream Home 20 </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> 203次阅读
</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>