news 2026/4/22 19:15:49

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/20 7:33:44

C#6——DateTime

DateTime.Now.ToString()DateTime.Now.ToString() 是 C# 中格式化当前系统时间 / 日期的核心用法&#xff0c;通过传入不同格式字符串&#xff0c;可灵活输出符合业务需求的日期时间格式&#xff08;如日志命名、报告时间戳、界面显示等&#xff09;。以下是完整用法拆解&#…

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

如何用 AI 语音克隆做视频翻译?突破谷歌翻译局限,实现多语言原声适配

引言&#xff1a;全球化视频传播的语言痛点在当今全球化的世界中&#xff0c;跨越语言障碍进行有效沟通至关重要。对于视频内容创作者而言&#xff0c;触达使用不同语言的观众始终是个挑战。传统的视频翻译方法主要依赖字幕或配音&#xff0c;而AI语音克隆提供了一种更先进、更…

作者头像 李华
网站建设 2026/4/21 2:16:10

vue和springboot框架开发的考公考编面试刷题平台系统的设计与实现_b23o02nq

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

作者头像 李华
网站建设 2026/4/18 12:52:33

C++ 标准 double 与 Qt qreal 技术报告

这是一个关于标准 C double 浮点类型及其在 Qt 框架中 qreal 类型定义的详细技术报告。C 标准 double 与 Qt qreal 技术报告 1. 概述 本报告旨在阐述 C 标准中 double 类型的底层实现、精度特性及常见陷阱&#xff0c;并深入探讨 Qt 框架中特有的 qreal 类型定义、设计目的及其…

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

【家庭能源成本下降40%的秘密】:基于多Agent协同的节能系统设计

第一章&#xff1a;智能家居 Agent 的能源管理在现代智能家居系统中&#xff0c;智能 Agent 扮演着核心调度角色&#xff0c;尤其在能源管理方面发挥关键作用。通过实时监控设备能耗、学习用户行为模式并结合电价波动&#xff0c;Agent 能动态调整家电运行策略&#xff0c;实现…

作者头像 李华