<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 一、按元素
black（块元素）:div p ul ol li h1-h6 dl dt dd form table
独占一行
支持所有样式
不写宽的时候，跟父元素宽相同
所占区域一个矩形（行）
inline(内联)：span，a，em，strong，img。hr
挨在一行
有些样式不支持：width，height，margin，padding
不写宽，宽度由内容决定
所占区域不一定是矩形（行）
内联标签之间有空隙，原因：换行产生的
inline-block：input，select，iframe
挨在一起，支持宽度
注意：布局一般使用块标签，修饰一般用内联标签
二、按内容
flow：流内容（标签）
Metadata：元数据（如：meta，title，heda等编码）
Sectioning：分区（后面在讲）
Heading：标题（如：h1-h6）
phrasing:措辞（如：span）
Embedded:嵌入（如：图片，音频/视频，imframe）
Interactive：互动的（输入框）
三、 按显示
替换元素：浏览器根据元素的标签和属性，来决定元素具体显示内容
如：img，input，form等
非替换元素：：将内哦那个告诉浏览器，将其显示出来
如：div，h1-h6.p，span等 -->
<style>
span{
background-color: #FF0000;
}
em{
background-color: #0000FF;
}
</style>
</head>
<body>
<div>块元素</div>
<span>内联元素</span>
<em>内联元素2</em>
<input type="text" placeholder="内联块元素"/>
<dl>
<dt>1</dt>
<dd>2</dd>
</dl>
<form>
<input type="password" placeholder="请输入"/>
<input type="text" />
</form>
<form>
<input type="password" placeholder="请输入"/>
<input type="text" />
</form>
<a href="#">1</a>
<a href="#">2</a>
<iframe>1</iframe>
<iframe>2</iframe>
<hr />
<hr />
</body>
</html>