HTML测试文档

网页标准

10June2008

这是去年在复习HTML标签的时候顺便制作的一个文档，里面包含了(几乎)所有的HTML标签。一方面是作为一个归纳，可以通过这个看到哪些其实可以用但是被我们忽略掉的标签，另一方面也是用来测试一些对HTML定义默认样式的样式表，可以把你自己定义的默认样式表放进去测试一下，看看是不是所有的HTML标签都定义到了。

当前版本号是1.2。全部代码在下面的文字框内。也可以点此处下载该htm文件。

<!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;acronym&gt;：是指首字母缩写。比如<acronym title="Hyper Text Markup Language">HTML</acronym>是Hyper Text Markup Language的首字缩略语</li>    <li>&lt;abbr&gt;：是指“简写”或“简称”，比如<abbr title="Mister">Mr.</abbr>是Mister的缩写，“<acronym title="中华人民共和国">中国</acronym>”是“中华人民共和国”的简称）。但这个标记在IE中似乎无效。</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>

提示：您可以修改代码之后再运行

P.S. 用来测试了一下著名的YUI里的reset.css，有一点点小问题。哈~

前一篇

后一篇由吊扇的图案联想到的两点