HTML 哪些标签是自闭合的

自闭合的HTML标签不需要额外的关闭标签。相反，它们在开标签内部用斜杠结束自身。这些标签用于插入空或独立内容的项目。例如换行元素<br>，图像元素img>和表单输入字段元素<input>。自闭合标签可以防止浏览器寻找关闭标签，从而使代码更清洁、渲染更快。请记住在最后的尖括号之前添加斜杠 (<tag />)。正确使用自闭合标签有助于保持HTML代码完整性，并确保与各种浏览器和设备的兼容性。

使用的方法

换行<br>
水平线<hr>
表单输入字段<input>
表列样式<col>
相对URL的基本<URLbase>
元数据<meta>
外部源链接<link>
图像映射区域<area>

换行

在HTML中，自闭合的<br>标签用于在文本段落或其他信息之间插入换行。插入时，要求下一行文本为空白行。垂直分隔组件或在行之间添加空白是常用的格式化技术。

示例

<p>This is the first line.<br>This is the second line.</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表单时起着关键作用，使用户更容易输入文本、数字或选项等数据。它们支持许多输入形式，如文本、复选框和单选按钮，并伴有“类型”等属性定义。因此，表单可以根据需要定制，以精确地捕获数据并增加用户互动。例如，单选按钮只显示一个选项，复选框允许多个选择，文本输入收集姓名或消息。这种适应性改善了用户体验，提升了数据收集，并鼓励动态网站互动，从而营造出更具吸引力和用户友好性的数字环境。开发人员巧妙地运用这些技术来活跃在线环境，引发用户积极参与和无缝的网络互动。

示例

<!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的basegt标签来指定的。它有助于定义所有引用资源和相对链接都解析到的默认URL。设置基本URL将有助于保持文档的URL简短和简单，使代码更易于阅读和管理。当在多个目录中管理资源或同一网站上的多个页面时，此标签非常有用。为了确保在遇到相对URL时在网页中正确导航和加载资源，浏览器将其与基本URL结合以确定绝对URL。

元数据

HTML使用meta标签来提供有关文档的详细信息，包括作者、字符编码和页面描述。它有助于浏览器、搜索引擎和其他工具准确地理解和显示网页，提高可访问性和SEO性能。

外部资源链接

为了将外部文件（如样式表或图标）添加到其网站中，网页设计师必须使用HTML的link标签。这个链接增强了网站的外观和功能。该标签通过指示文件的位置，在主要内容和链接资源之间创建了一个重要的连接，优化了网页设计并提高了用户体验。这种方法使得资源的管理更加高效，因为多个网页可以引用相同的外部文件，从而提高了整个网站的一致性。最终，正确使用link标签有助于无缝的用户体验，减少加载时间并提高整体网站性能。

图像映射区域

HTML中的”area”标签使设计师可以在图像内指定可点击的区域，从而创建图像映射。这些区域可以是矩形、圆形或多边形的形式，每个区域可以包含一个不同的超链接或引起特定的网页行为。使用这个强大的功能，可以实现网页上的交互和动态特性，比如可点击的地图热点或导航符号。当用户点击这些定义的位置时，会跳转到不同的URL或执行特定的动作，从而提高用户体验，创建一个更具吸引力和互动性的环境。图像映射对于创建交互式信息图表、虚拟导览和复杂的导航系统特别有帮助。

结论

总之，自闭合的HTML元素对于构建有效和组织良好的网页非常重要。开发人员和用户都从使用”br”、”img”和”input”等标签中受益，这些标签确保了更简单的代码和更快的渲染。base标签还通过为页面中的所有相对链接和资源提供一个单独的基本URL，更容易管理相对URL。当正确理解和使用时，自闭合标签增加了代码的可读性、可维护性，以及设备和浏览器的兼容性。采用这些推荐的做法将产生用户友好、高效的网站，提升整个在线体验。