HTML：表格表单和多媒体

表格：展示结构化数据

表格用于展示数据清单，如成绩表、价格表、课程表等信息

<table>
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
</table>

标签	全称/含义	作用	特点
<table>	Table（表格）	定义整个表格	最外层容器，所有表格内容都写在里面
<thead>	Table Head（表格头）	包裹表头行	可选，但建议用，语义更清晰
<tbody>	Table Body（表格主体）	包裹数据行	可选，浏览器会自动补全
<tfoot>	Table Foot（表格尾）	包裹汇总行	可选，通常放合计、备注等
<tr>	Table Row（表格行）	定义一行	里面放 th 或 td
<th>	Table Header（表头单元格）	定义列标题	文字默认加粗居中
<td>	Table Data（表格数据）	定义普通单元格	文字默认常规左对齐

常用属性

属性	作用	示例	适用标签
border	设置表格边框宽度	border="1"	<table>
colspan	横向合并单元格（跨列）	colspan="2"	th 或 td
rowspan	纵向合并单元格（跨行）	rowspan="3"	th 或 td
align	水平对齐方式	align="center"	table、tr、th、td
valign	垂直对齐方式	valign="middle"	tr、th、td
width	设置宽度	width="500px"	table、th、td
cellpadding	单元格内边距（内容与边框距离）	cellpadding="10"	<td>
cellspacing	单元格间距（单元格之间距离）	cellspacing="5"	<td>

表单：收集信息

表单是网页交互的核心（通常用于登录、注册、搜索等功能）

<!-- 不用 action 和 method，因为不提交 -->
<h2>📝 同学信息登记表（仅练习布局）</h2>

<!-- 用 div 或 表格 把表单项排整齐，不用 form 也可以 -->
<div>
    <!-- 文本框 -->
    <label>姓名：</label>
    <input type="text" placeholder="例如：张三">
</div>

<div>
    <label>年龄：</label>
    <input type="number" placeholder="请输入数字">
</div>

<div>
    <label>性别：</label>
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender"> 女
</div>

<div>
    <label>爱好：</label>
    <input type="checkbox"> 阅读
    <input type="checkbox"> 运动
    <input type="checkbox"> 音乐
</div>

<div>
    <label>城市：</label>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</div>

<div>
    <label>自我介绍：</label>
    <textarea rows="3" cols="30" placeholder="简单说几句..."></textarea>
</div>

<!-- 按钮可以点，但不会真提交 -->
<button>模拟提交（无后端）</button>
<button type="button">清空（示例按钮）</button>

<p style="color: gray;">※ 当前仅为界面练习，不保存数据</p>

标签	全称/含义	作用	特点
<form>	Form（表单）	定义整个表单区域	所有表单项的容器，目前只用来“框住”表单项
<input>	Input（输入）	定义输入控件	通过 type 属性变化出各种形态（文本框、按钮、复选框等）
<label>	Label（标签）	为输入控件定义说明文字	点击文字也能聚焦到对应输入框，提升体验
<select>	Select（选择）	定义下拉菜单	需要配合 <option> 使用
<option>	Option（选项）	定义下拉菜单中的一个选项	包裹在 <select> 里面
<textarea>	Textarea（文本区域）	定义多行文本输入框	可以调整宽高，适合输入较长的内容
<button>	Button（按钮）	定义可点击的按钮	比 <input> 按钮更灵活，内部可以放文字、图标等

<input>常用属性

属性	作用	示例	适用 type
name	控件名称（类似变量的名字）	name="username"	所有 type（除了按钮类）
value	控件的值（实际内容）	value="张三"	所有 type
placeholder	占位提示文字（浅灰色）	placeholder="请输入姓名"	text、email、password 等文本类
required	必填项（不填无法提交）	required	所有输入类
disabled	禁用控件（灰色不可编辑）	disabled	所有 type
readonly	只读（不能修改）	readonly	text、textarea、number 等
checked	默认选中	checked	radio、checkbox
selected	下拉菜单默认选中（用在 <option>）	selected	<option>
maxlength	最大字符数	maxlength="10"	文本类
min / max	最小值 / 最大值	min="0" max="100"	number、range、date
step	步长（每次增减多少）	step="5"	number、range
multiple	多选（文件、下拉菜单）	multiple	file、select

<select>和<option>相关

<!-- 基础下拉菜单 -->
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 带默认选中的选项 -->
<select name="city">
    <option>北京</option>
    <option selected>上海</option>  <!-- selected让上海默认显示 -->
    <option>广州</option>
</select>

<!-- 分组的下拉菜单 -->
<select name="fruit">
    <optgroup label="国产水果">
        <option>苹果</option>
        <option>香蕉</option>
    </optgroup>
    <optgroup label="进口水果">
        <option>车厘子</option>
        <option>牛油果</option>
    </optgroup>
</select>

