层标记--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、outset
font-weight	字体粗细：normal、bold、bolder、lighter
font-family	字体类型：Arial、Tahoma、Verdata、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆
background	背景颜色：色彩代码
scrollbar-base-color	滚动条各部分的颜色：色彩代码
Filter：chroma	chroma过滤器：色彩代码，该颜色将对象转换成透明效果
word-break	断字：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）
direction	文字方向：ltr（默认，从左向右）、rtl（从右向左）
position	设置定位方式，取值absolute、relative
display	设置元素的浮动特征

①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制作下拉菜单导航条