H5基礎(chǔ)知識總結(jié)

一、HTML5

1.1 認(rèn)識HTML5

HTML5并不僅僅只是作為HTML標(biāo)記語言的一個(gè)最新版本，更重要的是它制定了Web應(yīng)用開發(fā)的一系列標(biāo)準(zhǔn)柴灯，成為第一個(gè)將Web做為應(yīng)用開發(fā)平臺的HTML語言悍汛。

我們?nèi)粘Ｓ懻摰?code>H5其實(shí)是一個(gè)泛稱，它指的是由HTML5 + CSS3 + Javascript等技術(shù)組合而成的一個(gè)應(yīng)用開發(fā)平臺在张。

相對于HTML的早期版本用含，HTML5在語法規(guī)范上做了比較大的調(diào)整，去除了許多冗余的內(nèi)容帮匾，書寫規(guī)則更加簡潔啄骇、清晰。

1.2 DOCTYPE標(biāo)簽

1.2.1 DOCTYPE標(biāo)簽的作用

  • DOCTYPE并不是HTML標(biāo)簽瘟斜，而是一個(gè)聲明缸夹。
  • 作用是：告訴瀏覽器按照哪個(gè)規(guī)則去解析頁面。

1.2.2 DOCTYPE標(biāo)簽的寫法

  • HTML4中

    1.HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2.HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

3.HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

  • HTML5中

    <!DOCTYPE html>

1.2.3 Emmet語法創(chuàng)建文檔結(jié)構(gòu)

- html:5或!：HTML5文檔類型
- html:xt：XHTML過渡型文檔類型
- html:xs：XHTML嚴(yán)格型文檔類型
- html:4t：HTML4過渡型文檔類型
- html:4s：HTML4嚴(yán)格型文檔類型

1.3 新的語義標(biāo)簽

傳統(tǒng)的做法我們通過添加類名如class="header"螺句、class="footer"虽惭，使HTML頁面具有語義性的，但是不具有通用性（如class="header"也可能被寫成class="head"）蛇尚。HTML5則是通過增加語義化標(biāo)簽的形式來解決這個(gè)問題芽唇，例如<header></header>、<footer></footer>等取劫，這樣就可以保證其具有通用性匆笤。

1.3.1 部分常用的語義標(biāo)簽

標(biāo)簽名 作用
nav 導(dǎo)航
header 頁眉
footer 頁腳
main 文檔主要內(nèi)容
article 文章
aside 側(cè)邊欄
section 區(qū)塊
progress 進(jìn)度條

使用HTML5中新的語義標(biāo)簽，內(nèi)容更為直觀谱邪，即使刪除了注釋炮捧，依舊能夠看出該標(biāo)簽的作用，語義性更強(qiáng)惦银。

盡量避免全局使用header寓盗、footer、aside等語義標(biāo)簽璧函。

1.3.2 新語義標(biāo)簽的兼容性

雖然HTML5為我們提供了一些新的語義標(biāo)簽傀蚌，但老版本的瀏覽器并不兼容這些內(nèi)容，比如在IE瀏覽器版本小于等于IE8時(shí)蘸吓，就不支持新語義標(biāo)簽善炫。

解決方案：

  • 使用js代碼創(chuàng)建標(biāo)簽：

    1. 在頁面中添加創(chuàng)建header標(biāo)簽的代碼。
    2. 修改header的樣式库继，添加display:block箩艺。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            height: 100px;
            background-color: orangered;
            /*在低版本的ie中,如果想要顯示h5的新語義標(biāo)簽,需要設(shè)置為block*/
            display: block;
        }   
    </style>
    <script type="text/javascript">
        // 使用代碼創(chuàng)建header標(biāo)簽
      document.createElement("header");
    </script>
</head>
<body>
<!--
    在老版本的ie中無法查看(ie8)
-->
<header>
</header>
</body>
</html>

  • js框架：

    1. 相當(dāng)于幫助我們實(shí)現(xiàn)了創(chuàng)建和添加display:block等操作窜醉，內(nèi)部的處理邏輯會更多一些。
    2. js框架"html5shiv"獲取地址
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    header {
      height: 100px;
      background-color: hotpink;
    }
    
    footer {
      height: 100px;
      background-color: greenyellow;
    }
  </style>

  <!-- 通過 條件注釋  讓 這個(gè)js文件 在指定的 IE版本中 才被加載  -->
  <!--[if lte IE 8]>
    <script src='js/html5shiv.min.js'></script>
  <![endif]-->
</head>

<body>
  <header>
  </header>
  <footer></footer>
</body>

</html>

  • 優(yōu)化代碼執(zhí)行——hack語法

    無論是js或者js框架都需要執(zhí)行js代碼才能夠解決兼容性問題艺谆。但是在高版本的瀏覽器中榨惰，那段js代碼就沒有必要執(zhí)行了，所以我們通過一個(gè)叫做hack的方式來減少性能的浪費(fèi)静汤。

    1. 瀏覽器檢測：cc:ie6 + tab
    2. lte：less than equal
    3. gte：greater than equal
    <!--[if lte IE 7]>
  IE7及IE7以下的IE6琅催、IE5.x可識別
<![endif]-->

<!--[if gte IE 7]>
  IE7及IE7以上的IE8、IE9可識別
<![endif]-->
 
<!--[if lt IE 7]>
  IE7以下的IE6虫给、IE5.x可識別
<![endif]-->
   
<!--[if gt IE 7]>
  IE7以上的IE8藤抡、IE9可識別
<![endif]-->

<!--[if IE 7]>
  只有IE7可以識別
<![endif]-->

    ?

1.4 表單

1.4.1 input標(biāo)簽的新type屬性

伴隨著互聯(lián)網(wǎng)富應(yīng)用以及移動開發(fā)的興起，傳統(tǒng)的Web表單已經(jīng)越來越不能滿足開發(fā)的需求抹估，所以HTML5在Web表單方向也做了很大的改進(jìn)缠黍，如拾色器、日期/時(shí)間組件等药蜻，使表單處理變的更加高效瓷式。

類型 使用示例 含義
email <input type="email"> 輸入郵箱格式
tel <input type="tel"> 輸入手機(jī)號碼格式
url <input type="url"> 輸入url格式
number <input type="number"> 輸入數(shù)字格式
search <input type="search"> 搜索框（體現(xiàn)語義化）
range <input type="range"> 自由拖動滑塊
color <input type="color"> 拾色器
time <input type="time"> 定義日期字段的時(shí)、分语泽、秒
date <input type="date"> 定義日期字段（帶有calendar控件）
datetime <input type="datetime"> 定義日期字段（帶有calendar和time控件）
month <input type="month"> 定義日期字段的月
week <input type="week"> 定義日期字段的周

兼容性問題：

  • 由于IE的兼容性問題贸典，在不同的瀏覽器中顯示效果不盡相同。
  • 部分類型是針對移動設(shè)備生效的湿弦，在實(shí)際應(yīng)用當(dāng)中應(yīng)選擇性的使用瓤漏。

