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

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

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

 1. 行内块元素（inline-block）

什么是行内块元素？

行内块元素结合了块级元素和行内元素的特点。具体来说，行内块元素：

1. 不会独占一行（类似行内元素）
2. 可以设置宽高（类似块级元素）
3. 标签之间有大约 3 像素的间距

常见的行内块元素：

• <img> 图片
• <input> 输入框
• <button> 按钮

---

2. 图片标签 <img>

在 HTML 中，<img> 标签用于在页面中插入图片。常见的图片属性包括 src、alt、width 和 height。

重要属性说明：

• src：指定图片的路径。可以使用相对路径或绝对路径。
• alt：对图片的文字描述。当图片加载失败时，显示此文字，帮助浏览器做图像检索。
• width 和 height：控制图片的宽度和高度，避免图片变形时，通常只设置宽度或高度，另一个属性会自动调整。

示例代码：

<img src="./img/img1.webp" alt="圣诞零食" width="500px" />
<img src="../1217.常用的行内标签/img/img2.webp" alt="外套" style="width: 200px; height: 400px" />

---

 3. 表单标签 <form> 与表单项

HTML 表单是与用户交互的主要方式。你可以通过 <form> 标签创建表单，表单项通常由 <input>、<select>、<textarea> 和 <button> 等标签构成。

创建表单：

<form action="./服务器.html">
  <!-- 表单项写在这里 -->
</form>

常用表单项：

3.1 <input> 表单项

<input> 标签用于创建不同类型的输入框，根据 type 属性的不同，<input> 可以呈现文本框、密码框、单选框、复选框等。

<input type="text" name="username" value="张三" />
<input type="password" name="password" value="123abc" />
<input type="number" name="age" />
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

3.2 <select> 下拉框

下拉框用于显示多个选项，用户可以从中选择一个。

<select name="education">
  <option value="highschool">高中</option>
  <option value="college">专科</option>
  <option value="bachelor">本科</option>
  <option value="master">硕士</option>
  <option value="doctor">博士</option>
</select>

3.3 <textarea> 多行文本框

<textarea> 标签用于接受多行文本输入，例如“个人介绍”字段。

<textarea name="intro" cols="40" rows="10"></textarea>

3.4 <button> 按钮

按钮用于提交表单、重置表单或执行其他操作。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">注册</button>

---

4. 表单项属性详细讲解

常用属性：

• placeholder：设置输入框的提示文本。
• checked：指定某个复选框或单选框默认选中。
• disabled：禁用输入框。
• readonly：使输入框只读，不可编辑。

<input type="text" placeholder="请输入用户名" disabled />
<input type="password" placeholder="请输入密码" readonly />
<input type="radio" name="sex" checked /> 男

4.1 去除边框与样式调整

你可以使用 style 属性或 CSS 去掉输入框的边框和聚焦后的轮廓线，使其看起来更简洁。

<input type="text" style="width: 300px; height: 40px; border: none; outline: none; background-color: bisque" />

---

 5. 音视频标签 <audio> 与 <video>

HTML5 提供了 <audio> 和 <video> 标签来支持媒体播放。

常用属性：

• src：指定音频或视频文件的路径。
• controls：显示控制条，允许用户播放、暂停、调节音量等。
• loop：控制是否循环播放。

示例代码：

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

---

 6. 表单提交后的简单页面

当表单提交后，页面会跳转到指定的 action 地址。在此页面上，您可以简单地显示提交成功的消息。

<h1>已提交信息到服务器了！！！！！</h1>