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

那有如何1993

那有如何1993

2016-01-29 11:40

36个非常重要但常被遗忘的HTML标签,每一个HTML标签都有其用法,但我们在写HTML代码时,却常常舍近求远,忽略了很多非常重要且特别有用的标签。 既然HTML中定义了这么多标签,而且每种标签都有其用法,我们为什么不尽量去使用这些标签呢。下面收集并整 ...

每一个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链接源的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

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)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:标题

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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

说明:

caption标签可以为表格提供一个描述,和图像的说明alt比较类似.默认情况下,浏览器显示表格标题在表格的上方。CSS里的caption-side属性用来控制表格标题显示的位置。10. <cite引用cite标签是成对出现的,以<cite开始,以</cite结束属性:Common — 一般属性cite — 引用内容的URIcite是citation的缩写

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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的英文缩写

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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标签

示例

<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 — 引用内容的URIq是quoted text的缩写

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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的缩写

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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标签说明

示例:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

<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


展开更多 50%)
分享

猜你喜欢

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

Html CSS布局 Div+CSS XHTML
36个非常重要但常被遗忘的HTML标签

冬季防晒非常重要

防晒
冬季防晒非常重要

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

夜间护肤非常重要

护肤方法
夜间护肤非常重要

夏季防暑非常重要

夏季养生
夏季防暑非常重要

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

冬季健身预热非常重要

冬季养生
冬季健身预热非常重要

孕期的科学补钙非常重要

电脑网络
孕期的科学补钙非常重要

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript实用技巧集锦(3)

JavaScript实用技巧集锦(3)

超独特!优秀网格布局网页20例

超独特!优秀网格布局网页20例
下拉加载更多内容 ↓