首页 > 代码库 > HTML 学习笔记(块 和 类)

HTML 学习笔记(块 和 类)

2024-08-27 02:52:57   211人阅读

HTML <div> 和 <span>

可以通过<div>和<span>将HTML元素组合起来.

HTML块元素

大多数HTML元素被定义为块级元素或者内敛元素

块级元素在浏览器现实的额时候，通常会以新行来开始(和结束)

例子:<h1>,<p>,<ul>,<table>等。

HTML 内敛元素

内敛元素在显示的时候通常不会以新行开始

例子:<b>,<td>,<a>,<img>等

HTML <div>元素

HTML <div>元素是块级元素，他是可以用来组合其它HTML元素的额容器。

<div>元素没有特定的含义，除此之外，由于它属于块级元素 浏览器会在其前后显示折行。

如果与CSS(样式 后面的博客中将会具体介绍)一同使用，<div>元素可用于对大的内容设置样式属性。

<div>元素的另一个常见的应用就是文档布局，他取代了使用表格定义布局的老式方法，使用<table>元素进行布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

HTML <span>元素

HTML <span>元素是内敛元素 可用作文本的容器。

<span>元素也没有特定的含义

当与CSS一起使用的时候 <span>元素可用于为部分文本设置样式属性。

HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。

分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

例子:

<head>
        <meta charset="UTF-8">
        <title>块和类</title>
        <style type="text/css">
            .cities {
                background-color: black;
                color: white;
                margin: 20px;
                padding: 20px;
            }
        </style>
    </head>
    
    <body>
        <div class="cities">
            <h2>London</h2>
            <p>伦敦是英国的首都 也是世界金融中心</p>
        </div>
        <div class="cities">
            <h2>Paris</h2>
            <p>巴黎是法国的手抖 也是世界浪漫之都</p>
        </div>
        <div class="cities">
            <p>东京是日本的首都，也是世界有色文化中心</p>
        </div>
    </body>

分类行内元素

HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

例子：

<head>
        <meta charset="UTF-8">
        <title>块和类</title>
        <style type="text/css">
            span.spanC {
                color: blue;
            }
        </style>
    </head>
    
    <body>
        <h1>我的<span class="spanC">重要的</span>标题</h1>
    </body>

上个例子中span中包涵的文字 将会显示蓝色。可见span可以为部分文本设置样式。

HTML 学习笔记(块 和 类)


联系
我们