HTML：常用标签归纳（用法 + 代码 + 显示效果）

news2025/10/31 11:55:07

目录

  • 标签
    • span 文本标签
    • div 竖着布局的标签
    • h1~h6 标题标签
    • p 段落标签
    • a 超链接标签
      • href 资源位置
      • target 打开位置
    • a 锚点标签
      • 固定位置
    • br 换行标签
    • img 图片标签
      • src 属性
      • alt
      • width 宽度 height 高度
    • 列表标签
      • ul 无序列表
      • ol 有序标签
        • 设置表示顺序
    • table 表格属性
      • border 边框
      • width 宽 height 高
      • cellspacing 单元格距离
      • cellpadding 填充
      • thead 头、tbody 身子、tfoot 脚
      • rowspan colspan 单元格合并
      • 练习 制作一个如图的表格
    • iframe 框架标签（窗口标签）
      • scr 资源位置
      • width 宽 height 高
      • name 名字
    • audio 音频
      • src 资源位置
      • controls 手动播放
      • autoplay 自动播放
      • loop 循环播放
    • video 视频标签
      • src 资源位置
      • controls 手动播放
      • loop 循环播放
      • width 宽 height 高
    • input 输入框
      • text 单行文本框
      • password 密码框
      • radio 单选框
      • checkbox 复选框
      • file 文件选择器
      • color 颜色拾取器
      • date 日期选择器
      • datetime-local 日期时间选择器
      • week 周选择器
      • range 滑块
      • number 数字选择器
      • button 普通按钮
      • submit 提交按钮
      • resset 重置按钮
    • form 表单
    • select 下拉框 option 选项
    • textarea 多行文本框域

标签

span 文本标签

<span style="color:red;font-size:30px">h</span><span>ello</span>

在这里插入图片描述

div 竖着布局的标签

<div>h</div>ello</div>

在这里插入图片描述

h1~h6 标题标签

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

在这里插入图片描述

p 段落标签

除了竖着布局，间隔也会大一点。

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

在这里插入图片描述

a 超链接标签

href 资源位置

href属性：设置资源路径，跳转到哪里。

<a href="https://www.baidu.com/" >点击跳转</a>

在这里插入图片描述

target 打开位置

target：当前网页打开或空白网页打开。

_self：默认的，在当前窗口打开.

<a href="https://www.baidu.com/" target="_self">点击跳转</a>

_blank：新页打开。

<a href="https://www.baidu.com/" target="_blank">点击跳转</a>

a 锚点标签

需要一个name属性，给锚点起名，想要跳到那里就放到哪。
配合超链接使用。

名字前面加上#，可以作为区分。
如跳转到开头：

<a name = "aa">开头</a>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<a href="#aa">点击跳转</a>

在这里插入图片描述

固定位置

position:fixd;
在屏幕的固定位置，滑动不改变位置。

<a href="#aa" style= "position:fixed;right:100px;bottom:100px;">点击跳转</a>

这样就固定在右下角了。
在这里插入图片描述

br 换行标签

想要哪里换行，放在哪里即可。
未加前：

<a name = "aa">开头</a>

在这里插入图片描述
加了后：

<a name = "aa">开头</a><br>

在这里插入图片描述

img 图片标签

src 属性

src:引入图片路径。

<img src="D:\桌面\一些图片\661918d1cb1dcac5626c48cd2ed9ffc2df142af2.jpg@942w_515h_progressive.webp">

在这里插入图片描述
这是绝对路径访问，也可以用相对路径。
同一个文件夹下，直接找名字即可。
也可以…退出或进入文件夹中寻找。

alt

alt:给图片加属性。

默认是隐藏的，若图片没有加载成功时，展示其内容。
在这里插入图片描述

width 宽度 height 高度

可以单独设置width，图片会等比例变化。
当然也可以在style中设置。

列表标签

ul 无序列表

<ul>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ul>

在这里插入图片描述

ol 有序标签

