html06--层标记

导论:层可以用于创建动态页面,因为,JavaScript可以动态的定位层,所以层可以在文档中实现移动或跳跃的功能.他是Html于JavaScript的组合,并且允许创建动态Html(DHtml).使用层.javascript和样式单,可以在一个页面上创建设计和操作元素.

一.了解层的分类

      层属于网页的块级元素,提供了一种分块控制网页内容的方法,可以通过改变层的位置来改变层中的内容在网页中的位置.

       层的分类:在Dreamweaver中,层有两类,即CSS(使用div和span标签定位页面内容)和Netscape层(使用layer与ilayer标签定位页面内容).在web页面中插入层时,Dreamweaver将这些层的Html标签插入到代码中,可以为层设置4种不同的标签:div.span.layer.ilayer,其中div和span是最常见的标签,但是只有Netscape Navigator 4.0 版本支持使用layer和ilayer创建的层.

        创建层的首要工作是定义认为是同一层的数据块,定义这些数据块的方法是通过使用<div>标签,这些标签在一个文档中创建一个确定的块级结构.他与<p>标签类似,<p>标签示意一个新端的开始,且将他里面的数据定义为一个段落,在<div>标签定义数据块时,会通过浏览器进行转换.使用<div>很简单就是将他放在想定义为一个数据块的元素的周围.

二.掌握<div>标签

          div元素是用来为html文档内大块的内容提供结构和背景的元素,其中所包含的元素的特性由<div>标签的属性来控制,或者是通过样式格式表格格式化这个快来控制,div标签被称为区隔标签,表示一块可以显示html的区域,用于设置文字,图片和表格等等,需要关闭标签

三.掌握<div>标签的属性

     使用div之前,首先来了解下div的属性,属性如下:

       id:是div的名字,常和css样式结合使用,实现对网页的控制.

       class:用于设置div标签的中的元素的样式,其值是css样式中的class选择符.

       style:用于设置对象的内嵌样式,div标签中的元素的样式,其值为css属性,各属性值用分号隔开.

还有很多很多读者上网自己查吧,这里不一一列举了..........下面笔者着重讲一下这个id和class的用法吧.大家触类旁通举一反三,id属性用于定义一个元素的独特的样式,即设置标签的标记;用法是:一个Css规则--#font1{font-size:larger},id=font1;记住id是一个标签,用不区分不同的结构和内容的,就想人的名字一样,如果一个房间中出现了两个人同名就会出现混淆;这个class属性用于指点元素属于何种样式的类,语法:classname{color} ,classname是class属性的名称,color1{color:lime;background:#FF80C0}    class="color1"   class是一个样式,所以可以套用在任何结构和内容上.

      他俩的区别你们读出来了吗??从概念上说.id属性和class属性是不一样的,id属性是先找到结构和内容然后在定义样式,id是定义页面上的仅出现一次的标签,而class是根据用户定义的标准对一个或多个元素进行定义,可以多次使用,在实际应用中呢,class可能对文字的排版等比较有用,而id则对宏观布局和设计放置各种元素有用.

       下面在说一下style中的常用属性:

        (1)position属性,就是进行div标签的定位,语法:position:static/absolute/relative,语法解释:依次是无特殊位置,将对象从文档流中拖出,对象不可重叠.

        (2)display属性,用于设置元素的浮动特征,还有很多的属性这里不做太多的啰嗦,读者自行搜索吧..

四.掌握<span>标签与<div>标签的区别

      这两个标签非常相似,是html中组合用的标签,可以作为插入CSS这类风格的容器,或插入class.id等语法内容的容器.div是一个块级元素,可以包含段落,标题,表格,乃至诸如章节,摘要和备注等.而span是行内元素,span的前后是不会换行的,没有结构的意义,纯碎是应用样式.从功能角度来说的话,div标签一般不用来做布局,而span标签用来做文字的效果,尤其是标题和连接的效果;不过块元素和行内元素也不是一成不变的,只要给块元素定义了dispaly:inline,块元素就变成了内嵌元素,同样的给内嵌元素定义display:block后,内嵌元素也变成了块元素.block和inline的区别主要是内容模块和格式,等的.还要div分块结束处自动换行,而span是不换行的.

五.掌握<iframe>标签

     iframe标签又叫浮动帧标签,可以利用iframe标签将一个html文档嵌入在一个html中显示;使用iframe标签可以拖入外部文件,这样可以更好的管理内容,并且提供一种在不同位置包含内容的机制.

      简介:iframe标签可以构成一种特殊的框架结构,被称为浮动框架,他是在浏览的窗口中嵌套另外的网页文件,语法:

<iframe>......</iframe>.

      iframe可以拥有自己的属性如下:

       <iframe src="file_name">  浮动框架路径的文件路径属性

      <ifrma name="frame_name">  定义的浮动框架的名称

      <iframe align="left/center/right"> 浮动框架的对齐属性

      <iframe width="" height="">

      <iframe scrolling="value"> 浮动框架的滚动条的是否显示的属性,value=yes显示,否则不显示,value=auto代表根据窗口内容决定是否要显示滚动条.

       frameborder=value  浮动框架边框属性,value=yes代表显示边框,否则不显示边框.

       最后是浮动边框的宽度和高度属性:marginwidth,marginheight

      最后需要说的是这个iframe标签只适用于IE浏览器,对于不支持他的浏览器位于这个标签下边的内容都会被忽略.

六.掌握<layer>标签和<ilayer>标签

     对于不支持iframe标签的浏览器,又想仿真iframe标签的功能的话,这里推荐适用<layer>,<ilayer>;<layer><ilayer>可以在一个页面上精确的定位一个层,可以出现在文档的流程的任何地方.

     来看下layer标签和ilayer标签的属性说明:

      above:文档中的所有层的z-order中较高的Layer对象

      background:用作层的背景图的url

      below:在文档中的所有层的z-order中较低的Layer对象

      bgcolor:层的北京色

      clip:定义剪切长方形.这个长方形是层的可见区域,区域外面是任何东西都被认为的从视野中剪切

      left:以像素为单位的层相对于她的夫层的区域的X轴的位置

      top:以像素为单位的层相对于她的夫层的区域的Y轴的位置

      z-index:层相对于她的兄弟和父元素的相对z-order

实例:标签层的使用,应用div制作下拉菜单导航条