您现在的位置: 第一万维网 >> 网页设计 >> web标准 >> 正文

HTML5第二份草案发布但并未成为正式标准

作者: 佚名 文章来源:中国站长站 更新时间:2008/6/19 10:12:58

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>&lt;h1&gt; 代表一号标题 </h1>
  <h2>&lt;h2&gt; 代表二号标题 </h2>
  <h3>&lt;h3&gt; 代表三号标题 </h3>
  <h4>&lt;h4&gt; 代表四号标题 </h4>
  <h5>&lt;h5&gt; 代表五号标题 </h5>
  <h6>&lt;h6&gt; 代表六号标题 </h6>
 
  <p>这一段由&lt;p&gt;包含。&lt;p&gt;表示一个段落,是最常用的文本流格式。我们可以在文本流中使用各种内联文本标签。最常用的有这几种:
    <strong> &lt;strong&gt;加重</strong>,
    <em>&lt;em&gt; 强调</em>,
    <ins>&lt;ins&gt; 插入</ins>,
    <del>&lt;del&gt; 删除</del>,
    <sub>&lt;sub&gt; 下标</sub>,
    <sup>&lt;sup&gt; 上标</sup>,
    <cite>&lt;cite&gt;  引用</cite>,<big>&lt;big&gt;增大</big>,<small>&lt;small&gt;缩小</small>。  </p>
   
  <pre>      这是一段由&lt;pre&gt;包含的文本流。
    在它其中的空格,制表符,回车等可以被直接在网页上,而且也不会被浏览器自动换行。可以用它显示程序代码。
  预格式默认是用等宽字体。</pre>
 
  <p>我们也可以用这些内联标签在文本流中显示代码段:
    <code>&lt;code&gt;代码</code>,
    <kbd>&lt;kbd&gt;键盘输入</kbd>,
    <var>&lt;var&gt;变量</var>,
    <samp>&lt;samp&gt;sample 例句</samp>。
  </p>
 
 
  <p>此外,有两个标签也很重要:</p>
  <ul>
    <li>&lt;abbr&gt;:比如<abbr title="Mister">Mr.</abbr>是Mister的缩写。但这个标记在IE中似乎无效。</li>
    <li>&lt;acronym&gt;<acronym title=""></acronym>:比如<acronym title="Hyper Text Markup Language">HTML</acronym>是Hyper Text Markup Language的首字缩略语(中文也能用这个标签,如:“<acronym title="中华人民共和国">中国</acronym>”是“中华人民共和国”的简称)。</li>
  </ul>
 
  <blockquote cite="#">
    这一段是&lt;blockquote&gt;。记得使用&lt;blockquote&gt;里的cite属性。
  </blockquote>
 
  <address>
    这一段由&lt;address&gt;包含,可以用它来显示Email地址或者真实的地址。要注意的是它是块级元素,但默认没有margin或padding。
  </address>
  <div>这一段由&lt;div&gt;包含,&lt;div&gt;是块级元素,默认没有任何样式。和它地位相当的另一个元素是<span>&lt;span&gt;内联字段</span>,同样默认没有任何样式。<br />
这句话的前面有一个&lt;br&gt;,用于段内换行。</div>

<hr />
  <p>上面的这道横线是&lt;hr&gt;标签。</p>
  <p><a id="a"></a>这句话的前面有一个&lt;a&gt;标签实现的锚标记。</p>
  <p><a href="http:///">&lt;a&gt;也表示链接</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="&lt;img&gt; 标签" /> 图片默认是inline的,但我们也可以将其定义为block。并专门为img定义一个.inline类<img width="100" height="30" alt="img.inline" class="inline" />。此外,链接中的&lt;img&gt;的样式又有所不同<a href="#"><img width="60" height="60" alt="&lt;a&gt;中的&lt;img&gt;" /></a>。</p>
  <p><object width="200" height="150"><param name="movie" value=""></param></object>
  还有用于插入媒体的&lt;object&gt;标签以及它里面的&lt;param&gt;标签。</p>
