HTML入门2
接上文
文章目录
- 三、播放音频视频标签
- 1. \<audio> 标签（音频播放）
- 2.\<video> 标签（视频播放）
- 四、HTML 实体字符
- 实体字符的格式
- 常见的HTML实体字符
- 五、HTML表格
- 1. 怎么实现一个表格
- 2. \<table>标签的属性
- 3. \<th>标签
- 4. \<caption>标签
- 5. 单元格合并
- 6. thead tbody tfoot
- 6.1 \<thead>（表头分组）
- 6.2 \<tbody>（表格主体）
- 6.3 \<tfoot>（表尾分组）
- 7. 代码演示
- 8.注意事项
- 六、HTML表单
- 1. 表单标签
- 表单标签是\<form>标签
- \<form>标签的属性
- 2.表单域
- 2.1 \<input>标签
- 2.1.1 type="text"
- 2.1.2 type="password"
- 2.1.3 type="radio"
- 2.1.4 type="checkbox"
- 2.1.5 type="file"
- 2.1.6 type="hidden"
- 2.2 \<select> 下拉列表
- 2.3 \<textarea> 文本域
- 3. 表单按钮
- 3.1 type="button"
- 3.2 type="submit"
- 3.3 type="reset"
- 3.4 \<button>标签
- 4. readonly和disabled
- 5. \<label>标签
- 5.1 \<label>标签作用
- 5.2 \<label>标签用法
- 5.3 标签实际应用场景
- 6.placeholder属性
- 表单+表格
三、播放音频视频标签
在 HTML5 中，用于播放音频和视频的标签主要有以下两个：
1. <audio> 标签（音频播放）
作用：嵌入音频文件（如 MP3、WAV、OGG）。
基本属性：
src：音频文件路径（也可用 子标签替代）。
controls：显示播放控件（播放/暂停、音量等）。
autoplay：加载后自动播放（浏览器可能限制）。
loop：循环播放。
muted：静音。
preload：预加载（auto|metadata|none）。
auto（完全预加载）
metadata（仅元数据：比如视频的长度、尺寸、编码格式、缩略图等信息，而不是内容本身。）
none（不预加载）
示例：
<audiocontrolssrc="music.mp3">您的浏览器不支持音频播放，请升级浏览器。</audio>或使用多格式兼容（不同浏览器支持不同格式）：
<audiocontrols><sourcesrc="music.mp3"type="audio/mpeg"><sourcesrc="music.ogg"type="audio/ogg">您的浏览器不支持音频播放。</audio>2.<video> 标签（视频播放）
作用：嵌入视频文件（如 MP4、WebM、OGG）。
基本属性：
src：视频文件路径（也可用 子标签）。
controls：显示播放控件。
autoplay：自动播放（通常需结合 muted 才能生效）。
loop：循环播放。
muted：静音。
poster：视频封面图（未播放时显示）。
width/height：设置显示尺寸。
preload：预加载策略。
示例：
<videocontrolswidth="600"poster="cover.jpg"><sourcesrc="video.mp4"type="video/mp4"><sourcesrc="video.webm"type="video/webm">您的浏览器不支持视频播放。</video>四、HTML 实体字符
HTML 实体字符（HTML Entities）是用于在 HTML 文档中表示特殊字符的代码。
实体字符的格式
以 & 开头，以 ; 结尾
常见的HTML实体字符
必须转义的字符
常用符号
空格相关
数学符号
箭头符号
五、HTML表格
1. 怎么实现一个表格
- 表格用来组织数据的。
- <table>标签定义表格。
- tr标签定义表格的行。(table row)
- td标签定义表格的单元格。(table data)
<body><table><tr><td>第1行-第1列</td><td>第1行-第2列</td><td>第1行-第3列</td></tr><tr><td>第2行-第1列</td><td>第2行-第2列</td><td>第2行-第3列</td></tr><tr><td>第3行-第1列</td><td>第3行-第2列</td><td>第3行-第3列</td></tr></table></body>2. <table>标签的属性
常用属性包括：
● border：指定表格边框的宽度（以像素为单位）。例如：border=“1”。
● cellpadding：指定单元格内容与单元格边框之间的空白（以像素为单位）。例如：cellpadding=“5”。
● cellspacing：指定单元格之间的空白（以像素为单位）。例如：cellspacing=“0”。【设置为0时，表格默认的双线边框会变成实线边框】
● width：指定表格的宽度（以像素或百分比为单位）。例如：width=“100%”。
● align：指定表格相对于周围元素的对齐方式（已废弃，建议使用CSS代替）。可选值：left、center、right。【该属性在tr和td中也能用。】
3. <th>标签
- <th> 标签用于定义表格中的 表头单元格
- 浏览器通常会将 <th> 内容加粗并居中显示
4. <caption>标签
在 HTML 中，<caption> 标签用于为 表格（<table>） 定义一个标题，通常显示在表格的顶部（默认位置），用于简要描述表格的内容或用途。
5. 单元格合并
● rowspan：行合并
● colspan：列合并
6. thead tbody tfoot
这几个标签用于 结构化分组表格内容，它们的主要作用是增强语义化、方便样式控制，并提升可访问性。
6.1 <thead>（表头分组）
作用
● 定义表格的 表头部分，通常包含列标题（<th>）。
● 浏览器会默认将 <thead> 内容 置顶显示。
特点
● 一个表格只能有一个 。
● 通常包含 标签（但非强制）。
6.2 <tbody>（表格主体）
作用
● 定义表格的 主体内容，包含主要数据（<td>）。
● 如果未显式定义 <tbody>，浏览器会自动将所有非 <thead>/<tfoot> 的内容包裹在 <tbody> 中。
特点
● 一个表格可以有多个 <tbody>，用于逻辑分组（如按月份分块数据）。
● 默认情况下，<tbody> 内容在 <thead> 下方、<tfoot> 上方显示。
6.3 <tfoot>（表尾分组）
作用
● 定义表格的 表尾部分，通常用于汇总行（如合计、平均值）。
● 浏览器会默认将 <tfoot> 内容 置底显示（即使它在 HTML 中写在 <tbody> 之前）。
特点
● 一个表格只能有一个 。
● 在 HTML 中通常写在 前（但渲染时显示在底部）。
7. 代码演示
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>实现一个基本的表格</title></head><body><tableborder="2"width="50%"align="center"cellspacing="0"cellpadding="5"><caption>基本表格</caption><!-- 这是表头 --><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><!-- 这是表尾 --><tfoot><tr><tdcolspan="3"align="center">表格的尾部</td></tr></tfoot><!-- 这是表体 --><tbody><tr><tdcolspan="2">王五</td><!-- <td>28</td> --><tdrowspan="2">男</td></tr><tr><td>李四</td><td>30</td><!-- <td>女</td> --></tr><tr><td>张三</td><td>25</td><td>男</td></tr></tbody></table></body></html>8.注意事项
- HTML 规范要求 <tfoot> 必须放在 <tbody> 前（但渲染时显示在底部）。
- 如果表格简单，可以省略 <thead>/<tfoot>，仅用 <tbody>。
六、HTML表单
表单是用来收集用户信息的，如下图就是一个表单：
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。
1. 表单标签
表单标签是<form>标签
<body><form>form elements</form></body>HTML 表单用于收集用户输入，表单使用<form> 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。
注意：<form>元素是块级元素，独自占一行。
<form>标签的属性
2.表单域
要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。
HTTP协议是这样规定的，表单提交数据的格式为：name=value&name=value&name=value…
注意：以上的 name 是 input 标签的 name 属性的值，value 是 input 标签的 value 属性的值。
2.1 <input>标签
2.1.1 type=“text”
- 这是一个文本框。
- maxlength属性可以控制该文本框可以输入的最长的字符长度。
- 程序员不需要指定value属性，用户填写的内容就是value。
2.1.2 type=“password”
- 这是一个密码框。
- 程序员不需要指定value属性，用户填写的内容就是value。
2.1.3 type=“radio”
- 这是一个单选按钮。
- 同一组的单选按钮才能达到单选效果，怎么保证复选框是同一组：只要name一致则表示同一组。
- 添加checked会默认选中。
- value需要程序员显示的设置。
2.1.4 type=“checkbox”
- 这是一个复选框。
- 同一组的复选框的name也应该一致。
- 添加checked会默认选中。
- value需要程序员显示的设置。
2.1.5 type=“file”
- 这是一个文件上传组件 。
- 文件上传时，要求method=“post”，并且enctype=“multipart/form-data”。
- 添加multiple可以设置为支持多文件上传。
2.1.6 type=“hidden”
- 这是一个隐藏域。
- 当数据不需要在页面中展示，但提交表单时需要提交。可以设置为隐藏域。
2.2 <select> 下拉列表
- 添加selected属性，默认选中一项。
- size属性用来设置显示几个下拉列表项。
- multiple属性用来设置支持多选。（按住ctrl）。
2.3 <textarea> 文本域
cols：规定文本区内的可见宽度。
rows：规定文本区内的可见行数。
文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。
3. 表单按钮
3.1 type=“button”
普通按钮，默认不能提交表单，除非使用JS代码。
3.2 type=“submit”
提交表单按钮。
3.3 type=“reset”
重置表单按钮。
3.4 <button>标签
- 具有更好的样式控制，现代网页中推荐使用。
- <button>提交</button>和<button type=“submit”>提交</button>都具有提交表单的功能。
- <button type=“button”>普通按钮</button>普通按钮，不会提交表单。
- <button type=“reset”>重置按钮</button>重置按钮，可以重置表单
4. readonly和disabled
都是只读，不可修改。但readonly会提交。disabled不会提交。
5. <label>标签
5.1 <label>标签作用
<label> 标签的作用是关联表单控件（如 <input>、<select> 等），提升用户体验和可访问性
5.2 <label>标签用法
两种关联方式：
- 方式1：包裹表单控件（隐式关联）
<label>用户名：<inputtype="text"name="username"></label>- 方式2：通过for属性（显式关联）
<labelfor="user-pwd">密码：</label><inputtype="password"id="user-pwd"name="password"><label>5.3 标签实际应用场景
复选框/单选框：扩大可点击区域（无需精准点击小方块）：
<label><inputtype="checkbox"name="agree">我同意协议</label>文件上传：美化上传按钮（将 <input type=“file”> 隐藏，通过 <label> 触发）：
<labelfor="file-upload"class="custom-button">选择文件</label><inputtype="file"id="file-upload"hidden>6.placeholder属性
placeholder 是 HTML 表单元素（如 或 ）的一个属性，用于在输入框为空时显示一段浅色的提示文本，引导用户输入正确的内容。 当用户开始输入时，提示文本会自动消失。
<inputtype="text"placeholder="请输入用户名（3-10个字符）"name="username"><textareaplaceholder="请填写您的反馈..."></textarea>表单+表格
代码演示
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>表单+表格</title></head><body><tableborder="1"align="center"cellpadding="10"cellspacing="0"><formaction="submit.html"method="get"><tr><td>姓名</td><td><inputtype="text"name="name"></td></tr><tr><td>密码</td><td><inputtype="password"name="password"></td></tr><tr><td>年龄</td><td><inputtype="number"name="age"></td></tr><tr><tdcolspan="2"align="center"><buttontype="submit">提交</button><inputtype="reset"value="重置"></td></tr></form></table></body></html>