广告位联系
返回顶部
分享到

36个重要的HTML标签 网页设计必知!

HTML/Xhtml 来源:互联网 作者:1讯站 发布时间:2018-04-06 18:48:39 人浏览
摘要

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

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

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

1. <!? ?> :注释

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

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

示例:

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

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

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

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

XHTML1.1版定义类型

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

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

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

3. <abbr>:缩写

示例:<abbr title=”Pmited”>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是cPent-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=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>

链接页Pst.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 Psts的缩写,目录列表


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

示例:

<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是cPent-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 ― 定义行或列的表头

aPgn ― 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)

vaPgn ― 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | basePne(基线对齐))(此属性应该使用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是Pne 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>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • HTML静态页面获取url参数和UserAgent的实现代码

    HTML静态页面获取url参数和UserAgent的实现代码
    接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录
  • html网页引入svg图片的4种方式总结
    web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
  • html中两种获取标签内的值的方法介绍
    获取标签中value的值 使用的javascript获取,所以肯定是包含在 script 标签里的,也需要引入jquery 标签示例: 1 input id=goodsCount type=text size=2 re
  • HTML基本元素标签介绍

    HTML基本元素标签介绍
    一、什么是HTML HTML(Hypertext Markup Language):即超文本标记语言,是一种用来设计网页的标记语言,用该语言编写的文件,以.html或.htm为后缀
  • HTML中的表格元素介绍

    HTML中的表格元素介绍
    表格元素的作用:用来格式化显示数据。 一、表格的基本结构 表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
  • HTML中的表单元素介绍

    HTML中的表单元素介绍
    表单元素概述 表单(Form),用于收集用户信息、提交用户请求等 处理过程 1、设计表单,并放入一些输入域 2、网站访问者在自己的计算机
  • HTML怎么设置下划线?html文字加下划线方法

    HTML怎么设置下划线?html文字加下划线方法
    HTML中的下划线曾经是将文本包含在u/u标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引
  • 关于HTML编码导致的乱码问题介绍

    关于HTML编码导致的乱码问题介绍
    今天一个学弟问了一个问题,它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹,打开一看,很简单
  • 纯html+css实现Element loading效果的代码

    纯html+css实现Element loading效果的代码
    这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下! 分析 动画由两部分组成: 蓝色的弧线由点伸展成一个圆,又从圆收缩成
  • HTML+CSS实现导航条下拉菜单的代码

    HTML+CSS实现导航条下拉菜单的代码
    代码中的图片可以自己换的 下拉菜单HTML代码 header class=header div class=header_left img src=img/logo.jpg /div div class=header_right div class=number_right img src
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计