当前位置： 首页 > news >正文

HTML一般标签和自闭合标签介绍

news 2025/9/11 6:20:02

在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中&#xff0c;标签用于定义网页内容的结构和样式。标签通常分为两类&#xff1a;一般标签&#xff08;也称为成对标签或开放闭合标签&#xff09;和自闭合标签&#xff08;也称为空标签或自结束标签&#xff09;。 以下是这两类标签的详细说明&#xff1a; 一、一般标…...

编程日记 2025/1/26 7:25:41

怎么用u盘怎么重装系统_用u盘重装系统详细图文教程【新手教程】

怎么用u盘怎么重装系统&#xff1f;如果需要重装操作系统的话&#xff0c;以往采用光盘使用的比较多&#xff0c;随着技术的进步&#xff0c;用u盘制作一个启动盘安装系统比较方便&#xff0c;只需要用u盘制作好pe启动盘就可以帮助别人安装系统了&#xff0c;那么用u盘怎么重装…...

编程日记 2025/1/26 7:21:31

记录一次k8s起不来的排查过程

我在k8s集群&#xff0c;重启了一个node宿主机&#xff0c;竟然发现kubelet起不来了&#xff01;报错如下 这个报错很模糊&#xff0c;怎么排查呢。这样&#xff0c;开两个界面&#xff0c;一个重启kubelet&#xff0c;一个看系统日志(/var/log/message:centos&#xff0c;/va…...

编程日记 2025/1/26 7:18:28

代码练习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…...

编程日记 2025/1/26 7:17:25

2.1.3 第一个工程，点灯！

新建工程 点击菜单栏左上角&#xff0c;新建工程或者选择“文件”-“新建工程”&#xff0c;选择工程类型“标准工程”选择设备类型和编程语言&#xff0c;并指定工程文件名及保存路径&#xff0c;如下图所示&#xff1a; 选择工程类型为“标准工程” 选择主模块机型&#x…...

编程日记 2025/1/26 7:12:19

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 文件&#xff0c;再转成py文件 用代码执行 pyside6-uic.exe simpl…...

编程日记 2025/1/26 7:11:18

蓝桥杯LQ1044 求完数

题目描述 因子&#xff1a;因子也叫因数&#xff0c;例如3515&#xff0c;那么3和5是15的因子。 同时15115&#xff0c;那么1和15也是15的因子。 1&#xff0c;3&#xff0c;5&#xff0c;15 这四个因子是15的所有因子。 完数&#xff1a;如果一个数等于不含它本身的其他因子之…...

编程日记 2025/1/26 7:09:16

消息队列篇--通信协议篇--TCP和UDP（3次握手和4次挥手，与Socket和webSocket的概念区别等）

1、TCP和UDP概述 TCP&#xff08;传输控制协议&#xff0c;Transmission Control Protocol&#xff09;和UDP&#xff08;用户数据报协议&#xff0c;User Datagram Protocol&#xff09;都算是最底层的通信协议&#xff0c;它们位于OSI模型的传输层。*传输层的主要职责是确保…...

编程日记 2025/1/26 7:06:13

YOLOv9改进，YOLOv9检测头融合ASFF（自适应空间特征融合），全网首发

摘要 一种新颖的数据驱动的金字塔特征融合策略，称为自适应空间特征融合 （ASFF）。它学习了在空间上过滤冲突信息以抑制不一致的方法，从而提高了特征的尺度不变性，并引入了几乎免费的推理开销。 # 理论介绍 目标检测在处理不同尺度的目标时，常采用特征金字塔结构。然而，…...

编程日记 2025/1/26 6:59:05

Elastic Agent 对 Kafka 的新输出：数据收集和流式传输的无限可能性

作者&#xff1a;来 Elastic Valerio Arvizzigno, Geetha Anne 及 Jeremy Hogan 介绍 Elastic Agent 的新功能&#xff1a;原生输出到 Kafka。借助这一最新功能&#xff0c;Elastic 用户现在可以轻松地将数据路由到 Kafka 集群&#xff0c;从而实现数据流和处理中无与伦比的可扩…...

编程日记 2025/1/26 6:54:59

论文速读|Is Cosine-Similarity of Embeddings Really About Similarity?WWW24

论文地址&#xff1a; https://arxiv.org/abs/2403.05440 https://dl.acm.org/doi/abs/10.1145/3589335.3651526 bib引用&#xff1a; inproceedings{Steck_2024, series{WWW ’24},title{Is Cosine-Similarity of Embeddings Really About Similarity?},url{http://dx.doi.o…...

编程日记 2025/1/26 6:51:54

Midjourney中的强变化、弱变化、局部重绘的本质区别以及其有多逆天的功能

