[html5 语义化标签]

HTML 5的革新之一：语义化标签一节元素标签。

HTML 5的革新——语义化标签(一)

html5的布局

节点元素标签分为：节元素标签、文本元素标签、分组元素标签

header元素

header 元素代表“网页”或“section”的页眉。通常包含h1-h6元素或hgroup。

<header>
  <hgroup>
    <h1>网站标题</h1>
    <h1>网站副标题</h1>
  </hgroup>
</header>

footer元素

<footer> COPYRIGHT@小北</footer>

hgroup元素使用注意：
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

nav元素

<nav>
  <ul>
    <li>HTML 5</li>
    <li>CSS3</li>
    <li>JavaScript</li>    
  </ul>
</nav>

用在整个页面主要导航部分上

aside元素

元素被包含在article元素中作为主要内容的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
  <p>内容</p>
  <aside>
    <h1>作者简介</h1>
    <p>小北，前端一枚</p>
  </aside>
</article>

aside使用总结：
在article之外则可做侧边栏，没有article与之对应，最好不用。如果是广告，其他日志链接或者其他分类导航也可以用

section元素

section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。

<section>
  <h1>section是啥？</h1>
  <article>
      <h2>关于section</h1>
      <p>section的介绍</p>
      <section>
        <h3>关于其他</h3>
        <p>关于其他section的介绍</p>
       </section>
  </article>
</section>

section使用注意：
一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。

article元素

最容易跟section和div混淆，其实article代表一个在文档，页面或者网站中自成一体的内容。
除了它的内容，article会有一个标题，一个footer页脚。

<article>
  <h1>一篇文章</h1>
  <p>文章内容..</p>
  <footer>
    <p><small>版权：html5jscss网所属，作者：小北</small></p>
  </footer>
</article>

<article>
  <header>
    <h1>一篇文章</h1>
    <p><timepubdatedatetime="2012-10-03">2012/10/03</time></p>
   </header>
   <p>文章内容..</p>
   <article>
      <h2>评论</h2>
      <article>
        <header>
          <h3>评论者: XXX</h3>
          <p><timepubdatedatetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
        </header>
        <p>哈哈哈</p>
      </article>
      <article>
        <header>
          <h3>评论者: XXX</h3>
          <p><timepubdatedatetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
        </header>
        <p>哈？哈？哈？</p>
      </article>
    </article>
</article>

自身独立的情况下：用article
是相关内容：用section
没有语义的：用div

HTML5节元素标签

包括body article nav aside section header footer hgroup ，还有h1-h6 address。

HTML5语义文本字体元素

a（anchor 的缩写）： 用于定义超链接
em(emphasis 的缩写)：em 是句意强调，加与不加会引起语义变化，也可以理解为局部强调，用在语句某个单词上来改变句子的侧重。
strong：strong表示重要，strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。
p：p元素
b（bold 的缩写）：b 元素原本就是加粗，现在表示“文体突出”文字，通俗将是用来在文本中高亮显示某个或者几个字符，旨在引起用户的特别注意，无强调作用。譬如文档概要中的关键字，评论中的产品名，以及分类名。
i（italic 的缩写）：i 元素原本只是倾斜，现在描述为在普通文章中突出不同意见或语气或其他的一段文本，就像剧本里的话外音（外语、译音），或也可以用做排版的斜体文字。
code：定义计算机代码文本。
q（quote 的缩写）：用于定义一段引用的内容（短内容）
**cite **：用于定义引用内容出自书籍或杂志等的标题，不允许其他信息，如作者，日期等。
**u **（underline 的缩写）：定义下划线文本
**abbr **（abbreviation 的缩写）：定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称
**dfn **（defining instance 的缩写）：用于定义一个术语
**var **：定义计算机代码中的变量
**samp **（sample 的缩写）：由程序输出的示例文本
**kbd **（keyboard 的缩写）：定义由键盘输入的文本
**wbr **(word break)的缩写：定义换行的时机
**span **：没有任何语义
**br **：定义一个换行符

time元素

<timedatetime="2012-02-15"pubdate>2012年02月15日</time>

分组元素标签

我们熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分组元素标签，新加的分组元素标签
blockquote：标记一段长引文。标记短引文（行内引文），应采用 q 元素！
pre：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
figure元素用来表示图表视频等。如果需要figcaption只能作为figure元素的子元素，可以放在figure元素内的任何位置。

<figure>
  <imgsrc=""alt=""/>
  <figcaption>html5jscss前端网是刚建立的小站 </figcaption>
 </figure>

一个figure元素内最多只允许放置一个figcaption元素

嵌入元素标签

嵌入元素包括img（图片），页面（iframe），有 video(视频)audio（音频），用于绘画的 canvas 元素