HTML行内块标签——img、表单、音视频标签
目录
概念：特殊的标签，有自己独有的功能
img标签：
表单：
1、input表单项
2、下拉框表单项:select
3、内容框：textarea
4、按钮 button
5、去除表单默认样式
编辑
音视频标签
概念：特殊的标签，有自己独有的功能
特点：1、兼具块标签和行内标签的特点，不会独占一行，可以设置宽高
2、标签与标签之间大概有三像素的间距
常用的行内块标签：img、input、button
img标签：
在页面中插入图片
有两个属性：src和alt
src:设置图片的引入路径（地址）相对路径和绝对路径
alt:对图片进行文字描述，只有在图片引入失败时才显示
作用1：给用户良好提示，具有占位的功能
作用2:帮助浏览器进行检索
如果想要对图片的大小进行调整可以通过属性=属性值或者样式名：样式值
在调整时一般不同时调整宽高，防止图片变形，单独设置宽度和高度，浏览器可以自适应。
<img src="./img/img1.webp" alt="圣诞零食" width="500px" />如上代码是通过属性=属性值的方式来进行调整
<img src="./img/img1.webp" alt="外套" style="width: 200px; height: 400px" />如上代是通过样式名：样式值来进行调整，但是同时调整了宽高
结果如上图所示
表单：
使用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
<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; 去除聚焦后的边框线
<input type="text" style="width: 300px; height: 40px; border: none; outline: none; background-color: bisque" />综合代码
<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：控制是否循环播放
引入音频标签
<audio src="./source/达拉崩吧.mp3" controls loop></audio>引入视频标签
<video src="./source/绝地逢生.mp4" controls loop style="width: 200px;"></video>