相反,li只能呗ul/ol嵌套,dt,dd只能被dl嵌套
其他块标签可以嵌套所以标签
a标签可以嵌套所有标签
其他行内标签只可以嵌套行内标签
所有行内标签不可以嵌套自身
table下只能嵌套tbody和thead
tbody和thead下只能嵌套tr
tr下只能嵌套th、td
td下可嵌套所有标签
使用iframe的客户端包含客户端页面嵌套还可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。如果被嵌套页面太大,超过事先定义的宽度或高度,则首页会出现滚动条。这也许正是你所需要的,但也许会完全破坏主页的设计。
iframe的使用很简单,下面的例子会在你的页面中嵌入另一个叫做include.html的页面:
<iframe src="included.html" width="450" height="400" >
<a href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
</iframe>
这里主页中定义了要插入的页面将显示的高度为400的像素,宽度为450个像素。
我们为什么要在
iframe的里面插入一个普通的超级链接元素<a>呢?这是因为老版本的浏览器和搜索引擎不支持iframe,虽然现在已经很少有人还会使
用Netscape
4这样老的浏览器了,但是几乎所有人都会使用象Google这样的搜索引擎。在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。
另外我们可以定义iframe的一些属性来控制网页的显示效果
,除了前面用到的最常用宽度(width)和高度(height)的定义外,如果在任何情况下都不希望出现滚动条的话,可以定义iframe的
scrolling属性等于"no"。如果不希望镶嵌页面的周围出现边框的话,可以将frameborder属性设置为0。下面这个例子显示了
scrolling和frameborder属性的使用:
<iframe src="included.html" width="450" height="400" frameborder="0" scrolling="no">
<a href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
</iframe>
一、基础铺垫:① table元素的部分属性(针对于本话题):1
2
bgcolor="#ffffff" bordercolordark="" bordercolorlight="" >
border 表格内单元格边框的宽度 [STF][^hello]
[^hello]:注:DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.cellspacing 单元格与单元格之间的 间距 [STF]
cellpadding 单元格的内边距 [STF]
width 表格的宽度 [STF]
bordercolor、bgcolor [TF]但如大家熟知,给border定义为border=”1”,表现缺不符预期,是比一像素粗的边框。
综上这些在元素内用属性定义表现的方式,已被逐渐不推荐——弃用。真正的表现性的东西,应该由css来完成。
但目前可行的,相对科学的、实惠的实现方式究竟如何呢?
② table方面css部分属性(针对于本话题):table{border-collapse:collapseborder-spacing:0}
td{padding:0} 相当于cellpadding
border-collapse 定义相邻单元格边框是否合并
border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别,ie6/7用expression弥补,
见下,管它性能不性能的呢,谁让他用破ie呢)
二、方案(从上到下推荐度逐渐降低):
① css法(table元素上的一些标签属性不用写)1
2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}
td{border:1px solid
② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)1
2table{ background:#000border-collapse:separateborder-spacing:1pxjerry:expression(cellSpacing='1')}
td{background:#fff}
③ css边框拼补法(table元素上的一些标签属性不用写)1
2
3
4
5table{
border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')
border-right:1px solid #000border-bottom:1px solid #000
}
td{border-left:1px solid #000border-top:1px solid #000}
④ css和标签属性结合法1
2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}
⑤ 标签法(原理同②)1
2
3
4
5
6
7
8
9
或
三:注意点
经测试对于单元格边距,单元格间距,单元格边框这三项,如果在元素标签的属性 和 css中的属性 同时定义的情况下:(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是:单元格边距、单元格间距 这两项。也就是说比如以下这种情况下,1
2
3table{border-spacing:0jerry:expression(cellSpacing='0')}
table td{padding:0}
实际表现以css定义为准。
css的定义与标签属性的定义累加(如果有相邻合并,则只累加不相邻的单元格边框)的是:单元格边框宽度。也就是说比如以下这种情况下,1
2table td{border:3px solid #000}
则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义,则只累加不相邻的单元格边框。
附html代码,可以用不同浏览器,及IE的各个版本去测试,及其各种兼容模式,全部没问题