HTML的div标签

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

原创最新推荐文章于 2025-09-18 09:53:14 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

WEB前端开发终结专栏收录该内容

7 篇文章

订阅专栏

定义：可以定义文档中的分区，即可以把文档分割为独立的，不同的部分，，如果用id或者class来标记div那么该标签的作用会变得更加有效

用法：其是个块级元素，这意味着他的内容自动的开始一个新行，实际上换行是该标签的唯一格式表现，可以通过div的class或者id应用额外的样式可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。：<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 进行格式化，可谓一举两得