H5基礎知識總結

一、HTML5

1.1 認識HTML5

HTML5并不僅僅只是作為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發(fā)的一系列標準，成為第一個將Web做為應用開發(fā)平臺的HTML語言。

我們日常討論的H5其實是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發(fā)平臺。

相對于HTML的早期版本，HTML5在語法規(guī)范上做了比較大的調整，去除了許多冗余的內容，書寫規(guī)則更加簡潔、清晰。

1.2 DOCTYPE標簽

1.2.1 DOCTYPE標簽的作用

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

1.2.2 DOCTYPE標簽的寫法

  • 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)建文檔結構

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

1.3 新的語義標簽

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

1.3.1 部分常用的語義標簽

標簽名 作用
nav 導航
header 頁眉
footer 頁腳
main 文檔主要內容
article 文章
aside 側邊欄
section 區(qū)塊
progress 進度條

使用HTML5中新的語義標簽，內容更為直觀，即使刪除了注釋，依舊能夠看出該標簽的作用，語義性更強。

盡量避免全局使用header、footer、aside等語義標簽。

1.3.2 新語義標簽的兼容性

雖然HTML5為我們提供了一些新的語義標簽，但老版本的瀏覽器并不兼容這些內容，比如在IE瀏覽器版本小于等于IE8時，就不支持新語義標簽。

解決方案：

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

    1. 在頁面中添加創(chuàng)建header標簽的代碼。
    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的新語義標簽,需要設置為block*/
            display: block;
        }   
    </style>
    <script type="text/javascript">
        // 使用代碼創(chuàng)建header標簽
      document.createElement("header");
    </script>
</head>
<body>
<!--
    在老版本的ie中無法查看(ie8)
-->
<header>
</header>
</body>
</html>

  • js框架：

    1. 相當于幫助我們實現(xiàn)了創(chuàng)建和添加display:block等操作，內部的處理邏輯會更多一些。
    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>

  <!-- 通過 條件注釋  讓 這個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í)行了，所以我們通過一個叫做hack的方式來減少性能的浪費。

    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標簽的新type屬性

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

類型 使用示例 含義
email <input type="email"> 輸入郵箱格式
tel <input type="tel"> 輸入手機號碼格式
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"> 定義日期字段的時、分、秒
date <input type="date"> 定義日期字段（帶有calendar控件）
datetime <input type="datetime"> 定義日期字段（帶有calendar和time控件）
month <input type="month"> 定義日期字段的月
week <input type="week"> 定義日期字段的周

兼容性問題：

  • 由于IE的兼容性問題，在不同的瀏覽器中顯示效果不盡相同。
  • 部分類型是針對移動設備生效的，在實際應用當中應選擇性的使用。

