HTML详解 — 中篇（表单、表格、媒体与嵌入内容）

中篇主要讲 网页交互元素 和 媒体内容，包括 表单、表格、音视频、iframe。这是网页中动态和数据展示的核心部分。

1. 表单（Form）

表单用于收集用户输入，是网页交互的重要手段。

1.1 表单基本结构

1
2
3
4
5
6
7
8
9
10
<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

说明：

  • action：表单提交 URL。
  • method：提交方法，get 或 post。
  • required：必填字段。

1.2 常用表单元素

标签 功能
<input type="text"> 单行文本输入
<input type="password"> 密码输入
<input type="email"> 邮箱输入，自动校验
<input type="number"> 数字输入，可设置 min/max
<textarea> 多行文本输入
<select> + <option> 下拉选择框
<input type="checkbox"> 复选框
<input type="radio"> 单选按钮
<button> 按钮，可触发提交或 JS

1.3 表单分组与可访问性

1
2
3
4
5
<fieldset>
  <legend>个人信息</legend>
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age">
</fieldset>
  • <fieldset>：将相关表单元素分组。
  • <legend>：分组标题。

2. 表格（Table）

表格用于展示结构化数据。

2.1 基本表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>95</td>
      <td>88</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>89</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均</td>
      <td>92</td>
      <td>90</td>
    </tr>
  </tfoot>
</table>

说明：

  • <caption>：表格标题。
  • <thead> / <tbody> / <tfoot>：表头/表体/表尾。
  • <th>：表头单元格，默认加粗居中。
  • <td>：表格数据单元格。

3. 音频与视频

3.1 音频 <audio>

1
2
3
4
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>
  • controls：显示播放控件。
  • <source>：可提供多种格式备用。
  • 可通过 JS 控制播放、暂停、音量等。

3.2 视频 <video>

1
2
3
4
<video width="640" height="360" controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
  • poster：封面图片。
  • 支持 autoplay, loop, muted 等属性。

4. 嵌入内容（iframe）

iframe用于在页面内嵌套另一个网页或应用。

1
<iframe src="https://www.example.com" width="800" height="600" frameborder="0" allowfullscreen></iframe>

说明：

  • src：嵌入页面地址。
  • frameborder="0"：去掉边框。
  • allowfullscreen：允许全屏。
  • 常用于地图、视频、第三方应用嵌入。

5. 常用多媒体和表单小技巧

  1. 表单安全：
    • 提交敏感信息（密码、邮箱）使用 https。
    • 使用 autocomplete="off" 控制浏览器自动填充。
  2. 表格样式：
    • 尽量用 CSS 控制边框和背景色，而非 border 属性。
  3. 媒体自适应：
    • width="100%" 或使用 CSS 的 max-width: 100%，保证响应式。
  4. iframe 安全：
    • 使用 sandbox 限制权限，如 <iframe sandbox>，防止跨站攻击。