开篇 Midjourney中有3个图片“微调”&#xff0c;它们分别为&#xff1a; 强变化&#xff1b;弱变化&#xff1b;局部重绘&#xff1b; 在Discord里分别都是用命令唤出的&#xff0c;但如今随着AI技术的发达在类似AI可人一类的纯图形化界面中&#xff0c;我们发觉这样的逆天…...

编程日记 2025/1/26 6:47:50

基于 Node.js 的天气查询系统实现(附源码）

项目概述 这是一个基于 Node.js 的全栈应用，前端使用原生 JavaScript 和 CSS，后端使用 Express 框架，通过调用第三方天气 API 实现天气数据的获取和展示。 主要功能 默认显示多个主要城市的天气信息 支持城市天气搜索 响应式布局设计 深色主题界面 优雅的加载动画 技术栈 …...

编程日记 2025/1/26 6:46:48

时序数据库的使用场景

文章目录 前言一、特点二、工作原理三、常见的时序数据库四、使用场景优势总结 前言 时序数据库&#xff08;Time Series Database, TSDB&#xff09; 是一种专门设计用于存储和处理时序数据的数据库。时序数据是指按照时间顺序排列的数据&#xff0c;其中每个数据点通常包含时…...

编程日记 2025/1/26 6:43:41

计算机的错误计算（二百二十二）

摘要 利用大模型化简计算 实验表明&#xff0c;虽然结果正确&#xff0c;但是&#xff0c;大模型既绕了弯路&#xff0c;又有数值计算错误。 与前面相同&#xff0c;再利用同一个算式看看另外一个大模型的化简与计算能力。 例1. 化简计算摘要中算式。 下面是与一个大模型的…...

编程日记 2025/1/26 6:42:40

ThinkPHP 8模型与数据的插入、更新、删除

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...

编程日记 2025/1/26 6:40:38

c语言函数（详解）

目录 前言 一、函数的基本概念和作用 二、函数的声明和定义 三、函数参数的传递方式 四、函数的递归 五、函数指针 总结 前言 本文主要讲解了c语言函数方面的内容 函数的定义和调用函数的返回值和参数函数的作用域和生命周期 函数的声明和定义 函数声明和函数定义的区别函数声…...

编程日记 2025/1/26 6:39:35

为AI聊天工具添加一个知识系统 之70 详细设计 之11 维度运动控制的应用：上下文受控的自然语言

本文要点 要点 前面我们 讨论了 “维度”及其运动控制原理 以及 维度控制 如何在中台微服务架构中撑起了“架构师”角色的一片天。下面我们从 “维度”运动控制的一个典型应用场景&#xff1a;受控的自然语言 ”开始讨论。 拼块文字型风格: 维度运动控制下的受控自然语言…...

编程日记 2025/1/26 6:38:34

ios打包：uuid与udid

ios的uuid与udid混乱的网上信息 新人开发ios&#xff0c;发现uuid和udid在网上有很多帖子里是混淆的&#xff0c;比如百度下&#xff0c;就会说&#xff1a; 在iOS中使用UUID&#xff08;通用唯一识别码&#xff09;作为永久签名&#xff0c;通常是指生成一个唯一标识&#xf…...

编程日记 2025/1/26 6:34:31

数组，对象解构，forEach方法，filter方法

数组解构 对象结构 遍历数组 forEach方法 筛选数组 filter方法 渲染商品案例 forEach遍历数组&#xff0c;能得到每个数组中的数据&#xff0c;item是对象中的每个元素 将遍历的数组中每个对象 加到 str 中 将 str 字符串中的 8 个 div 添加到 list盒子中 对象解构并渲染 综…...

编程日记 2025/1/26 6:32:29

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/7/12 22:48:51

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/8/23 21:44:50

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/9/7 8:51:02

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/9/9 10:10:46

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/9/5 14:54:22

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...

编程新知 2025/8/21 7:10:37

虚拟机网络不通的问题（这里以win10的问题为主，模式NAT）

当我们网关配置好了&#xff0c;DNS也配置好了&#xff0c;最后在虚拟机里还是无法访问百度的网址。 第一种情况&#xff1a; 我们先考虑一下&#xff0c;网关的IP是否和虚拟机编辑器里的IP一样不&#xff0c;如果不一样需要更改一下&#xff0c;因为我们访问百度需要从物理机…...

编程新知 2025/9/4 2:39:52

Python爬虫（四）：PyQuery 框架

PyQuery 框架详解与对比 BeautifulSoup 第一部分&#xff1a;PyQuery 框架介绍 1. PyQuery 是什么&#xff1f; PyQuery 是一个 Python 的 HTML/XML 解析库&#xff0c;它采用了 jQuery 的语法风格&#xff0c;让开发者能够用类似前端 jQuery 的方式处理文档解析。它的核心特…...

编程新知 2025/8/28 1:50:49