您当时的方位:主页 > 言语编程 > HTML 5

HTML5 < div > 标签

2014-07-01  codeforacause.net

实例

文档中的一个部分会显现为绿色:

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

浏览器支撑

IE Firefox Chrome Safari Opera

一切干流浏览器都支撑 <div> 标签。

界说和用法

<div> 可界说文档中的分区或节(division/section)。

<div> 标签能够把文档分割为独立的、不同的部分。它能够用作严厉的安排东西,并且不运用任何格局与其相关。

假如用 id 或 class 来符号 <div>,那么该标签的效果会变得愈加有用。

用法

<div> 是一个块级元素。这意味着它的内容自动地开端一个新行。实际上,换行是 <div> 固有的仅有格局体现。能够经过 <div> 的 class 或 id 运用额定的款式。

不用为每一个 <div> 都加上类或 id,尽管这样做也有必定的优点。

能够对同一个 <div> 元素运用 class 或 id 特点,可是更常见的状况是只运用其间一种。这两者的首要差异是,class 用于元素组(相似的元素,或许能够理解为某一类元素),而 id 用于标识独自的仅有的元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,div 元素的 "align" 特点不被拥护运用。

在 XHTML 1.0 Strict DTD 中,div 元素的 "align" 特点不被支撑。

提示和注释:

注释:<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 进行格局化,可谓一箭双雕。

提示:如需更深化地学习 class 和 id 的用法,请阅《W3school 的结构化符号》这一章中 div、id 和其他辅佐 这一节。

可选的特点

特点 描绘
align
  • left
  • right
  • center
  • justify

不拥护运用。请运用款式取而代之。

规则 div 元素中的内容的对齐方法。