news 2026/4/25 9:36:13

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/4/23 14:03:21

AMAT 0020-21033 刀片

AMAT 0020-21033 刀片相关信息AMAT 0020-21033 是 Applied Materials&#xff08;应用材料公司&#xff09;生产的一款半导体设备刀片组件&#xff0c;通常用于晶圆加工设备中。这类刀片在半导体制造过程中用于切割、抛光或其他精密加工步骤。关键特性兼容性&#xff1a;该刀片…

作者头像 李华
网站建设 2026/4/23 17:48:24

毕业季必看!6款AI论文神器实测:真实参考文献、轻松搞定毕业论文

如果你是正在熬夜赶Deadline的毕业生... 如果你正盯着电脑屏幕发呆&#xff0c;被导师的“进度催命符”轰炸&#xff1b;如果你翻遍知网只为找几篇能用的参考文献&#xff0c;却被高昂的查重费压得喘不过气&#xff1b;如果你是囊中羞涩的大学生&#xff0c;或是怕延毕的研究生…

作者头像 李华
网站建设 2026/4/25 20:01:45

vue和springboot框架开发的旅游分享点评网系统_c6l4qb5f

文章目录 具体实现截图主要技术与实现手段关于我本系统开发思路java类核心代码部分展示结论源码lw获取/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&#xff01; 具体实现截图 同行可拿货,招校园代理 vuesprivuespringboot_c6l4qb5f 框架开发的旅游分享…

作者头像 李华
网站建设 2026/4/23 12:47:09

vue和springboot框架开发的民宿预定信息退订系统_777cb4oy

文章目录具体实现截图主要技术与实现手段关于我本系统开发思路java类核心代码部分展示结论源码lw获取/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&#xff01;具体实现截图 同行可拿货,招校园代理 vuesprivuespringboot_777cb4oy 框架开发的民宿预定…

作者头像 李华
网站建设 2026/4/22 14:50:19

concurrentHashMap原理

concurrentHashMap的是为了解决HashMap在并发环境中出现的线程安全问题&#xff0c;同时也优化了HashTable在高并发中存在的性能问题&#xff0c;让其性能更接近于HashMap。高并发问题HashMap1.数据丢失问题2.JDK1.7采用头插法&#xff0c;会导致链表成环&#xff0c;抛出Concu…

作者头像 李华