HTML5標籤小結

[html] view plaincopyprint?
<!----------------------------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:[email protected]">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---------------------------------->