html标签（四）

时间 2019-11-13

标签 html 标签栏目 HTML 繁體版

原文原文链接

先看例子 javascript

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

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

   <head> 

04	<title>趴在树上的猪</title>

05	<base href="http://news.baidu.com/resource/img/">

06	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

07	<link rel="stylesheet" type="text/css" href="/index.css" />

08	<script type="text/javascript">

09	document.write("Hello World!")

10

     </script> 

11	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

12	<style type="text/css">

13	body{color:#333;}

14

     </style> 

15

   </head> 

16	<body class="html">

17

     <div> 

18

       列表 

19

       <ul> 

20	<li>我是无序列表</li>

21	<li>我是无序列表</li>

22	<li>我是无序列表</li>

23	<li>我是无序列表</li>

24

       </ul> 

25

       <ol> 

26	<li>我是有序列表</li>

27	<li>我是有序列表</li>

28	<li>我是有序列表</li>

29	<li>我是有序列表</li>

30

       </ol> 

31

       <dl> 

32	<dt>猪哥</dt>

33	<dd>猪哥每日一贴</dd>

34	<dt>网站</dt>

35	<dd>www.qaforcode.net</dd>

36

       </dl> 

37

     </div> 

38

     <div> 

39	<img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="百度logo"usemap="#testmap">

40	<map name="testmap" id="testmap">

41	<area shape="rect" coords="100,40,160,90" href ="http://www.qaforcode.net"alt="首页" />

42

       </map> 

43

     </div> 

44

45	<table cellpadding="10" cellspacing="0" border="1">

46	<caption>qaforcode.net</caption>

47	<tr><th align="left">th</th> <th align="right">th</th><th>th</th></tr>

48	<tr><td colspan="2">table</td> <td rowspan="2">table</td></tr>

49	<tr><td>table</td> <td>table</td></tr>

50

     </table> 

51

52

     <div> 

53	<iframe src="http://www.baidu.com" width="960px;" />

54

     </div> 

55

56

   </body> 

57

 </html> 

1、<iframe>标签

简单来讲<iframe>标签用于载入其余文档，和咱们原来的文档又不相关。看例子就能理解了。 css

属性	值	描述	DTD
align	left right top middle bottom	不同意使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。	TF
frameborder	1 0	规定是否显示框架周围的边框。	TF
height	pixels %	规定 iframe 的高度。	TF
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。	TF
marginheight	pixels	定义 iframe 的顶部和底部的边距。	TF
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。	TF
name	frame_name	规定 iframe 的名称。	TF
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。	TF
src	URL	规定在 iframe 中显示的文档的 URL。	TF
width	pixels %	定义 iframe 的宽度。	TF

标准属性：id, class, title, style html

2、列表相关标签

首先来看看ul和ol，两个基本上是同样的，只不过前者是无序的后者是有序的。区别能够看例子。可是这二者都必须包含li标签。 java

标准属性：id, class, title, style, dir, lang, xml:lang jquery

事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup ajax

另一种是dl dd dt，这种列表会有缩进，具体看例子就明白了。属性和上面相似，实际使用中好像很少。 api

3、图片标签

<img>标签，应该在前面有使用过，很简单了就是在某个地方放个图片服务器

必须属性：框架

属性	值	描述	DTD
alt	text	规定图像的替代文本。	STF
src	URL	规定显示图像的 URL。	STF

可选属性： ide

属性	值	描述	DTD
align	top bottom middle left right	不推荐使用。规定如何根据周围的文原本排列图像。	TF
border	pixels	不推荐使用。定义图像周围的边框。	TF
height	pixels %	定义图像的高度。	STF
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。	TF
ismap	URL	将图像定义为服务器端图像映射。	STF
longdesc	URL	指向包含长的图像描述文档的 URL。	STF
usemap	URL	将图像定义为客户器端图像映射。	STF
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。	TF
width	pixels %	设置图像的宽度。	STF

标准属性：id, class, title, style, lang, xml:lang

事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

和图片相关的还有个map标签，用来对图上的某些点作连接，好比上例中百度logo的熊掌连接到了猪哥的首页。map必须有个id属性，而且是惟一的，共img标签使用。map标签须要保安area标签才能起做用

标准属性：class, title, style, dir, lang, xml:lang

事件属性：tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

area标签的必要属性：

属性	值	描述	DTD
alt	text	定义此区域的替换文本。	STF

area标签可选属性：

属性	值	描述	DTD
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。	STF
href	URL	定义此区域的目标 URL。	STF
nohref	nohref	从图像映射排除某个区域。	STF
shape	default 默认 rect 长方形 circ 圆形 poly	定义区域的形状。	STF
target	_blank _parent _self _top	规定在何处打开 href 属性指定的目标 URL。	TF

area标准属性：id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

area事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

4、表格相关

表格是由table，tr，th或td组成，表格在曾经是布局的主要标签，

table标签可选属性

属性	值	描述	DTD
align	left center right	不同意使用。请使用样式代替。规定表格相对周围元素的对齐方式。	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	不同意使用。请使用样式代替。规定表格的背景颜色。	TF
border	pixels	规定表格边框的宽度。	STF
cellpadding	pixels %	规定单元边沿与其内容之间的空白。	STF
cellspacing	pixels %	规定单元格之间的空白。	STF
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪一个部分是可见的。	STF
rules	none groups rows cols all	规定内侧边框的哪一个部分是可见的。	STF
summary	text	规定表格的摘要。	STF
width	% pixels	规定表格的宽度。	STF

caption标签用来定义表格标题。

th用来定义表头信息（通常是第一行），td用在普通行，他们的可选属性有

属性	值	描述	DTD
abbr	text	规定单元格中内容的缩写版本。	STF
align	left right center justify char	规定单元格内容的水平对齐方式。	STF
axis	category_name	对单元格进行分类。	STF
bgcolor	rgb(x,x,x) #xxxxxx colorname	不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。	TF
char	character	规定根据哪一个字符来进行内容的对齐。	STF
charoff	number	规定对齐字符的偏移量。	STF
colspan	number	设置单元格可横跨的列数。	STF
headers	idrefs	由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。	STF
height	pixels %	不推荐使用。请使用样式替代它。规定表格单元格的高度。	TF
nowrap	nowrap	不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。	TF
rowspan	number	规定单元格可横跨的行数。	STF
scope	col colgroup row rowgroup	定义将表头数据与单元数据相关联的方法。	STF
valign	top middle bottom baseline	规定单元格内容的垂直排列方式。	STF
width	pixels %	不推荐使用。请使用样式取而代之。规定表格单元格的宽度。	TF

他们的标准属性有：id, class, title, style, dir, lang, xml:lang

事件属性有：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

其余标签好像用不大到，就再也不介绍了。

5、div span标签

div用来定义一块内容（自动换行），span用来定义一句内容（不换行），换不换行其实和他们的类型有关，这个在之后讲。

标准属性有：id, class, title, style, dir, lang, xml:lang

事件属性有：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

总结：经常使用的标签基本上都讲过了，其实大体了解下就能够了，之后在实践中碰到再去详细了解，慢慢就熟悉了，如今就混个脸熟。元素的属性也不用去记，基本上都有id，class，style这几个属性，用到的也就是这几个属性，事件属性基本上都是有的遇到问题再去实际解决就能够了。

本文固定连接: http://www.qaforcode.net/archives/332 | 猪哥每日一贴