html5 标签用法

!----------------------------html5标签实验室--------------------->

<!--
audio标签用法（给一个音频文件的地址，可以显示指定是否可手动控制）
-->

<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

<!------------------------------end---------------------------------->

<!--
video标签用法（用法与audio类似，给一个视频文件的地址，可以显示指定是否可手动控制）
-->

<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>

<!------------------------------end---------------------------------->

<!--
abbr标签用法（鼠标停留在"WHO"上面时，会提示title属性中定义的文字）
-->

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

<!------------------------------end---------------------------------->

<!--
address用法(在网页中定义联系方式的时候会用到)
-->

<address>
Written by W3Schools.com<br />
<a href="mailto:[e-mail]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: [phone]
</address>

<!------------------------------end---------------------------------->

<!--
    HTML5: <article></article>
    HTML4: <div class="article"></div>

这个标签的唯一目的是废除需要定义的一个类。
-->

<article>
<a href="http://blog.netscape.com/2007/12/28/
end-of-support-for-netscape-web-browsers">Netscape is dead</a>
<p>
AOL has a long history on the internet, being one of
the first companies to really get people online.....</p>
<p>something news about AOL,story of AOL is very long.....</p>
</article> 

<!------------------------------end---------------------------------->

<!--
    HTML5: <aside></aside>
    HTML4: <div class="aside"></div>

这个标签的唯一目的是废除需要定义的一个类。
-->

<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside> 

<!------------------------------end---------------------------------->

<!--
base 用法(最好把base放在head标签内，方便管理代码，为了演示用法，放在了一起，单击链接，会跳转到 http://www.w3schools.com/html5/default.asp)
-->

<base href="http://www.w3schools.com/html5/" target="_blank" />

<a href="default.asp">W3Schools' HTML5 Tutorial</a>

<!------------------------------end---------------------------------->

<!--
rlt 用法（dir默认的文字方向是从左到右，为了突出其用法，本例为从右至左）
-->

<bdo dir="rtl">
Here is some text written from right-to-left.
</bdo>

<!------------------------------end---------------------------------->

<!--
blockquote 用法（定义简讯、短消息）
-->

<p>Here is a quote from WWF's website:
<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>
We hope that they succeed.
</p>

<!------------------------------end---------------------------------->

<!--
caption 用法（对table进行说明）
-->

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<!------------------------------end---------------------------------->

<!--
<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签用法
-->

<!--强调-->
<em>Emphasized text</em><br />
<!--加粗-->
<strong>Strong text</strong><br />
<!--定义-->
<dfn>Definition term</dfn><br />
<!--代码-->
<code>Computer code text</code><br />
<!--示例代码-->
<samp>Sample computer code text</samp><br />
<!--键盘文字-->
<kbd>Keyboard text</kbd><br />
<!--变量-->
<var>Variable</var><br />
<!--引用-->
<cite>Citation</cite> 

<!------------------------------end---------------------------------->

<!--
colgroup 用法（以列为单位控制样式）
-->

<table>
  <colgroup span="2" style="background:red"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<!------------------------------end---------------------------------->

<!--
datalist 用法（自动补全文本框）
-->

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

<!------------------------------end---------------------------------->

<!--
dl,dt,dd 用法
-->


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>another one</dt>
<dd>wwwww</dd>

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<!------------------------------end---------------------------------->

<!--
del(同s)，ins 用法
-->

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<!------------------------------end---------------------------------->

<!--
details 用法，当有标题+段落说明的场景时可以使用
-->

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

<!------------------------------end---------------------------------->

<!--
embed/object 用法，嵌入flash
-->

<embed src="helloworld.swf" />
<object data="helloworld.swf"></object>

<!------------------------------end---------------------------------->


<!--
fieldset，legend 用法，填写用户信息时
-->

  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
  </fieldset>

<!------------------------------end---------------------------------->

<!--
footer 用法,放在页面底部说明页面版权
-->

<footer>This document was written in 2009</footer>

<!------------------------------end---------------------------------->

<!--
mark 用法，特别标记单词
-->

<p>Do not forget to buy <mark>milk</mark> today.</p>

<!------------------------------end---------------------------------->

<!--
nav 用法，包含一些链接
-->

<nav>
<a href="default.asp">Home</a>
<a href="tag_meter.asp">Previous</a>
<a href="tag_noscript.asp">Next</a>
</nav>

<!------------------------------end---------------------------------->



<!--
time 用法，等同span，只是专门用来定义日期和时间
-->

<time datetime="10:00">10:00</time>

<!------------------------------end---------------------------------->

<!--
    HTML5: <figure></figure>
    HTML4: <dl class="figure"></dl>

这个标签的唯一目的是废除需要定义的一个类。
-->

<figure>
  <p>A view of the pulpit rock in Norway</p>
  <img src="img_pulpit.jpg" width="304" height="228" />
</figure>

<!------------------------------end---------------------------------->

<!--
     HTML5: <menu></menu>
     HTML4: <ul class="menu"></ul>

这个标签的唯一目的是废除需要定义的一个类。
-->

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

<!------------------------------end---------------------------------->