HTML行内块标签——img、表单、音视频标签

概念：特殊的标签，有自己独有的功能

img标签：

[表单项：input、select、text area、button](#表单项：input、select、text area、button)

1、input表单项

2、下拉框表单项:select

3、内容框：textarea

[4、按钮 button](#4、按钮 button)

5、去除表单默认样式

音视频标签

概念：

特殊的标签，有自己独有的功能

特点：1、兼具块标签和行内标签的特点，不会独占一行，可以设置宽高

2、标签与标签之间大概有三像素的间距

常用的行内块标签：img、input、button

img标签：

在页面中插入图片

有两个属性：src和alt

src:设置图片的引入路径（地址）相对路径和绝对路径

alt:对图片进行文字描述，只有在图片引入失败时才显示

作用1：给用户良好提示，具有占位的功能

作用2:帮助浏览器进行检索

如果想要对图片的大小进行调整可以通过属性=属性值 或者样式名：样式值

在调整时一般不同时调整宽高，防止图片变形，单独设置宽度和高度，浏览器可以自适应。

html 复制代码

<img src="./img/img1.webp" alt="圣诞零食" width="500px" />

如上代码是通过属性=属性值的方式来进行调整

html 复制代码

<img src="./img/img1.webp" alt="外套" style="width: 200px; height: 400px" />

如上代是通过样式名：样式值来进行调整，但是同时调整了宽高

结果如上图所示

表单项：input、select、text area、button

使用form创建表单默认action属性：设置数据提交的服务器地址；然后使用input作为表单项

1、input表单项

input默认有type和value两个属性，还有可添加属性name、id、placeholder、checked、disabled、readonly

type属性是设置表单的类型

可选值：text 文本

password 密码本

number 数字框

redio 单选框，需要配合name属性使用（设置相同的name）

checkbox 复选框

rest 重置配合value，可以更改按钮的名字，默认值"重置"

submit 提交将数据收集提交到服务器，配合value值修改按钮名字，默认值"提交"

value属性：设置表单的值，后期也可以结合js收集用户输入的内容

name属性：设置提交给服务器的数据名称

id属性：唯一标识符；js可以通过id快速获取元素

placeholder属性：给输入框设置提示信息，当输入框有内容时消失

checked属性：用于单选按钮或者复选框表示默认选中

disabled属性：禁用输入框，使其不可操作，数据不会提交

readonly属性：是输入框只读，但是可以聚焦，数据会提交

2、下拉框表单项:select

<option value="" selected>XXX</option> -- option和select是搭配使用的，表示下拉框里可选择的内容，这里的selected表示默认选中下拉框里的一项

</select>

这里的value值是提交给服务器的，而xxx是给用户看而进行选择的。

3、内容框：textarea

属性：cols：指多少列，可以控制内容框的宽度

rows：值多少行，可以控制内容框的高度

4、按钮 button

button标签：在标签体可以设置按钮的名字。

type属性值：可选submit 提交按钮（默认值）；reset 重置按钮；button普通按钮（按了想要什么效果自己去实现）

5、去除表单默认样式

border: none;去除边框线

outline: none; 去除聚焦后的边框线

html 复制代码

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

综合代码

html 复制代码

<form action="./服务器.html">
      用户名： <input type="text" value="张三" name="username" /> <br /><br />
      密码：<input type="password" value="123abc" name="password" /><br /><br />
      年龄：<input type="number" name="age" /><br /><br />
      性别：男：<input type="radio" name="sex123" /> 女:<input type="radio" name="sex123" /><br /><br />
      兴趣爱好：唱歌 <input type="checkbox" /> 跳舞 <input type="checkbox" /> 打篮球 <input type="checkbox" /> 敲代码 <input type="checkbox" /><br /><br />
      学历：<select>
        <option value="">高中</option>
        <option value="zk">专科</option>
        <option value="">本科</option>
        <option value="">硕士</option>
        <option value="">博士</option>
      </select>
      <br /><br />
      个人介绍： <textarea cols="40" rows="10"></textarea><br><br>
       <input type="reset" value="重置123">
       <input type="submit">
       <input type="button" value="注册"><br><br>
      <button type="reset">重置</button>
      <button type="submit">提交</button>
      <button type="button">注册</button>
</form>

音视频标签

audio/video常用的属性如下：

src 指向音视频的地址

controls:控制是否可以播放，默认是不可以

loop：控制是否循环播放

引入音频标签

html 复制代码

<audio src="./source/达拉崩吧.mp3" controls loop></audio>

引入视频标签

html 复制代码

<video src="./source/绝地逢生.mp4" controls loop style="width: 200px;"></video>