HTML标签可分为容器标签和文本标签

在HTML（超文本标记语言）中，标签是用于描述网页内容的基石。HTML标签主要分为两大类：容器标签和文本标签。这两种标签在网页设计和布局中扮演着不同的角色，下面将详细介绍它们的分类、用途以及如何正确使用。

容器标签

容器标签，顾名思义，是用来包裹其他内容的标签。它们通常包含一个开始标签和一个结束标签，并且可以包含其他标签或文本内容。以下是一些常见的容器标签及其用途：

<div> 标签

• 用途：<div> 标签是一个通用的容器，用于组织网页上的内容，如文本、图片、其他<div>标签等。
• 示例：

  
  <div class="container">
  <h1>标题</h1>
  <p>这是一段文本。</p>
  <img src="image.jpg" alt="图片描述">
  </div>
  

<section> 标签

• 用途：<section> 标签用于定义文档中的一个章节，通常包含标题和内容。
• 示例：

  
  <section>
  <h2>章节标题</h2>
  <p>这是章节内容。</p>
  </section>
  

<article> 标签

• 用途：<article> 标签用于表示独立的内容，如博客文章、新闻故事等。
• 示例：

  
  <article>
  <h2>文章标题</h2>
  <p>这是文章内容。</p>
  </article>
  

<header> 标签

• 用途：<header> 标签用于定义网页或页面区域的页眉，通常包含标题、导航链接等。
• 示例：

  
  <header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  </header>
  

<footer> 标签

• 用途：<footer> 标签用于定义网页或页面区域的页脚，通常包含版权信息、联系信息等。
• 示例：

  
  <footer>
  <p>版权所有 &copy; 2023</p>
  </footer>
  

文本标签

文本标签主要用于格式化网页上的文本内容，如标题、段落、列表等。以下是一些常见的文本标签及其用途：

<h1> 到 <h6> 标签

• 用途：这些标签用于定义标题，其中<h1>是最高级别的标题，<h6>是最低级别的标题。
• 示例：

  
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  

<p> 标签

• 用途：<p> 标签用于定义段落。
• 示例：

  
  <p>这是一段文本。</p>
  

<ul> 和 <ol> 标签

• 用途：<ul> 标签用于定义无序列表，而<ol> 标签用于定义有序列表。
• 示例：

  
  <ul>
  <li>列表项1</li>
  <li>列表项2</li>
  </ul>
  <ol>
  <li>列表项1</li>
  <li>列表项2</li>
  </ol>
  

<em> 和 <strong> 标签

• 用途：<em> 标签用于定义强调文本，而<strong> 标签用于定义加粗文本。
• 示例：

  
  <em>这是强调文本</em>
  <strong>这是加粗文本</strong>
  

<a> 标签

• 用途：<a> 标签用于定义超链接，用于链接到其他网页或页面内的特定位置。
• 示例：

  
  <a href="https://www.example.com">访问示例网站</a>
  

通过合理使用容器标签和文本标签，我们可以构建出结构清晰、内容丰富的网页。在实际开发过程中，我们需要根据具体需求选择合适的标签，以达到最佳的用户体验。