HTML入门系列：从图片到表单，再到音视频的完整实践

HTML 常用标签全解析：图片、表单与多媒体

在网页开发中，HTML 提供了丰富的标签来展示图片、播放音视频以及收集用户输入。本文将详细介绍 img、form、input、select、textarea、audio 和 video 标签的核心用法与属性。

一、<img>—— 图片展示标签

<img>是一个典型的行内块标签(inline-block)，既不会独占一行，也能自由设置宽高，使用非常灵活。

常用属性：

示例：

<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 类型：

示例：

用户名：<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>

四、表单进阶属性

示例：

<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 提供了简单的多媒体播放支持：

常用属性：

示例：

<audio src="./source/达拉崩吧.mp3" controls loop></audio> <video src="./source/绝地逢生.mp4" controls loop style="width:200px;"></video>

可通过 JavaScript 进一步控制播放、暂停、进度条和音量等功能。

七、总结回顾