天高任鸟飞

       

36个非常重要但常被遗忘的HTML标签

作者：     目录： PHP+MySQL     发表： 2010年01月07日

每一个HTML标签都有其用法，但我们在写HTML代码时，却常常舍近求远，忽略了很多非常重要且特别有用的标签。

既然HTML中定义了这么多标签，而且每种标签都有其用法，我们为什么不尽量去使用这些标签呢。下面收集并整理了36个常被我们遗忘却非常有用的HTML标签。

1. <!– –> :注释

2. <!DOCTYPE>：文档类型声明

文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTDs，将使网页进入一种混乱模式(quirks mode)。

示例：

  • XHTML过渡定义类型，此类型可以使用HTML4中的标签

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • XHTML严格定义类型，此文档只可以使用XHTML1中定义的标签

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  • XHTML1.1版定义类型

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

  • XHTML框架定义类型。(可以使用框架)

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

3. <abbr>：缩写

示例：<abbr title=”Limited”>Ltd.</abbr>

说明：简称和缩写是对一个惯用词组的缩写表示，一般使用词组中每个单词的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一种提取首字母的缩写.有时候缩写经常会在最后加一个。

4. <acronym>： 取首字母的缩写

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>： 定义图像点击区域

  • area标签是单独出现的，<area />
  • area标签必须使用在map标签中，而且必须配合img标签使用。
  • 属性：
    • Common — 一般属性
    • accesskey — 链接的快捷键访问方式
    • alt — 图像的提示文字
    • coords — 定义可点击区域图形的坐标
    • href — HTML链接源的URL
    • nohref — 图像点击排除的区域，当不使用href时应使用nohref
    • shape — 可点击区域的形状
    • tabindex — 使用”Tab”键的遍历顺序
    • target — 链接目标
  • area是client-side image map area的意思，区域

area标签示例：

<img src=”http://renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

6. <base>: 定义基URL用于页面的链接与引用

  • base标签是单独出现的，<base />
  • base标签只能放置在head标签内
  • 当使用相对路径定义链接时，可以使用base标签定义基URL解析所有文档中定义的相对路径的URL
  • 属性：
    • href — 基URL
    • target — 链接目标
  • base是document base URI的意思

base标签示例

<head> <base href=”http://renniaofei.com/” target=”_blank”> </head>

使用上面示例代码的html页面中的相对链接，将直接指向基URL http://renniaofei.com/，并且使用弹出窗口。

base标签在框架中的使用

base标签通常可以使用在框架链接中，例如
<frameset cols=”20%, *”> <frame src=”list.html”> <frame src=”http://renniaofei.com/” name=”mainTarget”> </frameset>

链接页list.htm

l<head> <base target=”mainTarget”> </head> <a href=”http://renniaofei.com/category/design”>design</a> <a href=”http://renniaofei.com/category/graphic”>graphic</a> <a href=”http://renniaofei.com/category/inspiration”>inspiration</a> <a href=”http://renniaofei.com/category/freebies”>freebies</a>

通过上面示例可以避免在每个链接中写入target=”mainTarget”

7. <blockquote>：表示引用块

  • blockquote标签是成对出现的，以<blockquote>开始，以</blockquote>结束
  • 属性：
    • Common — 一般属性
    • cite — 被引用内容的URI

示例：

<blockquote cite=”http://renniaofei.com/xhtml/”> <p>标准网页设计要区分内容与表现，学习标准网页设计。</p> </blockquote>

8. <button> ：定义按钮

  • button标签是成对出现的，以<button>开始，</button>结束
  • 可以定义比input内容更丰富的按钮。
  • 属性：
    • Common — 一般属性
    • accesskey — 快捷键访问方式
    • disabled — 禁止使用
    • name — 标签名称
    • tabindex — 使用”Tab”键的遍历顺序
    • type — 按钮类型
      • button — 普通按钮
      • reset — 重置表单按钮
      • submit — 提交按钮
    • value — 通过表单传递到服务器端的数据
  • button是push button的意思，按钮

button标签示例：

<button type=”submit”>提交</button>

一个使用文字的普通的提交按钮

<button type=”reset”> 从<strong>任鸟飞</strong>提交表单 </button>

改变按钮内加重文字的button标签

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

说明：使用图片的button标签，注意有alt的提示文字。

