结构性标签

<!DOCTYPE html>: 声明页面为HTML5 文档

<html lang="language-code"></html>: 实际 HTML 部分

<head></head>: 网页文档的头部

<meta charset="utf-8"/>: 将文档的字符编码声明为 UTF-8

<title></title>: 页面的标题

<body></body>: 页面主体

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="zh-CN">
        <title>第一个demo</title>
    </head>
    <body>
        第一个demo
    </body>
</html>

分级标题(hn):

HTML 提供了六级标题用于创建页面信息的层级关系,是的，HTML 的分级标题（Heading）默认是块级元素。也就是说 <h1> 到 <h6> 标签在页面上都会独占一行，并且前后会有默认的上下间距。

        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>

如果出现嵌套分级标题将会优先内部标题,但是例子中的h1和h6都会按照分级标签显示

 <h1>h1<h6>h6</h6></h1>

分级标题的重要性: 对任何页面来说，分级标题都可以说是最重要的 HTML 元素。由于标题通常传达的是页面的主题，因此，对搜索引擎而言，如果标题与搜索词匹配

页眉(页头)标签(header):

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="zh-CN">
        <title>第一个demo</title>
    </head>
    <header
    <body>
        <header> 
            <nav role="navigation">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                </ul>
            </nav>
        </header> 
    </body>
</html>

标记导航(nav ):

在 HTML 中，导航通常用语义化标签 <nav> 来标记。<nav> 用于定义网站或页面的导航链接区域，让浏览器和辅助工具（如屏幕阅读器）更容易理解页面结构。
示例：顶部导航 + 底部导航

<header>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>

<footer>
  <nav>
    <ul>
      <li><a href="privacy.html">隐私政策</a></li>
      <li><a href="terms.html">使用条款</a></li>
    </ul>
  </nav>
</footer>


页面主导航（如：首页 / 产品 / 关于 / 联系）。

文章内部目录导航（锚点跳转）。

页脚的站点地图（sitemap）。

主要内容(main):

<main>
    <h1>2323</h1>
</main>

一般一个页面只有一个main元素,标识唯一的主要内容区域, 但是有多个也不会有异常

文章(article):

 <article>
        <h1 id="gaudi">Barcelona's Architect
            ➝ </h1>
        <p>Antoni Gaudí's incredible buildings
            bring millions of tourists to
            Barcelona each year.</p>
        <p>Gaudí's non-conformity, already
            visible in his teenage years,
            coupled with his quiet but firm
            devotion to the church, made a
            unique foundation for his thoughts
            and ideas. His search for simplicity
            is quite apparent in his work,
            from the
            <a href="#park-guell">Park Guell</a>
            and its incredible sculptures and
    </article>

博客文章
新闻报道
论坛帖子
用户评论
独立的内容区块

标记区块(section):

    <section>
        <p>dsd1111111222222s</p>
    </section>

文章分段
    一篇长文章分成多个部分，每个部分一个主题。

网页模块化 
    页面中不同的功能区，比如“新闻”、“产品介绍”、“联系我们”。

与 <article> 的区别

    <article> 表示 独立、完整、可单独传播的内容（如新闻、帖子、博客）。
    <section> 表示 内容的逻辑分组，它的内容需要依赖整体上下文。

指定附注栏(aside):

<aside role="complementary">
    <h1>Architectural Wonders of Barcelona</h1>
    <p>Barcelona is home to many architectural wonders in addition to Gaudí's work. Some of them include:</p>
    <ul>
        <li lang="es">Arc de Triomf</li>
        <li>The cathedral <span lang="es">(La Seu)</span></li>
        <li lang="es">Gran Teatre del Liceu</li>
        <li lang="es">Pavilion Mies van der Rohe</li>
        <li lang="es">Santa Maria del Mar</li>
    </ul>
    <p><small>Credit: <a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html">
</aside>

侧边栏（sidebar）
广告区
推荐文章 / 相关链接
作者简介 / 标签 / 附加信息

页脚(footer):

    <footer>
        <nav>
            <ul>
                <li><a href=" privacy.html">隐私政ddd策</a></li>
                <li><a href="terms.html">使用条款</a></li>
            </ul>
        </nav>
    </footer>

通用容器(div):

    <div>
        <article>
            w22222222222
        </article>
    </div>