div标签

定义和用法

<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事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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。给名字的目的是我们以后可用 JavaScript 来控制它, 比如说移动它或改变它的一些性质等等。给层次取什么名字是随意的,名字可以是任何英文字母和数字,但第一个必须是字母。比如:header sidebar mainbady pagebody footer。

id与class的区别


class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一的元素。class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。这种情况尽量用id:页面大的模块里面,用id来区分不同的模块,比如页面里面有这样的模块:最新新闻,推荐新闻等,就可以考虑用id来区分。还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的javascript用。

<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。



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值