【前端】HTML标签汇总

目录

展示用户信息的标签

1.文本标签 span

2.标题标签 h1~h6

3.竖着布局的标签 div

4.段落标签 p

5.超链接标签 a

5.1跳转至网上的资源

5.2锚点

6.列表标签

6.1有序列表 ol

6.2无序列表 ul

7.图片标签 img

7.1相对路径

7.1.1兄弟关系

7.1.2叔侄关系

7.1.3表兄弟关系

7.2绝对路径

8.表格标签

8.1形成一个表格

8.2表格的大小以及边框

8.3表格的优化

8.4单元格合并

8.4.1行合并 rowspan

8.4.2列合并 colspan

9.框架标签 \ 窗口标签 iframe

收集用户信息的标签

1.input + type

1.1.单行文本框 text

1.2.密码框 password

1.3.单选框 radio

1.4.复选框 checkbox

1.5.文件选择器 file

1.6.颜色拾取器 color

1.7.日期选择器 date

1.8.日期时间选择器 datetime-local

1.9.周选择器 week

1.10.滑块 range

1.11.数字输入框 number

2.下拉框 select

3.多行文本域 textarea

4.按钮

4.1普通按钮 button

4.2重置按钮 reset

4.3提交按钮 submit

音频和视频

1.音频 audio

2.视频 video


展示用户信息的标签

1.文本标签 span

<span>hello</span>

可以添加 style 样式

<span style="color : green">hello</span>

2.标题标签 h1~h6

<h1>h1标题</h1>

逐级减小, h4标题和文本一样大 .

3.竖着布局的标签 div

<div>竖着布局的标签</div>

4.段落标签 p

<p>段落标签</p>

段落标签是竖着布局的, 不同点是两个段落之间有较大的空隙

5.超链接标签 a

5.1跳转至网上的资源
<a href="https://www.baidu.com/">超链接至百度</a>

href 里面写想要跳转的网址,这里以百度为例

在这里我们没有写 target 属性, 所以 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下

<a href="https://www.baidu.com/" target="_blank">超链接至百度</a>
5.2锚点

为了实现同一页面上不同位置的跳转, 我们使用 name 属性标记需要到达的地方

<a name="aaa"></a>

然后使用超链接传送到目标位置

<a href="#aaa">跳转到aaa</a>

当多个超链接叠放在一起时, 它们会在同一行显示

为了让不同超链接竖着布局, 我们添加

<a href="#aaa">跳转到aaa</a><br>
<a href="#bbb">跳转到bbb</a><br>
<a href="#ccc">跳转到ccc</a>

为了让超链接固定在网页的某个位置,我们可以添加 style 属性, 如下

<a href="#aaa" style="position: fixed; right: 100px; bottom: 50px;">跳转到aaa</a>

当多个超链接叠放在一起时, 我们可以把它们放在一个块级元素中

    <span style="position: fixed; right: 100px; bottom: 50px;"><a href="#aaa">跳转到aaa</a><br><a href="#bbb">跳转到bbb</a><br><a href="#ccc">跳转到ccc</a></span>

6.列表标签

6.1有序列表 ol
    <ol><li>这是有序标签</li><li>这是有序标签</li><li>这是有序标签</li></ol>

ol 即 Ordered Labels

为了把标签前面的序号修改为大小写字母或其他符号, 我们可以使用 type 关键字, 例如

<ol type="a"></ol>

除此之外,我们还可以使用 start 标签控制编号从几开始, 例如

    <ol type="a" start="2"><li>这是有序标签</li><li>这是有序标签</li><li>这是有序标签</li></ol>

6.2无序列表 ul
    <ul><li>这是无序标签</li><li>这是无序标签</li><li>这是无序标签</li></ul>

7.图片标签 img

在 src 属性里写资源路径, 路径分为相对路径和绝对路径. 图片加载失败时, 显示 alt 属性里面的内容.

7.1相对路径

在相对路径中, 图片与图片有三种位置关系, 分别是兄弟关系 叔侄关系 表兄弟关系

7.1.1兄弟关系

当 html 文件和 jpg 文件在同一个包中, 它们之间是兄弟关系, 形如

html

        index.html

        pic.jpg

<img src="pic.jpg" alt="一张图片">

为了控制图片的大小,我们使用 style 属性定义宽和高, 形如

