html5学习笔记1----新增元素

新增了如下与结构相关的元素：

• section：页面中的一个内容区块。支持全局属性与事件属性。section 表示一段专题性的内容，一般会带有标题。section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
• article：页面中一块与上下文不相关的独立内容。article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。
  
  对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

<section>    <p>this is section</p></section><article>    <p>this is article</p></article><article>    <section>        this is a section in article    </section>    <p>this is a p in article</p>    <section>        this is another section in article    </section></article>

• aside:article元素的内容之外的与article元素内容相关的辅助信息。可作为侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

<aside>  <h2>…</h2>  <ul>    <li>…</li>    <li>…</li>  </ul>  <h2>…</h2>  <ul>    <li>…</li>    <li>…</li>  </ul></aside>

也可以被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

<article>  <h1>…</h1>  <p>…</p>  <aside>…</aside></article>

• header：一个内容区块或整个页面的标题。
• hgroup：标题的组合。
• footer：脚注。
• nav：导航链接。
• figure：规定独立的流内容（图像、图表、照片、代码等等）。
• figcaption：定义figure 元素的标题。

<figure>  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption></figure>

其他新增元素：

• video：定义视频。
• audio：定义音频。
• embed：用来插入各种媒体。
• mark：在视觉上向用户呈现需要突出显示或高亮显示的文字。类似于html4的span。
• progress：用来显示运行中的进程。可以用此来显示JavaScript中耗费时间的函数的进程,具有属性值max与value。例如下载进度：

下载进度：<progress value="22" max="100"></progress>

• time：表示日期或时间。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。属性值datevalue规定日期/时间。

<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

• ruby：定义ruby注释（中文注音或字符），将 ruby 标签与 rt 和 rp 标签一起使用：
  ruby元素由一个或多个需要解释/发音的字符和一个提供该信息的 rt 元素组成，还包括可选的 rp元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby>  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>  字 <rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

• wbr:软换行，如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。
• command：（只有ie9支持）表示命令按钮。
• details：（目前，只有 Chrome 和 Safari 6 支持 ）规定了用户可见的或者隐藏的需求的补充细节。与 summary 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。属性open规定是否可见。

<details>    <summary>Copyright 1999-2011.</summary>    <p> - by Refsnes Data. All Rights Reserved.</p>    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>

• datalist:可选数据列表。与input结合使用可以表示输入值的下拉列表。( Internet Explorer 9，Safari 不支持 datalist 标签。)

<form action="demo-form.php" method="get">    <input list="browsers" name="browser">        <datalist id="browsers">          <option value="Internet Explorer">          <option value="Firefox">          <option value="Chrome">          <option value="Opera">          <option value="Safari">        </datalist>    <input type="submit"></form>

input元素类型：

• 见http://www.w3school.com.cn/html5/html_5_form_input_types.asp

其他属性

• autofocus，让元素在画面打开时自动获取焦点。
• placeholder（对input与textarea），对用户输入进行提示。
• required（对input与textarea），提交时进行检查，一定要有输入内容。