1------------------------------------------
<html>开始和结束</html>
<title>用来设置网页标题</title>
<meta> 设置网页编码方式
<hn>标题标签</hn>
<p>段落标签</p>
<span>组合行内元素</span>
<label>为 input 元素定义标注</label>
<i>斜体文本</i>
<b>加粗文本</b>
<strong>strong 标签同样加粗</strong>
<u>文本自带下划线</u>
<s>>删除线文本</s> <del>删除文本</del>
<sub>下标</sub> <sup>上标</sup>
<br/> 换行
<hr/> 分割线
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<img src="路径"> 图片标签
2-------------------------------------------
<table>表格</table>
<thead>表格的头部信息</thead>
<tbody>表格内容</tbody>
<tfoot>表格尾部信息</tfoot>
<caption>表格标题必须为表的第一个元素</caption>
<tr></tr>
<td></td>
<th>用法与td一样，自带文本居中和加粗效果</th>
<table border="1px" width="500" height="300" bgcolor="#EF82EF" align="center" valign="middle>
<caption>表格标题</caption>
<tr>
<td colspan='3'></td>
</tr>
</table>
colspan 表示跨列合并
rowspan 表示跨行合并
cellspacing:设置表格与边框之间的距离
cellpadding:设置单元格内容与边框之间的距离
<style type="text/css">样式设置</style>
<div>容器标签 块级元素</div>
<form action="文件的路径" method="提交方式" >表单</form>向服务器发送数据
提交方式 get/post
<input type="text(显示输入)" name="uname" placeholder="提示文本" maxlength="最大字符数" />
<input type="password(隐式输入)" name="upwd"/>
<input type="radio" name="gender(用来分组)" value="male(发送给服务端)" checked="默认选中状态">
radio 表示单选按钮
checkbox 表示复选框
hidden 隐式发送一些附加信息，用户不可见
file 文件上传
submit 提交按钮
reset 重置按钮
button 普通按钮
<textarea name="uinfo" cols="20(默认列数)" rows="5(行数)" disabled(禁用表单控件)></textarea>
class 规定类名
id 规定元素唯一id
lang 规定元素内容的语言
style 规定行内css样式
空格
¥ 人民币符号
© 版权符号
<>小于，大于
3------------------------------
<style>样式</style>
<link rel="stylesheet" href="url"> 引入外部CSS代码
1.块级元素：不与其他元素共行，可以手动设置宽高
代表元素：div hn p ul ol dl li table form
2.行内元素：可以与其他元素共行，不能手动设置宽高，大小由内容多少决定
代表元素 span lable a i b strong
3.行内块元素 既可以共行也可以手动设置宽高
代表元素 img input
#开头 id选择器
. 开头 类选择器
，分隔 群组选择器
空格分隔 后代选择器
> 子代选择器
* 匹配文档中所有元素
:开头伪类选择器
:link 表示超链接未被访问时的状态
:visited 表示超链接被访问过后的样式
:hover 鼠标悬停时的状态
:active 鼠标点按时的状态
:focus 元素获取到焦点时的样式，常见于输入框
按顺序设置 LVHA 爱恨原则
a:active{
color: blue;
}
4-----------------------------
选择器权重 # > . > 普通
overflow 内容溢出处理
1. visible 默认值,溢出部分可见
2. hidden 溢出部分隐藏不可见
3. scroll 设置内容滚动显示,显示滚动条
4. auto 自动 当内容溢出时,自动添加滚动条并且可用
border 边框
border : 5px solid red;
border-width :设置边框线的宽度
border-style :设置边框线的样式,取值
1. solid 实线
2. dashed 虚线
3. dotted 点线
4. double 双线 (不常用)
上右下左四个方向的边框
border-top/right/bottom/left :
网页三角标
元素尺寸为0，其他三边为透明transparent
border-radius 圆角边框
border-radius : 5px 10px;第一个上下，第二个左右
边框阴影 box-shadow : h-offset v-offset blur spread color;
h-offset:阴影的水平偏移距离 取值为正，阴影向右
v-offset:阴影的垂直偏移距离 取值为正，阴影向下
blur:阴影的模糊程度 值越大，越模糊
spread:阴影扩大或是缩小的距离 取值为正，阴影会扩大
color:设置阴影颜色
外边距margin 边框border 内边距padding
margin:0 auto;表示自动，可以用来设置元素居中
四个方向可单独设置外边距 margin-top/right/bottom/left:
具有默认外边距的元素 body,h1,h2,h3,h4,h5,h6,p,ul,ol
具有默认内边距的元素 ol,ul,input
display 元素类型转换
inline 行内元素
block 块元素
inline-block 行内块
none 元素隐藏 元素在文档中就不占位了
水平居中:text-align : center;
垂直居中：设置元素 高度height 与行高line-height 保持一致
5-----------------------------
outline 轮廓线
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片重复平铺显示
repeat-x
no-repeat 不平铺
background-size 背景图片尺寸
cover 图片完全覆盖元素，多出部分裁剪
contain 图片刚好容纳，不足的部分不管
auto 自动
background-position 背景图片位置 上下左右
background-attachment 背景图片是否固定
scroll 默认值 跟随滚动
fixed 固定位置
background 背景属性简写
background:red url('') right no-repeat 100% 100% scroll;
font-family 指定字体
font-weight 字体粗细
lighter(100)/nomal(400)/bold(700) nomal正常粗细
font-size 字体大小
font-style 字体样式(斜体)
italic 斜体
line-height 行高
使用简写，有必填的属性值 family
font:style weight size family;
font:family size/line-height;
text-decoration 文本装饰线
1.underline 下划线
2.none 取消装饰线
3.overline 上划线
4.line-through 删除线
text-indent 首行缩进 em为单位
border:1px solid black; 表格添加边框
border-collapse 表格边框合并
1.separate (默认)
2.collapse (边框合并)
border-spacing 边框边距
list-style-type 设置项目符号
list-style-position:
设置项目符号的位置 默认outside 项目符号与内容框分离
设置inside 项目符号调整到内容框中
list-style-image：url() 自定义项目符号
transition-property: 指定过渡属性 all能过渡就过渡
transtion-duration 指定过渡时长
transition-timing-function
1.ease默认值 慢速开始，快速变快，缓慢结束
2.linear匀速变化
3.ease-in 慢速开始，加速结束
4.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始和结束，中间先加速后减速的过程
tarnsition-delay 指定过渡效果的延迟时间
transition:property duration timing-fun delay; 属性简写
float 浮动布局 left 元素向左浮动
6------------------------------------------------
clear 清除浮动带来的影响
1.none 默认不做任何处理
2.left 清除前面元素左浮动带来的影响
3.right 清除前面元素右浮动带来的影响
4.both 清除所有
position 定位布局
1.relative 相对定位
2.absolute 绝对定位
3.fixed 固定定位
4.static 静态布局(默认值)
top:以元素上边为基准进行偏移
right:以元素右边为基准进行偏移
bottom:以元素下边为基准进行偏移
left:以元素左边为基准进行偏移
z-index 元素堆叠次序 取值 数字，无单位，值越大，元素越靠上
display:none/inline/block/inline-block 元素的隐藏与显示
1.none元素隐藏不显示，在文档中不占位
2.inline 显示为行内元素
3.block 显示为块元素
4.inline-block 显示为行内元素
visibility 元素显示效果
1.visible 默认值 可见的
2.hidden 隐藏，元素隐藏仍然在文档中占位
opacity 透明度 可被子元素继承
0(完全透明)~1(不透明)
vertical-align 元素的垂直对齐方式
top / middle / bottom / baseline(默认值，基线对齐)
cursor 光标外观
1.default
2.pointer 小手形状
3.text 显示为 I 样式
7----------------------------------------------------
translate() 转换函数
1.translate(x) 元素沿水平方向进行移动等价于 translateX()
2.translate(x,y) 元素沿水平方向移动x，沿垂直方向移动y
3.translateY() 元素沿垂直方向平移
scale(x) 元素x轴和y轴都缩放 取值为负值，元素会反转
scaleX(x) 元素沿X轴缩放
scaleY(x) 元素沿Y轴缩放
rotate(ndeg) 旋转
transform-origin:left bottom 以左下角为旋转原点
transform:rotate(45deg); 旋转45°