代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,dl,dd{margin:0;font-size:12px;}
body{border:1px solid red;}
ol,ul{list-style:none;}
a{text-decoration:none;}
</style>
</head>
<body>
<p>段落</p>
<h1>标题1</h1>
<h2>标题2</h2>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
<div>块</div>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<a href="#">a标签（链接，下载，锚点）</a>
</body>
</html>运行结果分析：
块属性标签
1.默认独占一行显示
内联/内嵌/行内属性标签
1.默认同行可以继续和同类标签显示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>运行结果分析：
块属性标签
2.没有宽度时，默认撑满一排显示
内联/内嵌/行内属性标签
2.内容撑开宽度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>运行结果显示：
运行结果分析：
块属性标签
3.支持宽高属性
内联/内嵌/行内属性标签
3.不支持宽高属性
代码1：padding（外边距）
这里写代码片<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{padding:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>代码2：margin（外边距）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{margin:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>运行结果：
内联/内嵌/行内属性标签
支持外边距（margin:100px;）的正常显示：
span标签的显示结果会距离上下左右各100px
支持内边距（padding:100px;）的正常显示：span标签的显示结果会距离上下左右各100px将显示的块往下挤200px
4.不支持上下的margin和padding
块属性标签
4.支持所有css命令
代码1：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>代码2：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span><span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>运行结果显示：
内联/内嵌/行内属性标签
5.代码换行被解析（换行会默认解析为空格）
内联标签和块标签的转换
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{display:block;}
div{display:inline;}
</style>
</head>
<body>
<span>区分样式</span><span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>
结果：
