Tan's-Blog

1. 新增的主体结构

1.1 article元素

article元素表示文档，页面，应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专用于并且这部分专用于独立地分类或复用。（例如：一个博客的帖子，一篇文章，一个视频文件等。）

<article>
     <header>
         <h1>HTML5的artice结构</h1>
         <p>发表时间2010年5月</p>
     </header>
 </article>

1.2 section元素

section元素代表文档或应用程序中一般性的”段”或者”节”。”段”在这里的上下文，指的是对内容按照主题的分组，通常还附带标题。例如,书本的章节，带标签的对话框的每个标签页，或者一编论文的编节号，一个section元素通常由内容及其标签组成。

section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，不要与article混淆，因为article有着完整的，独立的内容。


<section>
     <h1>水果</h1>
     <article>
         <h2>苹果</h2>
         <p>苹果，植物类水果，多次水果....</p>
     </article>
     <article>
         <h2>橘子</h2>
         <p>橘子，植物类水果....</p>
     </article>
 </section>

1.3 nav元素

nav元素用来构建导航。只需要将主要的，基本链接组放进nav元素即可。


<nav>
     <ul>
         <li>
             <a href="#">首页</a>
         </li>
         <li>
             <a href="#">商城</a>
         </li>
         <li>
             <a href="#">我的</a>
         </li>
     </ul>
 </nav>

1.4 aside元素

aside元素用来表示当前页面或文章的附属部份，也可以认为该内容与article的内容分别独立。该元素可以用于摘录引用或边栏这样的排版效果，用于广告或一组导航元素，以及用来与页面主内容区分开来的其他内容。


<aside>
     <nav>
         <ul>
             <li>
                 <a href="#">首页</a>
             </li>
             <li>
                 <a href="#">商城</a>
             </li>
             <li>
                 <a href="#">我的</a>
             </li>
         </ul>
     </nav>
 </aside>

1.5 time元素

time是一个新元素，用于明确的对机器的日期和时间进行编码，并且用以易读的方式来展现它。


<time datetime="2018-9-12">
             2018年9月12日
         </time>

 <time datetime="2018-9-12">
             我的生日
         </time>

 <time datetime="2018-9-12">
             今晚8点吃饭
 </time>

2. 新增的非主体结构

2.1 header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也包含其内容，如搜索表单或相关的LOGO图片。一个网页中，并没有限制header元素的个数，可拥有多个，可以为每个内容区加一个header元素。

<header>
     <h1>页面标题</h1>
 </header>
 <article>
     <header>
         <h1>文章标题</h1>
     </header>
     <p>文章正文</p>
 </article>

2.2 hgroup元素

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将H1~H6进行分组，例如一个内容区块的标题及其子标题算一组，如果文章只有一个主标题，是不需要hgroup元素的。

<article>
     <header>
         <hgroup>
             <h1>文章标题</h1>
             <h2>文章的子标题</h2>
         </hgroup>
         <p>
             <time>2017-5-20</time>
         </p>
     </header>
     <p>文章正文</p>
 </article>

footer元素可以作为其父级内容区块或是一个根区块的脚注。footer通常包括相关区块的脚注信息，如作者相关链接及版权消息。

<footer>
     <ul>
         <li>版权信息</li>
         <li>站点地图</li>
         <li>联系方式</li>
     </ul>
 </footer>

2.4 address元素

address用于当前或文档的作者的详细联系方式，但不是用于邮政地址的一个通用性。


<address>
     <a href="#">个人博客</a>
 </address>

总结

介绍了HTML5中新增的元素，包括了它们的定义与用法。在HTML5中为了使文档的结构更加清晰，追加了页眉与页脚，内容区块等文档相关结构相关联的结构元素。这些主体结构元素与非主体结构元素，是构成整个页面的基础。更重要的是语义化的标签更加适用于网站的seo搜索。