HTML ＜div＞标签

最新推荐文章于 2024-04-03 07:53:12 发布

c323u2bdf

最新推荐文章于 2024-04-03 07:53:12 发布

阅读量372

点赞数

分类专栏： HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_60212533/article/details/127189141

版权

HTML 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

定义和用法

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

实例1

<!--文档中一部分显示为绿色-->
<html>
    <body>
        <div style="color: #00ff00;">
            <h3>This is a header</h3>
            <p>This is a paragraph.</p>
        </div>
    </body>
</html>

浏览器显示如下

实例2

<html>
    <head>
        <style>
            .cities{
                background-color: black;
                color: white;
                margin: 20px;
                padding: 20px;
            }
            .two {
                background-color:rgb(143, 131, 131);
                color:white;
                margin:30px;
                padding:20px;
            } 
            span.red{color:red;background-color: white;}
        </style>
    </head>
    <body>
        <!--对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
        为相同的类设置相同的样式，或者为不同的类设置不同的样式。-->
        <div class="cities">
            <h2>London</h2>
            <p>
                London is the capital city of England. 
                It is the most populous city in the United Kingdom, 
                with a metropolitan area of over 13 million inhabitants.
            </p>
        </div>
        <div class="two">
            <h2>Paris</h2>
            <p>Paris is the capital and most populous city of France.</p>
        </div>
        <div class="cities">
            <h2>Tokyo</h2>
            <!--HTML <span> 元素是行内元素，能够用作文本的容器。
            设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。-->
            <p>My <span class="red">Important</span>Heading</p>
            <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
            and the most populous metropolitan area in the world.</p>
        </div>
    </body>
</html>

浏览器显示如下