div标签

最新推荐文章于 2025-09-18 09:53:14 发布

转载最新推荐文章于 2025-09-18 09:53:14 发布 · 774 阅读

web html 专栏收录该内容

6 篇文章

订阅专栏

定义和用法

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