<img src="pic.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.1.2叔侄关系

当 html 文件与 jpg 的父级在同一个包中, 它们之间是叔侄关系, 形如

index.html

img

        pic.jpg

<img src="img/pic2.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.1.3表兄弟关系

当 html 文件的父级与 jpg 的父级在同一个包中, 它们之间是表兄弟关系, 形如

html

        index.html

img

        pic.jpg

首先使用 ../ 返回上级, 然后按照叔侄关系处理

<img src="../img/pic3.jpg" alt="一张图片" style="width: 400px; height: 300px">
7.2绝对路径

联网复制图片网址, 赋值给 src 即可

8.表格标签

8.1形成一个表格

table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下

    <table><tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td></tr></table>

此为一行四列

    <table><tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td></tr><tr><td>1</td><td>张三</td><td>13</td><td>男</td></tr><tr><td>9</td><td>李四</td><td>14</td><td>女</td></tr><tr><td>85</td><td>王五</td><td>15</td><td>男</td></tr></table>

此为四行四列

8.2表格的大小以及边框

为了让表格有边框, 我们添加 border 属性

<table border="1"></table>

我们使用 width, height 控制表格的宽和高

<table border="1" width="300px" height="150px"></table>

8.3表格的优化

相较于 <td> 标签, <th> 标签有加粗和居中的效果

    <table><tr><th></th></tr></table>

为了不让内容紧贴边框, 我们使用 cellpadding 属性控制单元格填充度

<table cellpadding="10px"></table>

为了改变单元格间的间距, 我们使用 cellspacing 属性, 通常将其置为 0 以取消间距

<table cellspacing="0"></table>

被 <thead> 标签包围的行在顶端显示, 被 <tfoot> 标签包围的行在底端显示, <tbody> 在中间显示

8.4单元格合并
8.4.1行合并 rowspan

rowspan 将不同行合并

<td rowspan="3"></td>

8.4.2列合并 colspan

colspan 将不同列合并

<td colspan="2"></td>

9.框架标签 \ 窗口标签 iframe

<iframe src=""></iframe>

在 src 中放入目标网址, 以牛客为例

<iframe src="https://www.nowcoder.com/"></iframe>

此时的窗口是有边框的, 为了取消边框, 我们把 frameborder 属性设置为 0

<iframe src="https://www.nowcoder.com/" frameborder="0"></iframe>

为了修改窗口大小, 我们调整宽高属性

<iframe src="https://www.nowcoder.com/" frameborder="0" width="1650px" height="800px"></iframe>

我们可以使用 name 属性标识窗口, 配合超链接的target 属性达到在此窗口跳转不同链接的效果

    <a href="https://www.nowcoder.com/" target="abc">跳转到牛客</a><a href="https://leetcode.cn/" target="abc">跳转到力扣</a><a href="https://www.bilibili.com/v/douga/" target="abc">跳转到bilibili</a><iframe src="https://www.nowcoder.com/" name="abc" frameborder="0" width="1650px" height="800px"></iframe>

收集用户信息的标签

1.input + type

使用 input 标签收集用户信息时, 根据 type 属性的值进行区分

1.1.单行文本框 text
<input type="text"> 单行文本框

1.2.密码框 password
<input type="password"> 密码框

1.3.单选框 radio

使用 name 属性进行匹配, name 值相同为一组

<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 单选框

1.4.复选框 checkbox
<input type="checkbox"> 足球 <input type="checkbox"> 篮球 <input type="checkbox"> 排球 复选框

1.5.文件选择器 file
<input type="file">

1.6.颜色拾取器 color
<input type="color">

1.7.日期选择器 date
<input type="date">

1.8.日期时间选择器 datetime-local
<input type="datetime-local">

1.9.周选择器 week
<input type="week">

1.10.滑块 range
<input type="range">

滑块的属性: min 最小值, max 最大值, value 滑块的默认值

<input type="range" min="0" max="100" value="80">

1.11.数字输入框 number

数字输入框中只能输入数字

<input type="number">

数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长

<input type="number" min="0" max="100" value="80" step="5">

2.下拉框 select

    <select><option>语文</option><option>数学</option><option>英语</option><option>体育</option></select>

3.多行文本域 textarea

<textarea cols="30" rows="10"></textarea>

4.按钮

4.1普通按钮 button
<input type="button" value="普通按钮1">

