HTML 学习笔记(块和类)

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可以为部分文本设置样式。

块级元素内联元素(行内元素)区别

块级元素

1.霸占一行不能与其他元素并列

2.能接受宽高

3.如果不设置宽高那么宽度默认变为父亲的100%

行内元素

1.与其他行内元素并排

2.不能设置宽高默认的宽度就是文字的宽度

在HTML中我们已经将标签分过类文本级和容器级

文本级：p span a img b i u em

容器级: div h系列 li dt dd

CSS的分类和上面很像就一个不一样

基本上所有的文本级标签都是行内元素除了p p是文本级也是块级元素

块级元素和行内元素可以相互转换

display:inline 行内元素

display:block 块级元素

display 是显示模式的意思用来改变元素的行内块级性质