news 2026/5/19 7:32:00

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/5/14 13:20:00

微信ipad协议,wechatapi,个人号二次开发

微信生态安全挑战与防护策略微信作为拥有13亿月活用户的平台&#xff0c;其安全体系具有高度复杂性。未经优化的自动化工具面临极高封号风险&#xff1a;第一周35%、一个月65%、三个月85%、六个月95%。微信风控系统技术原理设备层防护 微信采集50设备特征参数&#xff0c;包括硬…

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

MyBatis/MyBatis-Plus类型转换器深度解析:从基础原理到自定义实践

目录前言基本概念一、TypeHandlerTypeHandler作用内置 TypeHandler 的自动映射二、jdbcType 的必要性&#xff1a;处理 NULL 值的核心三、自定义 TypeHandler前言 这篇博客主要讲一下mybatis/mybatisplus框架的类型转换器的相关知识和用法&#xff0c;最近项目有一个技术场景&…

作者头像 李华
网站建设 2026/5/17 5:50:26

sql server自动备份

1.在管理中点击维护计划向导 2.填写任务名称&#xff0c;点击更改 3.选择需要的备份时间&#xff0c;点击确定 4.勾选备份完整数据库 5.点击下一步 6.选择指定数据库 7.选择备份路径 8.选择完成后点击下一步 9.选择清除任务 10.点击下一步 11.点击完成 12.点击执行任务测试是否…

作者头像 李华
网站建设 2026/5/14 20:27:04

vue和springboot框架开发的救援物资管理系统_55j08br6

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

作者头像 李华
网站建设 2026/5/15 22:22:58

制药行业质量与效率双提升:精益六西格玛的应用路径与价值分析

在全球制药行业面临成本压力持续增大、质量监管日趋严格、研发周期长且市场竞争激烈的背景下&#xff0c;制药企业迫切需要系统性的管理方法来提升运营效率和质量控制水平。本报告旨在深入分析精益六西格玛方法论在制药行业的应用价值&#xff0c;探讨其如何帮助企业实现质量与…

作者头像 李华
网站建设 2026/5/9 6:16:49

vue和springboot框架开发的老人健康信息管理系统_42q6c587

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

作者头像 李华