1.标签
div标签:
代码：
<div>
一个盒子
</div>
运用示例：
小结：div标签是运用广泛的双标签，使用频率高
p标签：
代码：
<p>段落标签</p>
小结：p标签是段落标签
标题标签：
代码：
<h1>标签标题</h1>
<h2>标签标题</h2>
<h3>标签标题</h3>
<h4>标签标题</h4>
<h5>标签标题</h5>
<h6>标签标题</h6>
小结：h1~h6，h1标签通常在一个页面只使用一次，用作文章的大标题
无序标签：
代码：
<ul type="square">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
运用示例：
有序标签：
代码：
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
小结：每一个li标签前，自动添加序号
img标签：
代码：
<img src="img/1.jpg" title="人间" width="300px" alt="网易人间">
属性：
src：图片的路径
title：为图片的标题，鼠标放在图片上自动显示图片标题
alt：①图片显示失败的替代文本。②搜素引擎查找图片的依据
width：图片的宽度
标签类型：单标签
input标签：
代码：
<input type="text">
<input type="number">
<input type="password">
属性：
type：不同的值，显示或者输入不同的类型
text为文本类型，number是数字类型，password是密码类型
运用示例：
标签类型：单标签
2.行块属性
块标签：
li,ul,ol,p,h1~h6
块标志：
display:block;
块属性：
1.可以设置宽高
2.默认宽度100%（指的是父级的宽度）
3.独自霸占一整行
行内标签：
span,a,strong,em,b,i,small
行内标志：
display:inline;
行内属性：
1.不可以设置宽高
2.宽度和高度是由内容给撑开
3.可以与别人共处一行
行内块标签：
img,input
行内块标志：
display:inline-block
行内块属性：
既可以设置宽高，又可以共处一行
嵌套规则：
1.块标签可以套行内标签，行内标签不可以套块标签
2.p标签不要套块标签，可以套strong,samll,span,i,em,b等，像li,div等， 块标签>p>span等
3.嵌套的时候注意代码的缩进
3.盒模型
图示：
说明：
①margin:外边距，padding：内边距，border：边框
②盒模型不是div，而是所有的标签，每个标签都是一个盒模型
简写举例：
/* 上右下左 */
margin: 20px 100px 100px -150px;
/* 上 左右 下 */
margin: 10px 20px 30px;
/* 上下 左右 */
margin:10px 20px;
/* 上下左右 */
margin:auto;
4.浮动
left; 元素向左浮动
左
float: right; 元素向右浮动
浮动 右
none; 默认值，元素不浮动
无
inherit; 规定应该从父元素继承 float 属性的值
继承
图示一：
图示二：
图示三：
说明：
iptBox的父类content利用左右外边距auto自动，设置居中，iptBox居中。IptBox的子类div与iptBox的子类input，分别设置左浮动，子类div向左移动，直到它的外边缘碰到iptBox左边的框停止移动，子类input向左移动，直到它的边缘碰到浮动子类div右边的边框停止移动。IptBox的孙类div设置右浮动，孙类div向右移动，边缘碰到浮动的iptBox子类div的边框停止移动。
浮动小结：
浮动的框可以向左或向右移动，直到它的外边缘碰到框或另一个浮动框的边框为止
5.定位
图示一：
图示二：
图示三：
图示四：
图示五：
图示六：
说明：
absolute绝对定位相对于离它最近的已定位的父级进行定位，relative相对定位无需判断父级是否定位，都可以进行相对定位。如果父级无定位，子集需要定位，可以给父级添加一个relative相对定位，确保子级的父级已定位。