定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
注释:
<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
案例分析
<body>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
...
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div>
...
</body>
例子解释
正如您看到的,上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起,也就是说,div 为文档添加了额外的结构。同时,由于这些 div 属于同一类元素,所以可以使用 class="news" 对这些 div 进行标识,这么做不仅为 div 添加了合适的语义,而且便于进一步使用样式对 div 进行格式化,可谓一举两得。
div属性
DIV可选的属性
align,值=left/right/center/justify
DIV事件属性
on
DIV标准属性
class class_rule or style_rule 元素的类(class)
id id_name 元素的某个特定id。
style 样式定义 内联样式定义。
title 提示文本 显示于提示工具中的文本。
dir ltr | rtl 设置文本的方向。
lang 语言代码 设置语言代码。
div/span的区别
DIV是块元素,SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。
DIV:基本上与span相似,或者说具有SPAN所有的功能,此外还具有SPAN不及的特色.div是一个块,也就是所谓的"容器",它具有自己独立的段落,独立的标题,独立的表格,就如<html>.....</html>一样包括了一切.如:
<div class="mydiv">
<h1>独立的标题</h1>
<p>独立的段落</p>
<table>......</table>
</div>而这些SPAN是没有的!
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。
<span> 标签被用来组合文档中的行内元素。span最初就是用来带class或者style属性的。它本身不具有明确的语义。因此在文本流中,我们需要对某些文字做样式上的改变,就用span括起来。
div+css
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 <P></P> 是一样的。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。DIV标签应用于 Style Sheet(式样表)方面会更显威力,当我们把 CSS-P 用到 DIV 中去以后,我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaS
class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一的元素。class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。这种情况尽量用id:页面大的模块里面,用id来区分不同的模块,比如页面里面有这样的模块:最新新闻,推荐新闻等,就可以考虑用id来区分。还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的javas
<div id="searchform">Search form components go here. This
section of the page is unique.</div>
<div class="blogentry">
<h2>Today's blog post</h2>
<p>Blog content goes here.</p>
<p>Here is another paragraph of blog content.</p>
<p>Just as there can be many paragraphs on a page, so too
there may be many entries in a blog. A blog page could use
multiple instances of the class "blogentry" (or any other
class).</p>
</div>
<div class="blogentry">
<h2>Yesterday's blog post</h2>
<p>In fact, here we are inside another div of class
"blogentry."</p>
<p>They reproduce like rabbits.</p>
<p>If there are ten blog posts on this page, there might
be ten divs of class "blogentry" as well.</p>
</div>
案例解释:在这个例子中,名为 searchform 的 div 被用来封装包含搜索表单的页面区域,而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单,所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的(文章)入口,所以 class 属性被应用于这种情况。同样地,新闻站点通常拥有多个 div,这些 div 的 class 可以命名为 "newsitem" 或者别的什么。
然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和 <p> 段落,新闻站点也一样。我们在这里展示 class 为 blogentry 的 div,并不是鼓励你在站点中塞满 div,而仅仅是为了向你展示这个原则:在同一个 HTML 文档中,使用多次 class,但只能使用一次 id。