先看例子
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!") |
12 | <style type="text/css"> |
35 | <dd>www.qaforcode.net</dd> |
40 | <map name="testmap" id="testmap"> |
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> |
一、<iframe>标签
简单来说<iframe>标签用于载入其他文档,和我们原来的文档又不相关。看例子就能理解了。
属性 | 值 | 描述 | DTD |
---|
align |
- left
- right
- top
- middle
- bottom
| 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。 | TF |
frameborder |
| 规定是否显示框架周围的边框。 | TF |
height |
| 规定 iframe 的高度。 | TF |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 | TF |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 | TF |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 | TF |
name | frame_name | 规定 iframe 的名称。 | TF |
scrolling |
| 规定是否在 iframe 中显示滚动条。 | TF |
src | URL | 规定在 iframe 中显示的文档的 URL。 | TF |
width |
| 定义 iframe 的宽度。 | TF |
标准属性:id, class, title, style
二、列表相关标签
首先来看看ul和ol,两个基本上是一样的,只不过前者是无序的后者是有序的。区别可以看例子。但是这两者都必须包含li标签。
标准属性:id, class, title, style, dir, lang, xml:lang
事件属性:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
另外一种是dl dd dt,这种列表会有缩进,具体看例子就明白了。属性和上面类似,实际使用中好像不多。
三、图片标签
<img>标签,应该在前面有使用过,很简单了就是在某个地方放个图片
必须属性:
属性 | 值 | 描述 | DTD |
---|
alt | text | 规定图像的替代文本。 | STF |
src | URL | 规定显示图像的 URL。 | STF |
可选属性:
属性 | 值 | 描述 | DTD |
---|
align |
- top
- bottom
- middle
- left
- right
| 不推荐使用。规定如何根据周围的文本来排列图像。 | TF |
border | pixels | 不推荐使用。定义图像周围的边框。 | TF |
height |
| 定义图像的高度。 | STF |
hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 | TF |
ismap | URL | 将图像定义为服务器端图像映射。 | STF |
longdesc | URL | 指向包含长的图像描述文档的 URL。 | STF |
usemap | URL | 将图像定义为客户器端图像映射。 | STF |
vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 | TF |
width |
| 设置图像的宽度。 | 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
四、表格相关
表格是由table,tr,th或td组成,表格在曾经是布局的主要标签,
table标签可选属性
属性 | 值 | 描述 | DTD |
---|
align |
| 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 | TF |
bgcolor |
- rgb(x,x,x)
- #xxxxxx
- colorname
| 不赞成使用。请使用样式代替。规定表格的背景颜色。 | TF |
border | pixels | 规定表格边框的宽度。 | STF |
cellpadding |
| 规定单元边沿与其内容之间的空白。 | STF |
cellspacing |
| 规定单元格之间的空白。 | STF |
frame |
- void
- above
- below
- hsides
- lhs
- rhs
- vsides
- box
- border
| 规定外侧边框的哪个部分是可见的。 | STF |
rules |
- none
- groups
- rows
- cols
- all
| 规定内侧边框的哪个部分是可见的。 | STF |
summary | text | 规定表格的摘要。 | STF |
width |
| 规定表格的宽度。 | 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 |
| 不推荐使用。请使用样式替代它。规定表格单元格的高度。 | TF |
nowrap | nowrap | 不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。 | TF |
rowspan | number | 规定单元格可横跨的行数。 | STF |
scope |
- col
- colgroup
- row
- rowgroup
| 定义将表头数据与单元数据相关联的方法。 | STF |
valign |
- top
- middle
- bottom
- baseline
| 规定单元格内容的垂直排列方式。 | STF |
width |
| 不推荐使用。请使用样式取而代之。规定表格单元格的宽度。 | TF |
他们的标准属性有:id, class, title, style, dir, lang, xml:lang
事件属性有:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
其他标签好像用不大到,就不再介绍了。
五、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 | 猪哥每日一贴