站长论坛

标题: HTML5第二份草案发布但并未成为正式标准 [打印本页]

作者: superadmin 时间: 2008-6-18 19:57
标题: HTML5第二份草案发布但并未成为正式标准
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年才会有正式的定案。

--------------------------------------------------------------------------------

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>

欢迎光临站长论坛 (http://tzlink.com/bbs/)