1.4.2 input表單驗(yàn)證

  • email標(biāo)簽：自帶格式驗(yàn)證

    1. 當(dāng)我們點(diǎn)擊提交按鈕時(shí)，如果輸入的email格式不正確颊埃，會彈出提示信息蔬充。
    2. email標(biāo)簽并不會驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意班利。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • required屬性：對于沒有自帶驗(yàn)證效果的標(biāo)簽饥漫，就需要手動添加屬性增加驗(yàn)證了。

    1. required為非空驗(yàn)證罗标。
    2. 只需要添加required屬性即可庸队，不需要賦值。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • pattern自定義驗(yàn)證規(guī)則：

    1. 在需要添加自定義驗(yàn)證規(guī)則的元素中添加required標(biāo)簽闯割。
    2. 使用pattern后的正則表達(dá)式編寫驗(yàn)證規(guī)則彻消。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

  • 自定義驗(yàn)證信息：系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤，如果想要更為詳細(xì)的提示內(nèi)容就需要我們通過js來自定義了宙拉。

    1. 注冊事件：
      • oninput：輸入時(shí)宾尚。
      • oninvalid：驗(yàn)證失敗時(shí)。
    2. 設(shè)置自定義信息：dom.setCustomValidity("這里輸入提示信息");。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在輸入時(shí)
    telInput.oninput=function () {
        this.setCustomValidity("請正確輸入您的手機(jī)號碼");
    }
    // 驗(yàn)證失敗時(shí)
    telInput.oninvalid=function(){
        this.setCustomValidity("您輸入的手機(jī)號碼不正確，請重新輸入");
    };

</script>

優(yōu)點(diǎn)：HTML5自帶的驗(yàn)證使用便捷，不需要額外的js框架闸翅。

缺點(diǎn)：兼容性問題，如果想要兼容所有瀏覽器独令，建議使用js驗(yàn)證框架。

1.4.3 新表單元素

除了在input標(biāo)簽中增加了一些新的type屬性以外，H5也推出了一些新的表單元素。由于瀏覽器的兼容問題笙各，使用頻率并不廣，了解即可瑞你。

  • datalist：該元素規(guī)定了輸入?yún)^(qū)域的選項(xiàng)列表酪惭，可以讓用戶有一些選項(xiàng)希痴。

    1. datalist：id屬性者甲，想要使用該datalist的元素需要通過list=id的方式來指定。
    2. option：
      • value：指定具體的值砌创。
      • label：提示信息虏缸。
    3. 如果input的type為url，option中對應(yīng)的value需要使用http://開始嫩实。
    <!--注：測試代碼只是body內(nèi)部的代碼刽辙。-->
網(wǎng)址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

電話: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移動">移動</option>
    <option value="187xxx" label="聯(lián)通">聯(lián)通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

  • keygen：使用頻率很低。

    keygen 元素是密鑰對生成器（key-pair generator）甲献。當(dāng)提交表單時(shí)宰缤，會生成兩個(gè)鍵，一個(gè)是私鑰晃洒，一個(gè)公鑰慨灭。

    私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器球及。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）氧骤，即實(shí)現(xiàn)非對稱加密。

    目前吃引，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)筹陵。

  • output：使用頻率很低。

    屬于新的語義標(biāo)簽：用來放置輸出的內(nèi)容镊尺，但是不能自動的計(jì)算結(jié)果朦佩，依舊需要通過js的方式來動態(tài)修改結(jié)果，只是相比于其他的標(biāo)簽語義性更強(qiáng)庐氮。

1.4.4 新表單屬性

屬性 用法 含義
placeholder <input type="text" placeholder="請輸入用戶名"> 占位符
autofocus <input type="text" autofocus> 自動獲得焦點(diǎn)
multiple <input type="file" multiple> 多文件上傳
autocomplete <input type="text" autocomplete="off"> 自動完成
form <input type="text" form="某表單ID">
novalidate <form novalidate></form> 關(guān)閉驗(yàn)證
required <input type="text" required> 必填項(xiàng)
pattern <input type="text" pattern="\d"> 自定義驗(yàn)證

  • autocomplete（自動完成）：

    1. 能夠記錄用戶的輸入语稠，并且給予提示，這就是autocomplete的作用旭愧。
    2. 取值：on開啟颅筋，off關(guān)閉宙暇。
    3. 一般用在input標(biāo)簽中。
    4. 標(biāo)簽需要添加name屬性议泵。
    5. 只有提交了一次以后才會出現(xiàn)提示占贫。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

  • autofocus（獲取焦點(diǎn)）：

    1. 當(dāng)某一頁有很多個(gè)可供輸入的元素時(shí)，用戶需要使用鼠標(biāo)點(diǎn)選元素進(jìn)行輸入先口，為了提升用戶體驗(yàn)型奥，我們可以通過autofocus屬性來指定頁面中默認(rèn)選中的元素。
    2. 需要哪個(gè)表單元素獲得焦點(diǎn)碉京，只需要添加該屬性即可厢汹，不需要賦值。
    3. 如果頁面中多個(gè)元素設(shè)置了該屬性谐宙，最后一個(gè)會獲得焦點(diǎn)烫葬。
    4. 在沒有該屬性之前，能夠使用JavaScript來指定元素凡蜻。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    姓名:<input type="text"  name="userName">
    <br/>
    年齡<input type="number" name="telNum" autofocus>
    <input type="submit">
</form>
</body>
</html>

  • form（表單關(guān)聯(lián)）：

    1. 當(dāng)我們想要提交數(shù)據(jù)時(shí)搭综，需要把表單元素放到對應(yīng)的form標(biāo)簽中，這個(gè)屬性的出現(xiàn)讓表單元素的放置位置不再受到約束划栓。
    2. 想要某個(gè)表單外元素與該表建立聯(lián)系兑巾，只需要為元素添加屬性form="表單id"設(shè)置為想要建立聯(lián)系的表單id即可。
    3. 雖然這個(gè)屬性可以讓元素的放置位置不再成為限制忠荞，但是編碼時(shí)依舊建議將元素放置到對應(yīng)的表單中蒋歌，除了兼容性問題以外，也為了提升代碼的可讀以及可維護(hù)性委煤。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年齡:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
愛好:<input type="text" name="habbit" form="userForm">
</body>
</html>

  • multiple（多選）：

    1. 如果想要在某個(gè)input標(biāo)簽中選擇多個(gè)值堂油，可以使用該屬性。
    2. 該屬性可以用在type為file標(biāo)簽內(nèi)素标。
    3. 選擇多文件時(shí)称诗，需要按住ctrl按鈕。
    <input type="file" multiple >

  • placeholder（占位提示）：

    1. 輸入元素內(nèi)默認(rèn)顯示一些提示信息头遭，當(dāng)用戶輸入之后自動消失寓免，這種效果我們需要使用JavaScript來實(shí)現(xiàn)，直到出現(xiàn)了placeholder這個(gè)屬性计维。
    2. 如不想通過JavaScript來實(shí)現(xiàn)提示功能袜香，直接為該屬性賦值想要提示的內(nèi)容即可。
    <input type="text"placeholder="輸入用戶名">

1.5 多媒體

1.5.1 多媒體標(biāo)簽

  • HTML5為了解決使用Flash的各種問題推出了多媒體標(biāo)簽鲫惶。
  • 由于視頻格式問題蜈首，不同的瀏覽器對于相同格式的視頻支持不同，需要準(zhǔn)備多份視頻。
  • 無法對播放的視頻提供很好的保護(hù)效果,因?yàn)橛脩艨梢灾苯訉σ曨l文件另存為欢策。

1.5.2 音頻 audio標(biāo)簽

  • 不考慮兼容性：

    1. src：音頻的地址吆寨。
    2. controls：音頻播放控制器。
    3. autoplay：自動播放踩寇。
    4. loop：循環(huán)啄清。
    <audio src="song.ogg" controls="controls" autoplay loop></audio>

  • 考慮兼容性：

    1. source：指定多個(gè)音頻，如果找到了當(dāng)前瀏覽器支持的俺孙，那么會直接使用辣卒；如果所有的source標(biāo)簽格式都不支持，會顯示最后的文本內(nèi)容睛榄。
    <audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的瀏覽器不支持此種格式
</audio>

1.5.3 視頻 Video標(biāo)簽

