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>