移動端開發

移動端開發

1. HTML5

1.1 新增長的語義化標籤

H5新增標籤最大的特色：讓標籤語義話； H5新增標籤：

• header 頭部
• footer 尾部
• main 主體
• section 塊，區域
• article 文章區域
• aside 側邊欄，與內容無關的部分（例如：廣告）
• nav 導航
• figure 配圖區域
• figcaption 配圖文字說明，圖片註釋
• mark 標記
• time 時間標記
• progress 進度條
• hgroup 標題組合

1.2 表單元素

傳統的表單元素： input：text/password/radio/checkbox/file/hidden/button/submit/reset... select 下拉框 textarea 文本域 button 按鈕 form 表單 action： 是路徑地址 method: 提交方式； label

<form action="">
	<input type="submit" /> </form>
//把數據提交到form表單的action屬性值的地址中；向這個空間地址發送請求，而且把input框中的內容發送給這個地址； form通常用於登陸註冊；
複製代碼

H5新增的一些表單元素/類型： input：search搜索框/email郵箱框/tel電話框/number數字框/range滑動條/color顏色框/date日期框/time時間框/url地址框

<input type="range" id="range" step="1" min="1" max="10" value="7">  //默認值爲7
<input type="number" id="number" step="1" min="1" max="10" value="7" disabled> //disabled表示不可編輯

range.oninput = function(){
	let val = this.value;
	number.value = val;
}
複製代碼

input文本框都有一個value屬性，value屬性的屬性值就是文本框中輸入的內容； 單選框、雙選框有一個checked屬性，獲取或設置值； 表單新增長的屬性（html5） （1）autocomplete屬性
autocomplete屬性有兩個值：on和off，默認爲on； 含義：自動完成，（在表單中填寫的數據寫完就自動提交了）

<form autocomplete="on"></form>
複製代碼

form和input都有autocomplete自動完成功能的屬性 （2）autofocus屬性
含義：頁面加載時，域自動得到焦點；

<input autofocus="autofocus" />
複製代碼

autofocus屬性適用於全部的<input>標籤 （3）multiple屬性 規定輸入域中可選擇多個值

<input type="file" multiple="multiple" />
複製代碼

multiple屬性適用於如下類型的<input>標籤：email和file （4）placeholder屬性 提示語 placeholder屬性適用於<input>標籤type屬性爲：text、search、url、tel、email、password；

//如何實現時間輸入框有輸入提示？
<input type="text" name="date" onfocus="(this.type='date')" placeholder='請選擇日期' />
複製代碼

（5）required屬性 設置必填項，必須在提交前填寫輸入域

<input type="text" required="required" />
複製代碼

required屬性適用於<input>標籤type類型爲：text、search、url、tel、email、password、date全部類型、number、checkbox、radio、file等；

1.3 表單驗證

（1）使用list和datalist實現什麼效果

<input type="text" list="tips">
	<dataList id="tips"> <option value="aaa"></option> <option value="www"></option> <option value="eee"></option> <option value="fff"></option> </dataList>
複製代碼

（2）當有type=「file」類型的輸入框時，form標籤中必需要添加enctype的屬性，設置文件發送到服務器以前對錶單數據進行編碼

<form action="" method="" enctype="multipart/form-data" >
<input type="file"> 複製代碼

（3）novalidate和formnovalidate novalidate用在form標籤上，formnovalidate用在input標籤上；

<form action="" method="" enctype="multipart/form-data" novalidate autocomplete="on">
複製代碼

（4）pattern 設置正則表達式驗證，能夠完成各類複雜的驗證

<input type="text" name="gonghao" placeholder="請輸入工號" pattern="^\d{5}[imooc]$">
複製代碼

（5）maxlength和minlength爲輸入的最大長度和最小長度

<input type="text" id="test" name="test" value="" maxlength="5" minlength="2" pattern="^\d{5}" />   
//表示input輸入框最少輸入2個，最多輸入5個字符
複製代碼

（6）label標籤

<label for="man">男</label>
<input type="radio" name="sex" id="man" required="">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" required="">
複製代碼

HTML5的約束驗證API

1. willValidate屬性
2. validity屬性
3. validationMessage屬性
4. checkValidity()方法：H5新提供的表單內容格式驗證方法；（新表單類型中有內置驗證機制的，均可以基於這個方法驗證）
5. setCustomValidity()方法

表單元素中新增的類型做用：

1. 功能變強大了，不少東西不須要本身導入JS插件就能夠完成了，例如date日曆；
2. 在移動端根據設置的類型不同，用戶輸入過程當中調出來的虛擬鍵盤也不同；例如：number類型的文本框調出來的是數字鍵盤；
3. 新增長的類型提供了CSS和JS驗證，能夠驗證用戶出入的內容是否符合格式，以前都是用正則本身驗證，如今h5中的新類型自帶驗證機制；

<input type="email" id="userEmail">
<span id="span"></span>

//CSS驗證方式：
<style>
	#userEmail{border:1px solid #DDD; outline:none} //當文本框獲取焦點後去除瀏覽器默認的邊框顏色
	#userEmail:valid{border-color:green} //經過驗證分爲兩種：一種是什麼都不輸入；另一種是格式符合要求；
	#userEmail:invalid{border-color:red} //沒經過驗證
	#userEmail:valid+span:after{content:"郵箱格式正確"}
	#userEmail:invalid+span:after{content:"郵箱格式不正確"}