Video標(biāo)簽用來播放視頻荣茫，用法跟audio標(biāo)簽十分類似。

  • 不考慮兼容性：

    1. src：視頻地址场靴。
    2. controls：控制器啡莉。
    3. autoplay：自動播放。
    4. loop：循環(huán)憎乙。
    5. poster：指定視頻不播放時(shí)顯示的封面票罐。
    6. width：寬度叉趣。
    7. height：高度泞边。
    <video src="movie.ogg" controls autoplay loop width = "200px" height = "200px"></video>

  • 考慮兼容性：

    1. source：指定多個(gè)視頻，如果找到了當(dāng)前瀏覽器支持的疗杉，那么會直接使用阵谚；如果所有的source標(biāo)簽格式都不支持，會顯示最后的文本內(nèi)容烟具。
    <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  您的瀏覽器不支持video標(biāo)簽
</video>

1.5.4 多媒體加強(qiáng)

  • 方法：加載load()梢什、播放play()、暫停pause()朝聋。
  • 屬性：當(dāng)前URLcurrentSrc嗡午、當(dāng)前時(shí)間currentTime、總時(shí)間duration冀痕。
  • 事件：播放時(shí)持續(xù)觸發(fā)ontimeupdate荔睹，結(jié)束時(shí)觸發(fā)onended等。

1.6 兩種進(jìn)度條

在HTML5之前如果我們想要使用進(jìn)度條言蛇，可以通過一些前端框架僻他，或者自己使用控件搭建出類似的外觀。但是在HTML5中推出了兩個(gè)進(jìn)度條控件腊尚，兩種進(jìn)度條都能夠用來顯示進(jìn)度吨拗，由于兼容性以及語義性的問題，在實(shí)際開發(fā)中需要結(jié)合實(shí)際情況決定是否使用它們或者是使用對應(yīng)的前端框架。

1.6.1 process

  • 作用：
    • 用來顯示任務(wù)的進(jìn)度（進(jìn)程）劝篷。
    • 如果想要用來顯示度量值（比如容量使用情況）哨鸭，請使用meter標(biāo)簽。
  • 屬性：
    • max：總工作量娇妓。
    • value： 已完成工作量兔跌。
  • 兼容性：
    • 為了保證顯示效果，可以在progress標(biāo)簽中寫入內(nèi)容峡蟋，在當(dāng)前瀏覽器無法顯示該控件時(shí)坟桅，會轉(zhuǎn)而顯示內(nèi)容。

1.6.2 meter

  • 外觀：通過屬性值的搭配能夠顯示出多重不同的變化蕊蝗。
  • 常見屬性：
    • high：規(guī)定較高的值仅乓。
    • low：規(guī)定較低的值。
    • max：規(guī)定最大值（可以超過,但是進(jìn)度條已經(jīng)滿了）蓬戚。
    • min：規(guī)定最小值夸楣。
    • value：規(guī)定度量的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>

1.7 DOM擴(kuò)展

在jQuery中我們可以通過選擇器快速獲取元素子漩，在HTML5中也提供了一些類似的方法豫喧。

1.7.1 獲取元素

  • querySelector：返回當(dāng)前文檔中第一個(gè)匹配特定選擇器的元素。

    var node = document.querySelector(css選擇器);

  • querySelectorAll：返回當(dāng)前文檔中所有匹配特定選擇器的元素（返回值是數(shù)組）幢泼。

    var nodeLists = document.querySelectorAll(css選擇器);

1.7.2 類名操作 classList

這個(gè)元素返回的是dom元素的class列表紧显，這個(gè)屬性本身是只讀的，但是我們可以通過幾個(gè)方法去操作元素的class缕棵。

  • add ： 添加一個(gè)class到元素的class列表中孵班。

    Node.classList.add('class')

  • remove ： 從元素的class列表中移除一個(gè)class。

    Node.classList.remove('class')

  • toggle ： 切換一個(gè)class是否存在于一個(gè)元素的class列表中招驴。

    Node.classList.toggle('class')

  • contains ： 查詢一個(gè)指定的class是否存在于元素的class列表中篙程。

    Node.classList.contains('class')

Node指一個(gè)有效的DOM節(jié)點(diǎn)，是一個(gè)通稱别厘。

1.7.3 自定義屬性 data-

  • 定義屬性：

    1. data-xxx：data-是固定格式虱饿，xxx是自定義的值。
    2. 屬性名不應(yīng)該包含任何大寫字母触趴，并且在前綴data-之后必須有至少一個(gè)字符氮发。
    3. 屬性值可以是任意字符串。
    4. 不要使用純數(shù)字雕蔽、特殊字符等作為自定義值折柠。
    <div id="demo" data-name="jack" data-age="10">
<div data-my-name="bob">

  • 獲取屬性：

    1. 在js中獲取了元素之后，通過dataset["key"]即可獲取保存的值批狐，其中key為data-xxx中xxx的字符扇售。
    2. 如果data-之后使用-連接多個(gè)值前塔，取值時(shí)，需要使用駝峰命名承冰。
    var demo = document.querySelector('#demo');
<!--獲取-->
demo.dataset['name'];
demo.dataset['age'];
<!--設(shè)置-->
demo.dataset['name'] = 'rick';
<!--駝峰命名獲取-->
Node.dataset['myName'];

1.8 新增API

1.8.1 網(wǎng)絡(luò)連接狀態(tài)

  • 獲取網(wǎng)絡(luò)狀態(tài)：

     window.navigator.onLine

  • 網(wǎng)絡(luò)連接华弓、斷開事件：

    // 網(wǎng)絡(luò)連接
window.ononline = function(){
      alert('網(wǎng)絡(luò)已連接');
  }
// 網(wǎng)絡(luò)斷開
window.onoffline= function(){
      alert('網(wǎng)絡(luò)已斷開');
  }

1.8.2 全屏

HTML5規(guī)范允許用戶自定義網(wǎng)頁上任一元素全屏顯示。

  • 開啟全屏顯示：

    Node.requestFullScreen()

  • 關(guān)閉全屏顯示：

    Node.cancelFullScreen()

  • 由于其兼容性原因困乒，不同瀏覽器需要添加前綴如：

    • webkit內(nèi)核瀏覽器：

      webkitRequestFullScreen寂屏、webkitCancelFullScreen

  • Gecko內(nèi)核瀏覽器?：

    mozRequestFullScreen、mozCancelFullScreen

  • 檢測當(dāng)前是否處于全屏：

      document.fullScreen
  <!--不同瀏覽器需要添加前綴-->
  document.webkitIsFullScreen
  document.mozFullScreen

1.8.3 文件讀取

使用js對象FileReader娜搂，配合File對象可以指定讀取本地文件迁霎，可以讀取選取的文件，也可以讀取DataTransfor百宇。

  • 獲取文件：

    1. 由于File標(biāo)簽支持多文件上傳考廉，所以我們想要獲取到選取的文件，需要配合索引携御。

      // 其中this為file標(biāo)簽
    this.files[0]

  • 讀取文件：

    1. 讀取文件需要使用js對象FileReader昌粤。
    var reader = new FileReader; //實(shí)例化一個(gè)對象
reader.readAsDataURL(this.files[0]) //以DataURL形式讀取文件,獲取的值可以用在任意通過鏈接指定的地方
// 通過onload事件監(jiān)測加載完畢
reader.onload = function (){
  // result 就是我們需要的結(jié)果
    console.log(this.result);
  //可以用在指定連接地址的元素中比如
  // 設(shè)置圖片
  document.querySelector('#img').src = this.result;
  // 設(shè)置圖像
  document.querySelector("#video").src= this.result;
  // 設(shè)置CSS
  document.querySelector("#link").href = this.result;
}

1.8.4 文件拖拽

