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中，标签用于定义网页内容的结构和样式。标签通常分为两类：一般标签（也称为成对标签或开放闭合标签）和自闭合标签（也称为空标签或自结束标签）。 以下是这两类标签的详细说明： 一、一般标…...
Eureka 服务注册和服务发现的使用
1. 父子工程的搭建 首先创建一个 Maven 项目，删除 src ，只保留 pom.xml 然后来进行 pom.xml 的相关配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xs…...
白嫖DeepSeek：一分钟完成本地部署AI
1. 必备软件 LM-Studio 大模型客户端DeepSeek-R1 模型文件 LM-Studio 是一个支持众多流行模型的AI客户端，DeepSeek是最新流行的堪比GPT-o1的开源AI大模型。 2. 下载软件和模型文件 2.1 下载LM-Studio 官方网址：https://lmstudio.ai 打开官网&#x…...
《Origin画百图》之同心环图
《Origin画百图》第四集——同心环图 入门操作可查看合集中的《30秒，带你入门Origin》 具体操作： 1.数据准备：需要X和Y两列数据 2. 选择菜单 绘图 > 条形图，饼图，面积图: 同心圆弧图 3. 这是绘制的基础图形&…...
蓝牙技术在物联网中的应用有哪些
蓝牙技术凭借低功耗、低成本和易于部署的特性，在物联网领域广泛应用，推动了智能家居、工业、医疗、农业等多领域发展。 智能家居：在智能家居系统里，蓝牙技术连接各类设备，像智能门锁、智能灯泡、智能插座、智能窗帘等。…...
快速提升网站收录：避免常见SEO误区
本文转自：百万收录网 原文链接：https://www.baiwanshoulu.com/26.html 在快速提升网站收录的过程中，避免常见的SEO误区是至关重要的。以下是一些常见的SEO误区及相应的避免策略： 一、关键词堆砌误区 误区描述： 很多…...
简易计算器（c++ 实现)
前言 本文将用 c 实现一个终端计算器： 能进行加减乘除、取余乘方运算读取命令行输入，输出计算结果当输入表达式存在语法错误时，报告错误，但程序应能继续运行当输出 ‘q’ 时，退出计算器 【简单演示】 【源码位置】…...
再谈多组学（multi-omics）
再谈多组学（multi-omics） 李升伟 李昱均 概念 多组学（Multi-Omics） 是指结合多种“组学”技术，从不同层次和维度全面解析生物系统的复杂性。传统的单一组学研究通常关注基因组、转录组、蛋白质组、代谢组等某一特定…...
自动化运维的未来：从脚本到AIOps的演进
点击进入IT管理资料库 一、自动化运维的起源：脚本时代 （一）脚本在运维中的应用场景 在自动化运维的发展历程中，脚本扮演着至关重要的角色，它作为最初的操作入口，广泛应用于诸多日常运维工作场景里。 在系统…...
线程池以及在QT中的接口使用
文章目录 前言线程池架构组成**一、任务队列（Task Queue）****二、工作线程组（Worker Threads）****三、管理者线程（Manager Thread）** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…...
联想拯救者R720笔记本外接显示屏方法，显示屏是2K屏27英寸
晚上23点10分前下单，第二天上午显示屏送到，检查外包装没拆封过。这个屏幕左下方有几个按键，按一按就开屏幕、按一按就关闭屏幕，按一按方便节省时间，也支持阅读等模式。 显示屏是 ：AOC 27英寸 2K高清 100Hz…...
C++ deque（1）
1.deque介绍 deque的扩容不像vector那样麻烦 直接新开一个buffer 不用重新开空间再把数据全部移过去 deque本质上是一个指针数组和vector<vector>不一样，vector<vector>本质上是一个vector对象数组！并且vector<vector>的buffer是不一…...
深度剖析 PyTorch框架：从基础概念到高级应用的深度学习之旅！
目录 一、引言 二、PyTorch 简介 （一）诞生背景与发展历程 （二）核心特点 三、PyTorch 基础概念 （一）张量（Tensor）：数据的基石 （二）自动微分&…...
【Pandas】pandas Series cumsum
Pandas2.2 Series Computations descriptive stats 方法描述Series.abs()用于计算 Series 中每个元素的绝对值Series.all()用于检查 Series 中的所有元素是否都为 True 或非零值（对于数值型数据）Series.any()用于检查 Series 中是否至少有一个元素为 T…...
EtherCAT主站IGH-- 23 -- IGH之fsm_slave.h/c文件解析
EtherCAT主站IGH-- 23 -- IGH之fsm_slave.h/c文件解析 0 预览一 该文件功能`fsm_slave.c` 文件功能函数预览二 函数功能介绍`fsm_slave.c` 中主要函数的作用1. `ec_fsm_slave_init`2. `ec_fsm_slave_clear`3. `ec_fsm_slave_exec`4. `ec_fsm_slave_set_ready`5. `ec_fsm_slave_…...
多头潜在注意力（MLA）：让大模型“轻装上阵”的技术革新——从DeepSeek看下一代语言模型的高效之路
多头潜在注意力（MLA）：让大模型“轻装上阵”的技术革新 ——从DeepSeek看下一代语言模型的高效之路 大模型的“内存焦虑” 当ChatGPT等大语言模型（LLM）惊艳世界时，很少有人意识到它们背后隐藏的“内存焦虑”…...
Brightness Controller-源码记录
Brightness Controller 亮度控制 一、概述二、ddcutil 与 xrandr1. ddcutil2. xrandr 三、部分代码解析1. icons2. ui3. utilinit.py 一、概述 项目：https://github.com/SunStorm2018/Brightness.git 原理：Brightness Controlle 是我在 Ubuntu 发现上调…...
Java8_StreamAPI
Stream 1.创建流 1.1 集合创建流 List<String> list List.of("a", "b", "c"); Stream<String> stream list.stream(); stream.forEach(System.out::println);1.2 数组创建流 String[] array {"a","b",&qu…...
【架构面试】二、消息队列和MySQL和Redis
MQ MQ消息中间件 问题引出与MQ作用 常见面试问题：面试官常针对项目中使用MQ技术的候选人提问，如如何确保消息不丢失，该问题可考察候选人技术能力。MQ应用场景及作用：以京东系统下单扣减京豆为例，MQ用于交易服和京豆服…...
OpenEuler学习笔记（十六）：搭建postgresql高可用数据库环境
以下是在OpenEuler系统上搭建PostgreSQL高可用数据环境的一般步骤，通常可以使用流复制（Streaming Replication）或基于Patroni等工具来实现高可用，以下以流复制为例： 安装PostgreSQL 配置软件源：可以使用O…...
Vue.js路由管理与自定义指令深度剖析
Vue.js 是一个强大的前端框架，提供了丰富的功能来帮助开发者构建复杂的单页应用（SPA）。本文将详细介绍 Vue.js 中的自定义指令和路由管理及导航守卫。通过这些功能，你可以更好地控制视图行为和应用导航，从而提升用户体验和开发效率。 1 自定义指令详解 1.1 什么是自定义…...
skynet 源码阅读 -- 核心概念服务 skynet_context
本文从 Skynet 源码层面深入解读 服务（Service） 的创建流程。从最基础的概念出发，逐步深入 skynet_context_new 函数、相关数据结构（skynet_context, skynet_module, message_queue 等），并通过流程图、结构…...
论文阅读(十一)：基因-表型关联贝叶斯网络模型的评分、搜索和评估
1.论文链接：Scoring, Searching and Evaluating Bayesian Network Models of Gene-phenotype Association 摘要： 全基因组关联研究（GWAS）的到来为识别常见疾病的遗传变异（单核苷酸多态性（SNP）&…...
企业微信远程一直显示正在加载
企业微信远程一直显示正在加载 1.问题描述2.问题解决 系统：Win10 1.问题描述 某天使用企业微信给同事进行远程协助的时候，发现一直卡在正在加载的页面，如下图所示 2.问题解决 经过一番查找资料后，我发现可能是2个地方出了问题…...
人工智能 - 1
深度强化学习（Deep Reinforcement Learning） 图神经网络（Graph Neural Networks, GNNs） Transformer 一种深度学习模型 大语言模型（Large Language Models, LLMs） 人工智能 • Marvin Minsky 将其定义…...
留学生scratch计算机haskell函数ocaml编程ruby语言prolog作业VB
您列出了一系列编程语言和技术，这些可能是您在留学期间需要学习或完成作业的内容。以下是对每个项目的简要说明和它们可能涉及的领域或用途： Scratch： Scratch是一种图形化编程语言，专为儿童和初学者设计，用于教授编程…...
LeetCode题练习与总结：最长和谐子序列--594
一、题目描述 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 。 给你一个整数数组 nums ，请你在所有可能的 子序列 中找到最长的和谐子序列的长度。 数组的 子序列 是一个由数组派生出来的序列，它可以通过删除一些元素或不删除元素…...
Linux_线程同步生产者消费者模型
同步的相关概念 同步：在保证数据安全的前提下，让线程能够按照某种特定的顺序访问临界资源，从而有效避免饥饿问题，叫做同步竞态条件：因为时序问题，而导致程序异常，我们称之为竞态条件。 同步的…...
Github 2025-01-30 Go开源项目日报 Top10
根据Github Trendings的统计，今日(2025-01-30统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Go项目10Ollama: 本地大型语言模型设置与运行 创建周期：248 天开发语言：Go协议类型：MIT LicenseStar数量：42421 个Fork数量：2724 次关注人…...
)
FortiOS 存在身份验证绕过导致命令执行漏洞(CVE-2024-55591)
免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...