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中不是严格意义上的自闭合标签（因为它可以包含属性），但在实际使用中，它通常不包裹内容，因此也常被视作自闭合标签的一种。