在HTML5的規(guī)范中，我們可以通過為元素增加draggable="true"來設(shè)置此元素是否可以進(jìn)行拖拽操作啄刹，其中圖片涮坐、鏈接默認(rèn)是開啟的。

  • 拖拽元素：添加了draggable="true" 屬性即可實(shí)現(xiàn)拖拽誓军，其中<img>袱讹、<a>標(biāo)簽?zāi)J(rèn)是可以被拖拽的。

  • 目標(biāo)元素：拖拽元素的放置位置谭企。任意元素都可以成為目標(biāo)元素廓译。

  • 支持事件：

    1. 拖拽元素：

      • ondrag：整個(gè)拖拽過程都會調(diào)用。
      • ondragstart：當(dāng)拖拽開始時(shí)調(diào)用债查。
      • ondragend：當(dāng)拖拽結(jié)束時(shí)調(diào)用。
      • ondragleave：當(dāng)鼠標(biāo)離開拖拽元素時(shí)調(diào)用瓜挽。

    2. 目標(biāo)元素：

      • ondrop：當(dāng)在目標(biāo)元素上松開鼠標(biāo)時(shí)調(diào)用盹廷。
      • ondragover：當(dāng)停留在目標(biāo)元素上時(shí)調(diào)用。
      • ondragenter：當(dāng)拖拽元素進(jìn)入時(shí)調(diào)用久橙。
      • ondragleave：當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)調(diào)用俄占。

    3. 注意事項(xiàng)：

      如果想要調(diào)用ondrop事件，必須在ondragover中使用事件參數(shù)阻止瀏覽器的默認(rèn)行為淆衷。

      thirdBox.ondragover = function (argument) {
   // 在 ondragover時(shí) 必須阻止默認(rèn)行為 才能夠 看到拖放效果
   argument.preventDefault();
}

    4. 數(shù)據(jù)傳遞：

      • 配合事件對象的dataTransfor 可以實(shí)現(xiàn)數(shù)據(jù)的傳遞缸榄。
      • setData(key,value) 設(shè)置數(shù)據(jù)。
      • getData(key) 獲取數(shù)據(jù)祝拯。
      dom1.ondragstart = function (argument) {
   argument.dataTransfer.setData("fox",this.id);
}

//dom2為拖放的目標(biāo)元素
dom2.ondrop = function (argument) {
   console.log(argument);
   var fromBoxID =argument.dataTransfer.getData("fox");
}

1.8.5 地理定位

  • 獲取地理信息

    通過IP地址甚带、三維坐標(biāo)她肯、GPS、Wi-Fi鹰贵、手機(jī)信息等多種方式獲取地址信息晴氨，不同獲取方式的優(yōu)缺點(diǎn)并不相同，瀏覽器會自動以最優(yōu)方式去獲取用戶地理信息碉输。

  • 安全性

    HTML5 Geolocation 規(guī)范提供了一套保護(hù)用戶隱私的機(jī)制籽前。必須先得到用戶明確許可，才能獲取用戶的位置信息敷钾。

  • 語法

    1. 獲取當(dāng)前地理信息：

      navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

    2. 重復(fù)獲取當(dāng)前地理信息：

      navigator.geolocation.watchPosition(successCallback, errorCallback, options)
    • 當(dāng)成功獲取地理信息后枝哄，會調(diào)用succssCallback，并返回一個(gè)包含位置信息的對象position阻荒。
    • 當(dāng)獲取地理信息失敗后膘格，會調(diào)用errorCallback，并返回錯(cuò)誤信息error财松。
    • 可選參數(shù)options對象可以調(diào)整位置信息數(shù)據(jù)收集方式瘪贱。
      1. enableHighAccuracy：高精度模式。
      2. timeout：超時(shí)設(shè)置辆毡，單位為ms菜秦。
      3. maximumAge：表示瀏覽器重新獲取位置信息的時(shí)間間隔，單位為ms舶掖。
    navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功會調(diào)用該方法
    // position.coords.latitude 緯度
    // position.coords.longitude 經(jīng)度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失敗會調(diào)用該方法
    // error 是錯(cuò)誤信息
}, )

  • 應(yīng)用：

    在現(xiàn)實(shí)開發(fā)中球昨，通過調(diào)用第三方API（如百度地圖）來實(shí)現(xiàn)地理定位信息，這些API都是基于用戶當(dāng)前位置的眨攘，并將用位置位置（經(jīng)/緯度）當(dāng)做參數(shù)傳遞主慰，就可以實(shí)現(xiàn)相應(yīng)的功能。

1.8.6 Web存儲

隨著互聯(lián)網(wǎng)的快速發(fā)展鲫售，基于網(wǎng)頁的應(yīng)用越來越普遍共螺，同時(shí)也變的越來越復(fù)雜，為了滿足各種各樣的需求情竹，會經(jīng)常性在本地存儲大量的數(shù)據(jù)藐不，傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲的，但是由于其存儲大小只有4k左右秦效，并且解析也相當(dāng)?shù)膹?fù)雜雏蛮，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案阱州。

  • 使用特點(diǎn)：

    1. 設(shè)置讀取方便（通過鍵值對）挑秉。
    2. 容量較大，sessionStorage大約5m苔货，localStorage大約20m犀概。
    3. 如果要保存json數(shù)據(jù)立哑，可以使用JSON.stringify()將對象編碼后保存刁憋。

  • window.sessionStorage：

    1. 生命周期為關(guān)閉瀏覽器窗口。
    2. 在同一個(gè)窗口下數(shù)據(jù)可以共享尤莺。

  • window.localStorage：

    1. 永久生效，除非手動刪除觉啊。
    2. 可以多窗口共享。

  • 使用方法：

    兩種存儲方式屉更，只是前綴不同，調(diào)用方法是一致的瑰谜。

    setItem(key, value) // 設(shè)置存儲內(nèi)容
getItem(key)      // 讀取存儲內(nèi)容
removeItem(key)   // 刪除鍵值為key的存儲內(nèi)容
clear()           // 清空所有存儲內(nèi)容
key(n)                // 以索引值來獲取存儲內(nèi)容

二欺冀、CSS3

2.1 CSS3簡介

CSS3是CSS2的“進(jìn)化”版本，在CSS2基礎(chǔ)上萨脑，增強(qiáng)或新增了許多特性隐轩， 彌補(bǔ)了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷砚哗。但是由于瀏覽器的兼容性問題龙助，所以并不是所有的瀏覽器都能夠使用，為了保證顯示效果蛛芥，我們在使用某些屬性的時(shí)候需要添加額外的前綴提鸟。

Trident內(nèi)核(IE)：          // 前綴為 -ms
Gecko內(nèi)核(FireFox)：       // 前綴為 -moz
Presto內(nèi)核(Opera)：        // 前綴為 -o
Webkit內(nèi)核(Chrome,Safari)：// 前綴為 -webkit

2.2 CSS3選擇器

CSS3中給了我們更多的選擇器讓我們來獲取元素，極大程度提高了查找元素的精度以及準(zhǔn)確性仅淑，并且絕大多數(shù)的選擇器語法與jQuery中兼容称勋。

2.2.1 屬性選擇器

屬性選擇器的作用就是，根據(jù)標(biāo)簽的屬性去篩選對應(yīng)的元素涯竟，屬性選擇器從CSS2推出赡鲜，在CSS3中增加了幾個(gè)新的屬性。

以屬性名 attr 為例：
E[attr]:            包含att屬性
E[attr="val"]:      屬性值為val
E[attr^="val"]:     屬性值以val開頭
E[attr$="val"]:     屬性值以val結(jié)尾
E[attr*="val"]:     屬性中包含val
E[attr~="val"]:     屬性值使用空格進(jìn)行分割,有一個(gè)為val
E[attr|="val"]:     屬性以‘-’分割庐船，其中有val值（如果屬性只有val,那么也會被選中）

