H5-元素类型笔记
注意点：
元素类型分为 块级元素 和 行内元素
块级元素：
在网页中以块的形式显示，默认情况都会占据一行，两个相邻的块级元素不会出现并列显示的元素，按照顺序自上而下排列。
块级元素可以定义自己的宽度和长度。
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>
结果：
上一篇： 图片懒加载imgLazyLoading.js使用详解
下一篇： UML类图