标签/属性	作用
<select>	下拉菜单容器
<option>	单个选项
<optgroup>	选项分组
selected	默认选中某个选项
multiple	多选（按住 Ctrl 可多选）

<textarea>相关

<!-- 基础文本域 -->
<textarea rows="4" cols="50" placeholder="请输入自我介绍..."></textarea>

<!-- 禁止调整大小（通常用CSS，这里仅作了解） -->
<textarea style="resize: none;" rows="3" cols="30"></textarea>

属性	作用	示例
rows	显示的行数（高度）	rows="4"
cols	显示的列数（宽度）	cols="50"
placeholder	占位提示文字	placeholder="请输入..."
maxlength	最大字符数	maxlength="200"
wrap	自动换行方式	wrap="soft" 或 wrap="hard"

<button>相关

<!-- 按钮内部可以放任何内容（文字、图标等） -->
<button type="button">
    <strong>👍</strong> 点赞
</button>

type 值	作用	示例
submit	提交按钮（默认值）	<button type="submit">提交</button>
reset	重置按钮（清空表单内容）	<button type="reset">清空</button>
button	普通按钮（无默认行为）	<button type="button">点我</button>

<label>相关

用法	代码	效果
用 for 绑定 id	<label for="username">用户名：</label> <input type="text" id="username">	点击“用户名”文字，光标自动跳入输入框
直接包裹	<label>用户名：<input type="text"></label>	同上，但不需要 for 和 id

多媒体：音频与视频

<!-- 视频 -->
<video width="600" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

<!-- 音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>

相关标签

标签	全称/含义	作用	特点
<img>	Image（图像）	在网页中嵌入图片	单标签，不需要结束符
<video>	Video（视频）	在网页中嵌入视频	双标签，内部可放多个 <source>
<audio>	Audio（音频）	在网页中嵌入音频	双标签，内部可放多个 <source>
<source>	Source（资源源）	为视频/音频提供多个备用格式	嵌套在 <video> 或 <audio> 内部
<track>	Track（轨道）	为视频添加字幕	嵌套在 <video> 内部，可选

<img>相关

<img src="图片地址" alt="图片描述">

属性	作用	示例	说明
src	图片路径（必须）	src="photo.jpg"	可以是网络地址或本地路径
alt	替代文本（必须）	alt="一只小猫"	图片加载失败时显示，对盲人读屏软件友好，也有利于SEO
width	宽度	width="300"	单位是像素（px），可省略写数字
height	高度	height="200"	单位是像素（px），建议只设置一个，另一个自动等比缩放
title	鼠标悬停提示文字	title="点击查看大图"	鼠标放上去会显示小浮窗
loading	加载方式	loading="lazy"	lazy 懒加载（滚动到才加载），eager 立即加载

<video>相关

<video src="movie.mp4" controls></video>

<!-- 支持多个备用格式 -->
<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

属性	作用	示例	说明
src	视频路径	src="video.mp4"	单视频时可写在video上，多视频时用source
controls	显示播放控件	controls	布尔属性（写了就生效），显示播放/暂停/音量等按钮
autoplay	自动播放	autoplay	页面加载后自动播放（⚠️ 多数浏览器限制需静音）
muted	静音	muted	静音播放，常配合 autoplay 使用
loop	循环播放	loop	播放完后自动重播
poster	封面图	poster="cover.jpg"	视频加载前或未播放时显示的图片
width	宽度	width="640"	视频宽度（像素）
height	高度	height="360"	视频高度（像素）
preload	预加载	preload="auto"	none（不预加载）/ metadata（只加载元数据）/ auto（预加载全部）
playsinline	内联播放	playsinline	在移动端禁止全屏播放，就在页面内播放

<audio>相关

<audio src="music.mp3" controls></audio>

<!-- 支持多个备用格式 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
</audio>

属性	作用	示例	说明
src	音频路径	src="music.mp3"	单音频时可写在audio上
controls	显示播放控件	controls	显示播放/暂停/音量/进度条
autoplay	自动播放	autoplay	自动播放（⚠️ 多数浏览器限制）
muted	静音	muted	静音播放
loop	循环播放	loop	播放完后重播
preload	预加载	preload="auto"	none / metadata / auto

<source>相关

属性	作用	示例	说明
src	媒体文件路径	src="video.mp4"	必须
type	文件MIME类型	type="video/mp4"	帮助浏览器快速判断能否播放

<track>相关

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

属性	作用	示例
src	字幕文件路径（WebVTT格式，.vtt文件）	src="subtitle.vtt"
kind	轨道类型	subtitles（字幕）/ captions（隐藏字幕）/ descriptions（描述）/ chapters（章节）
srclang	语言代码	srclang="zh" / srclang="en"
label	显示的标题	label="中文"

文件格式要求

• 图片：jpeg、jpg、png、gif、webp、svg等
• 视频：mp4、webm、ogg等
• 音频：mp3、wav、ogg