4.2重置按钮 reset
<input type="reset" value="重置按钮2">

重置按钮会将同一个 form 表单内的输入内容重置

4.3提交按钮 submit
<input type="submit" value="提交按钮3">

提交按钮会将同一个 form 表单内的输入内容提交, 提交后会刷新

    <form><textarea cols="30" rows="10"></textarea> <br><br><input type="button" value="普通按钮1"><br><br><input type="reset" value="重置按钮2"><br><br><input type="submit" value="提交按钮3"></form>

音频和视频

1.音频 audio

<audio src="" controls></audio>

在 src 中写资源路径, 加入 controls 属性后手动控制音频播放

将 controls 属性改为 autoplay 属性, 进入网页自动播放

<audio src="" autoplay></audio>

2.视频 video

<video src="" controls width="500px" height="100px"></video>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469503.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海外云手机在出海业务中的优势有哪些?

随着互联网技术的快速发展&#xff0c;海外云手机已在出海电商、海外媒体推广和游戏行业都拥有广泛的应用。对于国内的出海电商企业来说&#xff0c;短视频引流和社交平台推广是带来有效流量的重要手段。借助云手机&#xff0c;企业能够更高效地在新兴社交平台上推广产品和品牌…

电脑提示xinput1_3.dll丢失怎么办?游戏DLL修复方法详解

xinput1_3.dll 是一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它在Windows操作系统中扮演着重要的角色&#xff0c;特别是在处理游戏控制器和其他输入设备的交互方面。这个文件是Microsoft DirectX软件包的一部分&#xff0c;DirectX是微软公司开发的一个多媒体…

Spring资源加载模块,原来XML就这,活该被注解踩在脚下 手写Spring第六篇了

这一篇让我想起来学习 Spring 的时&#xff0c;被 XML 支配的恐惧。明明是写Java&#xff0c;为啥要搞个XML呢&#xff1f;大佬们永远不知道&#xff0c;我认为最难的是 XML 头&#xff0c;但凡 Spring 用 JSON来做配置文件&#xff0c;Java 界都有可能再诞生一个扛把子。 <…

讲讲关于SNMP与智能PDU插座

什么是SNMP 简单网络管理协议 (SNMP) 是一种应用层协议&#xff0c;主要用于网络管理中的设备监控和控制。通过 SNMP&#xff0c;网络管理员可以从管理站远程访问网络中的设备&#xff0c;获取设备的状态信息、配置参数&#xff0c;甚至控制设备的行为。SNMP 被广泛应用于 TCP/…

丹摩征文活动 | Kolors入门:从安装到全面活用的对比指南

文章目录 1 图像生成模型 Kolors2 部署流程3 部署服务3.1 安装 Anaconda3.2 Kolors 库下载3.3 创建虚拟环境 4 生成图片 1 图像生成模型 Kolors Kolors是由快手团队开发的大规模文本到图像生成模型&#xff0c;以其独特的潜在扩散技术而闻名。 Kolors通过在数十亿对文本和图像…

【go从零单排】通道select、通道timeout、Non-Blocking Channel Operations非阻塞通道操作

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 select 语句是 Go 的一种控制结构&#xff0c;用于等待多个通道操作。它类似于 s…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…

计算机网络常见面试题(一):TCP/IP五层模型、TCP三次握手、四次挥手,TCP传输可靠性保障、ARQ协议

文章目录 一、TCP/IP五层模型&#xff08;重要&#xff09;二、应用层常见的协议三、TCP与UDP3.1 TCP、UDP的区别&#xff08;重要&#xff09;3.2 运行于TCP、UDP上的协议3.3 TCP的三次握手、四次挥手3.3.1 TCP的三次握手3.3.2 TCP的四次挥手3.3.3 随机生成序列号的原因 四、T…

BFD8122防爆轻便移动工作灯

BFD8122防爆轻便移动工作灯 适用范围&#xff1a; 适用于炼油、化工、油田等易燃易爆场所小范围施工、检修、抢险应急照明。 结构特性 高亮度&#xff0c;灯具光通量&#xff1e;4000lm&#xff0c;6米中心照度&#xff08;聚光&#xff09;&#xff1e;1000lx&#xff0c;…