2.2.2 兄弟選擇器

  • 選擇器1 ~ 選擇器2 ：選擇相同父元素中银酬，選擇器1之后的所有滿足選擇器2的元素。
  • 選擇器1 + 選擇器2 ：選擇相同父元素中筐钟，選擇器1之后的第一個(gè)滿足選擇器2的元素揩瞪。

2.2.3 偽類選擇器

  • 結(jié)構(gòu)偽類：以某元素（E）相對于其父元素或兄弟元素的位置來獲取無素，并對應(yīng)位置的子元素或兄弟元素必須是該元素（E）篓冲。
    1. E:first-child：其父元素的第一個(gè)子元素?李破。
    2. E:last-child：其父元素的最后一個(gè)子元素宠哄。
    3. E:nth-child(n)： 第n個(gè)子元素，計(jì)算方法是E元素的全部兄弟元素嗤攻。
    4. E:nth-last-child(n)： 跟E:nth-child(n)類似 毛嫉，只是倒著計(jì)算。
    5. 注意：其中n的取值范圍是：0妇菱，1承粤，2，3恶耽，4... 線性累加密任，可以傳入表達(dá)式，比如2n偷俭，2n+1等等浪讳，也可以傳入特殊字符：even(偶數(shù))，odd(奇數(shù))涌萤。
  • 空偽類：E:empty：選中沒有任何子節(jié)點(diǎn)的E元素（使用不是非常廣泛）淹遵。
  • 目標(biāo)偽類：E:target：結(jié)合錨點(diǎn)進(jìn)行使用，處于當(dāng)前錨點(diǎn)的元素會被選中负溪。
  • 排除偽類：E:not(任意選擇器)：不滿足括號內(nèi)選擇器條件的元素E會被選中透揣。

2.2.4 偽元素選擇器

  • E::before和E::after：

    在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素，該元素為行內(nèi)元素川抡，且必須要結(jié)合content屬性使用辐真。

    注意：E:after、E:before 在舊版本里是偽元素崖堤，CSS3的規(guī)范里“:”用來表示偽類侍咱，“::”用來表示偽元素，但是在高版本瀏覽器下E:after密幔、E:before會被自動識別為E::after楔脯、E::before，這樣做的目的是用來做兼容處理胯甩。

  • E::first-letter：

    獲取的是內(nèi)容的第一個(gè)文字昧廷，根據(jù)語言的不同會有細(xì)微差別，如中文偎箫、日文木柬、韓文等。

  • E::first-linet：

    獲取的是內(nèi)容的第一行淹办，可以配合P標(biāo)簽使用弄诲。

  • E::selection：

    可改變選中文本的樣式，目前只能設(shè)置的屬性為：background-color娇唯，color齐遵，text-shadow。

2.3 顏色

新增了RGBA塔插、HSLA模式梗摇，其中的A 表示透明度通道，即可以設(shè)置顏色值的透明度想许，跟opacity相比伶授，它們不具有繼承性，不會影響子元素的透明度流纹。

  • RGBA：

    1. Red：0-255糜烹；Green：0-255；Blue：0-255漱凝；Alpha：0-1(小數(shù))疮蹦。
    2. 不使用A那么認(rèn)為沒有透明度。
    color:RGBA(100,100,100,0.3);
color:RGB(100,100,100);

  • HSLA：

    1. Hue(色調(diào))：0-360茸炒；Saturation(飽和度)：0-100%愕乎；Lightness(亮度)：0-100%；Alpha(透明度)：0-1(小數(shù))壁公。
    color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);

  • 關(guān)于CSS透明度：

    1. opacity只能針對整個(gè)盒子設(shè)置透明度感论，子盒子及內(nèi)容會繼承父盒子的透明度 ，是作為CSS的屬性來使用的紊册。
    2. transparent不可調(diào)節(jié)透明度比肄，始終完全透明，是作為顏色的取值來使用的color:transparent囊陡。

2.4 字體陰影 text-shadow

取值：

  1. 第1個(gè)長度值用來設(shè)置對象的陰影水平偏移值欣除，可以為負(fù)值 。
  2. 第2個(gè)長度值用來設(shè)置對象的陰影垂直偏移值貌矿，可以為負(fù)值 秘通。
  3. 如果提供了第3個(gè)長度值則用來設(shè)置對象的陰影模糊值，不允許負(fù)值痢畜。
  4. 設(shè)置對象的陰影的顏色垛膝。
  5. 可以通過,來分隔不同的陰影，從而為字體設(shè)置多個(gè)陰影丁稀。
text-shadow: 10px 10px 5px red;
text-shadow: 1px 1px #fff,-1px -1px #000;

2.5 盒子模型 box-sizing

CSS3中可以通過box-sizing來指定盒模型吼拥，即可指定為content-box或是border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變线衫。

  • content-box：默認(rèn)取值凿可，盒子模型大小為width + padding + border。
  • border-box：盒子模型的大小為width。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .first {
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: content-box;
        }
        .second{
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
<div class="first">first盒子</div>
<div class="second">second盒子</div>
</body>
</html>

2.6 邊框

2.6.1 邊框圓角 border-radius

賦值方法：

border-radius:20px;                 /*設(shè)置四周的圓角*/
border-radius: 50px 10px;           /*上左下右,上右下左*/
border-radius: 50px 30px 10px;      /*上左,上右下左,下右*/
border-radius: 50px 40px 30px 20px; /*上左,上右,下右,下左*/
border-radius: 50px/100px;          /*上下的圓角/左右的圓角*/
border-top-left-radius: 40px;       /*上左*/
border-top-right-radius: 10px;      /*上右*/
border-bottom-left-radius: 20px;    /*下左*/
border-bottom-right-radius: 50px;   /*下右*/

2.6.2 邊框陰影 box-shadow

賦值方法：

  • h-shadow：必需枯跑。水平陰影的位置惨驶。允許負(fù)值。
  • v-shadow：必需敛助。垂直陰影的位置粗卜。允許負(fù)值。
  • blur：可選纳击。模糊距離续扔。
  • spread：可選。陰影的尺寸焕数。
  • color：可選纱昧。陰影的顏色。
  • inset：可選堡赔。將外部陰影 outset 改為內(nèi)部陰影识脆。
  • 多個(gè)影子的添加只需要使用逗號分隔即可。
box-shadow: 5px 5px 20px pink;          /*x偏移值,y偏移值,影子四周模糊程度,影子顏色*/
box-shadow: inset 0px 0px 100px yellow; /*添加了inset以后,影子會往內(nèi)部伸展,其他的都是一樣的*/
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green; /*多個(gè)影子需要使用逗號分隔*/

注：設(shè)置邊框陰影不會改變盒子的大小加匈，不會影響其兄弟元素的布局存璃。可以設(shè)置多重邊框陰影雕拼，實(shí)現(xiàn)更好的效果纵东，增強(qiáng)立體感，符合漸進(jìn)增強(qiáng)啥寇，實(shí)際開發(fā)中可以大膽使用偎球。

2.6.3 邊框圖片 border-image

border-image為復(fù)合屬性：

border-image: url("img/border-image.png") 17 / 17px / 17px round;

  • 圖片路徑border-image-source：設(shè)置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。

    border-image-source: url("img/border-image.png");

  • 圖片切片border-image-slice：設(shè)置或檢索對象的邊框背景圖的分割方式辑甜。

    取值：
1-4個(gè)值(不需要單位),對應(yīng)的關(guān)系跟margin一致衰絮；
1-4個(gè)百分比,對應(yīng)的關(guān)系跟margin一致；
fill(可選):是否需要中間的區(qū)域磷醋；

  • 圖片寬度border-image-width：設(shè)置或檢索對象的邊框厚度猫牡，這個(gè)值的大小不會影響到盒子的大小。

    取值：1-4個(gè)值,單位為(px,em,%),對應(yīng)關(guān)系跟margin一致邓线。
border-image-width: auto;

  • 圖片凹凸border-image-outset：設(shè)置或檢索對象的邊框背景圖的擴(kuò)展淌友。

    取值：1-4個(gè)值,單位為(px,em,%),對應(yīng)關(guān)系跟margin一致。
border-image-outset: 10px;

  • 圖片重復(fù)border-image-repeat：設(shè)置或檢索對象的邊框圖像的平鋪方式骇陈。

    取值：
stretch： 指定用拉伸方式來填充邊框背景圖震庭。 
repeat： 指定用平鋪方式來填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)你雌，如果超過則被截?cái)唷?
round： 指定用平鋪方式來填充邊框背景圖器联。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的大小直至正好可以鋪滿整個(gè)邊框。 
space： 指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個(gè)邊框拨拓。

