HTML 语义化

概述: 基于这 是 什么命名，而不是基于它 像 什么或 能做 什么命名。

参考文档：Semantics（语义） - MDN Web 文档术语表：Web 相关术语的定义 | MDN

写语义标记的一些好处如下：

• 搜索引擎将其内容视为影响页面搜索排名的重要关键字（参见 SEO）。
• 屏幕阅读器可以将其用作指引，帮助视力受损的用户导航页面。
• 比起搜索无休止的带有或不带有语义/命名空间类的 div，找到有意义的代码块显然容易得多。
• 向开发人员建议将要填充的数据类型。
• 语义命名反映了正确的自定义元素/组件命名。

一些语义标签

 <!--
        h1~h6 字体从大到小 
        避免跳过某级标题 始终要从 <h1> 开始，接下来依次使用 <h2> 等等。
        一个页面中最好只有一个h1 可以让网站在搜索引擎结果中更加清晰（SEO【搜索引擎优化】）
    -->
    <div>-------h1~h6标题元素-------</div>
    <h1>一级标题</h1>
    <!-- 
        <article>元素表示文档、页面、应用或网站中的独立结构，比如论坛帖子、新闻文章等 
        当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章
        每个<article>，通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。
        在<article>元素中，可能包含一个或多个<section>。
    -->
    <!-- 天气预报文章 -->
    <div>-------article元素-------</div>
    <article class="forecast">
        <h1>Weather forecast for Seattle</h1>
        <article class="day-forecast">
          <h2>03 March 2018</h2>
          <p>Rain.</p>
        </article>
        <article class="day-forecast">
          <h2>04 March 2018</h2>
          <p>Periods of rain.</p>
        </article>
        <article class="day-forecast">
          <h2>05 March 2018</h2>
          <p>Heavy rain.</p>
        </article>
    </article>

    <!-- <aside> 元素表示一个和其余页面内容几乎无关的部分，
        被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
        其通常表现为侧边栏或者标注框 
    -->
    <div>-------aside元素-------</div>
    <p class="content">这是主内容这是主内容这是主内容这是主内容这是主内容这是主内容这是主内容</p>
    <aside>
        <p>这是侧边栏内容或者是备注</p>
    </aside>
    <p class="content">这是主内容这是主内容这是主内容这是主内容这是主内容这是主内容这是主内容</p>
    <div style="clear: both;"></div>

    <!-- 
        <details> 元素可创建一个组件，
        仅在被切换成展开状态时，它才会显示内含的信息。
        <summary> 元素可为该部件提供概要或者标签。
        为了使得 <details> 盒子初始为展开状态，要添加布尔属性 open
    -->
    
    <div>-------details元素-------</div>
    <details open>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>
    <!-- 
        mark 标签代表突出显示的文字，
        例如可以为了标记特定上下文中的文本而使用这个标签
        举个例子，它可以用来显示搜索引擎搜索后关键词
        <strong> 元素用来表示文本在上下文的重要性的，
        而 <mark> 元素是用来表示上下文的关联性的。
     -->
    <div>-------mark元素-------</div>
    <p>元素用于<mark>高亮</mark>文本</p>

    div {
        margin: 20px;
        font-size: 14px;
        color:orange;
    }
    .forecast {
        width: 200px;
        padding: 10px;
        background-color: #eee;
    }
    .day-forecast {
        width: 150px;
        border: 1px solid #000;
        margin-bottom: 30px;
        padding: 0 10px;
        background-color: #fff;
    }
    .day-forecast >p {
        font-size: 14px;
    }
    aside {
        float: left;
        width: 50px;
        height: 100px;
        color: #ccc;
        font-style: italic;
        padding: 10px;
        border-right: 1px solid #ccc;
        margin-right: 10px;
    }
    .content {
        width: 200px;
    }
    details {
        border: 1px solid #aaa;
        border-radius: 4px;
    }

    summary {
      font-weight: bold;
    }

    details[open] {
    }

    details[open] summary {
      border-bottom: 1px solid #aaa;
    }