天地图入门|标注|移动飞行|缩放,商用地图替换

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市&#xff08;县&#xff09;各级测绘地理信息部门&#xff0c;以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源&#xff0c;如果做的项目是政府部门、企事业单位尽量选…

分布式----Ceph部署(上)

目录 一、存储基础 1.1 单机存储设备 1.2 单机存储的问题 1.3 商业存储解决方案 1.4 分布式存储&#xff08;软件定义的存储 SDS&#xff09; 1.5 分布式存储的类型 二、Ceph 简介 三、Ceph 优势 四、Ceph 架构 五、Ceph 核心组件 #Pool中数据保存方式支持两种类型&…

linux详解,基本网络枚举

基本网络枚举 一、基本网络工具 ifconfig ifconfig是一个用于配置和显示网络接口信息的命令行工具。它可以显示网络接口的P地址、子网掩码、MC地址等信息&#xff0c;还可以用于启动、停止或配置网络接口。 ip ip也是用于查看和管理网络接口的命令。 它提供了比ifconfig更…

组件间通信(组件间传递数据)

组件间通信(组件间传递数据) 在 Vue.js 中&#xff0c;组件间通信是开发者需要经常处理的任务&#xff0c;特别是在构建具有多层次组件的复杂应用时。根据组件之间的关系和数据流的复杂程度&#xff0c;可以采用不同的通信方式。以下是常用的几种组件间通信方式&#xff1a; …

深度学习-图像评分实验(TensorFlow框架运用、读取处理图片、模型建构)

目录 0、实验准备 ①实验环境 ②需要下载的安装包 ③注意事项&#xff08;很关键&#xff0c;否则后面内容看不懂&#xff09; ④容易出现的问题 1、查看数据并读取数据。 2、PIL库里的Image包进行读取&#xff08;.resize更改图片尺寸&#xff0c;并将原始数据归一化处…

全球碳循环数据集(2000-2023)包括总初级生产力、生态系统净碳交换和生态系统呼吸变量

全球碳循环数据集&#xff08;2000-2023&#xff09; 数据介绍 PFTs_XGB FLUX 是一个基于 XGBOOST 机器学习模型的全球碳循环数据集。该数据集通过对全球植被功能类型&#xff08;PFTs&#xff09;的分类&#xff0c;结合了 FLUXNET、AmeriFlux 和 ICOS 通量站点的现场观测数据…

前端代码分析题(选择题、分析题)——this指向、原型链分析

this指向 普通函数&#xff1a;this 的指向由调用方式决定&#xff0c;可以是全局对象、调用该函数的对象&#xff0c;或者显式指定的对象。箭头函数&#xff1a;this 的指向在定义时确定&#xff0c;始终继承自外层函数作用域的 this&#xff0c;不会被调用方式影响。 var obj…

【SpringBoot】18 上传文件到数据库(Thymeleaf + MySQL)

Git仓库 https://gitee.com/Lin_DH/system 介绍 使用 Thymeleaf 写的页面&#xff0c;将&#xff08;txt、jpg、png&#xff09;格式文件上传到 MySQL 数据库中。 依赖 pom.xml <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j --><depende…

手动搭建 Ghost 博客

操作场景 Ghost 是使用 Node.js 语言编写的开源博客平台&#xff0c;您可使用 Ghost 快速搭建博客&#xff0c;简化在线出版过程。本文档介绍如何在腾讯云云服务器&#xff08;CVM&#xff09;上手动搭建 Ghost 个人网站。 进行 Ghost 网站搭建&#xff0c;您需要熟悉 Linux …

类型转换指令及方法调用与返回指令

我的后端学习大纲 JVM学习大纲 4.类型转换指令&#xff1a; 类型转换指令说明 ①类型转换指令可以将两种不同的数值类型进行相互转换。 这些转换操作一般用于实现用户代码中的显式类型转换操作&#xff0c;或者用来处理字节码指令集中数据类型相关指令无法与数据类型一一对应的…

【LLM Agents体验 3】利用Open-WebUI+Ollama本地部署Qwen2.5:7B大模型的安装指南

Open WebUI是一种基于 Web 的用户界面&#xff0c;用于管理和操作各种本地和云端的人工智能模型。它提供了一个直观的图形化界面&#xff0c;使用户可以方便地加载、配置、运行和监控各种 AI 模型&#xff0c;而无需编写代码或使用命令行界面。 Open-WebUI 是一款功能强大且易于…