🏷️HTML语义化标签&非语义化标签的知识点｜青训营❗️一个新新新新新手小白的笔记记录❗️ 一、什么是语义化标签？

❗️一个新新新新新手小白的笔记记录❗️

🚩本篇笔记的主要目的是介绍什么是HTML语义化&f非语义化标签以及使用此的好处和作用解析，接着对比使用语义化标签和非语义化标签的差异，最后分别进行总结各自的优势以及劣势，同时给出了建议和不建议使用的场景。

一、什么是语义化标签？

语义化标签是指在编写HTML时使用具有明确含义的标签，以传达更准确的文档结构和含义。这有助于提高1⃣️网页的可访问性、2⃣️搜索引擎优化(SEO)和3⃣️代码的可维护性。

以下是一些常见的语义化标签及其用途：

<header>：表示页面或区块的页眉，通常包含网站标题、标志、导航等
<nav>：表示导航部分，包含网站的导航链接
<main>：表示页面的主要内容，每个页面应该只有一个主要内容区域
<article>：表示独立的、完整的内容单元，比如博客文章、新闻报道等
<section>：表示文档中的一个区块，可以包含相关的内容组合，通常有一个标题
<aside>：表示页面的附属内容，比如侧边栏、广告等
<footer>：表示页面或区块的页脚，通常包含版权信息、联系方式等
<h1>~<h6>：标题标签，h1等级最高，h6等级最低
<figure>：表示文档中的单个独立单元，通常与相关的内容一起出现，比如图片、图表、代码示例等。常与<figcaption>一起使用，用来描述内容
<figcaption>：用于为<figure>元素提供描述性文本，解释相关内容的含义。
<time>：用于表示日期和时间，有助于机器和搜索引擎理解日期和时间的含义。
<mark>：用于突出文本中的一部分，通常会以黄色背景来显示。
<blockquote>：表示长引用的内容块，通常包含引用的内容以及作者信息。
<cite>：表示对引用的作品的引用，可以是书籍、文章等的标题。
<abbr>：用于表示缩写词或首字母缩写，可以在鼠标悬停时显示完整文本。
<address>：表示联系信息，通常用于包含联系人姓名、地址、电话号码等。
<datalist>：用于定义一个输入框的预定义选项列表，方便用户选择。
<details>：表示一个可展开的详情或折叠内容，通常与<summary>一起使用，提供标题。
<summary>：用于提供<details>元素的标题或摘要。

这些常见的语义化标签有助于构建更具有结构和含义的HTML文档。可以在设计和编写网页时使用语义化标签来传达更明确的内容和结构。

与之相反，非语义化标签是指那些没有明确含义的标签，比如`<div>`和`<span>`。这些标签通常被用来创建样式和布局，但并没有表达出文档的结构或含义。

二、使用语义化&非语义化标签的例子

使用语义化标签的例子：

<html>
<head>
  <title>语义化标签示例</title>
</head>
<body>
  <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>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>这是一篇关于...的文章内容。</p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2023 版权所有</p>
  </footer>
</body>
</html>

使用非语义化标签的例子：

<html>
<head>
  <title>非语义化标签示例</title>
</head>
<body>
  <div id="header">
    <h1>网站标题</h1>
    <div id="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>
  </div>
  
  <div id="content">
    <div class="article">
      <h2>文章标题</h2>
      <p>这是一篇关于...的文章内容。</p>
    </div>
  </div>
  
  <div id="footer">
    <p>&copy; 2023 版权所有</p>
  </div>
</body>
</html>

在第一个示例中，使用了语义化标签来表达文档的结构和含义。而在第二个示例中，使用了非语义化标签，仅仅通过<div>来组织布局，明显缺少明确的结构和含义。

三、总结

总的来说，语义化标签有助于提升网页的可读性、可访问性和SEO，因为搜索引擎和辅助技术可以更好地理解页面的结构和内容。而非语义化标签则可能导致代码的可维护性下降，同时也可能使得页面的含义难以被理解和解释。

语义化标签的优势：

可读性和维护性提高： 语义化标签使代码更加易读和清晰，使其他开发人员能够更容易理解你的代码，从而提高代码的维护性。
搜索引擎优化（SEO）： 搜索引擎可以更好地理解页面的结构和内容，从而更准确地索引和排名你的网页。
可访问性： 使用语义化标签可以改善网站的可访问性，使屏幕阅读器等辅助技术能够更好地解释页面内容，帮助视觉障碍用户浏览网页。
语义信息传递： 语义化标签传达页面结构和内容的含义，有助于构建更有意义的网页。

语义化标签的劣势：

可能较复杂： 使用语义化标签可能需要更多的标记和嵌套，导致代码量增加。
样式约束： 有时候使用语义化标签可能会受到样式的限制，需要更多的CSS工作来调整外观。

非语义化标签的优势：

灵活性： 非语义化标签通常更灵活，可以根据需求自由定义结构和样式。
布局控制： 非语义化标签在布局方面更自由，可以更精确地控制网页的外观。

非语义化标签的劣势：

可读性较差： 非语义化标签可能使代码更难以理解和维护，特别是对其他开发人员来说。
可访问性差： 非语义化标签可能影响屏幕阅读器等辅助技术对页面内容的解释。

何时使用语义化标签：

建议使用： 在构建内容丰富、有意义的网页时，如文章、新闻、博客等。对于需要提供明确结构和含义的信息，以及希望在搜索引擎中获得更好排名的页面。
不建议使用： 如果你的项目着重于创意和独特的外观，而不是强调文档结构和内容含义时，可以考虑在某些特定情况下使用非语义化标签。

何时使用非语义化标签：

建议使用： 在需要更灵活的布局和样式控制的项目中，如特定设计要求的页面或应用。在注重视觉效果、互动和动画的页面中。
不建议使用： 对于强调页面内容和结构、希望获得更好可读性和可访问性的项目，不建议过度使用非语义化标签。

四、小Tips补充

🔔HTML语法Tips🔔

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

🏷️HTML语义化标签&非语义化标签的知识点 ｜ 青训营