HTML：Hyper Text Markup Language
DOCTYPE:告诉浏览器我们要使用什么规范
head:网页头部
meta:描述性标签
title:网页标题
body:网页主体
标签：
h:标题标签
p:段落标签
br:换行标签
hr：水平线标签
em:斜体
strong:粗体
空格符号
ui>li+tab (可自动生成列表）
ul>li*5（可生成五个无序列表）
伪类：
：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child()选中第n个子元素：
特殊值：n 第n个n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
:first-of-type
:last-of-type
:nth-of-type
功能与上述类型相似，不通点是他们是在同类型元素中进行排序
：not(）否定伪类：符合条件的元素从选择器中去除
盒子:
盒模型，盒子模型，框模型（box model)
-css将页面中的所有元素都设置为一个矩形盒子
-将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
-每一个盒子都由以下几个部分组成
内容区（content),元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width设置内容区宽度
height:设置内容区的高度
边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框大小会影响整个盒子的大小
设置边框至少需要设置三个样式：
边框的宽度：border-width
边框的颜色：border-color
边框的样式： border-style
border-width（若不设定边框默认值一般为三个像素）
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是top right bottom left
用来单独指定某一个边的宽度
border-color值设定同理（若不设定则自动省略color的颜色值）
border-style：指定边框的样式（默认值是none,表示没有边框）
soild 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border简写属性，通过该属性可以同时设置边框所有相关样式，并且没有顺序要求
除了border以外还有四个 border-xxx
border-top
border-right
border-bottom:
border-bottom缩写属性设置一个声明中所有底部边框属性。
可以设置的属性分别（按顺序）：border-bottom-width,
border-bottom-style
border-bottom-color.
border-left
例：让盒子模型右侧没有边框，上下左为10像素红色实线边框
border:10px red solid;
border-right：none；
内边距（padding)，内容区和边框之间的距离为内边距
- 一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
-内边距的设置会影响到盒子的大小
-背景颜色会延伸到内边距上
一共盒子的可见框的大小，由内容区，内边距，边框共同决定，
计算盒子大小时需将这三个区域加到一起计算
（padding 内边距的简写属性，可以同时指定四个方向的内边距
规则与border-width一样）
外边距（margin):
--外边距不会影响盒子可见框的大小
--但是外边距会影响盒子的位置
--一共有四个方向的外边距
margin-top
- 上外边距，设置一个正值，元素会向下移动
margin-right
-默认情况下设置margin-right不会产生任何效果
margin-bottom
-下外边距，设置一个正值，其下边的元素会向下移动
margin-left
-左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，如果是负值则元素会向相反方向移动
元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下
和右外边距会移动其他元素
margin的简写属性：
可以同时设置四个方向的外边距，用法与padding一样
margin会影响到盒子的实际占用空间
margin: auto(块级元素在块级元素内居中）
水平布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足一下等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度
浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置于元素的浮动
可选值:
none默认值，元素不浮动
left元素向左浮动
right 元素向右浮动
注意，元素设置浮动以后，水平市局的等式便不需要强制成立
元素设置浮动以后会完全从文档体中脱离，不再占用文档流的位置
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
1，浮动元素会完全脱离文档流，不再占据文档流的位置
2，设置浮动以后元素会向父元素的左侧或右侧移动
3，浮动元素默认不会从父元素中移出
4，浮动元素向左或向右移动时。不会担过它前边的其他浑动元素
5，如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6，浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
下拉菜单：
.dropdown {
position: relative; // 相对定位，应用于鼠标需悬停显示的元素
display: inline-block; // 弹性盒子
}
.dropdown-content {
display: none; // 弹性盒子（不显示）
position: absolute; / / 绝对定位，应用于需设计的元素内
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);（ / /边框及阴影）
}
.dropdown:hover .dropdown-content {
display: block;
}
Z-index 可用于将在一个元素放置于另一元素之后。
value 属性规定 <input> 元素的值。
value 属性对于不同 input 类型，用法也不同：
对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。
注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注意：value 属性不适用于 <input type="file">。
