HTML5第二份草案發布但未成為正式標準

作者：Eve Cole 更新時間：2009-05-31 01:02:25

6月10日發布了新的HTML 5 草案（Working Draft）。小編粗略的讀了一下它提供的新版本說明文檔，作了一點筆記：

HTML 5草案並未成為正式標準
Publication as a Working Draft does not imply endorsement by the W3C Membership.

作為「草案」發布並不意味著已經得到W3C成員的背書（支持）。

The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification.

HTML 5規範要等到有至少兩個軟體對其實現了之後，才會宣布定案。

XHTML 1是1999年就發布了，經過了兩三年才得到全面支持，而直到近十年之後的最近才得到全面推廣。所以等HTML 5得到支援（尤其是那位「非主流」的瀏覽器的支援），還得有一段日子。根據W3C的HTML工作小組的時間表，要到2010年才會有正式的定案。

簡單到驚奇的DOCTYPE聲明

<!doctype html>

就這麼簡單，哈。而且，沒有大小寫。值得說明的是，規範要求，如果聲明了這一個DOCTYPE，則可以用所謂的“'custom' HTML syntax（定制的HTML語法，我也不知道為什麼叫這個）”，亦即以前那種不需要標籤閉合的HTML語法。同時它仍然允許XHTML那樣的XML格式語法，這樣的話就要聲明xml文檔的DOCTYPE而不用上面這個。

向前相容性
HTML 5規範沒有「deprecated」的元素，原因就是它一方面要求設計師不要試用某些元素，另一方面卻要求瀏覽器必須支援這些元素。這樣的話，以我的直覺，它是想支援以前所有的用HTML或XHTML寫的網頁。這對設計師來說算是個福氣，終於不用再受XHTML嚴苛語法的限制了。

被刪除的元素
當然，這些元素是相對於HTML 4而言的，但是也可以看得出HTML 5並不是一個單純的向HTML 4的倒退，它仍然秉承了XHTML的一些重要精神，比如純粹的界面表現元素應該拋棄，而採用CSS等。

以下元素“因為是純粹的介面表選元素，應該用CSS來代替（because their effect is purely presentational and therefore better handled by CSS）”，所以拋棄：

basefont / big / center / font / s / strike / tt / u

以下元素“因為對可用性與可訪問性不利（because their usage affected usability and accessibility for the end user in a negative way）”，所以拋棄：

frame / frameset / noframes

以下元素“因為不怎麼經常使用、引起混淆或是被其他元素代替（because they have not been used often, created confusion or can be handled by other elements）”，所以拋棄：

acronym / applet / isindex / dir

HTML測試文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 測試文件</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML 測試文件</h1>
<ul>
<li>版本: 1.1 </li>
<li>DTD: XHTML 1.0 transitional</li>
<li>編碼: UTF-8</li>
<li>更新: 2008-6-12</li>
</ul>

<hr />

<h1><h1> 代表一號標題</h1>
<h2><h2> 代表二號標題</h2>
<h3><h3> 代表三號標題</h3>
<h4><h4> 代表四號標題</h4>
<h5><h5> 代表五號標題</h5>
<h6><h6> 代表六號標題</h6>

<p>這一段由<p>包含。 <p>表示一個段落，是最常用的文字流格式。我們可以在文字流中使用各種內嵌文字標籤。最常用的有這幾種：
<strong> <strong>加重</strong>，
<em><em> 強調</em>，
<ins><ins> 插入</ins>，
<del><del> 刪除</del>，
<sub><sub> 下標</sub>，
<sup><sup> 上標</sup>，
<cite><cite> 引用</cite>，<big><big>增大</big>，<small><small>縮小</small>。 </p>

<pre> 這是一段由<pre>所包含的文字流。
在它其中的空格，製表符，回車等可以直接在網頁上，也不會被瀏覽器自動換行。可以用它顯示程式碼。
預格式預設是用等寬字體。 </pre>

<p>我們也可以用這些內嵌標籤在文字流中顯示程式碼片段：
<code><code>代碼</code>，
<kbd><kbd>鍵盤輸入</kbd>，
<var><var>變數</var>，
<samp><samp>sample 例句</samp>。
</p>

<p>此外，有兩個標籤也很重要：</p>
<ul>
<li><abbr>：如<abbr title="Mister">Mr.</abbr>是Mister的縮寫。但這個標記在IE中似乎無效。 </li>
<li><acronym><acronym title=""></acronym>：例如<acronym title="Hyper Text Markup Language">HTML</acronym>是Hyper Text Markup Language的首字縮寫（中文也能用這個標籤，如：「<acronym title="中華人民共和國">中國</acronym>」是「中華人民共和國」的簡稱）。 </li>
</ul>

<blockquote cite="#">
這一段是<blockquote>。記得使用<blockquote>裡的cite屬性。
</blockquote>

<address>
這一段由<address>包含，可以用它來顯示Email地址或真實的地址。要注意的是它是區塊級元素，但預設沒有margin或padding。
</address>
<div>這段由<div>包含，<div>是區塊級元素，預設沒有任何樣式。和它地位相當的另一個元素是<span><span>內嵌字段</span>，同樣預設沒有任何樣式。 <br />
這句話的前面有一個<br>，用於段內換行。 </div>