1.4.2 input表單驗證

  • email標簽：自帶格式驗證

    1. 當我們點擊提交按鈕時，如果輸入的email格式不正確，會彈出提示信息。
    2. email標簽并不會驗證內容是否為空，這個需要注意。
    <!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屬性：對于沒有自帶驗證效果的標簽，就需要手動添加屬性增加驗證了。

    1. required為非空驗證。
    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自定義驗證規(guī)則：

    1. 在需要添加自定義驗證規(guī)則的元素中添加required標簽。
    2. 使用pattern后的正則表達式編寫驗證規(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>

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

    1. 注冊事件：
      • oninput：輸入時。
      • oninvalid：驗證失敗時。
    2. 設置自定義信息：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");
    // 正在輸入時
    telInput.oninput=function () {
        this.setCustomValidity("請正確輸入您的手機號碼");
    }
    // 驗證失敗時
    telInput.oninvalid=function(){
        this.setCustomValidity("您輸入的手機號碼不正確，請重新輸入");
    };

</script>

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

缺點：兼容性問題，如果想要兼容所有瀏覽器，建議使用js驗證框架。

1.4.3 新表單元素

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

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

    1. datalist：id屬性，想要使用該datalist的元素需要通過list=id的方式來指定。
    2. option：
      • value：指定具體的值。
      • label：提示信息。
    3. 如果input的type為url，option中對應的value需要使用http://開始。
    <!--注：測試代碼只是body內部的代碼。-->
網(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）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

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

    目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。

  • output：使用頻率很低。

    屬于新的語義標簽：用來放置輸出的內容，但是不能自動的計算結果，依舊需要通過js的方式來動態(tài)修改結果，只是相比于其他的標簽語義性更強。

1.4.4 新表單屬性

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

  • autocomplete（自動完成）：

    1. 能夠記錄用戶的輸入，并且給予提示，這就是autocomplete的作用。
    2. 取值：on開啟，off關閉。
    3. 一般用在input標簽中。
    4. 標簽需要添加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（獲取焦點）：

    1. 當某一頁有很多個可供輸入的元素時，用戶需要使用鼠標點選元素進行輸入，為了提升用戶體驗，我們可以通過autofocus屬性來指定頁面中默認選中的元素。
    2. 需要哪個表單元素獲得焦點，只需要添加該屬性即可，不需要賦值。
    3. 如果頁面中多個元素設置了該屬性，最后一個會獲得焦點。
    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（表單關聯(lián)）：

    1. 當我們想要提交數(shù)據(jù)時，需要把表單元素放到對應的form標簽中，這個屬性的出現(xiàn)讓表單元素的放置位置不再受到約束。
    2. 想要某個表單外元素與該表建立聯(lián)系，只需要為元素添加屬性form="表單id"設置為想要建立聯(lián)系的表單id即可。
    3. 雖然這個屬性可以讓元素的放置位置不再成為限制，但是編碼時依舊建議將元素放置到對應的表單中，除了兼容性問題以外，也為了提升代碼的可讀以及可維護性。
    <!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. 如果想要在某個input標簽中選擇多個值，可以使用該屬性。
    2. 該屬性可以用在type為file標簽內。
    3. 選擇多文件時，需要按住ctrl按鈕。
    <input type="file" multiple >

  • placeholder（占位提示）：

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

1.5 多媒體

1.5.1 多媒體標簽

  • HTML5為了解決使用Flash的各種問題推出了多媒體標簽。
  • 由于視頻格式問題，不同的瀏覽器對于相同格式的視頻支持不同，需要準備多份視頻。
  • 無法對播放的視頻提供很好的保護效果,因為用戶可以直接對視頻文件另存為。

1.5.2 音頻 audio標簽

  • 不考慮兼容性：

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

  • 考慮兼容性：

    1. source：指定多個音頻，如果找到了當前瀏覽器支持的，那么會直接使用；如果所有的source標簽格式都不支持，會顯示最后的文本內容。
    <audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的瀏覽器不支持此種格式
</audio>

1.5.3 視頻 Video標簽

Video標簽用來播放視頻，用法跟audio標簽十分類似。

  • 不考慮兼容性：

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

  • 考慮兼容性：

    1. source：指定多個視頻，如果找到了當前瀏覽器支持的，那么會直接使用；如果所有的source標簽格式都不支持，會顯示最后的文本內容。
    <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  您的瀏覽器不支持video標簽
</video>

1.5.4 多媒體加強

  • 方法：加載load()、播放play()、暫停pause()。
  • 屬性：當前URLcurrentSrc、當前時間currentTime、總時間duration。
  • 事件：播放時持續(xù)觸發(fā)ontimeupdate，結束時觸發(fā)onended等。

1.6 兩種進度條

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

1.6.1 process

  • 作用：
    • 用來顯示任務的進度（進程）。
    • 如果想要用來顯示度量值（比如容量使用情況），請使用meter標簽。
  • 屬性：
    • max：總工作量。
    • value： 已完成工作量。
  • 兼容性：
    • 為了保證顯示效果，可以在progress標簽中寫入內容，在當前瀏覽器無法顯示該控件時，會轉而顯示內容。

1.6.2 meter

  • 外觀：通過屬性值的搭配能夠顯示出多重不同的變化。
  • 常見屬性：
    • high：規(guī)定較高的值。
    • low：規(guī)定較低的值。
    • max：規(guī)定最大值（可以超過,但是進度條已經(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擴展

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

1.7.1 獲取元素

  • querySelector：返回當前文檔中第一個匹配特定選擇器的元素。

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

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

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

1.7.2 類名操作 classList

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

  • add ： 添加一個class到元素的class列表中。

    Node.classList.add('class')

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

    Node.classList.remove('class')

  • toggle ： 切換一個class是否存在于一個元素的class列表中。

    Node.classList.toggle('class')

  • contains ： 查詢一個指定的class是否存在于元素的class列表中。

    Node.classList.contains('class')

Node指一個有效的DOM節(jié)點，是一個通稱。

1.7.3 自定義屬性 data-

  • 定義屬性：

    1. data-xxx：data-是固定格式，xxx是自定義的值。
    2. 屬性名不應該包含任何大寫字母，并且在前綴data-之后必須有至少一個字符。
    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-之后使用-連接多個值，取值時，需要使用駝峰命名。
    var demo = document.querySelector('#demo');
<!--獲取-->
demo.dataset['name'];
demo.dataset['age'];
<!--設置-->
demo.dataset['name'] = 'rick';
<!--駝峰命名獲取-->
Node.dataset['myName'];

1.8 新增API

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

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

     window.navigator.onLine

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

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

1.8.2 全屏

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

  • 開啟全屏顯示：

    Node.requestFullScreen()

  • 關閉全屏顯示：

    Node.cancelFullScreen()

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

    • webkit內核瀏覽器：

      webkitRequestFullScreen、webkitCancelFullScreen

  • Gecko內核瀏覽器?：

    mozRequestFullScreen、mozCancelFullScreen

  • 檢測當前是否處于全屏：

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

1.8.3 文件讀取

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

  • 獲取文件：

    1. 由于File標簽支持多文件上傳，所以我們想要獲取到選取的文件，需要配合索引。

      // 其中this為file標簽
    this.files[0]

  • 讀取文件：

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

1.8.4 文件拖拽

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

  • 拖拽元素：添加了draggable="true" 屬性即可實現(xiàn)拖拽，其中<img>、<a>標簽默認是可以被拖拽的。

  • 目標元素：拖拽元素的放置位置。任意元素都可以成為目標元素。

  • 支持事件：

    1. 拖拽元素：

      • ondrag：整個拖拽過程都會調用。
      • ondragstart：當拖拽開始時調用。
      • ondragend：當拖拽結束時調用。
      • ondragleave：當鼠標離開拖拽元素時調用。

    2. 目標元素：

      • ondrop：當在目標元素上松開鼠標時調用。
      • ondragover：當停留在目標元素上時調用。
      • ondragenter：當拖拽元素進入時調用。
      • ondragleave：當鼠標離開目標元素時調用。

    3. 注意事項：

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

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

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

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

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

1.8.5 地理定位

  • 獲取地理信息

    通過IP地址、三維坐標、GPS、Wi-Fi、手機信息等多種方式獲取地址信息，不同獲取方式的優(yōu)缺點并不相同，瀏覽器會自動以最優(yōu)方式去獲取用戶地理信息。

  • 安全性

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

  • 語法

    1. 獲取當前地理信息：

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

    2. 重復獲取當前地理信息：

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

  • 應用：

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

1.8.6 Web存儲

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

  • 使用特點：

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

  • window.sessionStorage：

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

  • window.localStorage：

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

  • 使用方法：

    兩種存儲方式，只是前綴不同，調用方法是一致的。

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

二、CSS3

2.1 CSS3簡介

CSS3是CSS2的“進化”版本，在CSS2基礎上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。但是由于瀏覽器的兼容性問題，所以并不是所有的瀏覽器都能夠使用，為了保證顯示效果，我們在使用某些屬性的時候需要添加額外的前綴。

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

2.2 CSS3選擇器

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

2.2.1 屬性選擇器

屬性選擇器的作用就是，根據(jù)標簽的屬性去篩選對應的元素，屬性選擇器從CSS2推出，在CSS3中增加了幾個新的屬性。

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

2.2.2 兄弟選擇器

  • 選擇器1 ~ 選擇器2 ：選擇相同父元素中，選擇器1之后的所有滿足選擇器2的元素。
  • 選擇器1 + 選擇器2 ：選擇相同父元素中，選擇器1之后的第一個滿足選擇器2的元素。

2.2.3 偽類選擇器

  • 結構偽類：以某元素（E）相對于其父元素或兄弟元素的位置來獲取無素，并對應位置的子元素或兄弟元素必須是該元素（E）。
    1. E:first-child：其父元素的第一個子元素?。
    2. E:last-child：其父元素的最后一個子元素。
    3. E:nth-child(n)： 第n個子元素，計算方法是E元素的全部兄弟元素。
    4. E:nth-last-child(n)： 跟E:nth-child(n)類似 ，只是倒著計算。
    5. 注意：其中n的取值范圍是：0，1，2，3，4... 線性累加，可以傳入表達式，比如2n，2n+1等等，也可以傳入特殊字符：even(偶數(shù))，odd(奇數(shù))。
  • 空偽類：E:empty：選中沒有任何子節(jié)點的E元素（使用不是非常廣泛）。
  • 目標偽類：E:target：結合錨點進行使用，處于當前錨點的元素會被選中。
  • 排除偽類：E:not(任意選擇器)：不滿足括號內選擇器條件的元素E會被選中。

2.2.4 偽元素選擇器

  • E::before和E::after：

    在E元素內部的開始位置和結束位創(chuàng)建一個元素，該元素為行內元素，且必須要結合content屬性使用。

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

  • E::first-letter：

    獲取的是內容的第一個文字，根據(jù)語言的不同會有細微差別，如中文、日文、韓文等。

  • E::first-linet：

    獲取的是內容的第一行，可以配合P標簽使用。

  • E::selection：

    可改變選中文本的樣式，目前只能設置的屬性為：background-color，color，text-shadow。

2.3 顏色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設置顏色值的透明度，跟opacity相比，它們不具有繼承性，不會影響子元素的透明度。

  • RGBA：

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

  • HSLA：

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

  • 關于CSS透明度：

    1. opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度 ，是作為CSS的屬性來使用的。
    2. transparent不可調節(jié)透明度，始終完全透明，是作為顏色的取值來使用的color:transparent。

2.4 字體陰影 text-shadow

取值：

  1. 第1個長度值用來設置對象的陰影水平偏移值，可以為負值 。
  2. 第2個長度值用來設置對象的陰影垂直偏移值，可以為負值 。
  3. 如果提供了第3個長度值則用來設置對象的陰影模糊值，不允許負值。
  4. 設置對象的陰影的顏色。
  5. 可以通過,來分隔不同的陰影，從而為字體設置多個陰影。
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，這樣我們計算盒子大小的方式就發(fā)生了改變。

  • content-box：默認取值，盒子模型大小為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;                 /*設置四周的圓角*/
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：必需。水平陰影的位置。允許負值。
  • v-shadow：必需。垂直陰影的位置。允許負值。
  • blur：可選。模糊距離。
  • spread：可選。陰影的尺寸。
  • color：可選。陰影的顏色。
  • inset：可選。將外部陰影 outset 改為內部陰影。
  • 多個影子的添加只需要使用逗號分隔即可。
box-shadow: 5px 5px 20px pink;          /*x偏移值,y偏移值,影子四周模糊程度,影子顏色*/
box-shadow: inset 0px 0px 100px yellow; /*添加了inset以后,影子會往內部伸展,其他的都是一樣的*/
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green; /*多個影子需要使用逗號分隔*/

注：設置邊框陰影不會改變盒子的大小，不會影響其兄弟元素的布局。可以設置多重邊框陰影，實現(xiàn)更好的效果，增強立體感，符合漸進增強，實際開發(fā)中可以大膽使用。

2.6.3 邊框圖片 border-image

border-image為復合屬性：

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

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

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

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

    取值：
1-4個值(不需要單位),對應的關系跟margin一致；
1-4個百分比,對應的關系跟margin一致；
fill(可選):是否需要中間的區(qū)域；

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

    取值：1-4個值,單位為(px,em,%),對應關系跟margin一致。
border-image-width: auto;

  • 圖片凹凸border-image-outset：設置或檢索對象的邊框背景圖的擴展。

    取值：1-4個值,單位為(px,em,%),對應關系跟margin一致。
border-image-outset: 10px;

  • 圖片重復border-image-repeat：設置或檢索對象的邊框圖像的平鋪方式。

    取值：
stretch： 指定用拉伸方式來填充邊框背景圖。 
repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。 
round： 指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調整圖片的大小直至正好可以鋪滿整個邊框。 
space： 指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調整圖片的之間的間距直至正好可以鋪滿整個邊框。

2.7 背景

背景屬性在CSS3中也得到很大程度的增強，比如背景圖片尺寸、背景裁切區(qū)域、背景定位參照點、多重背景等。

  • background-size：

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

  • background-origin：

    1. 可以設置背景圖片定位(background-position)的參照原點。

    2. 可選值為border-box，padding-box，content-box。

      border-box     以邊框做為參考原點；
padding-box        以內邊距做為參考原點；
content-box        以內容區(qū)做為參考點；

  • background-clip：

    1. 可以設置對背景區(qū)域進行裁切，即改變背景區(qū)域的大小。

    2. 取值：

      border-box     裁切邊框以內為背景區(qū)域；
padding-box        裁切內邊距以內為背景區(qū)域；
content-box        裁切內容區(qū)做為背景區(qū)域；

  • background-repeat：

    1. 在原來只能設置平鋪與不平鋪的基礎上增加了兩個屬性，讓我們在設置背景圖時更為靈活。

    2. 取值：

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

  • 多背景：以逗號分隔可以設置多背景，可用于自適應布局。

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

    ?

2.8 漸變

漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量，并且具有很強的適應性和可擴展性。

2.8.1 線性漸變

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

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

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

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

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

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

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

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

2.8.2 徑向漸變

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

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

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

/* 設置位置 */
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%);

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

2.9 過渡

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

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

  • 語法：

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

/* 多屬性過渡組合寫法  通過逗號分隔*/
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. 貝塞爾曲線動畫

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

    2. step動畫：

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

2.10 2D轉換

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

2.10.1 移動 translate

  • 語法：transform:translate(x,y);。
  • 移動位置相當于自身原來位置。
  • x、y可為負值，x軸正方向向右，y軸正方向朝下。
  • 除了可以像素值，也可以是百分比，相對于自身的寬度或高度。

2.10.2 縮放 scale

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

2.10.3 旋轉 rotate

  • 語法：transform:rotate(deg);。
  • 可以對元素進行旋轉，正值為順時針，負值為逆時針。
  • 當元素旋轉以后，坐標軸也跟著發(fā)生的轉變。
  • 調整順序可以解決，把旋轉放到最后。

2.10.4 傾斜 skew

  • 語法：transform:skew(xdeg,ydeg);。
  • 可以使元素按一定的角度進行傾斜，可為負值，第二個參數(shù)不寫默認為0。

2.10.5 組合寫法

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

2.10.6 transform-origint

可以調整元素轉換的原點。

/*x:50px y:中心 作為原點*/
transform-origin:50px;

/*x:50px y:50px 作為原點*/
transform-origin:50px 50px;

/*x:10% y:20% 作為原點*/
transform-origin:10% 20%;

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

2.11 3D轉換

3D轉換對應的屬性依舊是transform，只是多了一個Z軸而已，Z軸的方向是垂直于屏幕，其中正方向指向我們的面部。

2.11.1 3D旋轉

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

2.11.2 透視 perspective

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

  • 用法：

    1. 作為一個屬性，設置給父元素，作用于所有3D轉換的子元素。
    2. 作為transform屬性的一個值，做用于元素自身。
    3. 一般我們建議添加到不進行變換的父容器中。
    /*直接添加給transform:標簽 距離 顯示屏 1000px*/
transform:perspective(1000px)

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

2.11.3 視角方向 perspective-origin

默認我們是直直的看著屏幕，通過該屬性可以修改查看屏幕的角度。

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

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

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

2.11.5 backface-visibility

設置元素背面是否可見。

2.12 動畫

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

2.12.1 過渡的局限性

  • transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。
  • transition是一次性的，不能重復發(fā)生，除非一再觸發(fā)。
  • transition只能定義開始狀態(tài)和結束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個狀態(tài)。
  • 一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。
  • CSS Animation就是為了解決這些問題而提出的。

2.12.2 必要元素

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

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

/*動畫名為:someProperty
   效果跟上面的一樣,只是使用關鍵字
    添加了多個屬性
*/
@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：設置動畫序列名稱。
  • animation-duration：動畫持續(xù)時間。
  • animation-delay：動畫延時時間。
  • 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步完成。
  • 復合寫法：第一個時間必須為動畫時間，第二個時間必須為動畫延遲時間，其余屬性的位置可以任意寫。
animation-name: sevenColor;                 /*動畫名*/
animation-duration: 1s;                     /*持續(xù)時間*/
animation-delay: 1s;                        /*延遲時間*/
animation-fill-mode: forwards;              /*動畫播放完畢時的狀態(tài) (還原,結束值)*/
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;  /*復合寫法*/

2.13 伸縮布局

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發(fā)揮極大的作用。

  • 必要屬性：

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

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

  • 寬度設置：

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

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

  • 軸設置：

    • flex-direction：可調整主軸方向。

      1. 默認情況下橫向叫做主軸，豎向叫做副軸。
      2. 需要通過作為容器的父盒子進行修改。
      display:flex;
flex-direction:column;/* 設置縱軸為主軸 */

    • justify-content：調整主軸對齊方式。

      1. space-between：彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數(shù)，或該行只有一個子元素，則該值等效于flex-start。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。
      2. space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數(shù)，或該行只有一個伸縮盒項目，則該值等效于center。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
      justify-content:space-between;  /* 水平方向對齊方式  這個值為間距相等 兩邊頂邊 */

    • align-items：調整副軸對齊方式。

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

  • 換行：

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

    ?

三、補充

3.1 開發(fā)者工具

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

    常見的有：webstorm、Dreamweaver、vistual studio、HBuilder。

  • 編輯器：輕量級，本身自帶功能較少，支持通過插件擴展從而能夠實現(xiàn)很多IDE類似的功能。

    常見的有：sublime、atom、vscode。

3.2 幫助文檔

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,923評論 18贊 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 1,803評論 0贊 2
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,335評論 0贊 11
  • 烈日 堅定信念 冷月 溫暖著幾世輪回的諾言 風沙 摧枯青春的長發(fā) 遠去的馬蹄牽引著我夢 前世許下諾的王子 今生騎馬...
    90后青衣閱讀 868評論 5贊 6