</style>

//JS驗證方式 
userEmail.oninput = function(){
	if(this.checkValidity()){
		span.innerHTML = 'OK';
	}else{
		span.innerHTML = 'NO';
	}
}
//真實項目中通常都是本身用正則來驗證
userEmail.onkeyup = function(){
	let val = this.value.trim(); //去掉首尾的空格
	if(val.length === 0){
		span.innerHTML = "必填";
		return;
	}
	let reg = /$\w+((-\w+)|(\.\w))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
	if(!reg.test(val)){
		span.innerHTML = "NO";
		return;
	}
	span.innerHTML = "OK";
}
複製代碼

---

2. CSS3

2.1 選擇器

經常使用的屬性選擇器： A B{} 後代 A.B{} 既具有A也具有.B的（同級二次篩選） A>B{} 子代 A+B{} 下一個弟弟選擇器 A~B{} 兄弟

經常使用的僞類選擇器：

1. 通配符選擇器 A[name=""] 屬性選擇器
   A[name!=""]不等於
   A[name^=""]以什麼開始
   A[name$=""]以什麼結尾
   A[name*=""] 包含

2. 狀態僞類 1)正常狀態（:link）：未訪問狀態； 2)放上狀態（:hover）：鼠標懸浮狀態； 3)激活狀態（:active）：按住鼠標左鍵不鬆開時的連接樣式，這個狀態特別短暫 4)已訪問狀態（:visited）：按下鼠標左鍵並彈起，這時的樣式效果。 注意：（1）僞選擇器經常使用於連接（a元素），:hover和:active也能夠用於其餘元素； （2）連接僞類的順序：:link > :visited > :hover > :active 不然不生效； 5）得到焦點狀態（:focus）：經常使用於文本框中，在文本框中點擊一下就得到焦點了 eg：input:focus{background:yellow;}

3. UI元素狀態僞類 :enabled、:disabled、:checked 例如：一個文本框，可輸入的狀態就是enabled，不可輸入的狀態就是disabled，單選框複選框中選中的狀態就是checked； 注意：input輸入框可編輯的纔有輸入框，不可編輯的沒有寬和高； input:enabled 能夠設置寬高 input:disabled 沒有寬高

4. 僞元素
   css僞元素用於向某些選擇器設置特殊效果
   語法格式：元素::僞元素 1）Element::first-line 給Element元素的第一行文本加樣式； 注意：first-line僞元素只能用於塊級元素； 2）Element::first-letter 用於向文本的首字母設置樣式，只能用於塊級元素； 3）Element::before 在元素的內容前面插入新內容；常與「content」配合使用； ::before僞元素的特色：會成爲第一個子元素、屬於行級元素、內容只能經過content寫入、支持全部的css屬性； 4）Element::after 在元素的內容後面插入新內容 常與「content」配合使用，多用於清除浮動； ::after僞元素的特色：會成爲最後一個子元素、屬於行級元素、內容只能經過content寫入、支持全部的css屬性； 5）Element::selection用於設置在瀏覽器中選中文本後的背景色與前景色；

5. nth選擇器 1）Element:first-of-type 匹配屬於其父元素的特定類型的首個子元素中的每一個元素； Element:last-of-type 匹配屬於其父元素的特定類型的最後一個子元素中的每一個元素； 2）Element:nth-of-type(n)、Element:nth-last-of-type(n)選擇器 注意：Odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1） Element:nth-of-type(n)和Element:nth-child(n)的區別在於： div:nth-of-type(2) 匹配第二個div標籤（也可能這個div標籤排第三或第四，前面有a或li標籤），指定元素類型； div:nth-child(2) 匹配第二個子標籤，且第二個子標籤必須是div標籤，不限定元素類型； 3）Element:nth-child(n) 匹配某個父元素中的第n個子元素是Element標籤，不論父元素是什麼 注意：ul>li:nth-child(n) 表示匹配ul下的全部li標籤 只能寫n，不能夠用其它字母代替； ul>li:nth-child(2) 表示匹配ul下的第二個li標籤； ul>li:nth-child(odd) 奇數 至關於2n+1； ul>li:nth-child(even) 偶數 至關於2n； 4）Element:nth-last-child(n) 倒數第n個 5）Element:first-child 選擇屬於其父元素的首個子元素的每一個元素 能夠配合其餘選擇器一塊兒使用，例如：section>div:first-child{} 6）Element:last-child 某個元素的最後一個子元素是Element的元素 7）Element:only-child 匹配屬於其父元素的惟一子元素的每一個元素； 8）Element:only-of-type 匹配屬於其父元素的特定類型的惟一子元素的每一個元素； 9）Element:empty 匹配沒有子元素（包括文本節點）的每一個元素；

6. 否認選擇器
   語法：父元素:not(子元素/子選擇器) 匹配不是這個標籤的其餘全部標籤；

2.2 樣式屬性

2.2.1基本屬性