9. <caption>：HTML表格的标题

  • caption标签是成对出现的，以<caption>开始。</caption>结束
  • 属性：
    • Common — 一般属性
  • caption:标题

示例：

<table width=”80%”> <caption> 域名数量介绍 </caption> <tr> <th>www.renniaofei.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

说明：

  • caption标签可以为表格提供一个描述，和图像的说明alt比较类似.默认情况下，浏览器显示表格标题在表格的上方。
  • CSS里的caption-side属性用来控制表格标题显示的位置。

10. <cite>引用

  • cite标签是成对出现的，以<cite>开始，以</cite>结束
  • 属性：
    • Common — 一般属性
    • cite — 引用内容的URI
  • cite是citation的缩写

示例：

<cite cite=”http://renniaofei.com/”>一步步的教我学会HTML与XHTML</cite>

11. <col> 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行

  • col标签是单独出现的，<col />
  • 属性：
    • Common — 一般属性
    • span — 定义一个col跨越的列数,默认值为1

12. <colgroup>表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式

  • colgroup标签是成对出现的，以<colgroup>开始，以</colgroup>结束
  • 属性：
    • Common — 一般属性
    • span — 定义一个colgroup跨越的列数,默认值为1

13. <dd>代表HTML自定义列表描述

  • dd标签是成对出现的，,以<dd>开始，</dd>结束
  • 属性：
    • Common — 一般属性
  • dd是definition description的缩写

14. del 标签 — 定义被删除的文本

  • del标签是成对出现的,以<del>开始，</del>结束
  • del通常应连同ins标签一同使用，表示被删除与被插入的文本
  • 通过del与ins定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统
  • 使用del定义的文本通常带有删除线
  • 属性：
    • Common — 一般属性
    • cite — 引用网址，定义为何删除的引用网址
    • datetime — 删除的时间与日期
    • title — 定义删除的目的或提示
  • del是deleted text的缩写，删除文本

del标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://renniaofei.com/”> http://renniaofei.com/ </del> <ins>http://renniaofei.com/</ins> ，原先 <del>http://renniaofei.com/</del> 网址已经删除。 </p>

15. <dir> 定义多层目录列表

  • 不符合标准网页设计的理念，不赞成使用.
  • dir标签是成对出现的，以<dir>开始，</dir>结束
  • 属性：
    • Common — 一般属性
  • dir是directory lists的缩写，目录列表

16. <dfn> – 定义标签

  • dfn标签是成对出现的，以<dfn>开始，以</dfn>结束
  • 属性：
    • Common — 一般属性
  • dfn是defining instance的缩写

示例： <dfn>任鸟飞</dfn>网页设计网!

17. <dl> 代表HTML自定义列表

  • dl标签是成对出现的，以<dl>开始，</dl>结束
  • 自定义列表的开始使用<dl>标签，列表中每个元素的标题使用<dt>(definition term)定义，后面跟随<dd>(definition description)用于描述列表中元素的内容.
  • 属性：
    • Common — 一般属性
  • dl是definition lists的英文缩写

示例：

<dl> <dt>www</dt> <dd>World Wide Web的缩写.</dd> <dt>renniaofei</dt> <dd>任鸟飞</dd> <dd>www的:).</dd> <dt>com</dt> <dt>com.cn</dt> <dt>cn</dt> <dd>这都是域名的后缀.</dd> </dl>

说明：

不一定每个dt标签要对应一个dd，可以一对多或多对一(就像上面的例子)

18. <dt>代表HTML自定义列表组

  • dt标签是成对出现的，以<dt>开始，</dt>结束
  • 属性：
    • Common — 一般属性
  • dt是definition term的缩写

19. <em> 强调标签

  • em标签是成对出现的，以<em>开始，以</em>结束
  • 属性：
    • Common — 一般属性
  • em是emphasis的缩写

示例： 强调一下,<em>不要</em>和我开玩笑!

20. <ins> 定义被插入的文本

  • ins标签是成对出现的，以<ins>开始，</ins>结束
  • ins通常应连同del标签一同使用，表示被插入与被删除的文本
  • 通过ins与del定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统
  • 使用ins定义的文本通常带有下划线
  • 属性：
    • Common — 一般属性
    • cite — 引用网址，定义为何插入的引用网址
    • datetime — 插入的时间与日期
    • title — 定义插入的目的或提示
  • ins是inserted text的缩写，插入文本

