python基礎整理3——前端
html概述和基本結構
html概述
HTML意思是超文本標記語言javascript
html基本結構
一個html的基本結構以下：css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>
第一行是文檔聲明，第二行「<html>」標籤和最後一行「</html>」定義html文檔的總體，「<html>」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。 「<head>」標籤和「<body>」標籤是它的第一層子元素，「<head>」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「<body>」內編寫網頁上顯示的內容。
HTML文檔類型
目前經常使用的兩種文檔類型是xhtml 1.0和html5html
兩種文檔的區別
一、文檔聲明和編碼聲明前端
二、html5新增了標籤元素以及元素屬性html5
html文檔規範
xhtml制定了文檔的編寫規範，html5可部分遵照，也可所有遵照，看開發要求。java
一、全部的標籤必須小寫node
二、全部的屬性必須用雙引號括起來jquery
三、全部標籤必須閉合css3
四、img必需要加alt屬性(對圖片的描述)git
html註釋：
html文檔代碼中能夠插入註釋，註釋是對代碼的說明和解釋，註釋的內容不會顯示在頁面上，html代碼中插入註釋的方法是：
<!-- 這是一段註釋 -->
html標籤特色：
html的標籤大部分是成對出現的,少許是單個出現的，特定標籤之間能夠相互嵌套，嵌套就是指一個標籤裏面能夠包含一個或多個其餘的標籤，包含的標籤和父標籤能夠是同類型的，也能夠是不一樣類型的：
<!-- 成對出現的標籤 -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>
<!-- 單個出現的標籤 -->
<br />
<img src="..." />
<input type="..." />
<!-- 標籤之間的嵌套 -->
<p>
<span>...</span>
<a href="...">...</a>
</p>
<div>
<h3>...</h3>
<div>
<span>...</span>
<p>...</p>
</div>
</div>
html標題
經過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤能夠在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係，好比說： <h1>用做主標題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，因此網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落、換行與字符實體
<p>標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開
html換行
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，若是真想換行，能夠在代碼的段落中插入<br />來強制換行
html字符實體
代碼中成段的文字，若是文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，若是想顯示多個空格，可使用空格的字符實體
html塊、含樣式的標籤
html塊
一、div標籤 塊元素，表示一塊內容，沒有具體的語義。
二、span標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標籤
一、em標籤 行內元素，表示語氣中的強調詞
二、i標籤 行內元素，本來沒有語義，w3c強加了語義，表示專業詞彙
三、b標籤 行內元素，本來沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
四、strong標籤 行內元素，表示很是重要的內容
html圖像、絕對路徑和相對路徑
html圖像
<img>標籤能夠在網頁上插入一張圖片，它是獨立使用的標籤，經過「src」屬性定義圖片的地址，經過「alt」屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，須要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分爲絕對地址和相對地址。
- 絕對地址：相對於磁盤的位置去定位文件的地址
- 相對地址：相對於引用文件自己去定位被引用的文件地址
絕對地址在總體文件遷移時會由於磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
-
「 ./ 」 表示當前文件所在目錄下，好比：「./pic.jpg」 表示當前目錄下的pic.jpg的圖片，這個使用時能夠省略。
-
「 ../ 」 表示當前文件所在目錄下的上一級目錄，好比：「../images/pic.jpg」 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
html連接
html連接
<a>標籤能夠在網頁上定義一個連接地址，經過src屬性定義跳轉的地址，經過title屬性定義鼠標懸停時彈出的提示文字框。
定義頁面內滾動跳轉
頁面內定義了「id」或者「name」的元素，能夠經過a標籤連接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，不然頁面不會滾動。
<a href="#mao1">標題一</a> ...... ...... <h3 id="mao1">跳轉到的標題</h3>
html列表
有序列表
在網頁上定義一個有編號的內容列表能夠用<ol>、<li>配合使用來實現，代碼以下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在網頁上生成的列表，每條項目上會按一、二、3編號，有序列表在實際開發中較少使用。
無序列表
在網頁上定義一個無編號的內容列表能夠用<ul>、<li>配合使用來實現，代碼以下：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不一樣瀏覽器上顯示效果不一樣，因此通常會用樣式去掉默認的小圖標，若是須要圖標，能夠用樣式自定義圖標，從而達到在不一樣瀏覽器上顯示的效果相同,實際開發中通常用這種列表。
定義列表
定義列表一般用於術語的定義。<dl>標籤表示列表的總體。<dt>標籤訂義術語的題目。<dd>標籤是術語的解釋。一個<dl>中能夠有多個題目和解釋，代碼以下：
<h3>前端三大塊</h3>
<dl>
<dt>html</dt>
<dd>負責頁面的結構</dd>
<dt>css</dt>
<dd>負責頁面的表現</dd>
<dt>javascript</dt>
<dd>負責頁面的行爲</dd>
</dl>
html表格
table經常使用標籤
一、table標籤：聲明一個表格
二、tr標籤：定義表格中的一行
三、td和th標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格
table經常使用屬性：
一、border 定義表格的邊框
二、cellpadding 定義單元格內內容與邊框的距離
三、cellspacing 定義單元格與單元格之間的距離
四、align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
五、valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
六、colspan 設置單元格水平合併
七、rowspan 設置單元格垂直合併
傳統佈局：
傳統的佈局方式就是使用table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：
一、定義表格寬高，將border、cellpadding、cellspacing所有設置爲0
二、單元格里面嵌套表格
三、單元格中的元素和嵌套的表格用align和valign設置對齊方式
四、經過屬性或者css樣式設置單元格中元素的樣式
css基本語法及頁面引用
css基本語法
css的定義方法是：
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁面元素關聯起來的名稱，屬性是但願設置的樣式屬性每一個屬性有一個或多個值。代碼示例：
div{ width:100px; height:100px; color:red }
css頁面引入方法：
一、外聯式：經過link標籤，連接到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
二、嵌入式：經過style標籤，在網頁上建立嵌入的樣式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
三、內聯式：經過標籤的style屬性，在標籤上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......</div>
css文本設置
經常使用的應用文本的css樣式：
-
color 設置文字的顏色，如： color:red;
-
font-size 設置文字的大小，如：font-size:12px;
-
font-family 設置文字的字體，如：font-family:'微軟雅黑';
-
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
-
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
-
font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照以下順序寫： font：是否加粗 字號/行高 字體；如： font:normal 12px/36px '微軟雅黑';
-
line-height 設置文字的行高，如：line-height:24px;
-
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
-
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px
-
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
css顏色表示法
css顏色值主要有三種表示方法：
一、顏色名錶示，好比：red 紅色，gold 金色
二、rgb表示，好比：rgb(255,0,0)表示紅色
三、16進制數值表示，好比：#ff0000 表示紅色，這種能夠簡寫成 #f00
css選擇器
經常使用的選擇器有以下幾種：
一、標籤選擇器
標籤選擇器，此種選擇器影響範圍大，建議儘可能應用在層級選擇器中。
舉例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->
二、id選擇器
經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲選擇器。
舉例：
#box{color:red}
<div id="box">....</div> <!-- 對應以上一條樣式，其它元素不容許應用此樣式 -->
三、類選擇器
經過類名來選擇元素，一個類可應用於多個元素，一個元素上也可使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
四、層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
舉例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
五、組選擇器
多個選擇器，若是有一樣的樣式設置，可使用組選擇器。
舉例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
六、僞類及僞元素選擇器
經常使用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們能夠經過樣式在元素中插入內容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS盒子模型
盒子模型解釋
元素在頁面中顯示成一個方塊，相似一個盒子，CSS盒子模型就是使用現實中盒子來作比喻，幫助咱們設置元素對應的樣式。盒子模型示意圖以下：
把元素叫作盒子，設置對應的樣式分別爲：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設置邊框
設置一邊的邊框，好比頂部邊框，能夠按以下設置：
border-top-color:red; /* 設置頂部邊框顏色爲紅色 */ border-top-width:10px; /* 設置頂部邊框粗細爲10px */ border-top-style:solid; /* 設置頂部邊框的線性爲實線，經常使用的有：solid(實線) dashed(虛線) dotted(點線); */
上面三句能夠簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面同樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊若是設置同樣，能夠將四個邊的設置合併成一句：
border:10px solid red;
設置內間距padding
設置盒子四邊的內間距，可設置以下：
padding-top：20px; /* 設置頂部內間距20px */ padding-left:30px; /* 設置左邊內間距30px */ padding-right:40px; /* 設置右邊內間距40px */ padding-bottom:50px; /* 設置底部內間距50px */
上面的設置能夠簡寫以下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左 四個方向的內邊距值。 */
padding後面還能夠跟3個值，2個值和1個值，它們分別設置的項目以下：
padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */ padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/ padding：20px; /* 設置四邊內邊距爲20px */
設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
margin相關技巧
一、設置元素水平居中： margin:x auto;
二、margin負值讓元素位移及邊框合併
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法以下：
一、使用這種特性
二、設置一邊的外邊距，通常設置margin-top
三、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗，解決方法以下：
一、外部盒子設置一個邊框
二、外部盒子設置 overflow:hidden
三、使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
css元素溢出
當子元素的尺寸超過父元素的尺寸時，須要設置父元素顯示溢出的子元素的方式，設置的方法是經過overflow屬性來設置。
overflow的設置項：
一、visible 默認值。內容不會被修剪，會呈如今元素框以外。
二、hidden 內容會被修剪，而且其他內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
三、scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
五、inherit 規定應該從父元素繼承 overflow 屬性的值。
塊元素、內聯元素、內聯塊元素
元素就是標籤，佈局中經常使用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。
塊元素
塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、p、ul、li、h1~h六、dl、dt、dd等等都是塊元素，它在佈局中的行爲：
- 支持所有的樣式
- 若是沒有設置寬度，默認的寬度爲父級寬度100%
- 盒子佔據一行、即便設置了寬度
內聯元素
內聯元素，也能夠稱爲行內元素，佈局中經常使用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行爲：
- 支持部分樣式（不支持寬、高、margin上下、padding上下）
- 寬高由內容決定
- 盒子並在一行
- 代碼換行，盒子之間會產生間距
- 子元素是內聯元素，父元素能夠用text-align屬性設置子元素水平對齊方式，用line-height屬性值設置垂直對齊方式
解決內聯元素間隙的方法
一、去掉內聯元素之間的換行
二、將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size
內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行爲相似這種元素，可是也歸類於內聯元素，咱們能夠用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲：
- 支持所有樣式
- 若是沒有設置寬高，寬高由內容決定
- 盒子並在一行
- 代碼換行，盒子會產生間距
- 子元素是內聯塊元素，父元素能夠用text-align屬性設置子元素水平對齊方式，用line-height屬性值設置子元素垂直對齊方式
這三種元素，能夠經過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，因此咱們常常把內聯元素轉化爲塊元素，少許轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
display屬性
display屬性是用來設置元素的類型及隱藏的，經常使用的屬性有：
一、none 元素隱藏且不佔位置
二、block 元素以塊元素顯示
三、inline 元素之內聯元素顯示
四、inline-block 元素之內聯塊元素顯示
浮動
文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行以內從左到右排列，先寫的先排列，後寫的排在後面，每一個盒子都佔據本身的位置。
浮動特性
一、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
二、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
三、相鄰浮動的塊元素能夠並在一行，超出父級寬度就換行
四、浮動讓行內元素或塊元素自動轉化爲行內塊元素
五、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果
六、父元素內總體浮動的元素沒法撐開父元素，須要清除浮動
七、浮動元素之間沒有垂直margin的合併
清除浮動
- 父級上增長屬性overflow：hidden
- 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
- 使用成熟的清浮動樣式類，clearfix
-
定位
關於定位
咱們可使用css的position屬性來設置元素的定位類型，postion的設置項以下：- relative 生成相對定位元素，元素所佔據的文檔流的位置不變，元素自己相對文檔流的位置進行偏移
- absolute 生成絕對定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，若是找不到，則相對於body元素進行定位。
- fixed 生成固定定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於瀏覽器窗口進行定位。
- static 默認值，沒有定位，元素出如今正常的文檔流中，至關於取消定位屬性或者不設置定位屬性
- inherit 從父元素繼承 position 屬性的值
定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素定位元素層級
定位元素是浮動的正常的文檔流之上的，能夠用z-index屬性來設置元素的層級典型定位佈局
一、固定在頂部的菜單
二、水平垂直居中的彈框
三、固定的側邊的工具欄
四、固定在底部的按鈕background屬性
屬性解釋
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個複合屬性，它能夠分解成以下幾個設置項：- background-color 設置背景顏色
- background-image 設置背景圖片地址
- background-repeat 設置背景圖片如何重複平鋪
- background-position 設置背景圖片的位置
- background-attachment 設置背景圖片是固定仍是隨着頁面滾動條滾動
經常使用圖片格式
總結
在網頁製做中，如何選擇合適的圖片格式呢？
一、網頁製做中，若是要使用不透明背景的圖片，就使用jpg圖片；若是要使用透明或者半透明背景的圖片，就使用png圖片；
二、製做網頁圖標時候，若是圖標含多種顏色，可使用gif或png圖片；若是圖標是單色，並且要求有很好的顯示效果，可使用svg；若是是動畫圖標，可使用gif。
CSS權重
CSS權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。
權重的等級
能夠把樣式的應用方式分爲幾個等級，按照等級來計算權重
一、!important，加在樣式屬性值後，權重值爲 10000
二、內聯樣式，如：style=」」，權重值爲1000
三、ID選擇器，如：#content，權重值爲100
四、類，僞類和屬性選擇器，如： content、:hover 權重值爲10
五、標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1
六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0
CSS3新增選擇器
一、E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素
二、E:nth-last-child(n)：匹配元素類型爲E且是父元素的倒數第n個子元素（與上一項順序相反）
三、E:first-child：匹配元素類型爲E且是父元素的第一個子元素
四、E:last-child：匹配元素類型爲E且是父元素的最後一個子元素
五、E:only-child：匹配元素類型爲E且是父元素中惟一的子元素
六、E:nth-of-type(n)：匹配父元素的第n個類型爲E的子元素
七、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型爲E的子元素（與上一項順序相反）
八、E:first-of-type：匹配父元素的第一個類型爲E的子元素
九、E:last-of-type：匹配父元素的最後一個類型爲E的子元素
十、E:only-of-type：匹配父元素中惟一子元素是E的子元素
十一、E:empty 選擇一個空的元素
十二、E:enabled 可用的表單控件
1三、E:disabled 失效的表單控件
1四、E:checked 選中的checkbox
1五、E:not(s) 不包含某元素
1六、E:target 對應錨點的樣式
CSS3圓角、陰影、rgba
CSS3圓角
設置某一個角的圓角，好比設置左上角的圓角：
border-top-left-radius:30px 60px;
同時分別設置四個角： border-radius:30px 60px 120px 150px;
設置四個圓角相同：
border-radius:50%;
CSS3陰影
box-shadow：h-shadow v-shadow blur spread color inset;
分別設置陰影：水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內陰影
rgba（新的顏色值表示法）
一、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
二、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度
CSS3 transition動畫
一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式
- linear 勻速
- ease 開始和結束慢速
- ease-in 開始是慢速
- ease-out 結束時慢速
- ease-in-out 開始和結束時慢速
- cubic-bezier(n,n,n,n)
- 好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲線設置網站：https://matthewlein.com/ceaser/
四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性
CSS3 transform變換
一、translate(x,y) 設置盒子位移
二、scale(x,y) 設置盒子縮放
三、rotate(deg) 設置盒子旋轉
四、skew(x-angle,y-angle) 設置盒子斜切
五、perspective 設置透視距離
六、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
七、translateX、translateY、translateZ 設置三維移動
八、rotateX、rotateY、rotateZ 設置三維旋轉
九、scaleX、scaleY、scaleZ 設置三維縮放
十、tranform-origin 設置變形的中心點
十一、backface-visibility 設置盒子背面是否可見
CSS3 animation動畫
一、@keyframes 定義關鍵幀動畫
二、animation-name 動畫名稱
三、animation-duration 動畫時間
四、animation-timing-function 動畫曲線
- linear 勻速
- ease 開始和結束慢速
- ease-in 開始是慢速
- ease-out 結束時慢速
- ease-in-out 開始和結束時慢速
- steps 動畫步數
五、animation-delay 動畫延遲
六、animation-iteration-count 動畫播放次數 n|infinite
七、animation-direction
- normal 默認動畫結束不返回
- Alternate 動畫結束後返回
八、animation-play-state 動畫狀態
- paused 中止
- running 運動
九、animation-fill-mode 動畫先後的狀態
- none 不改變默認行爲
- forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
- backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
- both 向前和向後填充模式都被應用
十、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
CSS瀏覽器前綴
瀏覽器樣式前綴
爲了讓CSS3樣式兼容，須要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
自動添加瀏覽器前綴
目前的情況是，有些CSS3屬性須要加前綴，有些不須要加，有些只須要加一部分，這些加前綴的工做能夠交給插件來完成，好比安裝： autoprefixer
Sublime text 中安裝 autoprefixer 執行 preferences/key Bindings-Users 設置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 經過此工具能夠按照最新的前綴使用狀況給樣式自動加前綴。
HTML5新結構標籤
h5新增的主要語義化標籤以下：
一、header 頁面頭部、頁眉
二、nav 頁面導航
三、article 一篇文章
四、section 文章中的章節
五、aside 側邊欄
六、footer 頁面底部、頁腳
頁面使用標籤佈局示意圖：
HTML5 音頻和視頻
html5增長了audio和video標籤，提供了在頁面上插入音頻和視頻的標準方法。
audio標籤
支持格式：ogg、wav、mp3
對應屬性：
一、autoplay 自動播放
二、controls 顯示播放器
三、loop 循環播放
四、preload 預加載
五、muted 靜音
source標籤的做用是提供多個媒體文件地址，若是一個地址的文件不兼容，就使用下一個地址。
video標籤
支持格式：ogg、mp四、webM
屬性：
一、width
二、height
三、Poster
可選第三方播放器：
一、cyberplayer
二、tencentPlayer
三、youkuplayer
Viewport 視口
視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用 meta 標籤，name=「viewport 」 來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。
背景圖強制改變大小，可使用background新屬性
background新屬性
background-size:
- length：用長度值指定背景圖像大小。不容許負值。
- percentage：用百分比指定背景圖像大小。不容許負值。
- auto：背景圖像的真實大小。
- cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
背景圖強制改變大小，可使用background新屬性
background新屬性
background-size:
- length：用長度值指定背景圖像大小。不容許負值。
- percentage：用百分比指定背景圖像大小。不容許負值。
- auto：背景圖像的真實大小。
- cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
背景圖強制改變大小，可使用background新屬性
background新屬性
background-size:
- length：用長度值指定背景圖像大小。不容許負值。
- percentage：用百分比指定背景圖像大小。不容許負值。
- auto：背景圖像的真實大小。
- cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
移動端頁面佈局
PC及移動端頁面適配方法
設備屏幕有多種不一樣的分辨率，頁面適配方案有以下幾種：
一、全適配：流體佈局+響應式佈局
二、移動端適配：
- 流體佈局+少許響應式
- 基於rem的佈局
- 彈性盒模型
流體佈局
流體佈局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線沒法用百分比，可使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置爲從邊線計算盒子尺寸。
calc()
能夠經過計算的方式給元素加尺寸，好比： width：calc(25% - 4px);
box-sizing
一、content-box 默認的盒子尺寸計算方式
二、border-box 置盒子的尺寸計算方式爲從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
響應式佈局
響應式佈局就是使用媒體查詢的方式，經過查詢瀏覽器寬度，不一樣的寬度應用不一樣的樣式塊，每一個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面能夠適配多種終端屏幕（pc、平板、手機）。
相應佈局的僞代碼以下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基於rem的佈局
首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設置html標籤的文字大小，其餘的元素相關尺寸設置用rem，這樣，全部元素都有了統一的參照標準，改變html文字的大小，就會改變全部元素用rem設置的尺寸大小。
cssrem安裝
cssrem插件能夠動態地將px尺寸換算成rem尺寸
下載本項目，好比：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 複製下載的cssrem目錄到剛纔的packges目錄裏。 重啓Sublime Text。
配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例，默認爲40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。 available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。
彈性盒模型佈局
一、容器屬性
display : flex
聲明使用彈性盒佈局
flex-direction : row | row-reverse | column | column-reverse
肯定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超過父容器尺寸時是否換行
flex-flow : flex-direction | flex-wrap
同時設置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸肯定以後，用此屬性來設置flex-direction定義方向上的分佈方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸肯定以後，用此屬性來設置flex-direction定義方向上的垂直方向的分佈方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
設置多行子元素在行方向上的對齊方式
二、條目屬性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同時設置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是當父元素有多餘的空間時，這些空間在不一樣子元素之間的分配比例
flex-shrink： number
當父元素的空間不足時，各個子元素的尺寸縮小的比例
flex-basis ：length | percentage | auto | content
用來肯定彈性條目的初始主軸尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆寫父元素指定的對齊方式
order : integer
改變條目在容器中的出現順序
JavaScript
JavaScript介紹
JavaScript是運行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，須要插件)等。
前端三大塊
一、HTML：頁面結構
二、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
三、JavaScript：頁面行爲：部分動畫效果、頁面與用戶的交互、頁面功能
JavaScript嵌入頁面的方式
一、行間事件（主要用於事件）
<input type="button" name="" onclick="alert('ok！');">
二、頁面script標籤嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script>
三、外部引入
<script type="text/javascript" src="js/index.js"></script>
javascript語句與註釋
一、一條javascript語句應該以「;」結尾
<script type="text/javascript">
var a = 123;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>
二、javascript註釋
<script type="text/javascript">
// 單行註釋
var a = 123;
/*
多行註釋
一、...
二、...
*/
var b = 'str';
</script>
變量
JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。 定義變量須要用關鍵字 'var'
var a = 123; var b = 'asd'; //同時定義多個變量能夠用","隔開，公用一個‘var’關鍵字 var c = 45,d='qwe',f='68';
變量類型
5種基本數據類型：
number、string、boolean、undefined、null
1種複合類型：
object
變量、函數、屬性、函數參數命名規範
一、區分大小寫
二、第一個字符必須是字母、下劃線（_）或者美圓符號（$）
三、其餘字符能夠是字母、下劃線、美圓符或數字
獲取元素方法一
可使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素，獲取到的是一個html對象，而後將它賦值給一個變量，好比：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句，若是把javascript寫在元素的上面，就會出錯，由於頁面上從上往下加載執行的，javascript去頁面上獲取元素div1的時候，元素div1尚未加載，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二種方法：將javascript語句放到window.onload觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行，就不會出錯了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">這是一個div元素</div>
操做元素屬性
獲取的頁面元素，就能夠對頁面元素的屬性進行操做，屬性的操做包括屬性的讀和寫。
操做屬性的方法
一、「.」 操做
二、「[ ]」操做
屬性寫法
一、html的屬性和js裏面屬性寫法同樣
二、「class」 屬性寫成 「className」
三、「style」 屬性裏面的屬性，有橫槓的改爲駝峯式，好比：「font-size」，改爲」style.fontSize」
經過「.」操做屬性：
經過「.」操做屬性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 讀取屬性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 寫(設置)屬性
oA.style.color = 'red';
oA.style.fontSize = val;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
經過「[ ]」操做屬性：
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 讀取屬性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 寫(設置)屬性
// oA.style.val1 = val2; 沒反應
oA.style[val1] = val2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
innerHTML
innerHTML能夠讀取或者寫入標籤包裹的內容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//讀取
var txt = oDiv.innerHTML;
alert(txt);
//寫入
oDiv.innerHTML = '<a href="http://www.itcast.cn">傳智播客<a/>';
}
</script>
......
<div id="div1">這是一個div元素</div>
函數
函數就是重複執行的代碼片。
函數定義與執行
<script type="text/javascript">
// 函數定義
function aa(){
alert('hello!');
}
// 函數執行
aa();
</script>
變量與函數預解析
JavaScript解析過程分爲兩個階段，先是編譯階段，而後執行階段，在編譯階段會將function定義的函數提早，而且將var定義的變量聲明提早，將它賦值爲undefined。
<script type="text/javascript">
aa(); // 彈出 hello！
alert(bb); // 彈出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
提取行間事件
在html行間調用的事件能夠提取到javascript中調用，從而作到結構與行爲分離。
<!--行間事件調用函數 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="彈出" onclick="myalert()">
<!-- 提取行間事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="彈出" id="btn1">
匿名函數
定義的函數能夠不給名稱，這個叫作匿名函數，能夠將匿名函數直接賦值給元素綁定的事件來完成匿名函數的調用。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接將匿名函數賦值給綁定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
函數傳參
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
函數'return'關鍵字
函數中'return'關鍵字的做用：
一、返回函數執行的結果
二、結束函數的運行
三、阻止默認行爲
<script type="text/javascript">
function add(a,b){
var c = a + b;
return c;
alert('here!');
}
var d = add(3,4);
alert(d); //彈出7
</script>
條件語句
經過條件來控制程序的走向，就須要用到條件語句。
運算符
一、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
二、賦值運算符：=、 +=、 -=、 *=、 /=、 %=
三、條件運算符：==、===、>、>=、<、<=、!=、&&(並且)、||(或者)、!(否)
if else
switch
數組及操做方法
數組就是一組數據的集合，javascript中，數組裏面的數據能夠是不一樣類型的。
定義數組的方法
//對象的實例建立 var aList = new Array(1,2,3); //直接量建立 var aList2 = [1,2,3,'asd'];
操做數組中數據的方法
一、獲取數組的長度：aList.length;
var aList = [1,2,3,4]; alert(aList.length); // 彈出4
二、用下標操做數組的某個數據：aList[0];
var aList = [1,2,3,4]; alert(aList[0]); // 彈出1
三、join() 將數組成員經過一個分隔符合併成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4
四、push() 和 pop() 從數組最後增長成員或刪除成員
var aList = [1,2,3,4]; aList.push(5); alert(aList); //彈出1,2,3,4,5 aList.pop(); alert(aList); // 彈出1,2,3,4
五、unshift()和 shift() 從數組前面增長成員或刪除成員
var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //彈出5,1,2,3,4 aList.shift(); alert(aList); // 彈出1,2,3,4
六、reverse() 將數組反轉
var aList = [1,2,3,4]; aList.reverse(); alert(aList); // 彈出4,3,2,1
七、indexOf() 返回數組中元素第一次出現的索引值
var aList = [1,2,3,4,1,3,4]; alert(aList.indexOf(1));
八、splice() 在數組中增長或刪除成員
var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //從第2個元素開始，刪除1個元素，而後在此位置增長'7,8,9'三個元素 alert(aList); //彈出 1,2,7,8,9,4
多維數組
多維數組指的是數組的成員也是數組的數組。
var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //彈出2;
獲取元素的第二種方法
document.getElementsByTagName(''),獲取的是一個選擇集，不是數組，可是能夠用下標的方式操做選擇集裏面的dom元素。
Javascript組成
一、ECMAscript javascript的語法（變量、函數、循環語句等語法）
二、DOM 文檔對象模型 操做html和css的方法
三、BOM 瀏覽器對象模型 操做瀏覽器的一些方法
字符串處理方法
一、字符串合併操做：「 + 」
二、parseInt() 將數字字符串轉化爲整數
三、parseFloat() 將數字字符串轉化爲小數
四、split() 把一個字符串分隔成字符串組成的數組
五、charAt() 獲取字符串中的某一個字符
六、indexOf() 查找字符串是否含有某字符
七、substring() 截取字符串 用法： substring(start,end)（不包括end）
八、toUpperCase() 字符串轉大寫
九、toLowerCase() 字符串轉小寫
調試程序的方法
一、alert
二、console.log
三、document.title
定時器
定時器在javascript中的做用
一、製做動畫
二、異步操做
三、函數緩衝與節流
定時器類型及語法
/*
定時器：
setTimeout 只執行一次的定時器
clearTimeout 關閉只執行一次的定時器
setInterval 反覆執行的定時器
clearInterval 關閉反覆執行的定時器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
變量做用域
變量做用域指的是變量的做用範圍，javascript中的變量分爲全局變量和局部變量。
一、全局變量：在函數以外定義的變量，爲整個頁面公用，函數內部外部均可以訪問。
二、局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部沒法訪問。
封閉函數
封閉函數是javascript中匿名函數的另一種寫法，建立一個一開始就執行而不用命名的函數。
通常定義的函數和執行函數：
function changecolor(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}
changecolor();
封閉函數：
(function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
})();
還能夠在函數定義前加上「~」和「!」等符號來定義匿名函數
!function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
閉包
什麼是閉包
函數嵌套函數，內部函數能夠引用外部函數的參數和變量，參數和變量不會被垃圾回收機制收回
function aaa(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
}
var ccc = aaa(2);
ccc();
ccc();
改寫成封閉函數的形式：
var ccc = (function(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
})(2);
ccc();
ccc();
用處
一、將一個變量長期駐紮在內存當中，可用於循環中存索引值
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
(function(i){
aLi[i].onclick = function(){
alert(i);
}
})(i);
}
}
</script>
......
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
二、私有變量計數器，外部沒法訪問，避免全局變量的污染
<script type="text/javascript">
var count = (function(){
var a = 0;
function add(){
a++;
return a;
}
return add;
})()
count();
count();
var nowcount = count();
alert(nowcount);
</script>
內置對象
一、document
document.referrer //獲取上一個跳轉頁面的地址(須要服務器環境)
二、location
window.location.href //獲取或者重定url地址 window.location.search //獲取地址參數部分 window.location.hash //獲取頁面錨點或者叫哈希值
三、Math
Math.random 獲取0-1的隨機數 Math.floor 向下取整 Math.ceil 向上取整
面向對象
面向過程與面向對象編程
一、面向過程：全部的工做都是現寫現用。
二、面向對象：是一種編程思想，許多功能事先已經編寫好了，在使用時，只須要關注功能的運用，而不須要這個功能的具體實現過程。
javascript對象
將相關的變量和函數組合成一個總體，這個總體叫作對象，對象中的變量叫作屬性，變量中的函數叫作方法。javascript中的對象相似字典。
建立對象的方法
一、單體
<script type="text/javascript">
var Tom = {
name : 'tom',
age : 18,
showname : function(){
alert('個人名字叫'+this.name);
},
showage : function(){
alert('我今年'+this.age+'歲');
}
}
</script>
二、工廠模式
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function(){
alert('個人名字叫'+this.name);
};
o.showage = function(){
alert('我今年'+this.age+'歲');
};
o.showjob = function(){
alert('個人工做是'+this.job);
};
return o;
}
var tom = Person('tom',18,'程序員');
tom.showname();
</script>
二、構造函數
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showname = function(){
alert('個人名字叫'+this.name);
};
this.showage = function(){
alert('我今年'+this.age+'歲');
};
this.showjob = function(){
alert('個人工做是'+this.job);
};
}
var tom = new Person('tom',18,'程序員');
var jack = new Person('jack',19,'銷售');
alert(tom.showjob==jack.showjob);
</script>
三、原型模式
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.showname = function(){
alert('個人名字叫'+this.name);
};
Person.prototype.showage = function(){
alert('我今年'+this.age+'歲');
};
Person.prototype.showjob = function(){
alert('個人工做是'+this.job);
};
var tom = new Person('tom',18,'程序員');
var jack = new Person('jack',19,'銷售');
alert(tom.showjob==jack.showjob);
</script>
四、繼承
<script type="text/javascript">
function fclass(name,age){
this.name = name;
this.age = age;
}
fclass.prototype.showname = function(){
alert(this.name);
}
fclass.prototype.showage = function(){
alert(this.age);
}
function sclass(name,age,job)
{
fclass.call(this,name,age);
this.job = job;
}
sclass.prototype = new fclass();
sclass.prototype.showjob = function(){
alert(this.job);
}
var tom = new sclass('tom',19,'全棧工程師');
tom.showname();
tom.showage();
tom.showjob();
</script>
新選擇器
一、document.querySlector()
二、document.querySlectorAll()
jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就可使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jQuery
jquery介紹
jquery加載
將獲取元素的語句寫到頁面頭部，會由於元素尚未加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
能夠簡寫爲：
<script type="text/javascript">
$(function(){
......
});
</script>
jquery選擇器
jquery用法思想一
選擇某個網頁元素，而後對它進行某種操做
jquery選擇器
jquery選擇器能夠快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$(document) //選擇整個文檔對象
$('li') //選擇全部的li元素
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id爲爲ul1元素下的全部li下的span元素
對選擇集進行修飾過濾(相似CSS僞類)
$('#ul1 li:first') //選擇id爲ul1元素下的第一個li
$('#ul1 li:odd') //選擇id爲ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id爲ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id爲ul1元素下的前三個以後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對選擇集進行函數過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的全部子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素
jquery樣式操做
jquery用法思想二
同一個函數完成取值和賦值
操做行間樣式
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意
選擇器獲取的多個元素，獲取信息獲取的是第一個，好比：$("div").css("width")，獲取的是第一個div的width。
操做樣式類名
$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
jquery屬性操做
一、html() 取出或設置html內容
// 取出html內容
var $htm = $('#div1').html();
// 設置html內容
$('#div1').html('<span>添加文字</span>');
二、text() 取出或設置text內容
// 取出文本內容
var $htm = $('#div1').text();
// 設置文本內容
$('#div1').text('<span>添加文字</span>');
三、attr() 取出或設置某個屬性的值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
綁定click事件
給元素綁定click事件，能夠用以下方法：
$('#btn1').click(function(){
// 內部的this指的是原生對象
// 使用jquery對象用 $(this)
})
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展現或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素
jquery鏈式調用
jquery對象的方法會在執行完後返回這個jquery對象，全部jquery對象的方法能夠連起來寫：
$('#div1') // id爲div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent() //跳到ul的父元素，也就是id爲div1的元素
.siblings() //跳到div1元素平級的全部兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實際高度變換到零來隱藏ul元素
jquery動畫
經過animate方法能夠設置元素某屬性值上的動畫，能夠設置一個或多個屬性值，動畫執行完成後會執行一個函數。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
參數能夠寫成數字表達式：
$('#div1').animate({ width:'+=100', height:300 },1000,swing,function(){ alert('done!'); });
尺寸相關、滾動事件
一、獲取和設置元素的尺寸
width()、height() 獲取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
二、獲取元素相對頁面的絕對位置
offse()
三、獲取可視區高度
$(window).height();
四、獲取頁面高度
$(document).height();
五、獲取頁面滾動距離
$(document).scrollTop(); $(document).scrollLeft();
六、頁面滾動事件
$(window).scroll(function(){ ...... })
jquery事件
事件函數列表：
blur() 元素失去焦點 focus() 元素得到焦點 change() 表單元素的值發生變化 click() 鼠標單擊 dblclick() 鼠標雙擊 mouseover() 鼠標進入（進入子元素也觸發） mouseout() 鼠標離開（離開子元素也觸發） mouseenter() 鼠標進入（進入子元素不觸發） mouseleave() 鼠標離開（離開子元素不觸發） hover() 同時爲mouseenter和mouseleave事件指定處理函數 mouseup() 鬆開鼠標 mousedown() 按下鼠標 mousemove() 鼠標在元素內部移動 keydown() 按下鍵盤 keypress() 按下鍵盤 keyup() 鬆開鍵盤 load() 元素加載完畢 ready() DOM加載完成 resize() 瀏覽器窗口的大小發生改變 scroll() 滾動條的位置發生變化 select() 用戶選中文本框中的內容 submit() 用戶遞交表單 toggle() 根據鼠標點擊的次數，依次運行多個函數 unload() 用戶離開頁面
綁定事件的其餘方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消綁定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
主動觸發與自定義事件
主動觸發
可以使用jquery對象上的trigger方法來觸發對象上綁定的事件。
自定義事件
除了系統事件外，能夠經過bind方法自定義事件，而後用tiggle方法觸發這些事件。
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發hello事件
element.trigger("hello");
事件冒泡
什麼是事件冒泡
在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
事件冒泡的做用
事件冒泡容許多個操做被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可讓你在對象層的不一樣級別捕獲事件。
阻止事件冒泡
事件冒泡機制有時候是不須要的，須要阻止掉，經過 event.stopPropagation() 來阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默認行爲
阻止右鍵菜單
$(document).contextmenu(function(event) {
event.preventDefault();
});
合併阻止操做
實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫，合併寫法能夠用
// event.stopPropagation(); // event.preventDefault(); // 合併寫法： return false;
事件委託
事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次可讓新加入的子元素也能夠擁有相同的操做。
通常綁定事件的寫法
$(function(){
$ali = $('#list li');
$ali.click(function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委託的寫法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
取消事件委託
// ev.delegateTarge 委託對象 $(ev.delegateTarge).undelegate(); // 上面的例子可以使用 $list.undelegate();
jquery元素節點操做
建立節點
var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');
插入節點
一、append()和appendTo()：在現存元素的內部，從後面插入元素
var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
二、prepend()和prependTo()：在現存元素的內部，從前面插入元素
三、after()和insertAfter()：在現存元素的外部，從後面插入元素
四、before()和insertBefore()：在現存元素的外部，從前面插入元素
刪除節點
$('#div1').remove();
滾輪事件與函數節流
jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可使用jquery的滾輪事件插件jquery.mousewheel.js。
函數節流
javascript中有些事件的觸發頻率很是高，好比onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，能夠巧妙地使用定時器來減小觸發的次數，實現函數節流。
json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是相似於javascript對象的一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。
javascript對象字面量：
var tom = {
name:'tom',
age:18
}
json格式的數據：
{
"name":'tom',
"age":18
}
與json對象不一樣的是，json數據格式的屬性名稱須要用雙引號引發來，用單引號或者不用引號會致使讀取數據錯誤。
json的另一個數據格式是數組，和javascript中的數組字面量相同。
['tom',18,'programmer']
Ajax
ajax與jsonp
ajax技術的目的是讓javascript發送http請求，與後臺通訊，獲取數據和信息。ajax技術的原理是實例化xmlhttp對象，使用此對象與後臺通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現異步。
同步和異步
現實生活中，同步指的是同時作幾件事情，異步指的是作完一件過後再作另一件事，程序中的同步和異步是把現實生活中的概念對調，也就是程序中的異步指的是現實生活中的同步，程序中的同步指的是現實生活中的異步。
局部刷新和無刷新
ajax能夠實現局部刷新，也叫作無刷新，無刷新指的是整個頁面不刷新，只是局部刷新，ajax能夠本身發送http請求，不用經過瀏覽器的地址欄，因此頁面總體不會刷新，ajax獲取到後臺數據，更新頁面顯示數據的部分，就作到了頁面局部刷新。
同源策略
ajax請求的頁面或資源只能是同一個域下面的資源，不能是其餘域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：
XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
$.ajax使用方法
經常使用參數：
一、url 請求地址
二、type 請求方式，默認是'GET'，經常使用的還有'POST'
三、dataType 設置返回的數據格式，經常使用的是'json'格式，也能夠設置爲'html'
四、data 設置發送給服務器的數據
五、success 設置請求成功後的回調函數
六、error 設置請求失敗後的回調函數
七、async 設置是否異步，默認值是'true'，表示異步
之前的寫法：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
......
},
error:function(){
alert('服務器超時，請重試！');
}
});
新的寫法(推薦)：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
......
})
.fail(function() {
alert('服務器超時，請重試！');
});
jsonp
ajax只能請求同一個域下的數據或資源，有時候須要跨域請求數據，就須要用到jsonp技術，jsonp能夠跨域請求數據，它的原理主要是利用了script標籤能夠跨域連接資源的特性。
jsonp的原理以下：
<script type="text/javascript">
function aa(dat){
alert(dat.name);
}
</script>
<script type="text/javascript" src="....../js/data.js"></script>
頁面上定義一個函數，引用一個外部js文件，外部js文件的地址能夠是不一樣域的地址，外部js文件的內容以下：
aa({"name":"tom","age":18});
外部js文件調用頁面上定義的函數，經過參數把數據傳進去。
正則表達式
一、什麼是正則表達式：
能讓計算機讀懂的字符串匹配規則。
二、正則表達式的寫法：
var re=new RegExp('規則', '可選參數');
var re=/規則/參數;
三、規則中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）轉義字符匹配：
\d 匹配一個數字，即0-9
\D 匹配一個非數字，即除了0-9
\w 匹配一個單詞字符（字母、數字、下劃線）
\W 匹配任何非單詞字符。等價於[^A-Za-z0-9_]
\s 匹配一個空白符
\S 匹配一個非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
. 匹配一個任意字符，除了換行符‘\n’和回車符‘\r’
\1 重複子項
四、量詞：對左邊的匹配字符定義個數
? 出現零次或一次（最多出現一次）
+ 出現一次或屢次（至少出現一次）
* 出現零次或屢次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次
五、任意一個或者範圍
[abc123] : 匹配‘abc123’中的任意一個字符
[a-z0-9] : 匹配a到z或者0到9中的任意一個字符
六、限制開頭結尾
^ 以緊挨的元素開頭
$ 以緊挨的元素結尾
七、修飾參數：
g： global，全文搜索，默認搜索到第一個結果接中止
i： ingore case，忽略大小寫，默認大小寫敏感
m： multiple lines，多行搜索（更改^ 和$的含義，使它們分別在任意一行對待行首和行尾匹配，而不只僅在整個字符串的開頭和結尾匹配）
八、經常使用函數
一、test
用法：正則.test(字符串) 匹配成功，就返回真，不然就返回假
二、search
用法：字符串.search(正則) 匹配成功，返回位置，不然返回-1
三、match
用法： 字符串.match(正則)；匹配成功，就返回匹配成功的數組，不然就返回null
四、replace
用法：字符串.replace(正則，新的字符串) 匹配成功的字符去替換新的字符
正則默認規則
匹配成功就結束，不會繼續匹配，區分大小寫
本地存儲
本地存儲分爲cookie，以及新增的localStorage和sessionStorage
一、cookie 存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬，可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設置的過時時間以前有效。
jquery 設置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 獲取cookie
$.cookie('mycookie');
二、localStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在全部同源窗口中共享，數據一直有效，除非人爲刪除，可做爲長期數據。
//設置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//獲取：
localStorage.getItem("dat");
localStorage.dat
//刪除
localStorage.removeItem("dat");
三、sessionStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。
localStorage 和 sessionStorage 合稱爲Web Storage , Web Storage支持事件通知機制，能夠將數據更新的通知監聽者，Web Storage的api接口使用更方便。
iPhone的無痕瀏覽不支持Web Storage，只能用cookie。
jqueryUI
jQuery UI是以 jQuery 爲基礎的代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。咱們能夠直接用它來構建具備很好交互性的web應用程序。
jqueryUI 網址
http://jqueryui.com/
經常使用jqueryUI插件：
Draggable
一、設置數值的滑動條
二、自定義滾動條
移動端js事件
移動端的操做方式和PC端是不一樣的，移動端主要用手指操做，因此有特殊的touch事件，touch事件包括以下幾個事件：
一、touchstart: //手指放到屏幕上時觸發
二、touchmove: //手指在屏幕上滑動式觸發
三、touchend: //手指離開屏幕時觸發
四、touchcancel: //系統取消touch事件的時候觸發，比較少用
移動端通常有三種操做，點擊、滑動、拖動，這三種操做通常是組合使用上面的幾個事件來完成的，全部上面的4個事件通常不多單獨使用，通常是封裝使用來實現這三種操做，可使用封裝成熟的js庫。
zeptojs
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api。 若是你會用jquery，那麼你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的；它的最初目標是在移動端提供一個精簡的相似jquery的js庫。
zepto官網：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含不少模塊，默認下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊，若是還須要其餘的模塊，能夠自定義構建。
zepto自定義構建地址：http://github.e-sites.nl/zeptobuilder/
touch模塊封裝了針對移動端經常使用的事件，可以使用此模塊進行移動端特定效果開發，這些事件有：
- tap 元素tap的時候觸發，此事件相似click，可是比click快。
- longTap 當一個元素被按住超過750ms觸發。
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當元素被劃過期觸發。(可選擇給定的方向)
-
swiper
swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果插件，通常用來觸屏焦點圖、觸屏整屏滾動等效果。 swiper分爲2.x版本和3.x版本，2.x版本支持低版本瀏覽器(IE7)，3.x放棄支持低版本瀏覽器，適合應用在移動端。
2.x版本中文網址：http://2.swiper.com.cn/
3.x版本中文網地址：http://www.swiper.com.cn/swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script> ...... <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> ...... <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', initialSlide :1, paginationClickable: true, loop: true, autoplay:3000, autoplayDisableOnInteraction:false }); </script>swiper使用參數：
一、initialSlide：初始索引值，從0開始
二、direction：滑動方向 horizontal | vertical
三、speed：滑動速度，單位ms
四、autoplay：設置自動播放及播放時間
五、autoplayDisableOnInteraction：用戶操做swipe後是否還自動播放，默認是true，再也不自動播放
六、pagination：分頁圓點
七、paginationClickable：分頁圓點是否點擊
八、prevButton：上一頁箭頭
九、nextButton：下一頁箭頭
十、loop：是否首尾銜接
十一、onSlideChangeEnd：回調函數，滑動結束時執行swiper製做實例：
一、swiper製做移動端焦點圖實例
二、swiper製做整頁滾動效果 -
bootstrap
簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。 來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫代碼更容易。 移動優先，響應式佈局開發。
bootstrap中文網址：http://www.bootcss.com/
bootstrap 容器
- container-fluid 流體
- container
- 1170
- 970
- 750
- 100%
bootstrap 柵格系統
bootstrap將頁面橫向分爲12等分，按照12等分定義了適應不一樣寬度等分的樣式類，這些樣式類組成了一套響應式、移動設備優先的流式柵格系統：
一、col-lg-
二、col-md-
三、col-sm-
四、col-xs-bootstrap響應式查詢區間：
一、大於等於768
二、大於等於992
三、大於等於1200bootstrap 表單
一、form 聲明一個表單域
二、form-inline 內聯表單域
三、form-horizontal 水平排列表單域
四、form-group 表單組、包括表單文字和表單控件
五、form-control 文本輸入框、下拉列表控件樣式
六、checkbox checkbox-inline 多選框樣式
七、radio radio-inline 單選框樣式
八、input-group 表單控件組
九、input-group-addon 表單控件組物件樣式 十、input-group-btn 表單控件組物件爲按鈕的樣式
十、form-group-lg 大尺寸表單
十一、form-group-sm 小尺寸表單bootstrap 按鈕
一、btn 聲明按鈕
二、btn-default 默認按鈕樣式
三、btn-primay
四、btn-success
五、btn-info
六、btn-warning
七、btn-danger
八、btn-link
九、btn-lg
十、btn-md
十一、btn-xs
十二、btn-block 寬度是父級寬100%的按鈕
1三、active
1四、disabled
1五、btn-group 定義按鈕組bootstrap 圖片
img-responsive 聲明響應式圖片
bootstrap 隱藏類
一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lgbootstrap 字體圖標
經過字體代替圖標，font文件夾須要和css文件夾在同一目錄
bootstrap 下拉菜單
一、dropdown-toggle
二、dropdown-menubootstrap 選項卡
一、nav
二、nav-tabs
三、nav-pills
四、tab-contentbootstrap 導航條
一、navbar 聲明導航條
二、navbar-default 聲明默認的導航條樣式
三、navbar-inverse 聲明反白的導航條樣式
四、navbar-static-top 去掉導航條的圓角
五、navbar-fixed-top 固定到頂部的導航條
六、navbar-fixed-bottom 固定到底部的導航條
七、navbar-header 申明logo的容器
八、navbar-brand 針對logo等固定內容的樣式
十一、nav navbar-nav 定義導航條中的菜單
十二、navbar-form 定義導航條中的表單
1三、navbar-btn 定義導航條中的按鈕
1四、navbar-text 定義導航條中的文本
九、navbar-left 菜單靠左
十、navbar-right 菜單靠右bootstrap 模態框
一、modal 聲明一個模態框
二、modal-dialog 定義模態框尺寸
三、modal-lg 定義大尺寸模態框
四、modal-sm 定義小尺寸模態框
五、modal-header
六、modal-body
七、modal-footerbootstrap 響應式專題網站實例
-
less、sass、stylus
它們是三種相似的樣式動態語言，屬於css預處理語言，它們有相似css的語法，爲css賦予了動態語言的特性、如變量、繼承、運算、函數等。這麼作是爲了css的編寫和維護。
它們使用的文件分別是：.less、.scss、*.styl,這些文件是不能再網頁上直接使用的，最終要編譯成css文件來使用，編譯的方法有軟件編譯，或者用nodejs程序。
less、sass編譯軟件：
http://koala-app.com/index-zh.htmlless中文網址：http://lesscss.cn/
less語法：
一、註釋
// 不會被編譯的註釋 /* 會被編譯的註釋 */二、變量
@w:200px; .box{ width:@w; height:@w; background-color:red; }三、混合
.border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w; height:@h; border:@bw solid #ddd; } .box{ .border; background-color:red; }四、匹配模式
.p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; } .box{ .p(f); }五、運算
@w:300px; .box{ width:@w+20; }四、嵌套
.list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } }五、導入
// 導入common.less,導入a.css文件 @import "common"; @import (less) "a.css";
-
前端自動化
Node.js
Node.js能夠理解爲是一門後端腳本語言，使用了和JavaScript相同的語法，會使用JavaScript的程序員能很快上手node.js、nodjs在處理高併發方面性能卓越，目前許多公司都在使用nodejs做爲後端數據服務和前端開發的中間層。
node.js的中文網站：https://nodejs.org/zh-cn/
前端自動化
前端開發的流程愈來愈複雜，其中有代碼的合併和壓縮、圖片的壓縮；對less、sass的預處理；文件操做等，這些工做是重複乏味的，爲了優化開發流程，提升工做效率，前端自動化工具就出現了，自動化工具能夠經過配置，自動完成這些工做。
grunt、gulp
grunt和gulp是使用node.js編寫的，前端首選的自動化工具，gulp在書寫配置上比grunt更簡潔，運行的性能更高，gulp逐漸成爲主流。
gulp的使用
gulp使用步驟： 安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務 gulp網站：http://gulpjs.com/
經常使用gulp插件：
壓縮js代碼（gulp-uglify）
less的編譯（gulp-less）
css的壓縮 （gulp-minify-css）
自動添加css3前綴（gulp-autoprefixer）
文件更名字 (gulp-rename) -
前端性能優化
從用戶訪問資源到資源完整的展示在用戶面前的過程當中，經過技術手段和優化策略，縮短每一個步驟的處理時間從而提高整個資源的訪問和呈現速度。網站的性能直接會影響到用戶的數量，全部前端性能優化很重要。
前端性能優化分爲以下幾個方面：
1、代碼部署：
一、代碼的壓縮與合併
二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲，從而使得在傳輸資源時不會帶上沒必要要的cookie信息。
三、使用內容分發網絡 CDN
四、爲文件設置Last-Modified、Expires和Etag
五、使用GZIP壓縮傳送
六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)
七、避免沒必要要的重定向(加"/")2、編碼
html：
一、使用結構清晰，簡單，語義化標籤
二、避免空的src和href
三、不要在HTML中縮放圖片css：
一、精簡css選擇器 二、把CSS放到頂部
三、避免@import方式引入樣式
四、css中使用base64圖片數據取代圖片文件，減小請求數，在線轉base64網站：http://tool.css-js.com/base64.html
五、使用css動畫來取代javascript動畫
六、使用字體圖標,圖標庫網站：http://fontawesome.io/icons/，在線製做網站：www.iconfont.cn
七、使用css sprite
八、使用svg圖形
九、避免使用CSS表達式a {star : expression(onfocus=this.blur)}十、避免使用濾鏡
javascript：
一、減小引用庫的個數二、使用requirejs或seajs異步加載js三、JS放到頁面底部引入四、避免全局查找五、減小屬性查找六、使用原生方法七、用switch語句代替複雜的if else語句八、減小語句數，好比說多個變量聲明能夠寫成一句九、使用字面量表達式來初始化數組或者對象十、使用DocumentFragments或innerHTML取代複雜的元素注入十一、使用事件代理(事件委託)十二、避免屢次訪問dom選擇集1三、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover1四、使用Web Storage緩存數據1五、使用Array的join方法來代替字符串的「+」鏈接(先將要鏈接的字符串放進數組)
-
- 1. 前端基礎整理
- 2. Python 基礎知識整理－3 （bytes-strings）
- 3. Python前端基礎
- 4. Web前端基礎知識整理（一）
- 5. day49學習整理-前端基礎-html
- 6. 前端面試基礎整理
- 7. 前端基礎知識整理（一）
- 8. 前端基礎概念的整理
- 9. 前端基礎資料整理
- 10. 前端基礎整理-MVVM相關
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
- 1. 前端基礎整理
- 2. Python 基礎知識整理－3 （bytes-strings）
- 3. Python前端基礎
- 4. Web前端基礎知識整理（一）
- 5. day49學習整理-前端基礎-html
- 6. 前端面試基礎整理
- 7. 前端基礎知識整理（一）
- 8. 前端基礎概念的整理
- 9. 前端基礎資料整理
- 10. 前端基礎整理-MVVM相關