1）border-radius 圓角邊框 2）box-shadow:[投影方式] X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
例如：box-shadow:10px 10px 5px 2px yellow; 參數說明： a.投影方式：此值可選，惟一取值爲inset意爲內陰影；如不設值，默認投影方式是外陰影。 b.X軸偏移量：陰影水平偏移量，取值可正可負；若是爲正值，則陰影在對象的右邊；若是爲負值，則陰影在對象的左邊。 c.Y軸偏移量：陰影垂直偏移量，取值可正可負；若是爲正值，則陰影在對象的底部；若是爲負值，則陰影在對象的頂部。 d.陰影模糊半徑：此值可選，但取值必須爲正值，若是取值爲0，表示陰影不具備模糊效果，值越大陰影的邊緣就越模糊。 e.陰影擴展半徑：此值可選，取值可正可負，若是值爲正則整個陰影都延展擴大，反之則縮小。 f.陰影顏色：此值可選，若是不設定顏色，瀏覽器會取默認色。 例如：box-shadow:10px 5px red; //沿X軸10px，沿Y軸5px 陰影爲紅色 3）text-shadow 文本陰影 4）border-image 邊界圖片

2.2.2文本

1）文本換行：word-wrap:值; 取值：break-word和normal（默認normal） word-wrap屬性是針對長單詞或url地址換行 2）單詞拆分換行，指定換行規則：word-break:值; 取值：normal、keep-all和break-all。 3）文本陰影：text-shadow:水平陰影 垂直陰影 模糊的距離 陰影的顏色; 例：text-shadow:10px 10px 5px pink; 盒陰影、陰影框：box-shadow:X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色; 4）文本輪廓：text-outline:輪廓的粗細 模糊半徑 顏色;
注意：任何主流瀏覽器都不支持text-outline屬性； 5）文本溢出屬性：text-overflow:clip; 文本溢出屬性指定溢出的內容如何向用戶顯示。 取值：clip（修剪文本）、ellipsis（用省略號來表明被修剪的文本）、string（使用給定的字符串來表明被修剪的文本，這個值只有在火狐瀏覽中才起做用），默認值爲clip。

2.2.3字體圖標

@font-face：導入字體圖標； 在@font-face規則中，必須先定義字體的名稱（如：myFirstFont），而後指向該字體文件。 @font-face{ font-family: [字體名稱]; src: [字體路徑，能夠放多個]; font-weight: font-style: }

@font-face {
	font-family:myFirstFont;
	src:url(sation_light.woff);
}
div {font-family:myFirstFont;}
複製代碼

獲取特殊字體的網站：www.fontsquirrel.com/tools/webfo…

2.2.4背景

HTML中的背景樣式：

1. background-color：圖片背景色；
2. background-image：背景圖片；
3. background-position：背景定位；
4. background-repeat：背景平鋪方式，取值：no-repeat（不平鋪）、repeat-x（水平方向）、repeat-y（垂直方向）；
5. background-attachment: scroll | fixed | inherit; 含義：設置背景圖像是否固定或者隨着頁面的其他部分滾動；默認值爲scroll；

H5中新增的背景樣式： 1）background-size:值；背景圖片的尺寸； 取值有四種狀況： 第一種：寬高具體值；100px 100px
第二種：寬高百分比；100% 100% 第三種：cover 以合適的比例把圖片進行縮放（不會變形），用來覆蓋整個容器； 第四種：contain 背景圖覆蓋整個容器（若是一邊碰到容器的邊緣，則中止覆蓋，會致使部分區域是沒有背景圖的） 2）background-clip：背景圖片裁切； 取值爲：content-box、padding-box、border-box。 3）background-origin：設置背景圖的起始點； 取值爲：content-box、padding-box、border-box。 4）filter 濾鏡

2.3 CSS3漸變

有兼容問題，須要加瀏覽器前綴；

1. 線性漸變（linear-gradients）：向下/向上/向左/向右/對角方向 （1）水平漸變：background:linear-gradients(to direction,color1,color2, ...);
   線性漸變必須至少定義兩種顏色; 例：background:linear-gradient(to left,red,yellow,green); 方向：無關緊要，默認從上到下，取值爲： left、right。 （2）對角漸變：background:linear-gradients(to direction1 direction2,color1,color2, ...);
   方向：不可省略，取值：left、right、bottom、top。 例：background:linear-gradient(to bottom left,red,yellow,green); （3）角度漸變：background:linear-gradients(角度,color1,color2, ...);
   角度是指水平線和漸變線之間的夾角，逆時針方向計算。0deg將建立從下到上的漸變，90deg將建立從左到右的漸變。 例：background:linear-gradient(135deg,red,yellow); 使用的時候注意加各瀏覽器前綴

注意：chrome、safari、firefox等使用了舊的標準，0deg將建立從左到右的漸變，90deg將建立從下到上的漸變。 擴展屬性：repeating-linear-gradient() 函數用於重複線性漸變 例如：background:repeating-linear-gradient(to right,red 10%,green 20%); background:repeating-linear-gradient(red 5%,yellow 40%,green 70%); www.cnblogs.com/xiaohuochai… 2. 徑向漸變(radial-gradients)：由它們的中心定義，必須至少定義兩種顏色結點。 語法：background:radial-gradients(center,shape,size,start-color, ...,last-color); 其中，默認的漸變中心是center。shape的取值爲circle和ellipse(橢圓形)，默認值爲ellipse。 漸變的大小size的取值有closest-side、farthest-side、closest-corner和farthest-corner(表示到最遠的角落)，默認是farthest-corner。 3. 透明度(transparent)
漸變也支持使用透明度可用於建立減弱變淡的效果 使用rgba()函數來定義顏色結點。rgba()函數的最後一個參數的取值爲0到1的值，0表示徹底透明，1表示徹底不透明。 例如：background:linear-gradient(to right,rgba(255, 0, 0,0.3),rgba(76, 255, 0,0.7));

