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. 怎么实现一个表格

  1. 表格用来组织数据的。
  2. <table>标签定义表格。
  3. tr标签定义表格的行。(table row)
  4. 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>标签

  1. <th> 标签用于定义表格中的 表头单元格
  2. 浏览器通常会将 <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.注意事项

  1. HTML 规范要求 <tfoot> 必须放在 <tbody> 前（但渲染时显示在底部）。
  2. 如果表格简单，可以省略 <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”
  1. 这是一个文本框。
  2. maxlength属性可以控制该文本框可以输入的最长的字符长度。
  3. 程序员不需要指定value属性，用户填写的内容就是value。
2.1.2 type=“password”
  1. 这是一个密码框。
  2. 程序员不需要指定value属性，用户填写的内容就是value。
2.1.3 type=“radio”
  1. 这是一个单选按钮。
  2. 同一组的单选按钮才能达到单选效果，怎么保证复选框是同一组：只要name一致则表示同一组。
  3. 添加checked会默认选中。
  4. value需要程序员显示的设置。
2.1.4 type=“checkbox”
  1. 这是一个复选框。
  2. 同一组的复选框的name也应该一致。
  3. 添加checked会默认选中。
  4. value需要程序员显示的设置。
2.1.5 type=“file”
  1. 这是一个文件上传组件 。
  2. 文件上传时，要求method=“post”，并且enctype=“multipart/form-data”。
  3. 添加multiple可以设置为支持多文件上传。
2.1.6 type=“hidden”
  1. 这是一个隐藏域。
  2. 当数据不需要在页面中展示，但提交表单时需要提交。可以设置为隐藏域。

2.2 <select> 下拉列表

  1. 添加selected属性，默认选中一项。
  2. size属性用来设置显示几个下拉列表项。
  3. 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>标签

  1. 具有更好的样式控制，现代网页中推荐使用。
  2. <button>提交</button>和<button type=“submit”>提交</button>都具有提交表单的功能。
  3. <button type=“button”>普通按钮</button>普通按钮，不会提交表单。
  4. <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>