ins标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://renniaofei.com/”> http://renniaofei.com/ </del> <ins>http://renniaofei.com/</ins> ，原先 <del>http://renniaofei.com/</del> 网址已经删除。 </p>

21. <kbd>标签表明使用者输入的文字

  • kbd标签是成对出现的，以<kbd>开始，以</kbd>结束
  • 属性:
    • Common — 一般属性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定义图像点击区域的集合

  • map标签是成对出现的,以<map>开始，</map>结束
  • map标签必须配合area标签使用
  • map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致
  • 属性
    • Common — 一般属性
    • id — 定义map的名称。
    • name — 定义map的名称。
  • map是client-side image map的意思

map标签示例：

<img src=”http://renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

23. <menu> 定义菜单列表

  • 不符合标准网页设计的理念，不赞成使用。
  • menu标签是成对出现的,以<menu>开始，</menu>结束
  • 属性
    • Common — 一般属性
  • menu:菜单

24. <noframes>对不支持框架的设备进行提示

  • noframes标签是成对出现的，以<noframes>开始，</noframes>结束
  • 由于frameset内不能包含body标签，因此noframes内部必须包含body标签

示例

<frameset cols=”50%,25%,25%”> <frame src=”http://renniaofei.com/category/design”> <frame src=”http://renniaofei.com/graphics/”> <frame src=”http://renniaofei.com/inspiration/”> <noframes> <body> <p>任鸟飞网页设计网使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问。</p> </body> </noframes> </frameset>

25. <noscript>无法加载脚本时的提示文字

  • noscript标签是成对出现的，以<noscript>开始,以</noscript>结束

示例

<noscript>此页面无法加载js脚本代码。</noscript>

26. <q>

表示一个行引用

  • q标签是成对出现的，以<q>开始，以</q>结束。
  • 属性:
    • Common — 一般属性
    • cite — 引用内容的URI
  • q是quoted text的缩写

示例：

<cite>古人</cite>云：<q>良言一句三冬暖，恶语伤人六月寒。</q>

27. <s>定义删除线的文字

  • 不符合标准网页设计的理念，不赞成使用。
  • s标签是成对出现的，以<s>开始，以</s>结束
  • 属性：
    • Common — 一般属性
  • s是strikethrough的缩写

28. <sub>表示下标

  • sub标签是成对出现的，以<sub>开始。以</sub>结束
  • 属性：
    • Common — 一般属性
  • sub是subscript的缩写

29. <sup>表示上标

  • sup标签是成对出现的，以<sup>开始，以</sup>结束
  • 属性：
    • Common — 一般属性
  • sup是superscript的缩写

30. <tbody> 表示HTML表体

浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时,可以使用tbody分段显示。

31. <tfoot>表示HTML表脚

表格的表脚tfoot，可以使用单独的样式定义表脚，并且在打印时可以在分页的下部打印表脚。

32. <th>代表HTML表格中的表头

  • th标签是成对出现的,以<th>开始，</th>结束
  • 属性：
    • Common — 一般属性
    • abbr — 代表表头的简写
    • axis — 对单元格在概念上分类
    • colspan — 一行跨越多列
    • headers — 连接表格的数据与表头
    • rowspan — 一列跨越多行
    • scope — 定义行或列的表头
    • align — 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
    • valign — 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
  • th是table header cell的缩写

示例：

<table width=”80%” border=”1″> <tr> <th>www.renniaofei.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <th>2003年</th> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

33. <thead>表示HTML表头

表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头

34. l 标签 — 表示一段语句

  • l标签是成对出现的，以<l>开始,以</l>结束
  • 属性：
    • Common — 一般属性
  • l是line of text的缩写

示例： <l>一行实实在在的文字!</l>

35. <Code>代码标签

code标签是成对出现的，以<code>开始，以</code>结束，常用于显示源代码。

36. <fieldset> 表单分组

如果一个页面的表单项太多，我们最好把它们分组显示，就像使用p标签分开段落一样，可以使用fieldset与legend标签对表单内容分组。

  • fieldset标签是成对出现的，以<fieldset>开始，以</fieldset>结束
  • 一个表单可以有多个<fieldset>，每对<fieldset>为一组，每组内容的描述可以使用legend标签说明

示例：

<fieldset> <legend>我最喜爱的：</legend> <label for=”computer”>计算机</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>购物</label> <input type=”checkbox” value=”3″ id=”fav” name=”fav” /> </fieldset>

标签：

发表评论