HTML 元素

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。HTML 文档由 HTML 元素组成，这些元素告诉浏览器如何显示网页上的内容。HTML 元素通常包括开始标签、结束标签以及两者之间的内容。

HTML元素的结构

一个基本的HTML元素通常具有以下结构：

<标签名 属性名="属性值">内容</标签名>

标签名：定义了元素的类型，比如 <p> 定义段落，<a> 定义链接。
属性：提供关于元素的额外信息。例如，在 <a> 标签中，href 属性指定了链接的目标URL。
内容：位于开始标签和结束标签之间，可以是文本或其他HTML元素。

HTML空元素

在HTML中，空元素（也称为空标签或自闭合标签）指的是那些不需要闭合标签的元素。这些元素通常用于插入一些独立的内容，如图像、换行符或水平线等，并且它们自身并不包含内容。根据HTML5标准，下面是一些常见的空元素：

<img> 用来显示图片。例如：<img src="example.jpg" alt="一个例子图片">
<br> 插入一个简单的换行。例如：文本前<br>文本后
<hr> 创建一条水平线。例如：<p>这是上面的段落</p><hr><p>这是下面的段落</p>
<input> 用于表单输入。例如：<input type="text" name="username" placeholder="请输入用户名">
<link> 定义文档与外部资源的关系，最常见的是用来链接样式表。例如：<link rel="stylesheet" href="styles.css">
<meta> 提供关于HTML文档的元数据。例如：<meta charset="UTF-8">
<area> 在<map>内定义图像映射中的区域。例如：

  <map name="workmap">
    <area shape="rect" coords="34,44,270,350" href="image.html" alt="计算机图片">
  </map>

<base> 指定文档中所有相对URL的基础URL。例如：<base href="https://www.example.com/images/">
<col> 为表格中的列指定属性。例如：

  <table border="1">
    <colgroup>
      <col style="background-color: #f0f0f0;">
      <col span="2" style="background-color: #cccccc;">
    </colgroup>
    <tr>
      <th>头部1</th>
      <th>头部2</th>
      <th>头部3</th>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </table>

<embed> 用来嵌入外部应用或交互式内容。例如：<embed src="movie.swf" width="400" height="300">
<param> 为<object>定义参数。例如：

  <object data="horse.wav">
    <param name="autoplay" value="true">
  </object>

<source> 为多媒体元素（如<audio>和<video>）定义媒体资源。例如：

  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
  </video>

<track> 为媒体元素（如<audio>和<video>）定义文本轨道。例如：

  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  </video>

<wbr> 定义了一个可选的断字机会。例如：这是一个很长的词<wbr>它可以在需要时被断开

在HTML5中，虽然这些元素理论上可以自闭合（即，在标签末尾加斜杠，如<img />），但推荐的做法是简单地关闭标签而不使用斜杠（如<img>）。这样做是为了保持简洁，并且符合HTML5规范。不过，在某些情况下，比如当你的代码需要兼容XHTML的时候，你可能会看到自闭合的形式。

常见的HTML元素

结构化元素

<html>: 定义整个HTML文档。
<head>: 包含文档的元数据，如字符集声明、样式表链接等。
<body>: 包含文档的所有可见内容。
<header>: 通常用于定义页面的头部。
<footer>: 通常用于定义页面的底部。
<article>: 代表文档、页面或应用程序中独立且完整的内容。
<section>: 定义文档中的节。
<nav>: 用于定义导航链接的部分。
<main>: 表示文档的主要内容。
<aside>: 定义与页面主要内容相关但可以独立存在的内容。

内联文本语义

<a>: 定义一个超链接。
<strong>: 表示重要性或紧急性的文本。
<em>: 表示强调。
<small>: 定义小号文本。
<mark>: 定义标记或高亮文本。
<del>: 定义被删除的文本。
<ins>: 定义插入到文档中的文本。
<sub>: 定义下标文本。
<sup>: 定义上标文本。

图像和多媒体

<img>: 定义图像。
<audio>: 定义音频内容。
<video>: 定义视频内容。
<source>: 为多媒体元素定义媒体资源。
<track>: 为多媒体元素（如音频和视频）规定外部文本轨道。

列表

<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表项。
<dl>: 定义描述列表。
<dt>: 定义术语/名称。
<dd>: 描述术语/名称。

表格

<table>: 定义表格。
<caption>: 定义表格标题。
<tr>: 定义表格行。
<th>: 定义表格中的表头单元格。
<td>: 定义表格中的标准单元格。
<thead>: 定义表格的页眉。
<tbody>: 定义表格主体。
<tfoot>: 定义表格的页脚。

表单

<form>: 定义一个HTML表单以供用户输入。
<input>: 定义一个输入控件。
<textarea>: 定义多行输入控件。
<button>: 定义一个点击按钮。
<select>: 定义一个下拉列表。
<option>: 定义下拉列表中的选项。
<label>: 定义表单控件的标签。
<fieldset>: 将表单内的相关元素组合在一起。
<legend>: 为<fieldset>定义标题。

其他

<div>: 定义文档中的分区或节。
<span>: 定义文档中的内联容器。
<meta>: 定义关于HTML文档的元信息。
<link>: 定义文档与外部资源的关系。
<script>: 定义客户端脚本。
<style>: 定义文档的样式信息。

每个HTML元素都有其特定的作用，通过合理地组织和使用这些元素，我们可以构建出结构清晰、语义丰富的网页。HTML5引入了许多新的语义元素，进一步增强了网页内容的表现力。随着Web技术的发展，HTML标准也在不断演进，以适应更复杂的应用场景。