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

作者：   分类： 编码   发表： 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://www.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://www.renniaofei.com/” target=”_blank”> </head>

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

base标签在框架中的使用

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

链接页list.htm

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

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

7. <blockquote>：表示引用块

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

示例：

<blockquote cite=”http://www.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://www.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://www.renniaofei.com/”> http://www.renniaofei.com/ </del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.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://www.renniaofei.com/”> http://www.renniaofei.com/ </del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.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://www.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://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.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>

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

无觅相关文章插件，快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates