HTML 常用标签全解析：图片、表单与多媒体
在网页开发中，HTML 提供了丰富的标签来展示图片、播放音视频以及收集用户输入。本文将详细介绍 img、form、input、select、textarea、audio 和 video 标签的核心用法与属性。
一、<img>—— 图片展示标签
<img>是一个典型的行内块标签(inline-block)，既不会独占一行，也能自由设置宽高，使用非常灵活。
常用属性：
| 属性 | 说明 |
|---|---|
| src | 图片路径(相对或绝对路径) |
| alt | 图片加载失败时的替代文本 |
| width/height | 设置图片尺寸(建议只设置一个) |
示例：
<img src="./img/img1.webp" alt="圣诞零食" width="500px"> <img src="../images/img2.webp" alt="外套" style="width: 200px; height: 400px;">提示：alt 属性不仅能提升可访问性，对 SEO 也很有帮助！
二、<form>—— 表单容器
表单是用户与网站交互的重要桥梁。<form>标签用于收集用户输入，并通过 action 属性将数据提交到服务器。
示例：
<form action="./服务器.html"> 用户名：<input type="text" name="username"><br><br> 密码：<input type="password" name="password"><br><br> </form>注意：action 属性指定表单提交的目标地址，需要配合后端或本地服务器使用才能实现数据提交。
三、表单控件标签
1️⃣<input>—— 基础输入框
<input>是表单中最常用的标签之一，其 type 属性决定了输入内容的类型。
type 类型：
| 类型值 | 功能 |
|---|---|
| text | 文本输入框 |
| password | 密码框 |
| number | 数字输入框 |
| radio | 单选框(需配合name使用) |
| checkbox | 复选框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
示例：
用户名：<input type="text" value="张三" name="username"> 密码：<input type="password" value="123abc" name="password">2️⃣<select>—— 下拉选择框
用于多项选择(单选)：
<select> <option value="zk">专科</option> <option value="bk" selected>本科</option> <option value="ss">硕士</option> </select>3️⃣<textarea>—— 多行文本框
<textarea cols="40" rows="10" placeholder="请输入个人简介"></textarea>四、表单进阶属性
| 属性 | 作用 |
|---|---|
| placeholder | 设置输入提示 |
| checked | 默认选中(用于radio/checkbox) |
| disabled | 禁用输入框 |
| readonly | 只读，不可修改 |
| selected | 下拉选项默认选中 |
示例：
<input type="text" placeholder="请输入用户名" disabled> <input type="password" placeholder="请输入密码" readonly> <input type="radio" name="sex" checked> 女五、表单样式优化技巧
浏览器为表单控件添加了默认样式，可以通过 CSS 清除这些默认效果：
<input type="text" style="width:300px; height:40px; border:none; outline:none; background-color:bisque;">技巧：
border: none;去掉边框，outline: none;去掉聚焦时的外框。
六、<audio>与<video>—— 音视频播放
HTML5 提供了简单的多媒体播放支持：
常用属性：
| 属性 | 作用 |
|---|---|
| src | 指定音视频文件路径 |
| controls | 显示播放控件 |
| loop | 是否循环播放 |
示例：
<audio src="./source/达拉崩吧.mp3" controls loop></audio> <video src="./source/绝地逢生.mp4" controls loop style="width:200px;"></video>可通过 JavaScript 进一步控制播放、暂停、进度条和音量等功能。
七、总结回顾
| 标签 | 功能 | 常用属性 |
|---|---|---|
<img> | 图片展示 | src、alt、width、height |
<form> | 表单容器 | action、method |
<input> | 单行输入 | type、value、placeholder、checked |
<select> | 下拉菜单 | value、selected |
<textarea> | 多行输入 | cols、rows |
<audio> | 音频播放 | src、controls、loop |
<video> | 视频播放 | src、controls、loop |
