DIVCSS网页布局基础常用HTML标签介绍.ppt

DIVCSS网页布局基础常用HTML标签介绍.ppt

《DIVCSS网页布局基础常用HTML标签介绍.ppt》由会员分享，可在线阅读，更多相关《DIVCSS网页布局基础常用HTML标签介绍.ppt（22页珍藏版）》请在冰豆网上搜索。

收集,文档名称：

PPT演示模板Copyright（c）GillionPage1of5Author：

HellenVersion:

3.0Date:

05.06.2006,XHTML+CSS网页布局基础-常用HTML标签介绍,常用HTML标签介绍目录,收集,HTML简介,table标签介绍,ul,ol,dl标签介绍,iframe标签介绍,div标签介绍,HTML介绍,收集,HTML,div,p,a,span,h1,h2,h3,h4,formtableuloldl,CSS,服务,常用HTML标签介绍目录,收集,HTML简介,table标签介绍,ul,ol,dl标签介绍,iframe标签介绍,div标签介绍,table标签介绍,table的适用范围展示表格式的数据（例.net里的grid控件）作为表单的容器来放置控件作为通过html文本编辑器所产生的信息的容器,收集,table标签介绍,2.Table标签所包含的子标签thead定义表格的表头tbody定义表格的主体tfoot定义表格的页脚tr定义表格中的一行th定义表格内的表头单元格。

此th元素内部的文本通常会呈现为粗体td定义表格中的一个单元格,收集,table标签介绍,3.table的默认属性,收集,示范代码：

Gillion吉联新软件,table的宽度会根据所有单元格的宽度自动调节td会根据自己所包含的内容自动分配宽度默认带有2PX的单元格间距,示范代码生成的表格效果图,table标签介绍,4.grid布局,收集,要点：

thead,tbody,tfoot的特点thead,tbody,ftoot在代码书写的时候顺序可打乱，在页面显示时会自动按theadtbodyftoot的顺序显示th的属性th标签自带有字体加粗，居中显示效果。

thwhite-space:

nowrap;（强制不换行）列宽的设置每个列的宽度只需在表头的th标签设置，无需在每个td都做宽度设置。

table标签介绍,收集,带滚动条的grid带有滚动条的grid只需在外围套一个div,该div必须根据需要设置宽度跟高度，同时所包含的表格table标签必须设置宽度（否则table会默认为宽度自适应，造成table宽度受挤压）网格线的处理1.此种方法等价于tableborder:

1px;tdborder:

1px,即同时设置了table和td的边框2.边框1像素的处理方法tableborder:

1pxsolid#666666;border-collapse:

collapse;设置表格的行和单元格的边合并在一起；此方法会同时去除table默认的单元格间距,常用HTML标签介绍目录,收集,HTML简介,table标签介绍,ul,ol,dl标签介绍,iframe标签介绍,div标签介绍,ul,ol,dl标签介绍,收集,列表标签简介ul:

无序列表；子标签为，即列表的项目。

ol:

有序列表；子标签为，即列表的项目。

dl:

定义列表，子标签有，其为定义的项目，为定义的描述。

适用于所有列表类数据的显示，如新闻列表，菜单等。

列表项目列表项目,列表项目列表项目,列表项目项目描述项目描述,ul标签代码使用示范：

ol标签代码使用示范：

dl标签代码使用示范：

ul,ol,dl标签介绍,收集,2.ul,ol在不同浏览器下的区别ul,ol的特点基本一样，区别只在于一个是有序的，一个是无序的，但是通过CSSlist-type属性的设置，也可以有序变无序，无序变有序。

值得注意的就是ul，ol标签在不同浏览器下，默认的属性是有区别的。

默认在IE下附带的CSS样式：

margin-left:

40px;默认在FF下附带的CSS样式：

padding-left:

40px;,鉴于ul,ol标签在不同浏览器下默认的不同样式，为了统一页面在不同浏览器下的视觉效果，一般会在CSS中对ul,ol标签做统一的全局定义。

ul,olmargin:

0;padding:

0;,ul,ol,dl标签介绍,收集,3.dl定义列表的默认属性dd标签附带的默认属性：

margin-left:

40px;4.列表标签的实际应用鼠标事件（onmouseover,onmouseout）的样式变化A.JavaScript类型:

B.CSS类型:

列表项目列表项目,.ul_aliadisplay:

block;.ul_alia:

hoverBackground-color:

#cccccc;,onmouseover=“this.className=list_over”onmouseout=“this.className=list_out”,.list_out.list_over,常用HTML标签介绍目录,收集,HTML简介,table标签介绍,ul,ol,dl标签介绍,iframe标签介绍,div标签介绍,iframe标签介绍,收集,iframe标记的使用格式是:

1.iframe的属性src：

文件的路径，既可是HTML文件，也可以是文本、ASP等；width、height：

“内部框架”区域的宽与高。

scrolling:

当SRC的指定的HTML文件在指定的区域无法完全显示时的滚动选项，值为NO，Auto，Yes。

FrameBorder：

区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。

name:

框架的名字，用来进行识别。

当想用父框架控制内部框架时，可使用：

target=“框架的名字”来控制。

iframe标签介绍,收集,2.iframe的默认状态scrolling:

atuo;FrameBorder：

默认下带有3D效果的边框。

iframe在火狐下可设置背景色，但在IE下却始终为白色。

常用HTML标签介绍目录,收集,HTML简介,table标签介绍,ul,ol,dl标签介绍,iframe标签介绍,div标签介绍,div标签介绍,收集,1.什么是divdiv元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

2.div的使用div元素是块级元素，用于组合一大块的代码。

div标签介绍,收集,3.div在布局上经常使用的CSS属性width设置div的宽度。

height设置div的高度。

float设置div的浮动，值有none,left,right。

margin设置div的外补丁。

（可分解为margin-left,margin-right,margin-top,margin-bottom）padding设置div的内补丁。

（可分解为padding-left,padding-right,padding-top,padding-bottom）,div标签介绍,收集,4.margin与padding的特点CSS语句的写法：

当一个div设置了float:

left，又同时设置了margin-left值，则会在IE6下产生margin-left值被自动乘2的BUG，解决办法是多加display:

inline。

margin-left:

10px;margin:

10px;margin:

10px20px;margin:

10px20px30px;margin:

10px20px30px40px;,padding-left:

10px;padding:

10px;padding:

10px20px;padding:

10px20px30px;padding:

10px20px30px40px;,div标签介绍,收集,5.利用float设置简单布局内嵌的div宽度之和不可高于父级div宽度，否则会导致部分div换行导致布局错乱；,XHTML+CSS网页布局基础,收集,Question&Answer,