2.7 背景

背景屬性在CSS3中也得到很大程度的增強(qiáng)肴颊，比如背景圖片尺寸、背景裁切區(qū)域千元、背景定位參照點(diǎn)苫昌、多重背景等。

  • background-size：

    1. 通過background-size設(shè)置背景圖片的尺寸幸海，就像我們設(shè)置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛奥务。
    2. 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時(shí)物独，參照盒子的寬高）。
    3. 設(shè)置為cover時(shí)氯葬，會自動調(diào)整縮放比例挡篓，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏帚称。
    4. 設(shè)置為contain會自動調(diào)整縮放比例官研，保證圖片始終完整顯示在背景區(qū)域。
    background-size: 10px;            /* 寬度10 高度根據(jù)寬度計(jì)算 */
background-size: 10px 10px;       /* 寬度10 高度 10 */
background-size: auto;            /* 背景圖片原始大小 */
background-size: cover;           /* 背景圖片原比例縮放到完全填滿 可能會超出 */
background-size: contain;     /* 背景圖片原比例縮放到 高度 或者寬度 跟容器一樣 可能會有空白 */

  • background-origin：

    1. 可以設(shè)置背景圖片定位(background-position)的參照原點(diǎn)闯睹。

    2. 可選值為border-box戏羽，padding-box，content-box楼吃。

      border-box     以邊框做為參考原點(diǎn)始花；
padding-box        以內(nèi)邊距做為參考原點(diǎn)；
content-box        以內(nèi)容區(qū)做為參考點(diǎn)孩锡；

  • background-clip：

    1. 可以設(shè)置對背景區(qū)域進(jìn)行裁切酷宵，即改變背景區(qū)域的大小。

    2. 取值：

      border-box     裁切邊框以內(nèi)為背景區(qū)域躬窜；
padding-box        裁切內(nèi)邊距以內(nèi)為背景區(qū)域浇垦；
content-box        裁切內(nèi)容區(qū)做為背景區(qū)域；

  • background-repeat：

    1. 在原來只能設(shè)置平鋪與不平鋪的基礎(chǔ)上增加了兩個(gè)屬性荣挨，讓我們在設(shè)置背景圖時(shí)更為靈活男韧。

    2. 取值：

      background-repeat:round;   /* 自動縮放 直到填滿 */
background-repeat:space;   /* 縮放,直到某一邊充滿容器為止 */

  • 多背景：以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)布局垦沉。

    background: url('image/01.jpg') no-repeat  200px 300px,
          url('image/02.jpg') no-repeat  100px 200px/100px 100px;

    ?

2.8 漸變

漸變是CSS3當(dāng)中比較豐富多彩的一個(gè)特性煌抒，通過漸變我們可以實(shí)現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量厕倍，并且具有很強(qiáng)的適應(yīng)性和可擴(kuò)展性寡壮。

2.8.1 線性漸變

線性漸變linear-gradient，指沿著某條直線朝一個(gè)方向產(chǎn)生漸變效果。

/*語法組合方式 可以添加多個(gè)顏色*/
background-image: linear-gradient(方向,開始顏色 開始位置 ,顏色2 開始位置,顏色3 開始位置.....);

/* 具體代碼  */
/* 朝著 右上角 從紅色到黃色*/
background-image: linear-gradient(to top left,red,yellow);

/* 朝著 順時(shí)針45度 從紅色到黃色*/
background-image: linear-gradient(45deg,red,yellow);

/* 朝著 順時(shí)針45度 紅色,黃色,綠色*/
background-image: linear-gradient(45deg,red,yellow,green);

/* 朝著 順時(shí)針45度 紅色到 10px結(jié)束 黃色從 20px開始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);

/* 朝著 順時(shí)針45度 紅色到10%結(jié)束 黃色從 20%開始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);

/* 注意：如果上一個(gè)顏色的結(jié)束 與 下一個(gè)顏色的開始相等,那么不會出現(xiàn)過渡 */
background-image: linear-gradient(45deg,red 10%,yellow 10%);

2.8.2 徑向漸變

徑向漸變radial-gradient况既，指從一個(gè)中心點(diǎn)開始沿著四周產(chǎn)生漸變效果这溅。

/* 圓形漸變寫法 */
background:radial-gradient(半徑  ,顏色1,顏色2等等);

/* 橢圓漸變寫法 */
background:radial-gradient(橫向半徑,豎向半徑  ,顏色1,顏色2等等);

/* 設(shè)置位置 */
background:radial-gradient(橫向半徑,豎向半徑  at 位置,顏色1,顏色2等等);

/*具體代碼*/
/*半徑100px 紅色 綠色*/
background:radial-gradient(100px,red,green);

/*橫向半徑100px 豎向半徑200px 紅色 綠色*/
background:radial-gradient(100px 200px,red,green);

/*橫向半徑100px  紅色10px 綠色 20px*/
background:radial-gradient(100px 200px,red 10px,green 20px);

/*橫向半徑100px  紅色10% 綠色20%*/
background:radial-gradient(100px 200px,red 10%,green 10%);

/*橫向半徑100px  紅色10% 綠色20% 在100px 100px位置*/
background:radial-gradient(100px 200px at 100px 100px,red 10%,green 10%);

/*注意：如果上一個(gè)顏色的結(jié)束,跟下一個(gè)顏色的開始相等,那么不會出現(xiàn)過渡*/
background-image: radial-gradient(100px,red 10%,yellow 10%);

2.9 過渡

過渡transition?是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過渡（補(bǔ)間動畫）棒仍，經(jīng)常用來制作動畫效果悲靴。

屬性 含義
transition-property 設(shè)置過渡屬性
transition-duration 設(shè)置過渡時(shí)間
transition-timing-function 設(shè)置過渡速度
transition-delay 設(shè)置過渡延時(shí)

  • 語法：

    /*語法組合方式*/
transition:過渡CSS屬性 持續(xù)時(shí)間 動畫方式 延遲時(shí)間;

/* 多屬性過渡組合寫法  通過逗號分隔*/
transition:過渡1,過渡2....

/*具體代碼*/
/* 所有屬性 1s動畫 ease-in動畫方式 延遲1s*/
transition: all 1s ease-in 1s;

