哪些 HTML 标签是自闭合的?
自闭合的 HTML 标签不需要额外的闭合标签。它们会在起始标签内以斜杠结尾。这些标签用于插入空项或单独内容。例如，br> 元素用于换行，img> 元素用于图像，input> 元素用于表单输入字段。自闭合标签可避免浏览器查找闭合标签，从而使代码更简洁，渲染速度更快。请记住在最后一个尖括号(tag />)前添加斜杠。维护 HTML 代码的完整性并确保与各种浏览器和设备的兼容性取决于自闭合标签的正确使用。
使用的方法
换行符 <br>
水平线 <hr>
表单输入字段 <input>
表格列样式 <col>
相对 URL 的基准 URL <base>
元数据 <meta>
外部源链接 <link>
图像映射区域 <area>
行换行
在 HTML 中，自闭合的 br> 标签用于在文本段落或其他信息之间插入换行符。插入后，要求下一行文本为空白。垂直分隔组件或在行间添加空格是常用的格式化技巧。
示例
<p>这是第一行。<br>这是第二行。</p>
水平线
HTML <hr> 标签指定水平线。在网页上，它会添加一条水平线或分隔符。它的作用是清晰地区分页面上的各个部分或元素，并在视觉上分割内容。
示例
<p>This is some content above the horizontal rule.</p> <hr> <p>This is some content below the horizontal rule.</p>
表单输入字段
HTML 表单输入字段(用 input> 标签表示)在创建交互式 Web 表单中起着至关重要的作用，它使用户能够更轻松地输入数据，例如文本、数字或选项。它们支持多种输入形式，例如文本、复选框和单选按钮，并附带"type"等属性定义。因此，表单可以进行自定义，以实现精确的数据捕获并增强用户交互。例如，单选按钮仅显示一个选项，复选框允许多个选择，而文本输入框则收集姓名或消息。这种适应性可以提升用户体验，增强数据收集，并鼓励动态网站参与，从而打造更具吸引力和用户友好的数字环境。开发人员巧妙地运用这些技术来活跃在线环境，吸引用户积极参与并实现无缝的 Web 交互。
示例
<!DOCTYPE html>
<html>
<head>
<title>Form Input Fields Example</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
表格列样式
要在 HTML 中格式化表格列，请使用 col> 标签。它允许您将 CSS 样式应用于表格的特定列，从而更轻松地自定义特定列的外观。此标签通过增强视觉呈现来改善表格的整体设计。
示例
<!DOCTYPE html>
<html>
<head>
<title>Table Column Styling</title>
<style>
col:first-child {
background-color: lightblue;
}
col:nth-child(2) {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1 Data</td>
<td>Column 2 Data</td>
</tr>
</table>
</body>
</html>
相对 URL 的基准 URL
文档中相对 URL 的基准 URL 通过 HTML base> 标签指定。它有助于定义所有引用资源和相对链接解析到的默认 URL。设置基准 URL 有助于保持文档 URL 简短明了，使代码更易于阅读和管理。在管理同一网站上多个目录或多个页面中的资源时，此标签非常有用。为了确保在遇到相对 URL 时网页内导航和资源加载正常，浏览器会将其与基准 URL 结合起来以确定绝对 URL。
元数据
HTML 使用 meta> 元数据标签提供有关文档的详细信息，包括作者、字符编码和页面描述。它有助于浏览器、搜索引擎和其他工具准确理解和显示网页，从而提升可访问性和 SEO 性能。
外部资源链接
要将外部文件(例如样式表或图标)添加到网站，网页设计师必须使用 HTML link> 标签。此链接可以增强网站的外观和操作体验。该标签通过指示文件位置，在主要内容和链接资源之间建立关键连接，从而优化网页设计并提升整体用户体验。这种方法可以高效管理资源，因为多个网页可以引用同一个外部文件，从而提高整个网站的一致性。最终，正确使用 <link> 标签有助于减少加载时间并提升网站整体性能，从而实现无缝的用户体验。
图像映射区域
HTML 中的"area"标签使设计师能够指定图像内部的可点击部分，从而生成图像映射。这些区域可以是矩形、圆形或多边形，每个区域都可以包含不同的超链接或触发特定的网页行为。利用这一强大的功能，网页上可以实现交互式动态功能，例如可点击的地图热点或导航符号。用户点击这些指定位置时，会被引导至不同的 URL 或执行特定操作，从而提升用户体验，并营造更具吸引力和互动性的环境。对于创建交互式信息图表、虚拟导览和复杂的导航系统，图像地图尤其有用。
结论
总而言之，自闭合 HTML 元素对于构建高效且组织良好的网页至关重要。开发者和用户都能从使用"br"、"img"和"input"等标签中获益，这些标签可以确保更简洁的代码和更快的渲染速度。基础>标签还可以通过为所有相对链接和资源提供单一基础 URL，从而更轻松地管理页面内的相对 URL。正确理解和使用自闭合标签可以提高代码的可读性、可维护性以及设备和浏览器的兼容性。采用这些推荐的做法，可以打造用户友好、高效的网站，从而提升整体在线体验。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
