语义化标签 - 技术栈

语义化标签概述

语义化标签是指通过HTML标签的名称和结构来传达内容的含义，使代码更具可读性和可维护性。以下是一些常见的语义化标签及其用法示例。

结构类标签

<header>

用于表示页面或某个部分的页眉，通常包含导航、标题或LOGO。

html 复制代码

<header>
  <h1>网站标题</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>

<nav>

表示导航栏，通常包含一组链接。

html 复制代码

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
  </ul>
</nav>

<main>

定义页面的主要内容，每个页面应仅有一个。

html 复制代码

<main>
  <h2>欢迎访问</h2>
  <p>这里是网站的主要内容。</p>
</main>

<article>

表示独立的内容块，如博客文章或新闻。

html 复制代码

<article>
  <h3>文章标题</h3>
  <p>文章内容...</p>
</article>

<section>

用于对内容进行分组，通常带有标题。

html 复制代码

<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>

<aside>

表示与页面主要内容相关但不直接相关的附加内容，如侧边栏。

html 复制代码

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">链接1</a></li>
  </ul>
</aside>

<footer>

表示页面或某个部分的页脚，通常包含版权信息或联系方式。

html 复制代码

<footer>
  <p>© 2023 公司名称</p>
</footer>

内容类标签

<figure> 和 <figcaption>

用于包裹图片、图表等媒体内容及其说明文字。

html 复制代码

<figure>
  <img src="image.jpg" alt="示例图片">
  <figcaption>图片说明文字</figcaption>
</figure>

<time>

表示日期或时间，可通过datetime属性提供机器可读格式。

html 复制代码

<p>发布时间：<time datetime="2023-10-01">2023年10月1日</time></p>

<mark>

突出显示文本中的某部分内容。

html 复制代码

<p>这是一段包含<mark>高亮</mark>的文字。</p>

<blockquote> 和 <cite>

用于引用内容及其来源。

html 复制代码

<blockquote>
  <p>被引用的文本内容。</p>
  <cite>来源名称</cite>
</blockquote>

<address>

表示联系信息。

html 复制代码

<address>
  作者：<a href="mailto:example@email.com">联系邮箱</a>
</address>

<progress>

显示任务进度。

html 复制代码

<progress value="70" max="100">70%</progress>

<meter>

表示标量测量值，如磁盘使用量。

html 复制代码

<meter value="6" min="0" max="10">6 out of 10</meter>

文本语义标签

<strong>

表示重要性更高的文本，通常加粗显示。

html 复制代码

<p>这是一段<strong>重要</strong>的文本。</p>

<em>

表示强调的文本，通常斜体显示。

html 复制代码

<p>这是一段<em>强调</em>的文本。</p>

<small>

用于免责声明或注释等小号文本。

html 复制代码

<p>主文本<small>免责声明</small></p>

<code>

表示代码片段。

html 复制代码

<p>使用<code>console.log()输出内容。

表单类语义标签

<label>

关联表单控件，提升可访问性。

html 复制代码

<label for="username">用户名：</label>
<input type="text" id="username">

<fieldset> 和 <legend>

分组表单控件并添加标题。

html 复制代码

<fieldset>
  <legend>登录信息</legend>
  <input type="text" placeholder="用户名">
</fieldset>

通过合理使用这些语义化标签，可以提升HTML文档的结构清晰度和可访问性。