<ol>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

设置表示顺序

用type属性
如用abc…来排序。

<ol type="a">
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

table 表格属性

tr 设置行
td 行中单元格

	<table>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
			
		<tr>
			<td>小明</td>
			<td>18</td>
			<td>男</td>
		</tr>
		<tr>
			<td>小华</td>
			<td>19</td>
			<td>女</td>
		</tr>
	</table>

在这里插入图片描述

border 边框

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

width 宽 height 高

不再介绍。

cellspacing 单元格距离

等于零，表示紧挨到一起。

<table border="1" cellspacing="0">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

cellpadding 填充

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

thead 头、tbody 身子、tfoot 脚

划分table

rowspan colspan 单元格合并

rowspan 行合并
colspan 列合并
可以选择合并的个数。

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td >姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td rowspan="2">小明</td> 
        <td colspan = "2">18</td> 
        
    </tr>
    <tr>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

练习 制作一个如图的表格

<!DOCTYPE HTML>
<html>
<head>
	<title>我的第一个页面</title>
	<meta charset="UTF-8">
</head>
<body>
	<table border="1"  cellpadding="10px" style="border-color:#2ac;text-align:center;">
		<tr>
			<td colspan = "2">上午</td>
			<td colspan = "2">下午</td>	
		</tr>
		<tr>
			<td>8：00 ~ 10：00</td>	
			<td>10：10 ~ 12：00</td>	
			<td>14：00 ~ 16：00</td>
			<td>16：10 ~ 18：00</td>
		</tr>
		<tr>
			<td rowspan="2">领导讲话</td>
			<td>大会主题报告</td>
			<td>分会主题报告</td>	
			<td rowspan = "2">总结主题报告</td>			
		</tr>
		<tr>
			<td>专家报告</td>
			<td>分组讨论</td>	
		</tr>
		<tr>
			<td colspan = "4">全天观察博物馆中心</td>
		</tr>
	
</body>
</html>

在这里插入图片描述

iframe 框架标签（窗口标签）

嵌套其他页面，直接拿别人写好的。
有的页面不让嵌套。

scr 资源位置

窗口的链接。

<iframe src = "http://lib.hbu.edu.cn/"></iframe>

在这里插入图片描述

width 宽 height 高

不再介绍。

name 名字

可以用于利用上面所介绍的超链接，target指定窗口打开。

<html>
<body>
	<a href = "1.html" target="idx">超链接标签介绍 </a><br>
	<a href = "2.html" target="idx">列表标签介绍 </a><br>
	<a href = "3.html" target="idx">表格标签介绍 </a><br>
	<a href = "4.html" target="idx">框架标签介绍 </a><br>
	<iframe name = "idx" width="500px" height="600px"></iframe>
</body>
</html>

在这里插入图片描述

audio 音频

src 资源位置

一样的，也是取音频链接地址。

<audio src = "bj.mps"></audio>

但现在是看不到的。

controls 手动播放

加上之后就是true，没有加就是false。

<audio src = "bj.mps" controls></audio>

在这里插入图片描述

autoplay 自动播放

<audio src = "bj.mps" autoplay></audio>

loop 循环播放

<audio src = "bj.mps" loop></audio>

video 视频标签

和音频标签用法相似。

src 资源位置

<video src = "test.mp4"> </video>

controls 手动播放

<video src = "test.mp4" controls> </video>

loop 循环播放

<video src = "test.mp4" loop> </video>

width 宽 height 高

不再介绍。
会根据你的大小进行压缩，以便于正常的比例。

input 输入框

根据 type 类型的不同分类。

text 单行文本框

<input type="text"><br>

在这里插入图片描述

password 密码框

<input type="password">

在这里插入图片描述

radio 单选框

name 一样的只能选则其中一个。
例如选择男/女：

男：<input type="radio" name = "sex"> 女：<input type="radio" name = "sex">

在这里插入图片描述

checkbox 复选框

