HTML 常用标签全解析：图片、表单与多媒体
在网页开发中，HTML 提供了丰富的标签来展示图片、播放音视频以及收集用户输入。本文将详细介绍 img、form、input、select、textarea、audio 和 video 标签的核心用法与属性。
1. 行内块元素（inline-block）
什么是行内块元素？
行内块元素结合了块级元素 和行内元素的特点。具体来说，行内块元素：
- 不会独占一行（类似行内元素）
- 可以设置宽高（类似块级元素）
- 标签之间有大约 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：使输入框只读，不可编辑。
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>