JS知識體系梳理-6
HTML5新增標籤
`header`：頭部
`footer`：尾部
`main`：主體
`section`：區域
`article`：文章區域
`aside`：與內容無關的部分（例如：廣告）
`nav`:導航
`figure`：配圖區域
`figcaption`：配圖說明
`mark`：標記
`time`：時間標記
`progress`：進度條
複製代碼
表單
一、功能強大了（不少東西不須要本身導入JS插件完成了，例如：日曆）javascript
二、在移動端根據設置的類型不同，用戶輸入過成功調取出來的虛擬鍵盤也不同（例如：number類型的文本框調取出來的是數字鍵盤）css
三、新增長的類型提供了css/js驗證，能夠驗證用戶輸入的內容是否符合格式（以前咱們都是用正則解決）html
//=>使用正則驗證郵箱格式是否正確
<input type="email" id="userEmail" placeholder="請輸入郵箱">
<span id="spanEmail"></span>
<script>
//=>當按鍵擡起和文本框失去焦點的時候都進行驗證
userEmail.onkeyup=userEmail.onblur=function(){
let val=this.value.trim();
if(val.length===0){
spanEmail.innerHTML="必填"；
return；
}
let reg=/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(!reg.test(val)){
spanEmail.innerHTML="NO";
return;
}
spanEmail.innnerHTML="ok";i
}
</script>
複製代碼
AUDIO：音頻標籤
1.H5中支持的音樂播放格式java
- MP3（經常使用）
- OGG（蘋果手機錄的視頻）
- WAV
- M3U8:直播流
- M4A
//=>各個瀏覽器中並非都支持各類類型的音樂播放格式
<audio>
<source src="xxx.mp3" type="audio/mpeg">
<source src="xxx.ogg" type="audio/ogg">
<source src="xxx.wav" type="audio/wav">
當前瀏覽器版本太低，不支持AUDIO播放！
//=>有的項目中，上面三種都不支持，會繼續使用FLASH完成音頻的播放
</audio>
複製代碼
AUDIO經常使用屬性
controls：設置這個屬性，則使用瀏覽器默認的播放器控制(項目中不多使用默認播放器，通常都是本身作的)，布爾值css3
autoplay：自動播放，布爾值web
loop：播放完成後是否循環播放swift
preload：資源預加載，通常不與autoplay同時使用後端
- none 開始的時候什麼都不加載，播放的時候才加載[經常使用]
- metadata 開始加載一些基礎信息（如：出自哪張專輯，歌手是誰）
- auto
(默認值)加載頁面就開始加載資源
currentTime：當前已經播放的時間(s)瀏覽器
currentLoop：已循環次數緩存
ended：當前是否已播放完，布爾值
muted：是否靜音播放，布爾值
start：從哪裏開始播放（可設置）
duration：播放的總時間(s)，音頻加載出來了duration纔會有值，meta data加載完就行了
pause：當前是否爲暫停狀態，若是是暫停狀態，值爲true
volume：控制音量（0~1）
video標籤也都具備以上這些屬性，初次以外還有
poster:設置封面圖
AUDIO經常使用事件
canplay：能夠正常播放（可能會出現卡頓的狀況）
canplaythrough：資源加載完畢，能夠順暢播放
ended：播放完成
loadedmetada：資源的基礎信息已經加載完成
loadeddata：整個資源都加載完成
playing：正在播放中
play：觸發了播放
pause：觸發了暫停
AUDIO經常使用方法（HTMLMediaElemnet原型上的）
pause()：讓音頻中止播放
play():讓音頻開始播放
提供了一些新的API
本地存儲
localStorage/sessionStorge
獲取地理位置
navigator.geolocation.getCurrentPosition
調取手機內部的GPS定位系統獲取當前手機所在地的經緯度以及精準度
還提供了一些API，讓咱們能夠經過瀏覽器調取手機內部的軟件或者硬件（可是性能都不咋高，並且兼容性不是特別好）
websocket
socket.io 客戶端和服務器端新的傳輸方式（即時通信IM系統基本上不少是基於它完成的）
CSS3
選擇器
樣式屬性
基本經常使用的
改變的就是咱們在CSS中設置的width/height到底表明哪一部分，border-box讓其表明整個盒子的寬高，當咱們去修改帕丁或者border，盒子大小不變，只會讓內容縮放
- border-radious
- box-shadow
- text-shadow
背景類的
-
background-color
-
background-image
-
background-position
-
background-repeat
-
background-attachment
-
background-size
- 100px 100px 寬高具體指
- 100% 100% 寬高百分比（至關於所在容器）
- cover 以合適的比例把圖片進行縮放（不會變形），用來覆蓋整個容器
- contain 背景圖覆蓋整個內容容器，若是一邊碰到容器的邊緣，則中止覆蓋，致使部分區域是沒有背景圖的
-
background-clip：背景圖片裁切
- border-box
- padding-box
- content-box
-
background-origin：設置背景圖的起始點
- border-box
- padding-box
- content-box
CSS3動畫和變形
變形(變形不是動畫)
-
transform
- translate(x|y|z) 位移
- scale 縮放
- rotate 旋轉
- skew 傾斜
- matrix 矩陣（按照本身設定的矩陣公式實現變形）
-
transform-style:preserve-3d 實現3d變形
-
transform-origin:變形的起點
動畫
- transition
- transition-property:all/width 哪些屬性樣式發生改變執行過渡動畫效果，默認all，全部樣式屬性改變都會執行這個過渡效果
- transition-duration:過渡動畫的時間，咱們一把都用秒，例如：.5s
- transition-timing-function:動畫運動的方式
- linear(默認)
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(執行本身設定的貝塞爾曲線)
- transition-delay:設置延遲的時間，默認是0s不延遲，當即執行動畫
幀動畫
animation:
animation-name 運動軌跡名稱
animation-duration 運動的時長
animation-timing-function 運動的方式（默認ease）
animation-delay 動畫開始延遲時間
animation-iteration-count 運動次數
默認1 infinite無限次運動
animation-fill-mode 運動完成後的狀態（幀動畫完成後，元素會默認回到運動的起始位置，若是想讓其停留在最後一幀的位置，設置這個屬性值爲forwards;backwards是當前幀動畫若是有延遲時間，在延遲等待時間內，元素處於幀動畫的第一幀位置;both是讓幀動畫同時具有forwards和backwards）
@keyframes [運動軌跡名稱]{
0%{
//=>開始的樣式
}
50%{}
100%{
//=>結束的樣式
}
}
@keyframs [運動軌跡名稱]{
from{
//=>開始的樣式
}
to{
//=>結束的樣式
}
}
複製代碼
CSS3中的新盒子模型
- box-sizing 改變的是width/height是什麼
- border-box 表明整個盒子的寬高
- padding-box
- content-box(默認值)
- columns：多列布局
- flex：彈性盒子模型
其它的css3屬性
- prespective：視距 實現3D動畫比用的屬性
- @media：媒體查詢 實現響應式佈局的一種方案
- @font-face：導入字體圖標
響應式佈局開發
在不一樣尺寸上的設備都能良好的展現（Responsive Layout）
移動端和PC端
一、：PC端和移動端公用一套項目（結構相對簡單的：通常都是展現類的企業站）
先作PC端（設計給的設計稿通常都是給PC端的），通常寬度都是自適應的
切換到手機端，使用@media(媒體查詢)把不一樣設備上不合適的樣式進行修改
<style>
.box{
width:300px;
height:300px;
background:red;
}
/*
* 能夠把@media理解爲JS中的條件判斷：在不一樣條件中使用不一樣的css樣式進行渲染
* @media [媒體設備]
* all->全部設備
* screen->全部屏幕設備（PC+電腦）
* print->打印機設備
* ...
* @media [媒體設備] and [媒體條件] and [媒體條件]
*
* 手機經常使用的設備尺寸
* 蘋果：320、37五、414
* 安卓：320、360、480、540、640
* IPad:768*102四、1024*1366...
*/
@media all (max-width:780px){
/**/
.box{
width:300px;
height:300px;
background:red;
}
}
@media all (max-width:640px){
.box{
width:200px;
height:200px;
background:red;
}
}
@media all (max-width:480px){
.box{
width:100px;
height:100px;
background:red;
}
}
@media screen and (orientation:portraint){
/*portrait(豎) | landscape(橫)*/
body{
background:lightcoral;
}
}
</style>
<div class="box"></div>
複製代碼
移動端經常使用響應式佈局方案
最經常使用的方案：REM等比縮放響應式佈局A、依然能夠基於@media來處理（雖然麻煩，可是是最精準的方案，調出來顯示的效果是最好的）
B、固定佈局（viewport=>width=320px）:按照設計稿把320尺寸的寫好便可（全部的尺寸均可以固定，並且都是設計稿的一半，由於設計稿是大一倍的），在其它的設備上，讓320的頁面居中展現便可
C、scale等比縮放佈局（嚴格按照設計稿的尺寸來寫樣式，沒啥自適應寬度，都是固定值），在其它設備上，首先獲取設備的寬度，讓其除以設計稿的寬度，而後讓原始寫好的頁面按照這個比例總體縮小便可=>會致使一些問題如字體變模糊等
//=>一塊一塊區域調整
window.addEventListener("load",()=>{
let container=document.querySelector(".container"),
winW=document.documentElement.clientWidth;
container.style.transform=`scale(${winW/750})`;
})
複製代碼
D、REM等比縮放：它是參考scale，只是用的rem單位來實現的等比縮放（嚴格按照設計稿的尺寸編寫，可是通常寬度讓他自適應），其他的值能夠寫成固定值
REM和PX同樣都是樣式單位，PX是固定單位，REM是相對單位（相對於當前頁面根元素HTML的字體設定的單位）
//=>開始給HTML的字體大小設置爲100px(1Rem=100px),接下來咱們寫樣式獲得時候，把全部的尺寸都用Rem設定(測量出來的px值/100就是應該設置的Rem的值)，若是HTML的font-size不變，用rem和px同樣，可是若是字體大小改變，也就改變了rem和px之間的換算比例，那麼以前全部用rem作單位的樣式都會自動按照最新的比例進行縮放(實現了改動HTML的font-size，整個頁面中的元素都跟着縮放了)
html{
font-size:100px;
}
接下里寫樣式，把測量出來的px都除以100變爲rem，全部的單位基於rem來搞
假設如今設計稿是750的，1rem=100px，運行在320的設備上的時候咱們要修改html的字體大小，以此實現頁面跟着總體縮放：320/750*100
複製代碼
移動端頁面html的font-size大小轉換
<script>
(function(){
let computedFont=function(){
let winW=document.documentElement.clientWidth,//=>當前可視窗口的寬度
desW=640;//=>設計稿的寬度
if(winW>=desW){
document.documentElement.style.fontSize="100px";
return;
}
document.documentElement.style.fontSize=winH/640*100+"px";
}
computenFont();
window.addEventListener("resize",computedFont);
})();
</script>
複製代碼
REM佈局存在的問題，若項目要求固定一屏的，手機屏的高度小於社極品的高度，致使裏面子元素有一些被隱藏，底部某些樣式顯示不出來
E：CSS3中提供了flex-box伸縮盒子模型，基於這個屬性，可讓某些效果處理起來更加的方便
viewport
作移動端H5開發，首先加meta標籤
//=>快捷鍵：meta:vp+Tab
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//-------------JS中動態設置meta
let metaV=document.createElement("meta");
metaV.name="viewport";
metaV.content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
document.head.appendChild(metaV);
複製代碼
- width=device-width：讓HTML頁面的寬度等於設備的寬度
- initial-scale=1.0：初始縮放比例爲1:1，頁面即不放大也不縮小
- user-scalable=no：禁止用戶手動縮放
- maximum-scale=1.0：設置最大的縮放比例
- minimum-scale=1.0：設置最小的縮放比例（部分安卓機中只設置user-scalable是補不起做用的，須要同maximum-scale和minimum-scale一塊兒使用）
三個視口
- layout viewport：佈局（頁面）視口（和開發css等相關）
- visual viewport：手機視口
- ideal viewport： 理想視口
移動端的點擊事件
click在移動端是單擊事件行爲，當觸發點擊事件，瀏覽器總會等待300MS，驗證是否觸發了第二次點擊操做，沒有觸發纔會執行click對應的方法（click在移動端的300MS延遲問題）
1.不建議在移動端使用click（若是非要使用也能夠，最好導入一個插件fastclick.min.js），就是解決
//=>zepto中提供的專門供移動端操做的事件方法
$box.tap((ev)=>{
//=>點擊
})
$box.singleTap(()=>{
//=>單擊
})
$box.doubleTap(()=>{
//=>雙擊
})
$box.longTap((ev)=>{
//=>長按
})
$box.swipe((ev)=>{
//=>手指滑動
})
$box.swipeLeft(()=>{
//=>手指向左滑動
})
複製代碼
重寫zepto上的tap方法
移動端基本上全部的事件行爲都是根據touchstart、touchmove、touchend三個事件合成的
移動端上的click事件叫作單擊事件，要在300ms內無重複才作才行
box.ontouchstart=funtion(ev){
let val=ev.changedTouches[0];
this.starX=val.clientX;
this.starY=val.clientY;
this.isMove=false;
}
box.ontouchmove=functon(ev){
let val=ev=changedTouches[0];
this.changeX=val.clientX-this.startX;
this.changeY=val.clientY-this.startY;
if(this.changeX>=10||this.changeY>=10){//=>移動距離大於10，咱們當作是移動事件
this.isMove=true;
}
}
box.ontouchend=function(ev){
if(this.isMove) return;
alert("我是點擊事件")
}
複製代碼
zepto和JQ的區別
1.zepto沒有考慮瀏覽器的兼容，專門爲移動端開發的小型類庫，也僅僅是把JQ中的一些常規方法實現了，不少方法也沒有實現（例如：slideDown/show...在zepto中都沒有）， 移動端使用流量，加載緩慢，因此要保證zepto的體積儘可能小
2.zepto中提供了移動端專門操做的事件方法（例如：tap等），這些方法都是基於移動端的touch和gesture事件模型封裝好的方法，JQ中並無提供這些方法=>zepto更適合移動端
SEO(網絡運營推廣)和SEM(百度競價)
搜索引擎的優化和推廣，儘量在搜索引擎中提高產品的權重（ALEX排名）
當咱們在百度搜索框中輸入一個關鍵詞，下面會呈現出不少網站，有的靠前，有的靠後，如何讓搜索的結果有本身的網站，並且位置還靠前，這就是SEO優化技巧須要考慮的
一、各大搜索引擎養了一個：（爬蟲），他會天天讓這個小蜘蛛去各個網站中檢索內容，把一些內容或者關鍵詞收錄到本身的搜索引擎庫中（記錄：某某內容來自於哪一個網站）
二、當用戶在搜索框中輸入一個關鍵詞，搜索引擎會經過關鍵詞到本身詞庫中進行檢索，把全部匹配到內容對應的網站給檢索出來，而且呈現給用戶（誰的關鍵詞被檢索的次數多或者其它緣由，決定排名的先後）
SEO優化技巧
給當前的頁面設置meta標籤/title
<head>
<title>網頁標題</title>
<meta name="keysword" content="網頁關鍵詞">
<meta name="description" content="網頁描述"> <!-- 一、title不能夠亂寫，這個是很重要的一個優化技巧 二、keywords這個META標籤是用來設置網站關鍵詞的 三、description這個META標籤是設置網站的描述 --> </head>
複製代碼
對於一個頁面中H1-H6這些標籤的權重較高，尤爲是h1，咱們儘量把重要的關鍵詞放到h1中（語義化標籤合理使用）,可是要注意一個頁面中的H1標籤只能使用一次
<h1>
<img src="" alt=""/> xxx </h1>
//h1中的文字不須要展現給用戶，可是咱們還會寫一些文字，主要是給爬蟲看的（樣式中font-size等於零便可）；img是不被收錄的，可是alt中編寫的問題能夠被收錄，因此img標籤的alt屬性必定要加，最好寫一些關鍵詞
複製代碼
先後端分離項目(數據有客戶端JS獲取和渲染)是不利於SEO優化的，使用JS作數據綁定，頁面的原代碼中是沒有動態綁定的數據的（可是用戶在頁面中能夠看見內容），而搜索引擎的爬蟲就是從源代碼進行抓取收錄的（VUE/REACT都是JS作數據綁定）
大部分先後端分離項目，也就是JS作數據綁定，由客戶端渲染，可是仍是一部分項目依然是傳統的服務端數據處理（非徹底先後端分離項目）
頁面中不要出現無效的連接（利於SEO優化）
Hybrid混合開發
web-App
一、其實就是個HTML頁面，須要基於瀏覽器運行（PC或者移動端瀏覽器再或者V8內核的工具也能夠），若是想要操做手機內部的軟件或者硬件，須要瀏覽器的支持
二、相比於native-app來講，性能很差
三、全部的請求訪問都必須基於連網的狀態（除了有些是native-app把h5特殊處理了），雖然h5中支持manifest離線緩存，可是這個技術不咋好用 緣由：native-app不須要，是由於全部的代碼文件都在手機上，一些須要連網訪問的，native-app均可以作離線緩存（緩存視頻）；H5頁面部署到了本身的服務器上，源文件都在服務器上呢，用戶想要看頁面，必須從服務器上從新的拉取代碼才能夠；
更新比較及時：H5只須要把服務器上的文件更新，用戶每次訪問看到的都是最新版本，這個比native-app好
native App
安卓系統：JAVA(java-native)
IOS系統：C(object-c/swift)
1.本地開發，打包成安裝包，上傳到應用商店（App Store 是有審覈期的[7天]），用戶從應用商店下載安裝相關的APP：把當前APP的源文件（原代碼安裝在手機上了，相似於在電腦上安裝WS）
2.native app能夠操做手機內部的軟件或者硬件（例如：通信錄、攝像頭、相冊、重力感應器等等），由於它是直接運行在操做系統中的程序
3.手機操做系統不同，使用的技術也不同，因此須要兩個不一樣的開發團隊，開發不一樣版本的APP（問題：有的版本升級快，有的版本升級慢）
Hybrid混合開發
在native-App中嵌入H5頁面(web-app)，用戶須要用到手機操做系統時，如攝像頭等，其實是經過jsBridge把信息傳遞給native-App，由其調取而後再把獲得的信息反饋給H5頁面
微信公衆號是最爲經典Hybrid混合開發模式，它支持咱們的H5頁面在微信這個native-app中運行，並且還能夠調取微信提供的一些方法實現相關的操做
- 1. JS知識體系梳理-4
- 2. JS知識體系梳理-3
- 3. js知識體系梳理-2
- 4. js基礎知識梳理
- 5. js部分知識梳理
- 6. 前端知識體系梳理
- 7. web前端知識體系梳理
- 8. 前端8大知識體系梳理
- 9. Ajax知識體系大梳理
- 10. 數據庫知識體系梳理（一）
- 更多相關文章...
- • Spring體系結構詳解 - Spring教程
- • 網絡體系的構成和類型 - TCP/IP教程
- • Docker 清理命令
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS知識體系梳理-4
- 2. JS知識體系梳理-3
- 3. js知識體系梳理-2
- 4. js基礎知識梳理
- 5. js部分知識梳理
- 6. 前端知識體系梳理
- 7. web前端知識體系梳理
- 8. 前端8大知識體系梳理
- 9. Ajax知識體系大梳理
- 10. 數據庫知識體系梳理（一）