<hr />
 
  <ul>
    <li>无序列表的外层是&lt;ul&gt;</li>
    <li>列表的每一项由&lt;li&gt;组成</li>
    <li>注意,&lt;ul&gt;标签里只能直接包含&lt;li&gt;标签
      <ul>
        <li>这是嵌套的二级列表,必须放在某个&lt;li&gt;中</li>
        <li>注意嵌套的二级列表项的样式可能与一级的不同
          <ul>
            <li>这是第三级,它的样式又和第二级的不同</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
  <ol>
    <li>有序列表的外层是&lt;ol&gt;</li>
    <li>列表的每一项由&lt;li&gt;组成</li>
    <li>注意,&lt;ol&gt;标签里只能直接包含&lt;li&gt;标签
      <ol>
        <li>这是嵌套的二级列表,必须放在某个&lt;li&gt;中</li>
        <li>注意嵌套的二级列表项的样式可能与一级的不同
          <ol>
            <li>这是第三级,它的样式又和第二级的不同</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
 
  <dl>
    <dt>这一行是&lt;dt&gt;</dt>
    <dd>这一行则是&lt;dd&gt;。而定义列表外层是&lt;dl&gt;。</dd>
    <dt>注意&lt;dt&gt;只能包含内联级别元素</dt>
    <dd>而&lt;dd&gt;可以包含内联或者块级的元素</dd>
  </dl>

  <hr />
 
 
  <p>标准表格模型。其中由&lt;colgroup&gt;与&lt;col&gt;控制列宽度。</p>
  <table>
    <caption>
    此处是&lt;caption&gt;
    </caption>
    <colgroup>
      <col width="30%" />
      <col width="50%" />
      <col width="20%" />
    </colgroup>
    <thead>
      <tr>
        <th>这一行是&lt;thead&gt;</th>
        <th>&lt;thead&gt;中可以用&lt;th&gt;或&lt;td&gt;</th>
        <th>这里使用的是&lt;th&gt;</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>最后一行是&lt;tfoot&gt;</td>
        <td>&lt;tfoot&gt;无论放在什么位置,总显示在最末端</td>
        <td></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>以下三行是&lt;tbody&gt; </td>
        <td>可以放任意个&lt;tr&gt;</td>
        <td>这里使用的是&lt;td&gt;</td>
      </tr>
      <tr>
        <td>用&lt;col&gt;表示列</td>
        <td>该行最右单元为空表格单元,没有任何内容</td>
        <td></td>
      </tr>
      <tr>
        <td>用&lt;tr&gt;表示行</td>
        <td>该行最右单元则有一个&amp;nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
 
  <hr />
 
  <form action="">
    <p>&lt;form&gt;标签不可以直接包含各种控件标签,可以用<label>&lt;label&gt;</label>包含表单元件,</p>
    <fieldset>
      <legend>也可以用&lt;fieldset&gt;和&lt;legend&gt;标签将表单归组。</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 />&lt;button&gt; 标签</button>
        <button disabled="disabled"><img />禁用的&lt;button&gt; 标签</button>
      </p>
     
      <p>
        <label for="textarea">&lt;textarea&gt;默认是底部对齐</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>选项可以用&lt;optgroup&gt;分组</option>
            <option>并由其label属性指定组名</option>
          </optgroup>
          <optgroup label="这是第二组">
            <option>组名只是一个提示文字,不是选项</option>
          </optgroup>
        </select>
        <select multiple="multiple" name="textarea">
          <option>当&lt;select&gt;的size属性大于1或指定了multiple属性</option>
          <option>就会成为这样的多行选框</option>
        </select>
        <select name="textarea" disabled="disabled">
          <option>禁用的下拉选框</option>
          <option>就会成为这样的多行选框</option>
        </select>
      </p>
    </fieldset>
  </form>

</body>
</html>

Tags:HTML5 , 草案
公司简介 | 公司新闻 | 联系我们 | 有问必答 | 网站地图 | 网站备案
Copyright © 2001-2021 www.01www.com Inc. All rights reserved. 中国信息港旗下网站
《中华人民共和国增值电信业务经营许可证》编号:京B2-20070158(ISP) 京ICP证050145号(ICP)
地址:河南省郑州市经三路鑫苑金融广场金座2006室
第一万维网---中国老牌优秀虚拟主机服务提供商!