面試題：常見的瀏覽器內核

谷歌的內核：webkit Firefox（火狐）的內核：Gecko ie的內核：Trident opera（歐朋）的內核：presto

transition: all 1s linear;
/*谷歌的內核*/
-webkit-transition:all 1s linear ;
/*火狐*/
-moz-transition: all 1s linear;
/*歐朋*/
-o-transition: all 1s linear;
/*IE*/
-ms-transition:all 1s linear;
複製代碼

3 CSS3動畫和變形

3.1 變形 2D

變形 transform:值; 1）translate(X|Y) 平移 translate(x,y)方法可拆分爲translateX() translateY(); 2）scale(X|Y) 縮放；寬高各縮放n倍； scale(X|Y)方法可拆分爲scale(X) scale(Y); 3）rotate() 旋轉，單位deg 4）skew(X|Y) 傾斜 軸的問題： X軸右爲正；Y軸向下爲正；Z軸垂直於屏幕，向外爲正；

3.2 3D動畫

屬性： 1）transform-style:flat|preserve-3d; 默認值爲flat； 含義：用來實現3d變形；加在子元素身上（讓誰有動畫效果就加在誰身上）； 2）perspective:值;
含義：視距，實現3D動畫必用的屬性； perspective這個屬性必須加在父元素身上，並且儘可能不要加在body上； 軸的問題： 從軸的正方向往負方向看，若是是順時針，就是正的；逆時針就是負的；

3.3 過渡動畫 transition

transition中的屬性： 1）transition-property:none/all/某個屬性名稱; 默認值爲all； 含義：哪些屬性樣式發生改變執行過渡動畫效果； 2）transition-duration:time; time以秒或毫秒計（1s或1ms）默認值爲0； 含義：過渡動畫的持續時間； 3）transition-timing-function:值; 含義：動畫運動的方式； transition-timing-function屬性的值有不少，可是隻能用一個： linear：線性過渡，勻速運動，默認值； ease：平滑過渡； ease-in：由慢到快； ease-out：由快到慢； ease-in-out：由慢到快再到慢； cubic-bezier：執行本身設定的貝塞爾曲線； 4）transition-delay:time; 默認值爲0s不延遲當即執行動畫，time以秒或毫秒計； 含義：設置延遲過渡的時間； transition屬性的縮寫：transition:property duration timing-function delay; 注意：順序不能亂，還有使用transition必定要有事件的發生，例如點擊、鼠標移入等； 5）transform-origin:x y z; 用來更改變形的起點；

3.4 幀動畫 animation

animation屬性詳解： 1）animation-name:keyframename|none; 含義：設置動畫運動軌跡的名稱；默認值爲none； 參數說明：keyframename指定要綁定到選擇器的關鍵幀的名稱；none指定沒有動畫； 2）animation-duration:time;
含義：設置動畫的持續時間； 參數說明：time表示動畫播放完成發費的時間，默認值爲0，意味着沒有動畫； 3）animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 含義：用於設置動畫的過渡方式；默認值ease; 4）animation-delay:time;
含義：設置動畫的延遲時間； 參數：time以秒或毫秒計，默認值爲0； 5）animation-iteration-count:infinite|數值; infinite爲無限次數循環，默認值爲1； 含義：設置動畫的循環次數； 6）animation-direction:normal | reverse | alternate | alternate-reverse | initial | inherit; 含義：設置動畫在循環中的運動方向； 參數：normal：正常方向；reverse：反方向運行； alternate：動畫先正常運行再反方向運行，並持續交替運行（須要設置循環次數）； alternate-reverse：動畫先反方向運行再正方向運行，並持續交替運行（須要設置循環次數）； 7）animation-fill-mode:none | forwards | backwards | both | initial | inherit; 含義：動畫完成後的狀態； 參數說明：none爲默認值，不設置動畫以外的狀態；forwards：設置對象狀態爲動畫結束時的狀態；backwards：設置對象狀態爲動畫開始時的狀態；both：設置對象狀態爲動畫結束或開始的狀態； 注意：幀動畫運動完成後，元素會默認回到運動的起始位置，若是想讓其停留在最後一幀的位置，設置animation-fill-mode這個屬性的值爲forwards； 8）animation-play-state:paused | running; 指定動畫是否正在運行或已暫停； 參數：paused指暫停動畫；running爲默認值，指正在運行的動畫； Animation屬性縮寫： animation:name duration timing-function delay iteration-count direction fill-mode play-state; 注意：第一個屬性和第二個屬性name和duration必須有；

3.5 自定義動畫 @keyframes

建立動畫：@keyframes 動畫名稱{}