/*
top屬性 1s動畫 ease-in動畫方式 
left屬性 1s動畫 ease-out動畫方式 延遲1s
width屬性 1s動畫 liner動畫方式 延遲2s
height屬性 1s動畫 ease-in-out動畫方式 延遲3s 
*/
transition: top 1s ease-in,
          left 1s  ease-out 1s,
          width 1s  ease-liner 2s,
          height 1s  ease-in-out 3s;

  • 動畫方式：

    1. 貝塞爾曲線動畫

      • 在設(shè)置動畫曲線的位置通過cubic-bezier()的方式進(jìn)行設(shè)置。
      • [計(jì)算貝塞爾曲線在線網(wǎng)址][http://cubic-bezier.com] 
      /* 其中 需要傳入四個(gè)值,并且每個(gè)值都是0-1的小數(shù)*/
transition: top 1s cubic-bezier(0.1,0.2,0.3,0.4);

    2. step動畫：

      • 設(shè)置動畫完成的步數(shù)莫其。
      /* 1s動畫 每隔 1/6 s 完成一次  在每次間隔的 末尾 開始動畫  */
transition: top 1s steps(6,end);
/* 1s動畫 每隔 1/6 s 完成一次  在每次間隔的 開始 開始動畫  */
transition: top 1s steps(6,start);

2.10 2D轉(zhuǎn)換

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一癞尚，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)乱陡、變形浇揩、縮放，甚至支持矩陣方式憨颠，配合過渡和動畫知識胳徽，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

2.10.1 移動 translate

  • 語法：transform:translate(x,y);爽彤。
  • 移動位置相當(dāng)于自身原來位置养盗。
  • x、y可為負(fù)值适篙，x軸正方向向右往核，y軸正方向朝下。
  • 除了可以像素值匙瘪，也可以是百分比铆铆，相對于自身的寬度或高度。

2.10.2 縮放 scale

  • 語法：transform:scale(x,y);丹喻。
  • 可以對元素進(jìn)行水平和垂直方向的縮放薄货，x、y的取值可為小數(shù)碍论。

2.10.3 旋轉(zhuǎn) rotate

  • 語法：transform:rotate(deg);谅猾。
  • 可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針鳍悠，負(fù)值為逆時(shí)針税娜。
  • 當(dāng)元素旋轉(zhuǎn)以后，坐標(biāo)軸也跟著發(fā)生的轉(zhuǎn)變藏研。
  • 調(diào)整順序可以解決敬矩，把旋轉(zhuǎn)放到最后。

2.10.4 傾斜 skew

  • 語法：transform:skew(xdeg,ydeg);蠢挡。
  • 可以使元素按一定的角度進(jìn)行傾斜弧岳，可為負(fù)值凳忙，第二個(gè)參數(shù)不寫默認(rèn)為0。

2.10.5 組合寫法

tranform:translate(10px,10px) rotate(180deg) scale(1.5,1.5);    /* 多個(gè)值 通過空格分隔*/

2.10.6 transform-origint

可以調(diào)整元素轉(zhuǎn)換的原點(diǎn)禽炬。

/*x:50px y:中心 作為原點(diǎn)*/
transform-origin:50px;

/*x:50px y:50px 作為原點(diǎn)*/
transform-origin:50px 50px;

/*x:10% y:20% 作為原點(diǎn)*/
transform-origin:10% 20%;

/* 傳入單詞 
可選:top,left,right,center,bottom
*/
/* 左上 作為原點(diǎn) */
transform-origin:right top;
/* 中心作為原點(diǎn) */
transform-origin:center center;

2.11 3D轉(zhuǎn)換

3D轉(zhuǎn)換對應(yīng)的屬性依舊是transform涧卵，只是多了一個(gè)Z軸而已，Z軸的方向是垂直于屏幕腹尖，其中正方向指向我們的面部柳恐。

2.11.1 3D旋轉(zhuǎn)

  • 左手定則：3D旋轉(zhuǎn)遵循左手定則，即：大拇指指向旋轉(zhuǎn)軸的正方向热幔，其余四指彎曲的方向就是旋轉(zhuǎn)的方向乐设。
/* x方向旋轉(zhuǎn)180°*/
transform:rotateX(180deg)
/* y方向旋轉(zhuǎn)180°*/
transform:rotateY(180deg)
/* z方向旋轉(zhuǎn)180°*/
transform:rotateZ(180deg)

2.11.2 透視 perspective

perspective（透視，視角）這個(gè)屬性能讓圖像具有立體感断凶，呈現(xiàn)近大遠(yuǎn)小的效果伤提。

  • 用法：

    1. 作為一個(gè)屬性，設(shè)置給父元素认烁，作用于所有3D轉(zhuǎn)換的子元素。
    2. 作為transform屬性的一個(gè)值介汹，做用于元素自身却嗡。
    3. 一般我們建議添加到不進(jìn)行變換的父容器中。
    /*直接添加給transform:標(biāo)簽 距離 顯示屏 1000px*/
transform:perspective(1000px)

/*直接使用perspective 屬性賦值:標(biāo)簽 距離 顯示屏 1000px*/
perspective:1000px

2.11.3 視角方向 perspective-origin

默認(rèn)我們是直直的看著屏幕嘹承，通過該屬性可以修改查看屏幕的角度窗价。

2.11.4 3D呈現(xiàn) transform-style

設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)，這些子元素必須為轉(zhuǎn)換原素叹卷。3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的撼港，可以給這些元素的父元素設(shè)置transform-style: preserve-3d來使其變成一個(gè)真正的3D圖形，即讓瀏覽器開啟3D渲染骤竹。

  • flat：所有子元素在 2D 平面呈現(xiàn)帝牡。
  • preserve-3d：開啟3D空間。

2.11.5 backface-visibility

設(shè)置元素背面是否可見蒙揣。

2.12 動畫

動畫是CSS3中具有顛覆性的特征之一靶溜，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動畫，常用來實(shí)現(xiàn)復(fù)雜的動畫效果懒震。

2.12.1 過渡的局限性

  • transition需要事件觸發(fā)罩息，所以沒法在網(wǎng)頁加載時(shí)自動發(fā)生。
  • transition是一次性的个扰，不能重復(fù)發(fā)生瓷炮，除非一再觸發(fā)。
  • transition只能定義開始狀態(tài)和結(jié)束狀態(tài)递宅，不能定義中間狀態(tài)娘香，也就是說只有兩個(gè)狀態(tài)苍狰。
  • 一條transition規(guī)則，只能定義一個(gè)屬性的變化茅主，不能涉及多個(gè)屬性舞痰。
  • CSS Animation就是為了解決這些問題而提出的。

2.12.2 必要元素

  • 通過@keyframes指定動畫序列诀姚。
  • 通過百分比將動畫序列分割成多個(gè)節(jié)點(diǎn)响牛。
  • 在各節(jié)點(diǎn)中分別定義各屬性。
  • 通過animation將動畫應(yīng)用于相應(yīng)元素赫段。
/*動畫名為:sevenColor
    開始背景為紅色
    中途背景為橘色
    結(jié)束為黃色
*/
@keyframes changeColor{
            0%{background-color:red;}
            50%{background-color:orange;}
            100%{background-color:yellow;}
}    

/*動畫名為:changeColor
   效果跟上面的一樣,只是使用關(guān)鍵字
   from 開始
   to 結(jié)束
*/
@keyframes sevenColor{
            from{background-color:red;}
            50%{background-color:orange;}
            to{background-color:yellow;}
}   

/*動畫名為:someProperty
   效果跟上面的一樣,只是使用關(guān)鍵字
    添加了多個(gè)屬性
*/
@keyframes someProperty{
            from{
                background-color:red;
                width:100px;
            }
            50%{
                background-color:orange;
                transform:rotate(100deg);
            }
            to{
                background-color:yellow;
                height:200px;
            }
}

