层标记--div

层

层属于页面中的块级元素，层元素中可以包含所有其他的HTML代码。层提供了一种分块控制网页内容的方法。可以通过改变层的位置来改变层中内容在网页中的相对位置。

层的分类

在Dreamweaver中，层有两类，即CSS层与Netscape层。

CSS层：使用div与span标签定位页面内容。

系统默认使用CSS层。

定义数据块

<div>标签

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

<div>标签的简介

div标签被称为区隔标签，表示一块可显示HTML的区域，用于设置文字、图片、表格等。<div>标签是块元素，需要关闭标签。

<div>

...

</div>

<div>标签的属性

标签的属性属性说明accesskey设置或检索对象的快捷键align设置或检索对象相对于显示或表格的排列方式atomic selection 指定元素机器内容是否可以以不可见形式统一选择begin设置或检索时间线在该元素上播放前的延迟时间class设置或检索对象的类content editable  datafld dataformatas datasrc dir设置或检索对象的阅读顺序disabled设置或检索控件的状态end hidefocus id检索标记对象的字符串lang language设置或检索当前脚本编写用的语言nowrap style为元素设置内嵌样式syncmaster systembitrate systemcaption systemlanguage systemoverduborsubtitle tabindex timecontainer title unselectable 

常用属性介绍：

1、align属性

通过设置属性align，可以改变<div>标签的水平对齐方式。

left，center，right。

2、id属性

id属性用于定义一个元素的独特的样式，即设置标签的标记。

id是一个标签，用于区分不同的结构和内容。

3、class属性

class属性用于指定元素属于何种样式的类，即设置标签的类。

class是一个样式，可以套在任何结构和内容上。

id与class：

id属性是先找到结构和内容，在给他定义样式。

id属性通常用于定义页面上一个仅出现一次的标签。在对页面进行排版结构化布局时一般使用id比较理想，因为一个id在一个文档中只能使用一次。

class属性是先定义好一种样式，再套给多个结构和内容。

class元素用于根据用户定义的标准对一个或多个元素进行定义。

class属性可以反复使用，而id属性在一个页面中只能使用一次。

在一个结构文档中，可以多处使用同一个class名，而id名必须是唯一的。

在实际应用中，class可能对文字的排版等比较有用，而id则对宏观布局和设计放置各种元素较有用。

4、style属性

style属性用于设置对象的内嵌样式。

style属性的常用参数说明参数值说明overflow溢出控制：visible（默认、可见）、auto（自动）、scroll（显示滚动条）width宽度：数值height高度：数值color字体颜色：色彩代码font-size字体大小：数值line-height行高:数值border边框：宽度、类型和颜色，其中，类型主要支持none、dotted、dashed、solid、double、groove、ridge、inset、window-inset、outsetfont-weight字体粗细：normal、bold、bolder、lighterfont-family字体类型：Arial、Tahoma、Verdata、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆background背景颜色：色彩代码scrollbar-base-color滚动条各部分的颜色：色彩代码Filter：chromachroma过滤器：色彩代码，该颜色将对象转换成透明效果word-break断字：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）direction文字方向：ltr（默认，从左向右）、rtl（从右向左）position设置定位方式，取值absolute、relativedisplay设置元素的浮动特征

①position属性

style属性最常用的功能之一就是进行<div>标签的定位，其对应的属性为position属性。

语法：position：static|absolute|relative

static：无特殊定位，对象遵循HTML定位规则。

absolute：将对象从文档流中拖出，使用left、right、top、bottom等属性进行绝对定位。其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

relative：对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中便宜位置。

position属性参数：

left，top，width，height，clip（给出层的可见部分），visibility（隐藏或显示<div>标签中的元素visible、hidden、inherit），z-index，background-color，background-image。

②display属性

用于设置元素的浮动特征。

display属性可以用来设置或检索对象是否显示以及如何显示。

display属性参数说明：

block，none，inline（内联对象的默认值），compact（分配对象为块对象或基于内容之上的内联对象），marker（指定内容在容器对象之前或之后），inline-table，list-item,run-in,table,table-caption,table-cell,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-row-group。

display属性和visibility属性的对比：

visibility属性用来确定元素是显示还是隐藏，这用visibility=“visible/hidden”来表示，visible表示显示，hidden表示隐藏。当visibility被置为hidden时，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

当元素被隐藏之后，就不能再接收其他事件了。

display属性与visibility属性相比有些不同。visibility是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

<span>标签与<div>标签

1、<span>标签与<div>标签的相同之处

<span>标签与<div>标签非常类似，是HTML中组合用的标签，可以作为插入CSS这类风格的容器，或插入class.id等语法内容的容器。

2、<span>标签与<div>标签的区别

div是一个块级元素，可以包含段落、标题、表格，乃至章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。

从功能角度来说，<div>标签一般用来做布局，而<span>标签用来做文字效果，尤其是标题和链接的效果。

块元素和行内元素也不是一成不变的，只要给块元素定义display：inline，块元素便成为内嵌元素；同样，给内嵌元素定义display：block后，内嵌元素便成为块元素。block和inline的区别主要是有内容模型（Content model）、格式（formatting）、Directionality（如何处理两种语言混合在一起的Unicode码）。

<iframe>标签

<iframe>标签，又叫浮动帧标签，可以利用<iframe>标签将一个HTML文档嵌入在一个HTML中显示。

<iframe>标签的简介

<iframe>标签可以构成一种特殊的框架结构，被称为浮动框架，它是在浏览器的窗口中嵌套另外的网页文件。

<iframe>...</iframe>

<iframe>标签的属性

<iframe>标签是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示子页面的内容。

<iframe src="文件" height="数值" width="数值" name="框架名称" scrolling="值" frameborder="值">

</iframe>

iframe标签属性：align，class，frame border，height，id，logndesc，marginhergh，marginwidth，name，noresize，scrolling，src，style，title，width。

常用属性详细介绍：

1、浮动框架的文件路径属性src

<iframe src="file_name">

file_name：指明浮动框架文件的文件名或者其他超链接的网址。

2、浮动框架的名称属性name

<iframe src="file_name" name=“frame_name”>

frame_name：定义的浮动框架名称

3、浮动框架的对齐属性align

<iframe src="file_name" align=“left/center/right”>

4、浮动框架的宽度和高度属性width、height

<iframe src="file_name" width=“value” height=“value”>

5、浮动框架滚动条显示属性scrolling

<iframe src="file_name" scrolling=“value”>

value：值为yes代表显示滚动条，值为no代表不显示滚动条，值为auto代表根据窗口内容决定是否显示滚动条

6、浮动框架边框属性frame border

<iframe src="file_name" frameborder=“value”>

value：yes代表显示框架边框，no代表隐藏框架边框

7、浮动框架边缘的宽度和高度属性marginwidth、marginheight

<iframe src="file_name" marginwidth=“value” marginheight=“value”>

margin width：设定浮动框架左右边缘距离边框的宽度。

margin height：设定浮动框架上下边缘距离边框的高度。

<iframe>标签只适用于IE浏览器。。。。

<layer>标签和<ilayer>标签

标签层的使用

<layer>标签和<ilayer>标签的区别

应用div制作下拉菜单导航条