DIV+CSS网页布局基础-常用HTML标签介绍

文档名称：PPT演示模板Copyright(c)GillionPage1of5Author：HellenVersion:3.0Date:05.06.2006XHTML+CSS网页布局基础-常用HTML标签介绍常用HTML标签介绍·目录HTML简介table标签介绍ul,ol,dl标签介绍iframe标签介绍div标签介绍HTML介绍HTMLdivp,a,span,h1,h2,h3,h4…formtableuloldl…CSS服务常用HTML标签介绍·目录HTML简介table标签介绍ul,ol,dl标签介绍iframe标签介绍div标签介绍table标签介绍1.table的适用范围展示表格式的数据(例.net里的grid控件)作为表单的容器来放置控件作为通过html文本编辑器所产生的信息的容器table标签介绍2.Table标签所包含的子标签thead定义表格的表头tbody定义表格的主体tfoot定义表格的页脚tr定义表格中的一行th定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体td定义表格中的一个单元格table标签介绍3.table的默认属性示范代码：tabletrtdGillion/tdtd吉联新软件/tdtdtable的宽度会根据所有单元格的宽度自动调节td会根据自己所包含的内容自动分配宽度默认带有2PX的单元格间距示范代码生成的表格效果图table标签介绍4.grid布局要点：thead,tbody,tfoot的特点thead,tbody,ftoot在代码书写的时候顺序可打乱，在页面显示时会自动按thead→tbody→ftoot的顺序显示th的属性th标签自带有字体加粗，居中显示效果。th{white-space:nowrap;}（强制不换行）列宽的设置每个列的宽度只需在表头的th标签设置，无需在每个td都做宽度设置。table标签介绍带滚动条的grid带有滚动条的grid只需在外围套一个div,该div必须根据需要设置宽度跟高度，同时所包含的表格table标签必须设置宽度（否则table会默认为宽度自适应，造成table宽度受挤压）网格线的处理1.tableborder=1“此种方法等价于table{border:1px;}td{border:1px},即同时设置了table和td的边框2.边框1像素的处理方法table{border:1pxsolid#666666;border-collapse:collapse;}设置表格的行和单元格的边合并在一起；此方法会同时去除table默认的单元格间距常用HTML标签介绍·目录HTML简介table标签介绍ul,ol,dl标签介绍iframe标签介绍div标签介绍ul,ol,dl标签介绍1.列表标签简介ul:无序列表；子标签为li，即列表的项目。ol:有序列表；子标签为li，即列表的项目。dl:定义列表，子标签有dtdd，其dt为定义的项目，dd为定义的描述。适用于所有列表类数据的显示，如新闻列表，菜单等。ulli列表项目/lili列表项目/li/ulolli列表项目/lili列表项目/li/oldldt列表项目/dtdd项目描述/dddd项目描述/dd/dlul标签代码使用示范：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,ol{margin:0;padding:0;}ul,ol,dl标签介绍3.dl定义列表的默认属性dd标签附带的默认属性：margin-left:40px;4.列表标签的实际应用鼠标事件（onmouseover,onmouseout）的样式变化A.JavaScript类型:B.CSS类型:ulclass=“ul_a”liahref=“#”列表项目/a/liliahref=“#”列表项目/a/li/ul.ul_alia{display:block;}.ul_alia:hover{Background-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标记的使用格式是:iframesrc=“URL”width=“x”height=xscrolling=[OPTION]“frameborder=x“name=main/iframe1.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