//設置幀動畫的運動軌跡
//第一種方式：
@keyframes [運動軌跡名稱] {
	from{ //開始的樣式 }
	to{ //結束的樣式 }
}
//第二種方式：
@keyframes [運動軌跡名稱] {
	0%{ //開始的樣式 }
	50%{ }
	100%{ //結束的樣式 }
}
複製代碼

---

4 CSS3中的新盒子模型

1. box-sizing:border-box | padding-box | content-box（默認值）| inherit; box-sizing改變的至關於在css中設置的width/height；border-box表明整個盒子的寬高，當修改padding或者margin時，盒子的大小不變，只會讓內容縮放；

2. columns：多列布局 1）columns屬性 用法：columns: column-width | column-count; 參數說明：column-width爲每列的寬度；column-count爲列數； 2）column-width: length | auto;
   含義：設置每列的寬度； 參數說明：length爲用長度值來定義列寬，不容許負值；auto根據列數自定分配寬度； 3）column-count: 總數 | auto；用來設置列數 參數說明：總數只能是正整數，不能爲負數； 4）column-gap: length | normal;
   含義：設置列與列之間的間隙； 參數說明：length來定義列與列之間的間隙，不容許負值；normal與字體大小相同； 5）column-rule複合屬性 column-rule是column-rule-width、column-rule-style和column-rule-color屬性的簡寫； 含義：設置列與列之間的邊框厚度、樣式和顏色； 6）column-rule-width: length | thin |medium | thick; 含義：設置列與列之間的邊框厚度 7）column-rule-style:none | hidden | dotted | solid | double | groove | ridge | inset | outset 含義：設置列與列之間的邊框樣式；

8）column-rule-color: color; 設置列與列之間的邊框顏色； 注意：要定義邊框顏色，邊框寬度和樣式都要定義；單獨定義邊框顏色沒有效果； 9）column-span: none | all; 設置元素是否橫跨全部列； 參數：none表示不跨列；all表示橫跨全部列； 10）column-fill: auto | balance; 設置對象全部的高度是否統一； 參數說明：auto爲默認值表示列高度自適應內容，balance表示全部列的高度以其中最高的一列統一； 目前主流瀏覽器都不支持column-fill屬性； 11）column-break-before:auto | always | avoid; 設置對象以前是否斷行； auto表示既不強迫也不由止在元素以前斷行併產生新行； always：老是在元素以前斷行併產生新列； avoid：避免在元素以前斷行併產生新列； 12）column-break-after:auto | always | avoid; 設置對象以後是否斷行； 13）column-break-inside:auto | avoid; 設置對象內部是否斷行；

3. flex：彈性盒模型

---

5. 響應式佈局

什麼是響應式佈局？針對不一樣的屏幕尺寸設置不一樣的樣式； 響應式佈局是解決移動端設備屏幕尺寸不一樣的問題； 響應式佈局的特色：頁面的盒子的大小或位置會隨着屏幕的大小而變化； 如何實現響應式佈局開發？ 最經常使用的方案：rem等比縮放響應式佈局；

5.0 meta標籤

作移動端H5開發，首先加meta標籤（必須加）

<meta name="viewport" content="width=device-width,initial-scale=1.0">
複製代碼

meta標籤的做用：讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。 此meta標籤就是設置viewport視口的規則： 讓佈局視口成爲理想視口： 1）width=device-width ：讓HTML頁面的寬度等於設備的寬度； 2）initial-scale=1.0 ：初始縮放比例爲1:1； 3）user-scalable=no ：禁止用戶手動縮放； 4）maximum-scale=1.0和minimum-scale=1.0 ：設置最大最小的縮放比例1:1（既不放大也不縮小=》部分安卓機只設置user-scalable是不起做用的，須要同這兩個一塊兒使用）；

三個視口viewport： 1）layout viewport：佈局（頁面）視口， layout viewport的寬度能夠經過document.documentElement.clientWidth來獲取；layout viewport的寬度是大於瀏覽器可視區域的寬度的，因此須要一個viewport來表明瀏覽器可視區域的大小，就叫visual viewport； 2）visual viewport ：視覺視口； visual viewport的寬度能夠經過 window.innerWidth 來獲取； 3）ideal viewport ：理想視口； ideal viewport並無一個固定的尺寸，不一樣的設備擁有有不一樣的ideal viewport；

5.1 流式佈局

流式佈局也叫百分比佈局； 一、佈局特色：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示】 二、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。

5.2 媒體查詢

媒體查詢主要是解決pc端屏幕寬度不一樣致使的樣式的改變； media響應式佈局

響應式佈局的寫法： @media [媒體設備] and ( media feature ){ css-code; } 媒體設備都有什麼： 1）all 表明全部設備； ）screen 表明屏幕設備（pc+電腦）； ）print 表明打印機設備； media feature媒體取值範圍：能夠多個 max-width：定義輸出設備中的頁面最大可見區域寬度；表明的是上限； min-width：定義輸出設備中的頁面最小可見區域寬度；表明的是下限；

@media screen and (max-width:800px) and (min-width:600px){
	.box div:nth-child(2){
		background: purple;
	}
}
複製代碼

媒體查詢響應式佈局的缺點：

1. 兼容各類設備工做量大，效率低下；
2. 代碼累贅，會出現隱藏無用的元素，加載時間加長；

5.3 flex佈局

參考文檔：www.runoob.com/w3cnote/fle… Flex Layout Box Model彈性盒模型； 它可以更加高效方便控制元素對齊、排列，更重要的是可以自動計算佈局內元素的尺寸，不管這個元素的尺寸是固定的仍是動態的。 flex的結構：

display: -webkit-flex; display:flex; //通常加在父級元素上 一旦父元素設置flex佈局，子元素的float、clear和vertical-align屬性將失效；

彈性盒模型的屬性
這六個用在父級元素身上 1）flex-direction: row | row-reverse | column | column-reverse; 含義：定義子元素在主軸的排列方向； 參數：row爲默認值，表示橫向排列從左到右；row-reverse爲從右到左；column爲縱向排列從上到下；column-reverse爲從下到上； 2）flex-wrap: nowrap | wrap | wrap-reverse; 含義：控制伸縮項目換行； 參數：nowrap爲默認值，表示不換行；wrap爲換行；wrap-reverse爲倒序換行； 3）flex-flow爲複合屬性； flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。 4）justify-content:flex-start | flex-end | center | space-between | space-around; 含義：子元素在主軸上的對齊方式；默認值爲flex-start； space-between：伸縮項目兩邊碰 中間空間平均分； space-around：伸縮項目平均分 剩餘空間兩邊碰； 5）align-items:flex-start | flex-end | center | baseline | stretch; 含義：子元素在交叉軸上的對齊方式； 6）align-content:flex-start | flex-end | center | stretch | space-between | space-around; 含義：控制容器內多行在交叉軸上的排列方式；默認值爲stretch； 注意：設置align-content須要設置flex-wrap: wrap； 垂直居中對齊： display:flex; justify-content:center; align-items:center;

Flex子元素上的屬性 用在子元素上的屬性經常使用的只有flex屬性；

1. order 含義：控制子元素出如今父容器的順序；取值爲數字，數值越小，排列越靠前，默認爲0；
2. flex-grow: 0 | [數字]; 含義：控制子元素佔伸縮容器的空間比例，默認爲0； 取值不能夠是負數；設置爲同一數值，剩餘空間平均分配；設置爲不一樣數值，誰大誰地多；
3. flex-shrink 含義：當伸縮容器不足以容納伸縮項目時的空間分配；默認爲1； 若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。 取值爲0或數字；不能夠是負數；
4. flex-basis: auto | 0 | [width]; 含義：伸縮容器先刨去子元素的內容分配剩餘空間狀況； 伸縮項目分配空間 = 伸縮容器的空間 - basis設置的空間 - 其餘子元素的width；
5. 複合屬性flex flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。 flex:1;表示全部元素各佔一份，平均分配；
6. align-self: flex-start | flex-end | strerch | center | baseline; 含義：子元素在交叉軸上的對齊方式； 若是伸縮項目設置有align-self且值不爲auto，那麼會覆蓋伸縮容器爲其設置的對齊方式；

5.4 rem佈局

根據屏幕的寬度來設置HTML的font-size值； 什麼是rem？ rem是一個單位，px是固定單位；rem是相對單位，相對於當前頁面根元素HTML的字體設定的單位； 頁面根元素HTML的字體大小設置爲多少，至關於一個rem等於多少像素； rem的特色：

若是HTML的font-size不變，用rem和px是同樣的，可是若是字體大小改變，也就是改變了rem和px之間的換算比例，那麼以前全部用rem作單位的樣式都會自動按照最新的比例進行縮放，實現了改動HTML的font-size，整個頁面中的元素都跟着縮放了；

利用了當前屏幕和750的比等於屏幕的fontSize和750的fontSize的比例相同； 不一樣的屏幕大小設置不一樣的font-size值；

(function () {
	function computedFont() {
		let desW = 750; //設計稿尺寸
		let winW = document.documentElement.clientWidth;
		document.documentElement.style.fontSize = winW/desW*100+"px";  //100表明的是HTML的font-size的值；
	}
	computedFont();
	//resize : 當屏幕的窗口的大小發生改變時，執行這個方法；
	window.addEventListener("resize",computedFont);
})();
複製代碼

這段代碼一般放在body上面：在解析DOM以前，改變HTML的fontSize值；減小DOM的重繪；

6. Hybrid混合模式開發

app開發模式有3種：原生App，webApp，混合開發App。

1. webApp 優勢：能夠跨平臺使用；維護和開發成本低；及時更新； 缺點：不能調用手機內置的硬件功能，用戶體驗差；
2. nativeApp：原生APP； 優勢：1）性能高；2）能夠調用手機內置的硬件功能；（拍照、定位、手電筒）；交互體驗比較好； 缺點：1）不能跨平臺；成本比較高；2）版本不統一； IOS系統： Object-C；蘋果商店上傳app須要7天審覈； 安卓系統： Object-Java;
3. Hybird混合模式開發；介於webApp和原生App之間； webview : 是一個webkit內核的引擎；能夠渲染頁面，html、css和js經過webview這個控件做爲橋樑；就能夠調用原生的接口； 前端開發好項目以後，給IOS和安卓工程師，把項目嵌套在一個內核中webView；webView 就像一個瀏覽器，可以運行這裏面前端代碼；

什麼是Hybird混合模式開發？

Hybrid混合開發的原理： 其核心是使用WebView控件來實現：Native調用前端頁面JS中的方法，或者前端頁面經過JS調用Native提供的接口；Native和前端JS互相調用皆經過Webview橋樑來實現。

Hybrid混合開發的優缺點 優勢：

1. 一次編譯多平臺運行。iPhone，Android
2. 開發速度快，不須要了解各個平臺的native開發語言也能夠開發輕量級移動應用。
3. 內容更新不須要內容審查。
4. 各平臺UI表現一致。

缺點：

1. 使用體驗與native開發有差距。
2. 須要native api部分仍是須要原生技術支持。

7. 移動端事件

移動端click事件300ms延遲的緣由和解決辦法？ 緣由：移動端中元素的click事件都會有300ms的延遲現象，移動端中，分爲單擊和雙擊，當觸發點擊操做，瀏覽器會等待300ms，若是300ms以內沒有再次點擊，那麼會默認執行單擊操做；若是300ms內點擊了第二次，那麼會執行雙擊的操做； 解決方法1：須要引入fastclick.js（解決300ms延遲的插件）

// 當頁面DOM加載完畢，執行這個函數
window.addEventListener("load",function () {
	FastClick.attach(document.body);
});
複製代碼

FastClick原理：在touchend以後，當即採用DOM自定義事件觸發了onclick綁定的那個方法，而且把原有的方法阻止掉； 在移動端中：事件執行順序是touchstart touchmove touchend click;正常狀況下，會等到touchend執行完畢以後，等待200-400ms之間執行click；

目前項目中移動端的點擊操做基本都是基於第三方類庫； 解決方法2：zepto：提供了移動端經常使用的事件操做，不存在300ms延遲；

click300ms延遲會致使點透問題，什麼是點透問題：

移動端沒有keydown和keyup事件，用oninput事件代替，表明正在操做當前元素表單； 移動端不存在鼠標事件，取而代之的是更加人性化的觸摸事件（touch）；

7.1 touch事件

一、touchstart：手指觸摸屏幕觸發（已有手指放屏幕上不會觸發）。 二、touchmove：手指在屏幕滑動，連續觸發。 三、touchend：手指離開屏幕時觸發。 四、touchcancle：系統取消touch時觸發。當有一些更高級別的事情發生（例如：接電話），會取消當前touch操做，會觸發touchcancle事件； 注意：當touchstart、touchmove、touchend和click同時存在時，會根據鼠標移動判斷是否須要發生touchmove；若是觸發就再也不觸發onclick事件； 若是觸摸或點擊超過300ms就不觸發click事件了（只要觸發touchmove事件，click就不觸發了）；

大體上分爲DOM0事件和DOM2事件兩種 DMO0事件，就是傳統的直接將事件做爲屬性設置的形式：

box.ontouchstart = function(){ }
複製代碼

DOM2事件，則是用addEventListener的方式來綁定事件處理程序：

box.addEventListener("touchstart",function(){
 });
複製代碼

7.2 移動端的事件對象

每一個touch對象包含的屬性：

1. touches：表示當前跟蹤的觸摸操做的touch對象的數組。
2. clientX、clientY：觸摸點在視口中的x、y座標。
3. pageX、pageY：觸摸點在頁面中的x、y座標。
4. screenX、screenY：觸摸點在屏幕中的x、y座標。
5. Identifier：標識觸摸的惟一ID。
6. target：觸摸的Dom節點。

在touchend事件中，事件對象沒有在e.touches中，把事件信息放在了changedTouches中；

box.ontouchstart = function(e){
	console.log(e.touches[0].clientX);
}
box.ontouchmove = function(e){
	console.log(e.touches[0].clientX);
}
box.ontouchend = function(e){
	console.log(e.changedTouches[0].clientX);
}
複製代碼

---

8. 字體圖標

1. 在https://www.iconfont.cn/中將須要的圖標加入購物車，須要登陸阿里巴巴圖標庫；
2. 點擊購物車 --> 添加至項目 --> 點擊文件夾圖標輸入文件夾名稱；
3. 點擊Font class
4. 方法一： 1）點擊查看在線連接 --> 點擊「暫無代碼，點今生成」 2）會生成一個連接；例如：//at.alicdn.com/t/font_1349506_mdthe95t1c.css 3）在頁面中引入link；

<link rel="stylesheet" href="//at.alicdn.com/t/font_1349506_mdthe95t1c.css">
複製代碼

4. 方法二 1）點擊「下載至本地」； 2）將下載下來的文件夾（修改文件夾名字爲icon）放到項目目錄下，並將文件夾中的iconfont.css引入頁面中；

<link rel="stylesheet" href="icon/iconfont.css">
複製代碼

5. 在阿里巴巴圖標庫個人項目頁面，將鼠標滑到圖標上，點擊複製代碼（複製的是圖標的類名，例如：icon-shouye）；
6. 在頁面中，html中給標籤添加類名；

<div class="iconfont icon-shouye"></div>
複製代碼

注意：類名中的iconfont和icon-shouye都不能省；

---

9 音視頻標籤

audio和video標籤讓咱們告別了flash時代；

9.1 視頻標籤：video

1. video標籤屬性： 1）src 視頻地址； 2）controls 視頻控制器； 3）width播放器的寬度； 4）height播放器的高度； 注意：width和height若是一塊兒用，那麼播放器會拉伸可是播放的內容不會拉伸始終在最中心的位置； 5）autoplay 自動播放，可是chrome不會自動播放； 6）loop自動從新播放； 7）poster視頻剛加載的時候，沒有播放以前顯示的圖片； 8）muted視頻靜音；

<video src="data/imooc.mp4" controls></video> 
複製代碼

video標籤支持的三種常見格式：mp4，webm，ogv； video標籤中能夠放幾個標籤，用來解決兼容問題;

<video controls="controls">
	<source src="data/1.mp4">
	<source src="data/1.webm">
	<source src="data/1.ogv">
</video> 
複製代碼

9.2音頻標籤：audio

audio標籤訂義音頻，好比音樂等；和video視頻標籤用法基本一致；

1. audio標籤的經常使用屬性： 1）src 音頻地址； 2）controls 音頻的控件，不加的話頁面中什麼都看不到； 3）autoplay 自動播放，可是chrome不會自動播放； 4）loop循環播放； 5）muted音頻靜音； 注意：audio標籤行內樣式沒有width和height屬性，必須在CSS中使用style標籤得樣式來控制；

<audio controls src=」imooc.mp3」></audio>
複製代碼

audio支持的音頻格式：mp三、wav和ogg；其中mp3格式兼容全部瀏覽器，ogg格式不支持safari瀏覽器；可使用<source>標籤來解決兼容問題；

<audio controls="controls">
	<source src="data/1.mp3">
	<source src="data/1.wav">
	<source src="data/1.ogg">
</audio> 
複製代碼

javaScript能夠生成audio對象，new Audio()等同於html中寫一個<audio></audio>標籤；

//<button id="btn">播放</button>
var myAudio = new Audio();
myAudio.src = 'data/imooc.wav';
btn.onclick = function(){
	myAudio.play();
}
複製代碼

9.3音視頻 API事件

1）play()：音頻播放事件； 必須放在事件中才能兼容全部瀏覽器； 2）pause()：音頻暫停事件； 3）paused：true表示暫停狀態，false表示播放狀態；

btn1.onclick = function(){
	myAudio.play();
	console.log(myAudio.paused); //false
}
btn2.onclick = function(){
	myAudio.pause();
	console.log(myAudio.paused); //true
}
複製代碼

4）duration：返回音頻的總長度； 5）canplay()：當音頻加載完畢會當即觸發canplay事件；加載音視頻是異步的；異步加載；

myAudio.addEventListener("canplay",function(){
	console.log(myAudio.duration);
})
複製代碼

6）currentTime：設置或返回音頻的長度；

myAudio.currentTime = '20';
複製代碼

7）src：設置或返回當前音頻的來源； 8）currentSrc：返回當前音頻的URL地址，不能賦值； 9）volume：設置或返回當前音頻的音量； volume的值爲0到1，0表示靜音，1表示滿格；可使用input標籤的range屬性來代替volume控件

/*<video controls id="myAudio" src="imooc.mp4"></video> <input type="range" min=0 max=100 value=50 id="range" /> <div id="playNode">播放</div> <div id="stopNode">暫停</div> <div id="go">快進</div>*/
myAudio.volume = 0.5;
range.oninput = function(){
	myAudio.volume = this.value/100;
}
複製代碼

10）controls：設置音頻是否顯示空間/設置控制器； 11）muted()：設置音頻是否靜音； muted和controls用法相同，可是這個屬性不會出如今radio標籤上 12）networkState()：返回音頻當前網絡狀態； 13）ended()：經過監聽事件當音頻播放結束的執行函數，也能夠直接查看其布爾值； ended的返回值爲true或false，播放結束返回true，沒有播放結束返回false，ended能夠進行事件監聽（addEventListener）

myAudio.addEventListener("ended",function(){
	console.log("音頻播放結束");
})
複製代碼

14）loop()：設置或返回音頻是否應在結束時從新播放，true表明循環，false表明不循環；

myAudio.loop = true;
複製代碼

15）playbackRate()：設置或返回音頻播放的速度； playbackRate默認是1，設置播放速度：

myAudio.playbackRate = 15;
複製代碼

16）readyState()：返回音頻的當前就緒狀態；

17）timeupdate()：能夠監聽音頻目前的播放狀態，若是播放就自動執行函數中的內容；

myAudio.addEventListener("timeupdate",function(){
	console.log("音頻正在播放中。。。");
})
複製代碼

18）seeked()：用戶已移動/跳躍到音頻中的新位置時； 19）seeking()：用戶開始移動/跳躍到音頻中的新位置時； 在audio中，seeked和seeking的觸發頻率是同樣的；在video中，seeking的觸發頻率比seeked要高； 20）volumechange()：音頻的音量發生改變時就會觸發這個事件，使用時必須使用on，也可使用監聽事件；

myAudio.addEventListener("volumechange",function(){
	console.log("音頻的聲音改變了");
})
複製代碼

21）requestFullscreen()：全屏事件，必須使用audio標籤設置全屏，使用new Audio對象不能使用這個全屏事件； requestFullscreen必須放到事件中使用，並且在哪一個瀏覽器中使用就要加哪一個瀏覽器的前綴 22）load()：從新加載視頻資源； load就是強制讓播放器從新加載一次，通常用於播放器的src發生改變的時候； 從新加載有兩種方法：一種是load（）方法，一種是src；

---

10. 一些新的API

本地存儲：localStorage/sessionStorage 獲取地理位置：navigator.geolocation.getCurrentPosition 調取手機內部的GPS定位系統獲取當前手機所在地的經緯度以及精準度等；

11. websocket

websocket:socket.io 客戶端和服務端新的傳輸方式（即時通信IM系統基本上不少是基於它完成的）

面試題：

1.開發移動端時你遇到過什麼兼容性問題？

juejin.im/entry/5a17a… segmentfault.com/a/119000000…

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
複製代碼

兩個圖片之間會有縫隙； 由於img自己屬於行內塊元素，因爲換行致使的； 解決辦法：給img設置display:block，設置成塊元素；

2.h5新增標籤和css3新增屬性

3.移動端事件

touchstart、touchmove、touchend

4.click事件的300ms延遲問題，及解決方法

5.點透問題

6.IOS10.0以上版本中form表單提交按鈕不能發請求；

解決辦法：本身寫個ajax發送請求；