前端语义化标签及实例

常用的语义化标签的以下几种：
header、nav、article、section、aside、footer、abbr、dfn、address、del、ins、pre、meter、progress

<header> 定义文章的页眉信息

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

<nav> 定义页面中的各种导航

<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">支持</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

<article> 表示文档、页面的内容

<article>
  <h2>文章标题</h2>
  <p>这是一段关于某个主题的文章内容。</p>
</article>

<section> 对文章内容进行分块

<section>
  <h3>章节一</h3>
  <p>这是章节一的内容。</p>
</section>
<section>
  <h3>章节二</h3>
  <p>这是章节二的内容。</p>
</section>

<aside> 定义当前页面或当前文章的附属信息

<article>
  <h2>主要文章内容</h2>
  <p>这是一篇关于某个主题的文章。</p>
  <aside>
    <p>相关链接：</p>
    <ul>
      <li><a href="#">相关文章1</a></li>
      <li><a href="#">相关文章2</a></li>
    </ul>
  </aside>
</article>

<footer> 定义脚注部分

<footer>
  <p>版权所有 &copy; 2023 我的网站</p>
  <p>联系方式：电话：123-456-7890，邮箱：[contact@example.com](mailto:contact@example.com)</p>
</footer>

<abbr> 定义缩写

<p>我在学习<abbr title="HyperText Markup Language">HTML</abbr>。</p>

<dfn> 定义术语元素

<p>根据<dfn>CSS</dfn>（Cascading Style Sheets）的定义，它是一种样式表语言。</p>

<address> 定义作者、相关人士或组织的联系信息

<address>
  <p>公司地址：XX市XX区XX路XX号</p>
  <p>电话：123-456-7890</p>
  <p>邮箱：<a href="mailto:contact@example.com">contact@example.com</a></p>
</address>

<del> 定义移除的内容

<p>原价<del>$100</del>，现价$80！</p>

<ins> 定义添加的内容

<p>新添加的信息：<ins>这个产品已经过质量检测。</ins></p>

<pre> 定义预格式化的文本

<pre>
第一行文本
第二行文本    （这里会保留空格和换行）
第三行文本
</pre>

<meter> 定义度量衡

<p>我的技能水平：<meter value="80" min="0" max="100">80%</meter></p>

<progress> 定义运行中的任务进度

<progress value="22" max="100">22%</progress>
<p>任务完成度：22%</p>