大白话html 第三章学习表格和表单
表单
表单用于收集用户输入的数据，比如注册账号、登录、填写调查问卷等都要用到表单。
- 文本输入框：用
<input>标签，type="text"表示普通的文本输入框。用户可以在里面输入文字。例如：
<!DOCTYPE html>
<html><body><form action=""><label for="username">用户名：</label><br><input type="text" id="username" name="username"><br></form>
</body></html>
- 密码输入框：
type="password"，输入的内容会以星号或黑点显示，保护用户密码。示例代码如下：
<!DOCTYPE html>
<html><body><form action=""><label for="password">密码：</label><br><input type="password" id="password" name="password"><br></form>
</body></html>
- 单选框：
type="radio"，用于从多个选项中选一个。一般多个单选框的name属性值相同，这样才能实现单选效果。如：
<!DOCTYPE html>
<html><body><form action=""><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><br><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br></form>
</body></html>
- 复选框：
type="checkbox"，可以从多个选项中选择多个。代码如下：
<!DOCTYPE html>
<html><body><form action=""><input type="checkbox" id="hobby1" name="hobby" value="reading"><label for="hobby1">阅读</label><br><input type="checkbox" id="hobby2" name="hobby" value="music"><label for="hobby2">音乐</label><br><input type="checkbox" id="hobby3" name="hobby" value="sports"><label for="hobby3">运动</label><br></form>
</body></html>
- 下拉菜单：用
<select>和<option>标签。<select>是下拉菜单的整体，<option>是里面的选项。例如：
<!DOCTYPE html>
<html><body><form action=""><label for="city">城市：</label><br><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br></form>
</body></html>
多媒体元素
- 音频元素：HTML5中的
<audio>标签用于在网页中嵌入音频。src属性指定音频文件的路径，controls属性显示音频播放控件。比如：
<!DOCTYPE html>
<html><body><audio src="example.mp3" controls></audio>
</body></html>
- 视频元素：
<video>标签用来嵌入视频，同样有src和controls等属性，还可以设置width和height属性来规定视频的宽度和高度。示例如下：
<!DOCTYPE html>
<html><body><video src="example.mp4" controls width="500" height="300"></video>
</body></html>
HTML5新特性
- 语义化标签
<header>：表示页面或页面区域的头部，通常包含网站标志、导航栏等。如：
<!DOCTYPE html>
<html><body><header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于我们</a></li></ul></nav></header>
</body></html>
- **`<footer>`**：代表页面或页面区域的底部，一般包含版权信息、联系方式等。
- **`<article>`**：用于表示独立的、完整的内容块，比如一篇文章、一个博客帖子。
- **`<section>`**：用来划分页面中的一个区域，比如一个专题内容区域。
- 本地存储
localStorage：可以在用户浏览器中永久存储数据，除非用户手动删除。数据以键值对的形式存储。例如：
<!DOCTYPE html>
<html><body><button onclick="saveData()">保存数据</button><button onclick="getData()">获取数据</button><script>function saveData() {localStorage.setItem('name', '张三');localStorage.setItem('age', '25');}function getData() {var name = localStorage.getItem('name');var age = localStorage.getItem('age');alert('姓名：' + name + ', 年龄：' + age);}</script>
</body></html>
- **`sessionStorage`**：与`localStorage`类似，但数据只在当前会话期间有效，浏览器关闭后数据就会被清除。
通过第三阶段的学习，你能够让网页实现更丰富的交互功能，展示更多类型的内容，并且利用HTML5的新特性提升网页的性能和用户体验。
除了文中提到的，还有哪些常见的HTML标签？
除了上文提到的，以下是一些其他常见的HTML标签：
文本相关标签
<p>：段落标签，用于定义一个段落。浏览器会自动在段落的前后添加空行，例如<p>这是一个段落。</p>。<span>：行内标签，用于在不产生新的换行的情况下，对文本中的部分内容进行样式设置或添加脚本行为等。比如<span style="color: red;">红色文本</span>会将文本显示为红色。<strong>：表示重要的文本，通常会以加粗的形式显示，<strong>重要内容</strong>会使“重要内容”加粗显示，以突出其重要性。<em>：表示强调的文本，一般以斜体显示，<em>强调内容</em>会将“强调内容”显示为斜体。
列表标签
- 无序列表：使用
<ul>和<li>标签组合，<ul>表示无序列表整体，<li>是列表中的每一项，例如：
<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>
- 有序列表：用
<ol>和<li>标签，<ol>表示有序列表，列表项会以数字等有序形式显示，示例如下：
<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>
链接与图像标签
<a>：链接标签，用于创建超链接，通过href属性指定链接的目标地址。例如<a href="https://www.example.com">示例网站</a>会创建一个指向“https://www.example.com”的链接。<img>：图像标签，用于在网页中插入图片，src属性指定图片的路径，alt属性用于在图片无法显示时提供替代文本。如<img src="example.jpg" alt="示例图片">。
表格标签
<table>：表格标签，用于创建表格。<tr>：表格行标签，定义表格中的一行。<td>：表格单元格标签，定义表格中的一个单元格。<th>：表头单元格标签，通常用于表格的表头部分，内容会自动居中且加粗显示。
示例代码如下：
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>25</td></tr>
</table>
分区与布局标签
<div>：块级元素标签，常用于网页布局，将页面划分为不同的区域，可以通过CSS为其设置样式和布局。比如<div style="width: 500px; height: 300px; border: 1px solid black;"></div>创建了一个有边框的矩形区域。<aside>：通常用来表示与页面主要内容相关但又相对独立的内容，如侧边栏，常包含相关链接、广告等。