解释一下div标签的作用(DIV是什么DIV是做什么用的)

本文目录
- DIV是什么DIV是做什么用的
- 网页设计中DIV有什么作用
标签是做什么用的
- div标签的作用是什么
- 网站建设中DIV是干什么用的 有什么作用、
- DW中插入的div主要是干什么用的
- div标签到底是什么元素
- div的作用是什么
DIV是什么DIV是做什么用的
DIV在编程中又叫做整除,即只得商的整数。
DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
网页设计中DIV有什么作用
DIV标记,是一个区块级的HTML标记,在该标记之间可以添加段落、表格、图片等内容,使同一个DIV标 记中的元素具有相同的样式,并可在页面显示时同时出现、移动以及隐藏。 它的主要作用有以下两点:(1) 将一些标记元素组织起来,应用DIV的属性为这些标记元素定义统一的 样式;(2) 利用其z-index属性,实现页面内各元素的重叠显示效果;(3) 使页面上显示更多的特效功能 。
标签是做什么用的
《div》标签是HTML中间的一种标签。
使用标识符DIV显示文本中的段落。当全部段落使某一链接的一部分时,应用DIV可以使语法更加简明快捷。一些搜索工具将整段HTML文档创立为一个链接来显示,以次使用户使用简便。
属性ALIGN确定指定文本的对齐方式。可能的设置为LEFT,RIGHT和CENTER。
《DIV》称为区隔标记。作用:设定字、画、表格等的摆放位置。用来排版。
《DIV》应用于Style Sheet(式样表方面会更显威力)
它最终目的是给设计者另一种组织能力,
有Class;Style;title;ID等属性。
以《DIV align="center"》为例
align="center"
可选值:center;left;right。决定字、画、表格等居中、靠左或靠右。
《DIV align="center"》的作用和居中标记《CENTER》一样,
前者是由HTML3.0开始的标准,后者是通用己久的标示法。例子:
-----------------------------------------------------------
原始码:
《DIV align="center"》我的个人主页《br》好看吗《br》你好!《/DIV》
结果:
我的个人主页哦
好看吗
你好!
div标签的作用是什么
html语言中使用
div 全称 division 意为“区分”,称为区隔标记。作用:设定字、画、表格等的摆放位置。
使用 DIV 的方法跟使用其他 tag 的方法一样:
《DIV》This is a DIV tag .《/DIV》
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 《P》《/P》 是一样的。
但当我们把 CSS-P 用到 DIV 中去以后,我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它, 比如说移动它或改变它的一些性质等等。
《DIV ID="truck"》
This is a truck
《/DIV》
网站建设中DIV是干什么用的 有什么作用、
定义和用法
《div》 可定义文档中的分区或节(division/section)。
《div》 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 《div》,那么该标签的作用会变得更加有效。
用法
《div》 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 《div》 固有的唯一格式表现。可以通过 《div》 的 class 或 id 应用额外的样式。
不必为每一个 《div》 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 《div》 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
DW中插入的div主要是干什么用的
DIV是分段的意思,很多时候,段与段之间的间距要大于行行之间的间距。这是就可以用DIV了。主要还是用来切割段落的。
作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV
block”,或“DIV
element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一
段在 DIV 中的 HTML。
《DIV》应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述,这处只介绍 一个属性设定。
以 《DIV align="center"》 为例:
align="center"
可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
《DIV align="center"》 的作用和居中标记 《CENTER》一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。
1、Div本身没有什么特别之处,而div标签替代了以前table标签布局。
2、他们通过对div标签对象设置不同样式实现我们要的美化效果。
3、特性,通常一对未设置任何样式的div,独占一行。
在html中使用最多的布局标签为div,加上对网页设置css样式,所以通常我们就说div+css制作即使有div标签+css样式实现网页布局重构。
div标签到底是什么元素
1简介
定义
《div》 可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的 组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。
用法
DIV标签应用于 Style Sheet(样式表)方面会更显威力,它最终目的是给设计者另一种组织能力,有 Class、Style、title、ID 等属性。
《div》 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 《div》 固有的唯一格式表现。可以通过 《div》 的 class 或 id 应用额外的样式。
不必为每一个 《div》 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 《div》 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
2范例
以下内容为例:
align="center"
可选值:center,left,right 。决定字、画、表格等居中、靠左或靠右的作用和居中标记 《CENTER》一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。
CSS单元的位置和层次-div标签
我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台不同会使显示的结果发生变化。
而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性,你可以精确地设定元素的位置,还能将定位的元素叠放在彼此之上。
Cascading Style Sheets(CSS)是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning(CSS-P)是 CSS 的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词:CSS 和 CSS-P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。
● 1.使用 DIV 标签 (div)
当我们使用 CSS-P 的时候, 我们主要把它用在 DIV(division)tag 上。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 DIV 中HTML。
使用 DIV 的方法跟使用其他 tag 的方法一样:
This is a DIV tag .
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用是一样的。
但当我们把 CSS-P 用到 DIV 中去以后,我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它, 比如说移动它或改变它的一些性质等等。
This is a truck
给层次取什么名字是随意的,名字可以是任何英文字母和数字,但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。
Inline CSS:Inline 是最常用的方法。
This is a truck .
External STYLE tag:使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。
《STYLE TYPE="text/css"》
《!-- #truck {styles go here} --》
《/STYLE》
This is a truck .
Cross-Browser CSS 性质:
我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作, 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的,而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。
height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。
clip 给出 layer 的 clipping(可看的见的)部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV 根据它的值“visible”,“hidden”,“inherit”。
z-index DIV tag 的立体位置。值越大 DIV 的位置越高。
background-color DIV 背景的颜色。
layer-background-color Netscape 的 DIV 背景颜色。
background-image DIV 的背景图象。
layer-background-image Netscape 的 DIV 的背景图象。
● 2.绝对定位和相对定位 (position)
绝对定位:
定位属性将是网虫们 打开幸福之门的钥匙:
H4 { ; left: 100px; top: 43px }
这项CSS规则让浏览器将《H4》的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。
左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。
你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图象、QUICKTIME电影等等。
相对定位:
绝对定位使你能精确地定位元素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的元素的位置相对于在文件中所分配的位置。例:
I { ; left: 40px; top: 10px }
相对定位的关键在于定位了的元素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的 静态定位单元的行间,定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位,则文字的显示位置将恢复正常。使用相对定位时要小心,否则容易将页面弄得非常乱。
除了相对定位和绝对定位,你还可以使用static(静止)参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。也就是说,除了边距特性,或通过使用 float 特性来浮动单元可影响单元的定位外,其它均不可以。
● 3.定位单元的控制 (width、height、visiblility)
除了控制定位单元的左上角位置,你还可以控制单元的宽度和高度,及单元在页面的可视性。
宽度:定位了的元素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定 字符向右流动的限制,即设定元素的宽度。
DIV { ; left: 200px; top: 40px; width: 150px }
浏览器接到这项规则时,它将文字按照规则规定的效果显示,还将段落最大水平尺寸限制在150象素。
宽度属性只适用于绝对定位的元素。你可以使用我们学过的任何一种长度单位,或使用比例值设定宽度,比例值指相对于母体元素的比例。IE 4中,这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。
高度:理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:
DIV { ; left: 200px; top: 40px; height: 150px }
这里我用了“理论上讲”,因为有些浏览器不支持高度属性。
可视性:利用CSS,你可以隐藏元素,使其在页面上看不见。这条属性对于定位了的和未定位的元素都适用。
H4 { visibility: hidden }
选项:
visible 使元素可以被看见
hidden 使元素被隐藏
inherit 指它将继承母体元素的可视性设置。
值 inherit 为缺省值。这使单元继承父单元的可见性。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如,段内的 EM 单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都将消失,而唯有 EM 单元中的文本是可见的。
3div属性
color : #999999 文字颜色
font-family : 宋体文字字型
font-size: 10pt 文字大小
font-style:italic 文字斜体
font-variant:small-caps 小字体
letter-spacing: 1pt 文字间距
line-height: 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加删除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none 删除连接底线
text-transform: capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字* 右对齐
text-align:left 文字* 左对齐
text-align:center 文字居中对齐
这些是一些简单的文字效果,可以应用到css的页面中。
背景
background-color:black 背景颜色
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
《TEXTAREA STYLE="border:1px dashed pink"》
实线
《TEXTAREA STYLE="border:1px solid pink"》
设置div的高度与文字的 行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏。
词条标签:
div的作用是什么
《div》是定义层,可以用来搞好多东东,嗯,搞特效的,可以拖动的层,搞定位用的,在一个图片上边设置另一个图片,因为在网页里定位都用table,这样子就搞整个网页成了全是方块的样子了,《div》设置了z-index属性后呢,就可以把它放在其它东东的上边或者下边了
有时候也当成《span》用的,因为《div》有一个id值,设置了它就可以用dhtml来引用里边的东东,还可以修改里边的东东,可以让里边的图片有特效的淡入淡出

更多文章:
简易w3school教程网页面代码(想记一下网页制作的常用代码,不知道有哪些)
2025年12月2日 14:45
正则表达式匹配换行符和空格(为什么这个正则表达式不能匹配空格和换行)
2026年4月22日 13:30
js图片无缝滚动的原理(请问一下滚动的原理是什么,我有点晕乎乎的谁能给我解释详细一点感激不尽)
2026年4月24日 09:00
notnull参数的作用(SpringMVC注解中的这个@Resource和@Notnull各有什么用处啊能讲详细点么)
2026年1月12日 23:15
插入语句命令(VF中如果要在第3条记录之前插入新的记录,应怎样编写insert语句)
2026年8月24日 18:15
memcached性能(PHP中4个加速,缓存扩展的区别和选用建议)
2025年9月8日 08:45
national geographic(national geographic什么意思)
2026年1月16日 18:15
















