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 是显示模式的意思 用来改变元素的行内 块级性质