注意点：
元素类型分为 块级元素 和 行内元素
块级元素：
在网页中以块的形式显示，默认情况都会占据一行，两个相邻的块级元素不会出现并列显示的元素，按照顺序自上而下排列。
块级元素可以定义自己的宽度和长度。
div：
dl：与dt、dd搭配使用
form：交互表单
h1-h6:标题
hr：水平线
ol：有序列表
ul：无序列表
p：段落
fieldset：表单字段级
colgroup-col：表单列分组元素
table-tr-td：表格及行，单元格
行内元素：
在网页中始终以行内逐个显示，没有自己的形状并且不能定义自己的宽和高，他显示的宽和高根据所包含内容的宽和高确定。
内联元素也会遵循盒模模型基本法则，如定义padding，border，margin，background等属性，但是个别属性不能正确显示。
a：锚点
b：粗体
strong：粗体
sub：下标
sup：上标
u：下划线
i：斜体
br：换行
em：强调
input：输入框
img：图片
label：表格标签
span：内联容器
textarea：富文本
可变元素：
需要根据上下文确定该元素是块元素还是内联元素。
applet：java applet
button：按钮
del：删除文本
iframe：inline iframe
ins：插入文本
map：图片区域
object：对象
script：客户端脚本
元素类型的转换
display属性：用于定义建立布局时元素生成的显示框类型
常见属性值：
none：此元素不会被显示，隐藏元素并脱离文本流
block：将元素设置为块级元素，独占一行。不设置宽度时宽度撑满一行。当元素设置了float属性后就相当于给元素加了display：block；属性
inline：在元素后面删除行符，多个元素可以在一行显示。非独占一行，不支持宽度，代码换行被解析成空格
list-item：将元素转换成列表，li 的默认类型。不设置宽度时宽度撑满一行，独占一行，支持高度设置
大部分块元素display属性值默认为block，其中列表的默认值为list-item
大部分内联元素的display属性值默认为inline，其中img，input默认值为inline-block
练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} .nav {height: 60px; background: #2a063a;} .nav ul { width: 960px; margin: 0 auto; text-decoration: none; overflow: hidden;} .nav ul li {float: left; border-right: 1px #fff solid;} .nav ul li a {display: block; width: 119px; height: 60px; color: #fff; text-align: center; line-height: 60px; text-decoration: none; font-size: 18px;} .nav ul li a:hover {background: rgb(224, 28, 28);} .nav ul .last{border-right: none;} </style> </head> <body> <div class="nav"> <ul type="none"> <li><a href="#">博客首页</a></li> <li><a href="#">添加随笔</a></li> <li><a href="#">欢迎练习</a></li> <li><a href="#">订阅查看</a></li> <li class="last"><a href="#">后台管理</a></li> </ul> </div> </body> </html>
结果：