篮球：<input type="checkbox"> 足球：<input type="checkbox"> 乒乓球：<input type="checkbox">

在这里插入图片描述

file 文件选择器

<input type="file">

在这里插入图片描述

color 颜色拾取器

<input type="color">

在这里插入图片描述

date 日期选择器

<input type="date">

在这里插入图片描述

datetime-local 日期时间选择器

<input type="datetime-local">

在这里插入图片描述

week 周选择器

<input type="week">

在这里插入图片描述

range 滑块

mid 最小值
max 最大值
value 初始值

<input type="range" min="0" max="150" value="50">

在这里插入图片描述

number 数字选择器

mid 最小值
max 最大值
value 初始值
step 步长

<input type="number" min="0" max="150" value="50" step="10">

在这里插入图片描述

button 普通按钮

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

submit 提交按钮

配合 form 使用，提交数据并且刷新。
在这里插入图片描述

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

resset 重置按钮

配合 form 使用，重置回初始状态。

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

form 表单

我们可以把上面input的所有标签放入 form 中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<form>
		单行文本框
		<input type="text"><br>
		密码框
		<input type="password"><br>
		单选框
		男：<input type="radio" name="sex"> 女：<input type="radio" name = "sex"><br>
		复选框
		篮球：<input type="checkbox"> 足球：<input type="checkbox"> 乒乓球：<input type="checkbox"><br>
		文件选择器
		<input type="file"><br>
		颜色拾取器
		<input type="color"><br> 
		日期选择器
		<input type="date"><br>
		日期时间选择器
		<input type="datetime-local"><br>
		周选择器
		<input type="week"><br>
		滑块
		<input type="range" min="0" max="150" value="50"><br>
		数字选择器
		<input type="number" min="0" max="150" value="50" step="10"><br>
		下拉框
		<select value="2">
			<option value="0">语文</option>
			<option value="1">数学</option>
			<option value="2">英语</option>
		</select><br>
		多行文本框域
		<textarea rows="10" cols="50"></textarea><br>
		<br>
		按钮
		<input type="button" value="普通按钮">
		提交按钮
		<input type="submit" value="提交按钮">
		重置按钮
		<input type="reset" value="重置按钮">
	</form>
</body>
</html>

在这里插入图片描述

select 下拉框 option 选项

<select value="2">
    <option value="0">语文</option>
    <option value="1">数学</option>
    <option value="2">英语</option>
</select>

在这里插入图片描述

textarea 多行文本框域

rows 控制行数
cols 控制列数

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Unity Shader - if 和 keyword 的指令比较

Unity Shader - if 和 keyword 的指令比较

文章目录 环境TestingIf4Sampleunity shaderlab 中的 TestingIf4Sample.shadergraphics analyzer 中的 TestingIf4Sample.glsl TestingKW4Sampleunity shaderlab 中的 TestingKW4Sample.shadergraphics analyzer 中的 TestingKW4Sample.glsl 比较 环境 Unity : 2020.3.37f1 Pi…
阅读更多...
gin框架内容（三）--中间件

gin框架内容（三）--中间件

gin框架内容&#xff08;三&#xff09;--中间件 Gin框架允许开发者在处理请求的过程中&#xff0c;加入用户自己的函数。这个函数就叫中间件&#xff0c;中间件适合处理一些公共的业务逻辑&#xff0c;比如登录认证、权限校验、数据分页、记录日志、耗时统计等 即比如&#x…
阅读更多...
虚拟个家用服务器集群（2）：PVE 系统安装启动

虚拟个家用服务器集群（2）：PVE 系统安装启动

风无痕 July 26,2023 前言 很多人想建个人博客类的网站&#xff0c;这就需要网站服务器&#xff1b;需要管理手机、电脑中积累的照片&#xff0c;每张照片可都是人生一个片段的记录&#xff0c;需要管理微信中收发的各种文档等等&#xff0c;这就需要一台 NAS 即 Network Att…
阅读更多...
【JMeter】JMeter添加插件

