news 2026/8/21 13:46:17

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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>

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/21 10:53:02

【课程设计/毕业设计】基于微信小程序的集换式卡牌交易系统基于springboot+微信小程序的集换社卡牌的交易系统小程序【附源码、数据库、万字文档】

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

作者头像 李华
网站建设 2026/8/21 19:40:09

【接口测试】3_Postman _Postman断言

文章目录一、Postman 断言简介二、解决Postman没有tests三、Postman 常用断言3.1 断言响应状态码&#xff08;重点&#xff09;3.2 判断返回响应体3.2.1 断言包含某字符串3.3.3 断言等于某个字符串3.3 断言JSON数据(重点)3.4 断言响应头四、Postman 断言工作原理五、小结一、Po…

作者头像 李华
网站建设 2026/8/20 22:30:37

气象预测准确率低?如何用Agent技术实现90%以上精度突破

第一章&#xff1a;气象预测精度的挑战与Agent技术的崛起气象预测作为影响农业、交通、能源等关键领域的核心技术&#xff0c;长期以来受限于大气系统的非线性与高动态特性。传统数值天气预报模型依赖大规模计算和初始条件的精确输入&#xff0c;但微小的数据偏差常导致“蝴蝶效…

作者头像 李华
网站建设 2026/8/21 10:48:51

电商智能客服:小众运动装备电商的个性化服务破局者

一、小众运动装备电商的核心服务困境 小众运动装备行业&#xff08;飞盘、桨板、攀岩、陆冲等&#xff09;正迎来消费热潮&#xff0c;但传统服务模式完全无法适配行业特性&#xff1a;用户咨询多围绕 “新手选什么硬度的陆冲板”“160cm 身高适合多长的桨板” 等定制化问题&a…

作者头像 李华
网站建设 2026/8/21 2:42:21

AMAT 应用材料 0200-04137

AMAT 0200-04137 组件信息AMAT&#xff08;Applied Materials&#xff09;0200-04137 是应用材料公司生产的一款半导体设备组件或备件编号&#xff0c;通常用于晶圆制造设备中。该编号属于应用材料内部零件分类体系&#xff0c;具体功能可能涉及气体输送、射频电源模块或设备子…

作者头像 李华
网站建设 2026/8/19 12:12:28

什么是电气隔离?

在硬件电路设计中&#xff0c;“隔离”&#xff08;Isolation&#xff09;通常指的是电气隔离&#xff08;Galvanic Isolation&#xff09;。简单来说&#xff0c;就是让两个电路之间在物理上没有直接的电流回路&#xff0c;但依然能够交换信息或能量。 就像在两座山之间修了一…

作者头像 李华