大前端 （五） -- HTML5 标签 4

HTML 结构标签

我们在 HTML 页面中常用一些标签将页面划分为不同的区域用以表示页面结构。比如，可使用div标签将整个页面分为header，body，footer三部分。现在我们就来学习这些与页面结构有关的标签。

1. div 标签

div标签在页面中非常常见，也常将其称为标签容器。我们可以将一组功能相关的标签放到同一个div中，也可以对该标签内的元素作统一处理，比如设置对齐方式，背景颜色。请看如下示例：

<strong>学习div标签</strong>
<div align="center" style="color:#0000FF">
      <p>这是div中一个p标签</p>
      <p>这是div中另外一个p标签</p>
</div>

但是，请注意：div标签本身没有任何语义，多用作布局以及样式化或脚本的钩子(hook)。正如，官方文档所言：

The div element has no special meaning at all

所以，在页面中大量使用div标签导致页面的语义性下降。因此 HTML5 中引入了新的结构标签 article 和 section

2. section标签

先来瞅瞅 section 标签的文档释义：

The section element represents a generic section of a document or application. A section , in this context, is a thematic grouping of content, typically with a heading

这段话的大概含义是：section 不仅仅是一个标签容器，它带有明显的语义。该标签常用于对网站或者应用程序中页面上的内容进行分块。

比如，网站的主页可以分成简介、新闻和联系方式等几部分，那么每一部分都可以放到一个 section 里面；类似地，文章的章节、标签对话框中的标签页、或者论文中有编号的部分也可以放到一个 section 中。请注意：官方文档建议，在使用section时每个section标签中应带一个标题标签(h1-h6)，从而表达更清晰的语义。

3. article标签

先来瞅瞅 article 标签的文档释义：

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle,independently distributable or reusable, e.g. in syndication.

这段话的大概含义是：article 是一个特殊的 section 标签，它比 section更具有明确的语义。也就是说：无论从结构上还是内容上来说，它代表一个独立的、完整的相关内容块。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。一般来说，article也有标题部分(通常包含在header内)，类似地它还有footer部分。

示例代码

<article>
        <header><h2>有心课堂课程介绍</h2></header>
        <p>我们需要从每天的复制粘贴，盲目的debug中解放出来，找到解决问题的本质。在有心课堂，我们不仅仅是告诉你需求如何实现，还会教你如何分析，如何选择解决方案以及为什么要这样来实现。有心课堂，初衷是为了引导在职开发人员高效开发，养成良好的思维习惯，而不是简单的教你基础API调用。当然优质的教学体系还需要时下热门的市场需求来做辅助。所以我们在此基础上设计来三套阶梯式课程。</p>
        <section>
            <h3>Android架构设计方法、技巧与实践</h3>
            <p>这里是《Android架构设计方法、技巧与实践》的课程简介</p>
        </section>

        <section>
            <h3>三杆火枪干掉自定义View</h3>
            <p>这里是《三杆火枪干掉自定义View》的课程介绍。目前有1068位同学参加该课程</p>
        </section>

        <footer>课程内容版权均归上海有心网络科技有限公司所有</footer>
    </article>

效果：

参考链接

• https://blog.csdn.net/lfdfhl/article/details/78321838