【JMeter】JMeter添加插件

目录 一、前言 二、插件管理器 三、推荐插件 1.Custom Thread Groups &#xff08;1&#xff09;Ultmate Thread Group &#xff08;2&#xff09;Stepping Thread Group 2.3 Basic Graph 资料获取方法 一、前言 ​ 在我们的工作中&#xff0c;我们可以利用一些插件来帮…
阅读更多...
【机器学习】西瓜书学习心得及课后习题参考答案—第3章线性模型

【机器学习】西瓜书学习心得及课后习题参考答案—第3章线性模型

过了一遍第三章&#xff0c;大致理解了内容&#xff0c;认识了线性回归模型&#xff0c;对数几率回归模型&#xff0c;线性判别分析方法&#xff0c;以及多分类学习&#xff0c;其中有很多数学推理过程以参考他人现有思想为主&#xff0c;没有亲手去推。 术语学习 线性模型 l…
阅读更多...
网站构建说明

网站构建说明

一、网站中的web构建 HTML 4.01CSS 的使用 &#xff08;样式表&#xff09;XHTMLXML 和 XSLT客户端脚本服务器端脚本通过 SQL 管理数据Web 的未来 HTML 4.01 通过 HTML 4.01&#xff0c;所有的格式化信息可以被移出 HTML 文档&#xff0c;转而放入一个独立的样式表中。 层叠样…
阅读更多...
linux实现运行java分包部署

linux实现运行java分包部署

1.打好包之后 找到bin文件夹下的 startup.sh文件 2.cd 进入bin文件夹下 3.执行 sh startup.sh 运行命令 4.如果出现此错误 是Windows和Linux的.sh脚本文件格式不同&#xff0c;如果在脚本中有空行&#xff0c;脚本是在Windows下进行编辑之后上传到linux上去执行的话&#xff0c…
阅读更多...
httpclient 小案例（未完待续）

httpclient 小案例（未完待续）

为了调用微信小程序接口&#xff0c;我们可以使用httpclient 导入依赖&#xff1a; java通过编码方式里发http请求&#xff0c;步骤&#xff1a; 创建http client 对象创建http请求对象&#xff08;get或post&#xff09;调用http client excute方法 httpGet请求方法 Test…
阅读更多...
Pandas时序数据分析实践—概述

Pandas时序数据分析实践—概述

时序数据&#xff0c;作为一种时间上有序的数据形式&#xff0c;无疑是我们日常生活中最常见的数据类型之一。它记录了事件、现象或者过程随时间的变化&#xff0c;是对于许多实际场景的忠实反映。而在众多时序数据的应用领域中&#xff0c;跑步训练记录莫过于是一项令人着迷的…
阅读更多...
美容店预约小程序制作教程详解

美容店预约小程序制作教程详解

现在&#xff0c;制作一个专属于美容店的预约小程序不再需要编程经验&#xff0c;通过乔拓云网提供的后台管理系统&#xff0c;你可以轻松地完成整个制作过程。下面&#xff0c;我将为你详细介绍如何DIY一个美容店预约小程序。 首先&#xff0c;登录乔拓云网的后台管理系统&…
阅读更多...
高阶C语言|C语言文件管理--输入输出流

高阶C语言|C语言文件管理--输入输出流

文件管理 一、为什么使用文件二、什么是文件2.1程序文件2.2数据文件2.3文件名 三、文件的打开和关闭3.1文件指针3.2文件的打开和关闭 四、文件的顺序读写4.1顺序读写函数介绍4.1.1fgetc4.1.2fputc4.1.3fgets4.1.4fputs4.1.5fscanf4.1.6fprintf4.1.7fread4.1.8fwrite 4.2对比一组…
阅读更多...
pg三种插件验证

pg三种插件验证

sr_plan 创建extension, 他会创建保留执行计划的表 创建表并插入数据 开启sr_plan.write_mode, 允许sr_plan收集SQL和执行计划 查看QUERY 1的执行计划 PostgreSQL支持merge join、GroupAggregate(通过INDEX SCAN)，所以这个CASE，非常快，并不需要b对所有数据进行聚合。查看…
阅读更多...
linux 动态库so相关操作

linux 动态库so相关操作

1. 查看库版本号 一般在文件名上有版本号&#xff0c;若文件名上没有版本号&#xff0c;使用如下命令查看&#xff1a; readelf -d libstdc.so 2. 查看库内函数 a) nm -d libstdc.so | grep 内容 b) objdump -tT libstdc.so | grep 内容 c) readelf -s libstdc.so | grep…
阅读更多...
第十章：重新审视扩张卷积：一种用于弱监督和半监督语义分割的简单方法

第十章：重新审视扩张卷积：一种用于弱监督和半监督语义分割的简单方法

0.摘要 尽管取得了显著的进展&#xff0c;弱监督分割方法仍然不如完全监督方法。我们观察到性能差距主要来自于它们在从图像级别监督中学习生成高质量的密集目标定位图的能力有限。为了缓解这样的差距&#xff0c;我们重新审视了扩张卷积[1]并揭示了它如何以一种新颖的方式被用…
阅读更多...
HTML编码-Form-ifram

HTML编码-Form-ifram

字符编码&#xff1a; 主要有两类&#xff1a; 一类为非Unicode编码&#xff1b;一类是Unicode编码&#xff1b; 常见编码种类&#xff1a; 1、ASCII码&#xff1a; ASCII&#xff08;American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&a…
阅读更多...
25.6 matlab里面的10中优化方法介绍——模拟退火算法（matlab程序）

25.6 matlab里面的10中优化方法介绍——模拟退火算法（matlab程序）

1.简述 相信没有相关物理知识背景的小伙伴看到“退火”二字是一脸懵逼的...固体的退火过程指的是将固体加热至足够高的温度&#xff0c;再使其慢慢冷却的过程。在加热过程中&#xff0c;原本有序排列的内部粒子开始无序运动&#xff0c;此时固体的内能不断增大&#xff1b;而在…
阅读更多...
【GEC6818开发板简介】

【GEC6818开发板简介】

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…
阅读更多...
计算机网络 day13 TCP拥塞控制 - tcpdump - DHCP协议 - DHCP服务器搭建 - DNS域名解析系统 - DNS域名解析过程

计算机网络 day13 TCP拥塞控制 - tcpdump - DHCP协议 - DHCP服务器搭建 - DNS域名解析系统 - DNS域名解析过程

目录 TCP的流控机制 -- 拥塞控制 参考文章&#xff1a;什么是TCP拥塞控制算法&#xff1f; - 知乎 (zhihu.com) 拥塞控制主要是四个算法&#xff1a; 主机如何知道数据在传输的过程中&#xff0c;知道中间的网络堵塞了&#xff1f; TCP/IP协议栈 tcpdump抓包工具的学习使用…
阅读更多...
AtcoderABC231场

AtcoderABC231场

A - Water PressureA - Water Pressure 题目大意 假设水压仅取决于深度&#xff0c;在深度为x米时&#xff0c;水压为x/100兆帕斯卡。 现在给定一个深度D米&#xff0c;需要计算在该深度下的水压是多少兆帕斯卡。 思路分析 直接将输入的深度除以100得到水压结果。 时间复杂…
阅读更多...
【无标题】自定义类型：位段，枚举，联合

【无标题】自定义类型：位段，枚举，联合

自定义类型&#xff1a;位段&#xff0c;枚举&#xff0c;联合 1. 位段1.1 什么是位段1.2 位段的内存分配1.3 位段的跨平台问题 2. 枚举2.1 枚举类型的定义2.2 枚举类型的优点2.3 枚举的使用 3. 联合&#xff08;共用体&#xff09;3.1 联合类型的定义3.2联合的特点3.2.1 相关面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023