news 2026/4/18 9:12:21

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/18 8:29:20

学情分析实战指南(从0到1构建高效教育 Agent)

第一章&#xff1a;学情分析与教育 Agent 的融合演进随着人工智能技术在教育领域的深度渗透&#xff0c;学情分析正从传统的数据统计模式迈向智能化、个性化的认知建模阶段。教育 Agent 作为具备自主决策与交互能力的智能体&#xff0c;正在重构教学过程中“教”与“学”的动态…

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

AI招聘的终极想象:当机器学会“看见”人的光

招聘&#xff0c;正在从“筛选”走向“照亮” 一位工程师在深夜浏览行业论坛时&#xff0c;收到一条AI推送&#xff1a;“我们注意到您在过去一年参与了三个开源AI项目&#xff0c;且社区评价极高。某自动驾驶公司正寻找具备您这样经验的感知算法专家&#xff0c;是否愿意聊聊…

作者头像 李华
网站建设 2026/4/18 5:41:23

方达炬 发明:成本即财富

方达炬〖发明新字词〗〖发明新文字材料〗〖发明新财经材料〗&#xff1a; 成本即财富

作者头像 李华
网站建设 2026/4/17 13:45:27

PTA Java-03面向对象基础-05-覆盖

7-3 jmu-Java-03面向对象基础-05-覆盖分数 3作者 郑如滨单位 集美大学Java每个对象都继承自Object,都有equals、toString等方法。 现在需要定义PersonOverride类并覆盖其toString与equals方法。1. 新建PersonOverride类a. 属性&#xff1a;String name、int age、boolean gende…

作者头像 李华
网站建设 2026/4/18 8:36:04

RabbitMQ_8_高级特性(完)

延迟队列 概念 延迟队列&#xff08;Delayed Queue&#xff09;&#xff0c;即消息被发送以后&#xff0c;并不想让消费者立刻拿到消息&#xff0c;而是等待特定时间后&#xff0c;消费者才能拿到这个消息进行消费 应用场景 延迟队列的使用场景有很多&#xff0c;比如&…

作者头像 李华
网站建设 2026/4/16 16:05:02

【电力巡检自动化进阶之路】:从固定路线到自适应动态路径的跃迁策略

第一章&#xff1a;电力巡检Agent路径规划的演进背景随着智能电网建设的不断推进&#xff0c;传统人工电力巡检方式已难以满足高效率、高安全性的运维需求。电力系统覆盖范围广、设备分布复杂&#xff0c;使得巡检任务面临响应延迟、人力成本高和环境风险大等挑战。在此背景下&…

作者头像 李华