2.12.3 動畫屬性

  • animation-name：設(shè)置動畫序列名稱呀打。
  • animation-duration：動畫持續(xù)時(shí)間。
  • animation-delay：動畫延時(shí)時(shí)間糯笙。
  • animation-timing-function：動畫執(zhí)行速度贬丛，linear、ease等给涕。
  • animation-play-state：動畫播放狀態(tài)豺憔，running、paused等够庙。
  • animation-direction：動畫逆播恭应，alternate等。
  • animation-fill-mode：動畫執(zhí)行完畢后狀態(tài)耘眨，forwards昼榛、backwards等。
  • animation-iteration-count：動畫執(zhí)行次數(shù)剔难，inifinate等胆屿。
  • steps(60)：表示動畫分成60步完成。
  • 復(fù)合寫法：第一個(gè)時(shí)間必須為動畫時(shí)間偶宫，第二個(gè)時(shí)間必須為動畫延遲時(shí)間非迹，其余屬性的位置可以任意寫。
animation-name: sevenColor;                 /*動畫名*/
animation-duration: 1s;                     /*持續(xù)時(shí)間*/
animation-delay: 1s;                        /*延遲時(shí)間*/
animation-fill-mode: forwards;              /*動畫播放完畢時(shí)的狀態(tài) (還原,結(jié)束值)*/
animation-iteration-count: infinite;        /*動畫次數(shù)(具體次數(shù),或者無限次)*/
animation-timing-function: ease-in;         /*動畫的播放過渡類型*/
animation-play-state: running;              /*動畫狀態(tài) running 或者pause*/
animation-direction: alternate;             /*動畫的方向 正向 方向 正方,反向交替 方向,正向交替*/

animation: animationName 1s infinite  ease-in forwards 1s;  /*復(fù)合寫法*/

2.13 伸縮布局

CSS3在布局方面做了非常大的改進(jìn)读宙，使得我們對塊級元素的布局排列變得十分靈活彻秆，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性结闸，在響應(yīng)式開中可以發(fā)揮極大的作用唇兑。

  • 必要屬性：

    對于想要使用伸縮盒子布局的元素，需要為他們的父盒子添加display:flex屬性桦锄，才能夠開啟該選項(xiàng)扎附。

    display:flex  /* 開啟彈性布局 */

  • 寬度設(shè)置：

    1. 在不設(shè)置彈性盒子的方向時(shí)，默認(rèn)是從左往右進(jìn)行布局结耀。
    2. 如果元素有寬度留夜，那么可以使用自身寬度匙铡。
    3. 也可以通過flex:數(shù)字的方式設(shè)置寬度比例，實(shí)現(xiàn)等比例效果碍粥。
    /* 會使用設(shè)置的寬度 */
width:100px;

/* 使用比例寬度
    假設(shè)父容器中 有3個(gè)子元素 ,flex都為1 那么 每個(gè)寬度為
    100%/3
    有3個(gè)子元素 ,flex分別為1,2,3 那么 寬度依次為
    (100%/(1+2+3))*1
    (100%/(1+2+3))*2
    (100%/(1+2+3))*3
*/
flex:1;

  • 軸設(shè)置：

    • flex-direction：可調(diào)整主軸方向鳖眼。

      1. 默認(rèn)情況下橫向叫做主軸，豎向叫做副軸嚼摩。
      2. 需要通過作為容器的父盒子進(jìn)行修改钦讳。
      display:flex;
flex-direction:column;/* 設(shè)置縱軸為主軸 */

    • justify-content：調(diào)整主軸對齊方式。

      1. space-between：彈性盒子元素會平均地分布在行里枕面。如果最左邊的剩余空間是負(fù)數(shù)愿卒，或該行只有一個(gè)子元素，則該值等效于flex-start潮秘。在其它情況下琼开，第一個(gè)元素的邊界與行的主起始位置的邊界對齊，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對齊枕荞，而剩余的伸縮盒項(xiàng)目則平均分布柜候，并確保兩兩之間的空白空間相等。
      2. space-around：彈性盒子元素會平均地分布在行里躏精，兩端保留子元素與子元素之間間距大小的一半改橘。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)伸縮盒項(xiàng)目玉控，則該值等效于center。在其它情況下狮惜，伸縮盒項(xiàng)目則平均分布高诺，并確保兩兩之間的空白空間相等，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半碾篡。
      justify-content:space-between;  /* 水平方向?qū)R方式  這個(gè)值為間距相等 兩邊頂邊 */

    • align-items：調(diào)整副軸對齊方式虱而。

      align-items: center;    /*  副軸的 元素排布 */

  • 換行：

    1. flew-wrap默認(rèn)為nowrap。
    2. 當(dāng)我們設(shè)置的子元素寬度一行無法裝下時(shí)开泽，配合該屬性可以設(shè)置換行牡拇。
    3. 多行文本的對齊使用align-content來設(shè)置。
    4. 如果使用flex按照比例穆律，只會切割一行惠呼，無法實(shí)現(xiàn)換行，需要使用數(shù)值的尺寸(px,%,em)峦耘。
    flex-wrap:wrap;           /*設(shè)置換行*/
align-content:center; /*設(shè)置多行對齊方式*/

    ?

三剔蹋、補(bǔ)充

3.1 開發(fā)者工具

  • IDE：集成開發(fā)環(huán)境，功能強(qiáng)大辅髓，絕大多數(shù)開發(fā)者并沒有使用到全部功能泣崩，需要占用和消耗較多的性能少梁。

    常見的有：webstorm、Dreamweaver矫付、vistual studio凯沪、HBuilder。

  • 編輯器：輕量級买优，本身自帶功能較少妨马，支持通過插件擴(kuò)展從而能夠?qū)崿F(xiàn)很多IDE類似的功能。

    常見的有：sublime而叼、atom身笤、vscode。

3.2 幫助文檔

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末葵陵，一起剝皮案震驚了整個(gè)濱河市液荸，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌脱篙，老刑警劉巖娇钱，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異绊困，居然都是意外死亡文搂，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門秤朗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來煤蹭，“玉大人，你說我怎么就攤上這事取视∠踉恚” “怎么了？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵作谭，是天一觀的道長稽物。 經(jīng)常有香客問我，道長折欠，這世上最難降的妖魔是什么贝或？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮锐秦，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘农猬。我一直安慰自己，他們只是感情好幔烛，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布啃擦。 她就那樣靜靜地躺著，像睡著了一般饿悬。 火紅的嫁衣襯著肌膚如雪令蛉。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天狡恬，我揣著相機(jī)與錄音珠叔，去河邊找鬼。 笑死弟劲，一個(gè)胖子當(dāng)著我的面吹牛祷安，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播兔乞，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼汇鞭，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了庸追？” 一聲冷哼從身側(cè)響起虱咧，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎锚国，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玄坦，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡血筑，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了煎楣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豺总。...
    茶點(diǎn)故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖择懂，靈堂內(nèi)的尸體忽然破棺而出喻喳，到底是詐尸還是另有隱情，我是刑警寧澤困曙，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布表伦，位于F島的核電站谦去，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏蹦哼。R本人自食惡果不足惜鳄哭，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纲熏。 院中可真熱鬧妆丘，春花似錦、人聲如沸局劲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽鱼填。三九已至药有，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間剔氏，已是汗流浹背塑猖。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谈跛，地道東北人羊苟。 一個(gè)月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像感憾，于是被迫代替她去往敵國和親蜡励。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理阻桅，服務(wù)發(fā)現(xiàn)凉倚，斷路器，智...
    卡卡羅2017閱讀 134,599評論 18贊 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案嫂沉？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1贊 92
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color稽寒，font，text－align趟章，li...
    wzhiq896閱讀 1,730評論 0贊 2
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color杏糙，font，text－align蚓土，li...
    love2013閱讀 2,303評論 0贊 11
  • 烈日 堅(jiān)定信念 冷月 溫暖著幾世輪回的諾言 風(fēng)沙 摧枯青春的長發(fā) 遠(yuǎn)去的馬蹄牽引著我夢 前世許下諾的王子 今生騎馬...
    90后青衣閱讀 835評論 5贊 6