大白话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>：通常用来表示与页面主要内容相关但又相对独立的内容，如侧边栏，常包含相关链接、广告等。