36个非常重要但常被遗忘的HTML标签,每一个HTML标签都有其用法，但我们在写HTML代码时，却常常舍近求远，忽略了很多非常重要且特别有用的标签。 既然HTML中定义了这么多标签，而且每种标签都有其用法，我们为什么不尽量去使用这些标签呢。下面收集并整 ...
【 tulaoshi.com - Html 】
每一个HTML标签都有其用法，但我们在写HTML代码时，却常常舍近求远，忽略了很多非常重要且特别有用的标签。
既然HTML中定义了这么多标签，而且每种标签都有其用法，我们为什么不尽量去使用这些标签呢。下面收集并整理了36个常被我们遗忘却非常有用的HTML标签。
文档类型，会使浏览器使用相应的方式加载网页并显示，忽略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链接源的URLnohref — 图像点击排除的区域，当不使用href时应使用nohrefshape — 可点击区域的形状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 — 基URLtarget — 链接目标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 <thwww.renniaofei.com</th <th.com域名的数量</th <th.cn域名的数量</th <th.net域名的数量</th </tr <tr <td2003年</td <td1000</td <td2000</td <td3000</td </tr <tr <td2004年</td <td4000</td <td5000</td <td6000</td </tr <tr <td2005年</td <td7000</td <td8000</td <td9000</td </tr </table
说明：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）caption标签可以为表格提供一个描述，和图像的说明alt比较类似.默认情况下，浏览器显示表格标题在表格的上方。CSS里的caption-side属性用来控制表格标题显示的位置。10. <cite引用cite标签是成对出现的，以<cite开始，以</cite结束属性：Common — 一般属性cite — 引用内容的URIcite是citation的缩写示例：
<cite cite=”http://www.renniaofei.com/”一步步的教我学会HTML与XHTML</cite
11. <col 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行col标签是单独出现的，<col /属性：Common — 一般属性span — 定义一个col跨越的列数,默认值为112. <colgroup表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式colgroup标签是成对出现的，以<colgroup开始，以</colgroup结束属性：Common — 一般属性span — 定义一个colgroup跨越的列数,默认值为113. <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 <inshttp://www.renniaofei.com/</ins ，原先 <delhttp://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 <dtwww</dt <ddWorld Wide Web的缩写.</dd <dtrenniaofei</dt <dd任鸟飞</dd <ddwww的:).</dd <dtcom</dt <dtcom.cn</dt <dtcn</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 <inshttp://www.renniaofei.com/</ins ，原先 <delhttp://www.renniaofei.com/</del 网址已经删除。 </p
21. <kbd标签表明使用者输入的文字kbd标签是成对出现的，以<kbd开始，以</kbd结束属性:Common — 一般属性示例： To exit, type <kbdQUIT</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标签示例
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）<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结束示例
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）<noscript此页面无法加载js脚本代码。</noscript
26. <q表示一个行引用
q标签是成对出现的，以<q开始，以</q结束。属性:Common — 一般属性cite — 引用内容的URIq是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 <thwww.renniaofei.com</th <th.com域名的数量</th <th.cn域名的数量</th <th.net域名的数量</th </tr <tr <th2003年</th <td1000</td <td2000</td <td3000</td </tr <tr <th2004年</th <td4000</td <td5000</td <td6000</td </tr <tr <th2005年</th <td7000</td <td8000</td <td9000</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
来源:https://www.tulaoshi.com/n/20160129/1482895.html
看过《36个非常重要但常被遗忘的HTML标签》的人还看了以下文章 更多>>
