HTML一般标签和自闭合标签介绍
在HTML中，标签用于定义网页内容的结构和样式。标签通常分为两类：一般标签（也称为成对标签或开放闭合标签）和自闭合标签（也称为空标签或自结束标签）。
以下是这两类标签的详细说明：
一、一般标签
一般标签由一对尖括号（< 和 >）包围，有一个开始标签（<标签名>）和一个结束标签（</标签名>），它们之间可以包含其他HTML标签或文本内容。
1、标题标签（<h1>至<h6>）
标题标签用于创建不同级别的标题，其中<h1>为最高级别，<h6>为最低级别。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html>
2、段落标签（<p>）
段落标签用于创建段落，可以指定对齐方式。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个段落。</p><p style="text-align: center;">这是一个居中的段落。</p></body></html>
3、强调标签（<strong>、<em>）
强调标签用于突出显示文本，<strong>表示重要性，<em>表示强调。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个<strong>重要的</strong>句子。</p><p>这是一个<em>强调的</em>句子。</p></body></html>
4、链接标签（<a>）
链接标签用于创建超链接，可以指向其他网页或同一页面的特定位置。
<a href="https://www.example.com">访问示例网站</a><a href="#section1">跳转到页面中的某个部分</a>5、列表标签（<ul>、<ol>、<li>）
无序列表（<ul>）和有序列表（<ol>）用于创建列表，每个列表项由<li>标签定义。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li></ol></body></html>
6、删除线标签（<del>）
删除线标签用于表示删除的文本。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>原价：<del>100元</del> 现价：80元</p></body></html>
7、下划线标签（<ins>）
下划线标签用于表示插入的文本。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个<ins>新添加</ins>的句子。</p></body></html>
8、居中标签（<center>）
居中标签用于居中对齐文本（注意：<center>标签在HTML5中已被弃用，建议使用CSS样式来实现居中对齐）。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><center>这是居中的文本。</center></body></html>
9、表格标签（<table>、<tr>、<td>）
表格标签用于创建表格，包括行（<tr>）和单元格（<td>）。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></table></body></html>
二、自闭合标签
自闭合标签是不需要闭合标签的元素，通常用于表示那些不需要包裹内容的元素。在HTML5规范中，这些标签在书写时可以省略结束斜杠（/），但为了保持代码的一致性和兼容性，很多开发者仍然习惯在自闭合标签的末尾加上斜杠。
1、图像标签（<img>）
图像标签用于插入图片，需要指定图片的源（src）和替代文本（alt）。
<img src="example.jpg" alt="示例图片">2、换行标签 (<br>)
用于在文本中插入换行。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是第一行。<br/>这是第二行。</p></body></html>
3、水平线标签 (<hr>)
用于在网页中插入水平线，通常用于分隔内容。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>上面的段落。</p><hr/><p>下面的段落。</p></body></html>
4、输入标签 (<input>)
用于创建表单输入控件，如文本框、复选框、单选按钮等。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><input type="text" name="username" placeholder="输入用户名"><input type="password" name="password" placeholder="输入密码"><input type="submit" value="提交"></body></html>-
type属性指定输入控件的类型。 -
name属性指定输入控件的名称，用于在表单提交时识别数据。 -
placeholder属性提供输入控件的占位符文本。
5、元标签 (<meta>)
用于定义文档的元数据，如字符集、页面描述、关键词等。
<meta charset="UTF-8"><meta name="description" content="这是一个示例网页的描述。"><meta name="keywords" content="HTML, 示例, 网页">6、链接标签 (<link>)
用于定义文档与外部资源的关系，如样式表、图标等。
<link rel="stylesheet" href="styles.css"><link rel="icon" href="favicon.ico">-
rel属性指定当前文档与外部资源的关系。 -
href属性指定外部资源的路径。
7、源标签 (<source>)
用于为<audio>、<video>和<picture>元素指定多个媒体资源，以便浏览器根据支持情况选择合适的资源。
<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video>8、跟踪标签 (<track>)
用于为<audio>和<video>元素提供文本轨道，如字幕、字幕文件或描述。
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="subtitles.vtt" srclang="en" label="English"></video>虽然<track>标签在HTML5中不是严格意义上的自闭合标签（因为它可以包含属性），但在实际使用中，它通常不包裹内容，因此也常被视作自闭合标签的一种。
相关文章：
HTML一般标签和自闭合标签介绍
在HTML中，标签用于定义网页内容的结构和样式。标签通常分为两类：一般标签（也称为成对标签或开放闭合标签）和自闭合标签（也称为空标签或自结束标签）。 以下是这两类标签的详细说明： 一、一般标…...
怎么用u盘怎么重装系统_用u盘重装系统详细图文教程【新手教程】
怎么用u盘怎么重装系统？如果需要重装操作系统的话，以往采用光盘使用的比较多，随着技术的进步，用u盘制作一个启动盘安装系统比较方便，只需要用u盘制作好pe启动盘就可以帮助别人安装系统了，那么用u盘怎么重装…...
记录一次k8s起不来的排查过程
我在k8s集群，重启了一个node宿主机，竟然发现kubelet起不来了！报错如下 这个报错很模糊，怎么排查呢。这样，开两个界面，一个重启kubelet，一个看系统日志(/var/log/message:centos，/va…...
代码练习2
求数组中的第二大值 #include <stdio.h> #include <stdlib.h> int main() {int arr[10]{1,9,2,8,7,3,4,6,5,10};int first, second,i;if (arr[0] > arr[1]) {first arr[0];second arr[1];} else {first arr[1];second arr[0];}for(i 2; i < 10; i) {if…...
2.1.3 第一个工程，点灯！
新建工程 点击菜单栏左上角，新建工程或者选择“文件”-“新建工程”，选择工程类型“标准工程”选择设备类型和编程语言，并指定工程文件名及保存路径，如下图所示： 选择工程类型为“标准工程” 选择主模块机型&#x…...
Qt Designer and Python: Build Your GUI
1.install pyside6 2.pyside6-designer.exe 发送到桌面快捷方式 在Python安装的所在 Scripts 文件夹下找到此文件。如C:\Program Files\Python312\Scripts 3. 打开pyside6-designer 设计UI 4.保存为simple.ui 文件，再转成py文件 用代码执行 pyside6-uic.exe simpl…...
蓝桥杯LQ1044 求完数
题目描述 因子：因子也叫因数，例如3515，那么3和5是15的因子。 同时15115，那么1和15也是15的因子。 1，3，5，15 这四个因子是15的所有因子。 完数：如果一个数等于不含它本身的其他因子之…...
消息队列篇--通信协议篇--TCP和UDP（3次握手和4次挥手，与Socket和webSocket的概念区别等）
1、TCP和UDP概述 TCP（传输控制协议，Transmission Control Protocol）和UDP（用户数据报协议，User Datagram Protocol）都算是最底层的通信协议，它们位于OSI模型的传输层。*传输层的主要职责是确保…...
YOLOv9改进，YOLOv9检测头融合ASFF（自适应空间特征融合），全网首发
摘要 一种新颖的数据驱动的金字塔特征融合策略，称为自适应空间特征融合 （ASFF）。它学习了在空间上过滤冲突信息以抑制不一致的方法，从而提高了特征的尺度不变性，并引入了几乎免费的推理开销。 # 理论介绍 目标检测在处理不同尺度的目标时，常采用特征金字塔结构。然而，…...
Elastic Agent 对 Kafka 的新输出：数据收集和流式传输的无限可能性
作者：来 Elastic Valerio Arvizzigno, Geetha Anne 及 Jeremy Hogan 介绍 Elastic Agent 的新功能：原生输出到 Kafka。借助这一最新功能，Elastic 用户现在可以轻松地将数据路由到 Kafka 集群，从而实现数据流和处理中无与伦比的可扩…...
论文速读|Is Cosine-Similarity of Embeddings Really About Similarity?WWW24
论文地址： https://arxiv.org/abs/2403.05440 https://dl.acm.org/doi/abs/10.1145/3589335.3651526 bib引用： inproceedings{Steck_2024, series{WWW ’24},title{Is Cosine-Similarity of Embeddings Really About Similarity?},url{http://dx.doi.o…...
Midjourney中的强变化、弱变化、局部重绘的本质区别以及其有多逆天的功能
开篇 Midjourney中有3个图片“微调”，它们分别为： 强变化；弱变化；局部重绘； 在Discord里分别都是用命令唤出的，但如今随着AI技术的发达在类似AI可人一类的纯图形化界面中，我们发觉这样的逆天…...
基于 Node.js 的天气查询系统实现(附源码）
项目概述 这是一个基于 Node.js 的全栈应用，前端使用原生 JavaScript 和 CSS，后端使用 Express 框架，通过调用第三方天气 API 实现天气数据的获取和展示。 主要功能 默认显示多个主要城市的天气信息 支持城市天气搜索 响应式布局设计 深色主题界面 优雅的加载动画 技术栈 …...
时序数据库的使用场景
文章目录 前言一、特点二、工作原理三、常见的时序数据库四、使用场景优势总结 前言 时序数据库（Time Series Database, TSDB） 是一种专门设计用于存储和处理时序数据的数据库。时序数据是指按照时间顺序排列的数据，其中每个数据点通常包含时…...
计算机的错误计算（二百二十二）
摘要 利用大模型化简计算 实验表明，虽然结果正确，但是，大模型既绕了弯路，又有数值计算错误。 与前面相同，再利用同一个算式看看另外一个大模型的化简与计算能力。 例1. 化简计算摘要中算式。 下面是与一个大模型的…...
ThinkPHP 8模型与数据的插入、更新、删除
【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...
c语言函数（详解）
目录 前言 一、函数的基本概念和作用 二、函数的声明和定义 三、函数参数的传递方式 四、函数的递归 五、函数指针 总结 前言 本文主要讲解了c语言函数方面的内容 函数的定义和调用函数的返回值和参数函数的作用域和生命周期 函数的声明和定义 函数声明和函数定义的区别函数声…...
为AI聊天工具添加一个知识系统 之70 详细设计 之11 维度运动控制的应用：上下文受控的自然语言
本文要点 要点 前面我们 讨论了 “维度”及其运动控制原理 以及 维度控制 如何在中台微服务架构中撑起了“架构师”角色的一片天。下面我们从 “维度”运动控制的一个典型应用场景：受控的自然语言 ”开始讨论。 拼块文字型风格: 维度运动控制下的受控自然语言…...
ios打包：uuid与udid
ios的uuid与udid混乱的网上信息 新人开发ios，发现uuid和udid在网上有很多帖子里是混淆的，比如百度下，就会说： 在iOS中使用UUID（通用唯一识别码）作为永久签名，通常是指生成一个唯一标识…...
数组，对象解构，forEach方法，filter方法
数组解构 对象结构 遍历数组 forEach方法 筛选数组 filter方法 渲染商品案例 forEach遍历数组，能得到每个数组中的数据，item是对象中的每个元素 将遍历的数组中每个对象 加到 str 中 将 str 字符串中的 8 个 div 添加到 list盒子中 对象解构并渲染 综…...
PSPNet
文章目录 摘要Abstract1. 引言2. 框架2.1 金字塔池化模块2.2 特征提取器的监督2.3 训练细节 3. 创新点和不足3.1 创新点3.2 不足 参考总结 摘要 PSPNet是一个改进了FCN-8s缺点的语义分割模型，它解决了FCN-8s的缺点——分割不够精细以及没有考虑上下文信息。PSPNet的…...
论文阅读的附录（七）：Understanding Diffusion Models: A Unified Perspective（二）：公式46的推导
Understanding Diffusion Models: A Unified Perspective（二）：公式46的推导 文章概括要推导的公式1. 条件概率的定义2. 联合分布的分解2.1 联合分布的定义2.2 为什么可以这样分解？2.3 具体意义 3. 分母的分解：边际化规…...
BGP分解实验·12——配置路由反射器
当一个AS包含多个iBGP对等体时，路由反射器（Route-Reflector）非常有用，因为相对于iBGP路由反射器指定的客户端只需要和路由反射器建立邻居关系，从而降低了iBGP全互连的连接数量。路由反射器（RR）和…...
PCIe 个人理解专栏——【2】LTSSM（Link Training and Status State Machine）
前言： 链路训练和状况状态机LTSSM（Link Training and Status State Machine）是整个链路训练和运行中状态的状态转换逻辑关系图，总共有11个状态。 正文： 包括检测（Detect），轮询&…...
cmake 编译QT之JKQtPlotter-4.0.3
cmake 编译 JKQtPlotter-4.0.3 1.下载源码 源码地址：https://github.com/jkriege2/JKQtPlotter 2.编译 mkdir build cd buildDCMAKE_PREFIX_PATH指编译器目录 D:\ProgramFiles\cmake-3.25.0-rc1-windows-i386\bin\cmake.exe -G "Visual Studio 16 2019&qu…...
【C】memory 详解
<memory.h> 是一个 C 标准库头文件，提供了一组内存管理函数，用于分配、释放和操作动态内存。这些函数主要操作的是未初始化的内存块，是早期 C 编程中常用的内存操作工具。 尽管在现代 C 编程中更推荐使用<cstring>或<memory&…...
Python 爬虫 - Selenium 框架
Python 爬虫 - Selenium 框架 安装安装 Selenium安装 WebDriver 操作浏览器打开浏览器普通方式加载配置方式Headless 方式 设置浏览器窗口最大化显示最小化显示自定义大小 前进后退前进后退 元素定位根据 id 定位根据 name 定位根据 class 定位根据标签名定位使用 CSS 定位使用…...
mysql的having语句
MySQL的HAVING语句用于在GROUP BY子句对数据进行分组后，过滤满足特定条件的组。与WHERE子句不同，HAVING子句可以在过滤条件中使用聚合函数，而WHERE子句则不能。通常，HAVING子句与GROUP BY子句一起使用，以实现对分组数据…...
华为数据之道-读书笔记
内容简介 关键字 数字化生产 已经成为普遍的商业模式，其本质是以数据为处理对象，以ICT平台为生产工具，以软件为载体，以服务为目的的生产过程。 信息与通信技术平台（Information and Communication Technology Platf…...
CDN、源站与边缘网络
什么是“源站” 源服务器 源服务器的目的是处理和响应来自互联网客户端的传入请求。源服务器的概念通常与边缘服务器或缓存服务器的概念结合使用。源服务器的核心是一台运行一个或多个程序的计算机，这些程序旨在侦听和处理传入的客户端请求。源服务器可以承担为网…...