<hr />
<p>上面的這條橫線是<hr>標籤。 </p>
<p><a id="a"></a>這句話的前面有一個<a>標籤實現的錨標記。 </p>
<p><a href="http:///"><a>也表示連結</a>。注意它有四個偽類：:link是<a href="http:///">未訪問連結</a>，:visited是<a href="#">已訪問連結</a>， :hover是<a href="http:///">滑鼠懸停時的連結</a>, :active<a href="http:///">滑鼠點擊啟動時的連結</a> 。 </p>
<p><img width="100" height="100" alt="<img> 標籤" /> 圖片預設是inline的，但我們也可以定義為block。並特別為img定義一個.inline類別<img width="100" height="30" alt="img.inline" class="inline" />。此外，連結中的<img>的樣式又有所不同<a href="#"><img width="60" height="60" alt="<a>中的<img>" / ></a>。 </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
還有用於插入媒體的<object>標籤以及它裡面的<param>標籤。 </p>
<hr />

<ul>
<li>無序列表的外層是<ul></li>
<li>清單的每一項由<li>組成</li>
<li>注意，<ul>標籤裡只能直接包含<li>標籤
<ul>
<li>這是嵌套的二級列表，必須放在某個<li>中</li>
<li>注意嵌套的二級清單項目的樣式可能與一級的不同
<ul>
<li>這是第三級，它的樣式又和第二級的不同</li>
</ul>
</li>
</ul>
</li>
</ul>

<ol>
<li>有序列表的外層是<ol></li>
<li>清單的每一項由<li>組成</li>
<li>注意，<ol>標籤裡只能直接包含<li>標籤
<ol>
<li>這是嵌套的二級列表，必須放在某個<li>中</li>
<li>注意嵌套的二級清單項目的樣式可能與一級的不同
<ol>
<li>這是第三級，它的樣式又和第二級的不同</li>
</ol>
</li>
</ol>
</li>
</ol>

<dl>
<dt>這一行是<dt></dt>
<dd>這一行則是<dd>。而定義列表外層是<dl>。 </dd>
<dt>注意<dt>只能包含內聯等級元素</dt>
<dd>而<dd>可以包含內聯或區塊級的元素</dd>
</dl>

<hr />

<p>標準表格模型。其中由<colgroup>與<col>控制列寬度。 </p>
<table>
<caption>
此處是<caption>
</caption>
<colgroup>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>這一行是<thead></th>
<th><thead>中可用<th>或<td></th>
<th>這裡使用的是<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td>最後一行是<tfoot></td>
<td><tfoot>無論放在什麼位置，總顯示在最末端</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>以下三行是<tbody> </td>
<td>可以放任一<tr></td>
<td>這裡使用的是<td></td>
</tr>
<tr>
<td>用<col>表示列</td>
<td>該行最右邊單元為空白表格單元，沒有任何內容</td>
<td></td>
</tr>
<tr>
<td>用<tr>表示行</td>
<td>該行最右邊單元則有一個&nbsp;</td>
<td> </td>
</tr>
</tbody>
</table>

<hr />

<form action="">
<p><form>標籤不可以直接包含各種控制標籤，可以用<label><label></label>包含表格單元件，</p>
<fieldset>
<legend>也可以用<fieldset>和<legend>標籤將表單歸組。 </legend>
<p>對於input標籤的CSS定義方法：將type屬性的值也當作class名，這樣就可以將不同的input控制項區分開。 </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield 單行文字方塊" />
<input type="text" class="text" size="20" id="text_d" value="禁用的textfield 單行文字方塊" disabled="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="password 密碼框" />
<input type="password" class="text" size="20" id="password_d" value="禁用的password 密碼框" disabled="disabled" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="submit 提交按鈕" />
<input type="submit" class="submit" id="submit_d" value="禁用的submit 提交按鈕" disabled="disabled" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="reset 重置按鈕" />
<input type="reset" class="button" id="reset_d" value="禁用的reset 重置按鈕" disabled="disabled" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="button" class="button" id="button" value="button 普通按鈕" />
<input type="button" class="button" id="button_d" value="禁用的button 普通按鈕" disabled="disabled" />
<label for="button"> input.button </label>
</p>
<p>
<input type="image" class="image" size="20" id="image" />
<label for="image"> input.image </label>
</p>
<p>
<input type="image" class="image" size="20" id="image_d" disabled="disabled" />
<label for="image_d"> 停用的input.image</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1" checked="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>input.radio </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" checked="checked" disabled="disabled" />
<input name="radio" type="radio" class="radio" id="radio2_d" disabled="disabled" />
<label> 禁用的input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" checked="checked" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" checked="checked" disabled="disabled" />
<input type="checkbox" class="checkbox" id="checkbox2_d" disabled="disabled" />
<label for="checkbox_d"> 禁用的input.checkbox </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="file selector 檔案選擇器" />
<label for="file"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="file selector 檔案選擇器" disabled="disabled" />
<label for="file_d"> 停用的input.file </label>
</p>
<p>
<button><img /><button> 標籤</button>
<button disabled="disabled"><img />停用的<button> 標籤</button>
</p>

<p>
<label for="textarea"><textarea>預設是底部對齊</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">textarea 多行文字方塊。
它內部也是類似預先格式的，能夠將所有的回車符，製表符顯示出來</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" disabled="disabled">禁用的textarea 多行文字方塊</textarea>
</p>

<p>
<select name="textarea">
<option>drop-down selector 下拉選框</option>
<optgroup label="這是第一組">
<option>選項可以用<optgroup>分組</option>
<option>並由其label屬性指定群組名稱</option>
</optgroup>
<optgroup label="這是第二組">
<option>群組名稱只是一個提示文字，不是選項</option>
</optgroup>
</select>
<select multiple="multiple" name="textarea">
<option>當<select>的size屬性大於1或指定了multiple屬性</option>
<option>就會成為這樣的多行選框</option>
</select>
<select name="textarea" disabled="disabled">
<option>停用的下拉選框</option>
<option>就會成為這樣的多行選框</option>
</select>
</p>
</fieldset>
</form>

</body>
</html>