HTML5

第一章 HTML5概述

H5是下一代的web開發(fā)的基礎(chǔ).

1.1 web技術(shù)發(fā)展時間線

1. 1991 HTML 就是用標(biāo)記表示一些比普通文本更豐富的文本,文本的超集,有多個版本,沒有圖片傳遞青责。
2. 1994 HTML2 作為HTML1(+)的后續(xù)發(fā)展,但從未成為標(biāo)準(zhǔn)
3. 1995 HTML3 提供了很多新特性,例如文字環(huán)繞,表格,但是由于兼容性問題停止開發(fā).
4. 1996 CSS+Javascript 用層疊樣式表修改樣式 最基本的交互alert
5. 1997 HTML4 把一些標(biāo)簽標(biāo)記為廢棄 互聯(lián)網(wǎng)公司的博弈
6. 1998 CSS2 Web技術(shù)停滯 1999 ES3
7. 2000 環(huán)境混亂,提出 XHTML 更嚴(yán)格的HTML 去除大寫的標(biāo)簽 不閉合的標(biāo)簽等 是XML的實(shí)現(xiàn) (2001 ie6)
8. 2002 Tableless Web Design 表格布局
9. 2005 AJAX 中國到2006年還沒有使用ajax的技術(shù)
10. 2009 HTML5 移動端的推動
11. 2014 HTML5 Finalized

1.2 HTML5概念

HTML5并不是單純的超文本的第五次版本,而是定義為Web Application,改變web開發(fā)的傳統(tǒng)模式.

W3C將H5定義為HTML,CSS,Javascript API的升級語言,是新一代開發(fā)Web富客戶端應(yīng)用的整體解決方案.

1.3 應(yīng)用場景

• 網(wǎng)頁應(yīng)用程序
  • PC端: iCloud , 百度腦圖 ,Office365...
  • APP端:淘寶 , 京東 ,美團(tuán)
  • WeChat端：微信小程序始苇，淘寶讨跟，京東等
• 混合本地式應(yīng)用
  • PC端:網(wǎng)易云音樂 , 有道詞典
  • APP端:淘寶,手機(jī)百度,京東
• 簡單的游戲

1.4 HTML5新增特性

HTML:

• 標(biāo)簽
  • 語義化標(biāo)簽
  • 應(yīng)用程序標(biāo)簽
• 屬性
  • 鏈接關(guān)系描述
  • 結(jié)構(gòu)數(shù)據(jù)標(biāo)記
  • ARIA
  • 自定義屬性
• 智能表單
  • 新的表單類型
  • 虛擬鍵盤配置
• 網(wǎng)頁多媒體
  • 音頻
  • 視頻
  • 字幕
• Canvas
  • 2D
  • 3D (WebGL)
• SVG

Javascript API:

• 核心平臺提升
  • 新的選擇器 QuerySelector
  • 訪問歷史
  • 全屏
• 網(wǎng)頁存儲
  • Application Cache
  • localStorage
  • sessionStorage
  • WebSql
  • indexedDB
• 設(shè)備信息訪問
  • 網(wǎng)絡(luò)狀態(tài)
  • 硬件訪問
  • 設(shè)備方向
  • 地理圍欄
• 拖放操作
  • 網(wǎng)頁內(nèi)拖放
  • 桌面拖入
  • 桌面拖出
• 文件
  • 文件系統(tǒng)API
  • FileReader
• 網(wǎng)絡(luò)訪問
  • Ajax
  • WebSocket
• 多線程
• 桌面通知

CSS :

一些CSS3的新特性

第二章 語義化標(biāo)簽

語義化標(biāo)簽?zāi)軌蜃孒TML代碼更符合內(nèi)容的結(jié)構(gòu)化,標(biāo)簽的語義化

以前我們可能是這樣的:

<div class="header"></div>
<div class="nav"></div>
<div class="content">
    <div class="article"></div>
</div>
<div class="sidebar">
    <div class="widget"></div>
</div>
<div class="footer"></div>

以后我們肯定是這樣的:

<header></header>
<nav></nav>
<section>
    <article></article>
</section>
<aside>
    <div class="widget"></div>
</aside>
<footer></footer>

形成統(tǒng)一的規(guī)范,更易于人和機(jī)器的無障礙讀取網(wǎng)頁內(nèi)容.

• 語義化標(biāo)簽?zāi)軌虮阌陂_發(fā)者閱讀和寫出更優(yōu)雅的代碼
• 能夠讓瀏覽器或者網(wǎng)絡(luò)爬蟲可以更好的進(jìn)行解釋，從而更好的分析其中的內(nèi)容溃蔫，更好的搜索引擎優(yōu)化

切記
HTML的職責(zé)是描述一塊區(qū)域的內(nèi)容或意義是什么,而不是它長得是什么樣子,網(wǎng)頁的外觀應(yīng)該由CSS來決定

一些常見的語義化標(biāo)簽 http://blog.csdn.net/coco379/article/details/52938071

HTML5的新的語義化標(biāo)簽 http://www.cnblogs.com/zjf-1992/archive/2016/12/16/6182406.html

第三章 應(yīng)用程序標(biāo)簽

應(yīng)用程序標(biāo)簽主要由 DataList(數(shù)據(jù)列表),Progress(進(jìn)度條),Meter(數(shù)值顯示器),Menu(右鍵菜單),Detail(明細(xì))等組成,其中后兩種標(biāo)簽兼容性不好,我們只對前三種進(jìn)行討論.

HTML <!DOCTYPE> 標(biāo)簽 http://www.w3school.com.cn/tags/tag_doctype.asp

DataList

是input標(biāo)簽的一種補(bǔ)充,類似于自動完成的一種樣式,幫助我們匹配查找列表中的內(nèi)容

文檔格式無法訪問,需要HTTP形式訪問

<pre>
    數(shù)據(jù)列表呈現(xiàn)需要一個載體 input
</pre>
    <input type="text" list='input_list' name="">
    <datalist id="input_list">
        <option value="lisi"></option>
        <option value="wangwu"></option>
    </datalist>
</body>
</html>

不僅可以呈現(xiàn)列表,還可以進(jìn)行自動匹配查找

不能修改樣式,基本上用jquery

進(jìn)度條

進(jìn)度條默認(rèn)長度是1,可以用value和max控制

progress

    <progress></progress>
    <progress value="10" max="100">

當(dāng)我們修改進(jìn)度條的顏色的時候,發(fā)現(xiàn)并不是我們所期待的顏色,并且我們不能對進(jìn)度和總體樣式進(jìn)行修改.

在谷歌開發(fā)者工具中可以打開Show user agent shadow DOM選項

在控制臺可以看到progress的具體配置

自定義進(jìn)度條樣式 http://www.hongkiat.com/blog/html5-progress-bar/

shadow-dom http://www.cnblogs.com/coco1s/p/5711795.html

meter

<pre>
    定義的是數(shù)值,不是進(jìn)度,例如銷量等.
</pre>

<meter max="100" value="90" high="60" low="30"></meter>

http://www.w3school.com.cn/tags/tag_meter.asp meter標(biāo)簽

第四章 鏈接關(guān)系

對于一些鏈接,殘障人士可能無法識別鏈接的語意,并且爬蟲在檢索數(shù)據(jù)的時候,光靠href是不夠的

<a href="shangyiye.html">上一頁</a>
<a href="xiayiye.html">下一頁</a>
<a href="xiayiye.html">→</a>
<a href="xiayiye.html">next</a>

通過鏈接關(guān)系屬性聲明連入的鏈接和當(dāng)前文檔之間的關(guān)系.

<a href="shangyiye.html" rel="prev">上一頁</a>

在link頭中我們也經(jīng)陈凡伲看到rel,指明了文檔的類型.

<link rel="stylesheet" type="text/css" href="">

如果rel不對或者h(yuǎn)ref鏈接的文檔不對,css都無法正常引入.

<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" >
<link rel="shortcut icon" href="favicon.ico">
<link rel="pingback" >
<link rel="prefetch" >
...

<a rel="archives" >old posts</a>
<a rel="external" >tutorial</a>
<a rel="license" >license</a>
<a rel="nofollow" >wannabe</a>
<a rel="tag" >games posts</a>

• alternate 文檔的可選版本（例如打印頁局劲、翻譯頁或鏡像）
• stylesheet 文檔的外部樣式表
• prefetch 預(yù)加載
• import 文檔引入
• start 集合中的第一個文檔
• next 集合中的下一個文檔
• prev 集合中的前一個文檔
• contents 文檔目錄
• index 文檔索引
• glossary 文檔中所用字詞的術(shù)語表或解釋
• copyright 包含版權(quán)信息的文檔
• chapter 文檔的章
• section 文檔的節(jié)
• subsection 文檔的子段
• appendix 文檔附錄
• help 幫助文檔
• bookmark 相關(guān)文檔
• nofollow 用于指定 Google 搜索引擎不要跟蹤鏈接
• licence 一般用于文獻(xiàn)睬捶，表示許可證的含義
• tag 標(biāo)簽集合
• friend 友情鏈接

對于rel屬性,有些寫錯了也不會報錯,只是不讀取.所以rel屬性可以完美的過度.

第五章 數(shù)據(jù)結(jié)構(gòu)

隨著互聯(lián)網(wǎng)網(wǎng)站和應(yīng)用的增多,爬蟲的負(fù)擔(dān)也變得越來越大,數(shù)據(jù)結(jié)構(gòu)標(biāo)簽即是幫助爬蟲快速提取和檢索網(wǎng)站信息的新增標(biāo)記,需要特定的工具

<div itemscope itemtype="http://example.com/hello">
  <p>我叫<span itemprop="主人">whitsats</span>。</p>
  <p>
    我養(yǎng)了一條叫
    <span itemprop="狗名">旺財</span>的
    <span itemprop="品種">金毛</span>犬跨蟹。
  </p>
</div>

是一個包含鍵值對信息的html代碼塊,便于抓取.因為對于'我養(yǎng)了一條叫'這些字段對于我們來說是沒有意義的.

https://search.google.com/structured-data/testing-tool 谷歌的結(jié)構(gòu)數(shù)據(jù)讀取工具

第六章 ARIA

全稱為Accessible Rich Internet Application (無障礙富互聯(lián)網(wǎng)應(yīng)用程序)
主要針對于屏幕閱讀設(shè)備(e.g. NVDA)雳殊，更快更好地理解網(wǎng)頁.更多的是面對殘障人士對網(wǎng)頁進(jìn)行閱讀.

但是,ARIA屬性不僅僅為了盲人用戶,更多的還是為了語義化.

例如,在文本框的書寫過程中,我們一般使用label包裹

<label>
    請輸入:
    <input type="text" name="name">
</label>

如何讓殘障人士知道當(dāng)前瀏覽的區(qū)域是網(wǎng)站主導(dǎo)航?

  <div id="mainnav" role="navigation">
    <a  target="_blank">新聞</a>
    <a  target="_blank">視頻</a>
    <a  target="_blank">娛樂</a>
  </div>

如何讓殘障人士知道當(dāng)li標(biāo)簽是select的選項?

  <div class="dropdown">
    <a href="javascript:;" role="combobox" aria-autocomplete="list" aria-owns="question-list" aria-expanded="true">選擇提示問題</a>
    <ul id="question-list" role="listbox">
      <li role="option"><a href="javascript:;">我媽媽的名字是？</a></li>
      <li role="option"><a href="javascript:;">我爸爸的名字是窗轩？</a></li>
      <li role="option"><a href="javascript:;">我愛人的名字是夯秃？</a></li>
    </ul>
  </div>

對于殘障人士,頁面的一些隱藏內(nèi)容我們也不需要使用屏幕閱讀器來進(jìn)行讀取.

現(xiàn)如今國內(nèi)對于殘障人士用戶的重視程度相比國外還遠(yuǎn)遠(yuǎn)不夠

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/ WAI-ARIA無障礙網(wǎng)頁應(yīng)用屬性完全展示

第七章 自定義屬性

HTML5 增加了一項新功能是 自定義數(shù)據(jù)屬性 ，也就是 data-*自定義屬性痢艺。在HTML5中我們可以使用以 data-為前綴來設(shè)置我們需要的自定義屬性仓洼，來進(jìn)行一些數(shù)據(jù)的存放.

我們當(dāng)然可以用JS中的attribute方法存取data-自定義屬性的值

<div id = "user" data-uid = "12345" data-uname = "布爾教育" > </div>
<script type="text/javascript">
    // 使用getAttribute獲取 data- 屬性
    var user = document.getElementById('user') ;
    var userName = user.getAttribute('data-uname') ; 
    var userId = user.getAttribute('data-uid') ; //userId = '12345'
    // 使用setAttribute設(shè)置 data- 屬性
    user.setAttribute('data-site','http://zixue.it') ;
</script>

此方法能在所有的現(xiàn)代瀏覽器中正常工作，但它不是HTML5的自定義 data-*屬性被使用目的腹备，不然和我們以前使用的自定義屬性就沒有什么區(qū)別了.我們單純的不使用data-前綴也能完成上述的功能.

在H5中的data-屬性和我們自定義屬性有很大的不同:

dataset屬性存取data-*自定義屬性的值

這種方式通過訪問一個元素的dataset屬性來存取data-*自定義屬性的值衬潦。這個dataset 屬性是HTML5 JavaScript API的一部分，用來返回一個所有選擇元素data- 屬性的DOMStringMap對象植酥。

使用這種方法存取數(shù)據(jù)時，不是使用完整的屬性名弦牡，如data-uid來存取數(shù)據(jù)友驮，應(yīng)該去掉data- 前綴。

還有一點(diǎn)特別注意的是,data-屬性名如果包含了連字符驾锰，例如date-of-birth 卸留，連字符將被去掉，并轉(zhuǎn)換為駝峰式的命名椭豫，前面的屬性名轉(zhuǎn)換后應(yīng)該是dateOfBirth耻瑟。

<div id = "user" data-uid = "12345" data-uname = "布爾教育" data-of-name='bool'> </div>
<script type="text/javascript">
     var user = document.getElementById('user');
     console.log(user.dataset);//一個DOMStringMap
     console.log(user.dataset.uid);
     console.log(user.dataset.dataOfName);
     user.dataset.dateOfBirth = '2013';
     console.log(user);
</script>

第八章 智能表單

HTML5在原有的表單基礎(chǔ)上新增了一些新的標(biāo)簽和屬性

原有標(biāo)簽type類型:file,text,password,radio,checkbox,button,submit,reset

新增表單類型:http://www.runoob.com/html/html5-form-input-types.html

我們挑選一些兼容性較好的屬性和類型進(jìn)行講解.

• 日期和時間
  PC端的樣式不可控,常用于移動端

<form>
    <label>
        日期:
        <input type="date" name="bday">
    </label>
    <br>
    <label>
        日期和時間:
        生日 (日期和時間): <input type="datetime" name="bdaytime">
    </label>
    <br>
    <label>
        月份:
       <input type="month" name="bdaymonth">
    </label>
    <br>
    <label>
        時間：
        <input type="time" name="usr_time">
    </label>
    <label>
        選擇周: <input type="week" name="week_year">
    </label>
</form>

• 顏色

<label>
    選擇你喜歡的顏色: <input type="color" name="favcolor">
</label>

• email

自動驗證email輸入是否符合格式

<label>
    E-mail: <input type="email" name="email">
</label>

• range

表示一個數(shù)值的取值范圍旨指，可以通過一些屬性定義

* max - 規(guī)定允許的最大值
* min - 規(guī)定允許的最小值
* step - 規(guī)定合法的數(shù)字間隔
* value - 規(guī)定默認(rèn)值

<label>
 范圍 ：<input type="range" name="points" min="1" max="10" value="2" step="2">
</label>

• number

number 類型用于應(yīng)該包含數(shù)值的輸入域,并且我們還可以對期進(jìn)行設(shè)置

<label>
    數(shù)量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">
</label>

屬性

input元素的新增屬性：

• Autocomplete：自動完成功能.記錄用戶之前輸入的內(nèi)容，并在下次輸入時自動提示完成輸入
  • 屬性值： on/off
  • 可以在form表單上使用喳整，對整張表單的所有控件進(jìn)行自動完成的開關(guān)
  • 也可以在input上使用谆构，對特定輸入框進(jìn)行修改。
  • 絕大部分瀏覽器框都，默認(rèn)開啟搬素。
• require 表單中必須填寫的部分
• novalidate 屬性:屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。
  • 對于input框測試無效
• pattern屬性:pattern 屬性描述了一個正則表達(dá)式用于驗證input元素的值魏保。

第九章 網(wǎng)頁多媒體

在H5出現(xiàn)之前熬尺，網(wǎng)頁上的音樂和視頻播放器基本都是基于第三方插件，例如flash谓罗。由瀏覽器內(nèi)部實(shí)現(xiàn)video和audio粱哼。

音頻播放

<audio src="demo.mp3"></audio>

默認(rèn)情況下，audio標(biāo)簽支持mp3檩咱，ogg和wav格式的音頻文件揭措。并且不顯示控制條。

<audio src="demo.mp3" controls="controls"></audio>
<!-- 使用controls屬性顯示控制條 -->

因為不同瀏覽器對音頻格式的支持不一致税手，為了能夠讓瀏覽器正常播放音頻文件蜂筹，我們通常準(zhǔn)備三種格式的音頻，存放于source標(biāo)簽下芦倒，瀏覽器將識別第一個支持的格式,而對于不支持音頻標(biāo)簽的瀏覽器（通常是ie8以下）艺挪，將顯示標(biāo)簽內(nèi)的文字。

https://www.runoob.com/tags/tag-audio.html

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
您的瀏覽器不支持音頻播放
</audio>

audio標(biāo)簽有一些屬性提供給我們進(jìn)行設(shè)置：

• controls ： 顯示控制條 controls = 'controls'
• loop : 歌曲循環(huán) 默認(rèn)是false
• autoplay : 自動播放 默認(rèn)值為false

我們當(dāng)然可以使用shadow-root來對控制條進(jìn)行樣式上的設(shè)置,但是自定義起來更為方便,在H5中的audio標(biāo)簽提供了一些DOM對象的屬性和方法供我們自定義音頻播放

屬性:

• currentTime 獲取當(dāng)前播放時間
• duration 獲取歌曲的總時間
• paused 是否暫停 返回true/false
• volume 設(shè)置或返回音頻的音量 最大為1
• • muted 靜音播放

方法:

• play() 播放歌曲
• pause() 暫停歌曲
• load()重新加載歌曲

事件:

• play 播放事件
• pause 暫停事件
• timeupdate 播放位置更改
• volumechange 音量更改
• loadstart兵扬，durationchange麻裳，loadeddata，progress器钟，canplay津坑，canplaythrough等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>網(wǎng)頁多媒體</pre>
    <div id="outbox" style="width: 300px;height: 5px;background: #ccc;position: relative;">
        <div id="inbox" style="height: 100%;width: 0px;background: blue;position: absolute;left: 0;top: 0;"></div>
        <div id="bar" style="width: 10px;height: 20px;background: blue;position:absolute;left: 0px;top: -7.5px;"></div>
    </div>
    <br>
    <br>
    <br>
    <audio>
        <source src="demo.mp3" type="audio/mpeg">
    </audio>
    <br>
    <button id="btn1">播放/暫停</button>
    <button id="btn2">靜音</button>
    <input type="range" name="volume" max="1" step="any" value="1">
    <script type="text/javascript">
        var btns = document.getElementsByTagName('button')
        var audio = document.getElementsByTagName('audio')[0]
        var inp = document.getElementsByTagName('input')
        var voice = null;
        var barLeft = 0;
        audio.oncanplay = function(){
            voice = this.volume;
            inp[0].value = voice;
        }
        inp[0].onchange = function(){
              voice = audio.volume = inp[0].value

        }
        btns[0].onclick = function(){
            if (audio.paused) {
                audio.play()
            }else{
                audio.pause()
            }
        }
        btns[1].onclick = function(){
            if (audio.volume) {
                inp[0].value = audio.volume = 0
            }else{
                inp[0].value = audio.volume = voice
            }
        }
        audio.ontimeupdate = function(){
            var rate = this.currentTime / this.duration;
            console.log(this.currentTime)
            inbox.style.width = parseInt(outbox.style.width)*rate + 'px';
            bar.style.left = parseInt(outbox.style.width)*rate + 'px';
        }
        bar.onmousedown = function(event){
            var leftVal = event.clientX - this.offsetLeft;
            document.onmousemove = function(event){
                barLeft = event.clientX - leftVal;
                if (barLeft<0) {
                    barLeft = 0;
                }else if (barLeft>outbox.offsetWidth + bar.offsetWidth) {
                    barLeft = outbox.offsetWidth + bar.offsetWidth;
                    
                }
                inbox.style.width = barLeft + 'px';
                bar.style.left = barLeft + 'px'
                audio.currentTime = barLeft/parseInt(outbox.style.width)*audio.duration
                window.getSelection().removeAllRanges()
            }

        }
        document.onmouseup = function(){
            this.onmousemove = null;
        }

    </script>
</body>
</html>

視頻播放

視頻播放使用的是video標(biāo)簽

https://www.runoob.com/tags/tag-video.html

<video src="demo.MP4"></video>

video標(biāo)簽?zāi)J(rèn)不會播放,顯示黑屏,并且大小為原大小.

同樣,video視頻資源也可以寫在source標(biāo)簽下,支持三種格式:MP4, WebM, 和 Ogg.對于ie8同樣不支持.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標(biāo)簽。
</video>

video標(biāo)簽的屬性和audio類似

• autoplay
• controls
• width
• height
• loop
• muted 靜音播放
• poster 載入時的圖像

方法:

• play()
• pause()
• load()

事件:

• play 播放事件
• pause 暫停事件
• timeupdate 播放位置更改
• volumechange 音量更改
• loadstart傲霸，durationchange疆瑰，loadeddata，progress昙啄，canplay穆役，canplaythrough等

字幕

對于視頻文件,我們可以使用track標(biāo)簽攜帶字幕,但是瀏覽器基本不支持,現(xiàn)在的解決方案一般是內(nèi)嵌字幕

http://www.w3school.com.cn/tags/tag_track.asp

第十章 QuerySelector

第十一章 classList

在HTML5 API里，頁面DOM里的每個節(jié)點(diǎn)上都有一個classList對象梳凛，程序員可以使用里面的方法新增耿币、刪除、修改節(jié)點(diǎn)上的CSS類韧拒。使用classList淹接，程序員還可以用它來判斷某個節(jié)點(diǎn)是否被賦予了某個CSS類十性。其實(shí)類似的方法已經(jīng)在JQuery中實(shí)現(xiàn)了.

查看classList

<div class="a b c"></div>
<script type="text/javascript">
    console.log(document.getElementsByTagName('div')[0].classList);
</script>

DOMTokenList[3]
0: "a"
1: "b"
2: "c"
length: 3
value: "a b c"
__proto__: DOMTokenList

其實(shí)classList的本質(zhì)就是DOMTokenList,DOM標(biāo)記列表

classList的API

屬性:

• length 返回css類的個數(shù)

同時我們可以使用toString方法格式化classList

console.log(document.getElementsByTagName('div')[0].classList.toString())

等同于document.getElementsByTagName('div')[0].className

方法:

• item() 支持一個參數(shù),為類名的索引值,返回響應(yīng)類名
• add() 添加新的類名 等同于jq中的addClass()
• remove() 刪除一個類名 等同于jq中的removeClass()
• toggle() 傳遞一個類名,如果對象中存在則刪除,返回false,如果沒有則添加,返回true 類似jq中的toggleClass()
• contents() 判斷是否存在該類名 類似jq中的hasClass()

注意 無論是添加或者刪除,classList并不能一次執(zhí)行操作多個類名,而JQuery僅僅只需要空格分隔即可

    $('div').addClass('d f');
    console.log($('div'));

第十二章 歷史記錄

在HTML中可以通過window.history操作訪問歷史狀態(tài),只存在長度這一個可用值,前進(jìn)后退不能改變歷史記錄,但是在H5之前,僅僅能做到前進(jìn)后退,并不能更多的對歷史記錄進(jìn)行操作.

<a href="#news">首頁</a>
<a href="#goods">商品</a>
<button>前進(jìn)</button>
<button>后退</button>
<button>刷新</button>

1. window.history.forward(); // 前進(jìn)
2. window.history.back(); // 后退
3. window.history.go(); // 刷新 location = location

界面上的所有JS操作不會被瀏覽器記住，就無法回到之前的狀態(tài),例如我們在利用Ajax技術(shù)進(jìn)行翻頁操作的時候,瀏覽器地址欄沒有發(fā)生變化,就不會記住歷史記錄,我們一旦刷新頁面,Ajax操作的翻頁就會消失.原有的方法是記錄頁面的哈希值,但是沒有現(xiàn)在方便.

HTML5新增了歷史記錄的API接口,新增了兩個方法,提供了一個事件監(jiān)聽瀏覽器的前進(jìn)和后退.幫助我們手動的添加歷史記錄.

當(dāng)ajax進(jìn)行翻頁操作時,我們可以通過js將當(dāng)前頁面的信息記錄到歷史記錄中.如果我們需要操作前進(jìn)后退,可以用事件監(jiān)聽函數(shù)獲取我們在歷史記錄中存儲的頁面信息,從而能夠由后臺獲取所需的數(shù)據(jù).

• history.pushState(放入歷史中的狀態(tài)數(shù)據(jù), 設(shè)置title(現(xiàn)在瀏覽器不支持)塑悼， 改變歷史狀態(tài))
• history.replaceState(修改歷史記錄的狀態(tài)數(shù)據(jù), 設(shè)置title(現(xiàn)在瀏覽器不支持)劲适， 改變歷史狀態(tài))
• popstate 監(jiān)聽瀏覽器的前進(jìn)后退操作

<span id="news">新聞</span>
<span id="music">音樂</span>
<script type="text/javascript">
locationHref = location.href
news.onclick = function(){
    history.pushState('xinwen','',locationHref+'#news');
    console.log(history)
}
music.onclick = function(){
    history.replaceState('yinyue','',locationHref + '#music');
    console.log(history)
}
window.addEventListener("popstate", function(){
    console.log(history.state);
})
</script>
</html>

第十三章 全屏

除了使用F11可以使網(wǎng)頁全屏以外,HTML5提供了一個新的API接口幫助我們實(shí)現(xiàn)元素或者頁面的全屏顯示

• requestFullScreen() 方法,直接在元素上進(jìn)行調(diào)用

注意全屏API的兼容性問題,

• webkitRequestFullScreen()
• mozRequestFullScreen()

<div style="width: 200px;height: 150px">
    ![](fate.jpg)
</div>
<script type="text/javascript">
  window.addEventListener('keyup',function(e){
    if (e.keyCode == 70) {
        document.getElementsByTagName('body')[0].webkitRequestFullScreen()
    }
},false)
</script>

兼容性判斷:

var elem = 需要全屏的元素;
if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
  elem.requestFullScreen();
}

第十四章 Application Cache(廢棄)

一個離線網(wǎng)絡(luò)應(yīng)用程序就是一個URL的列表——HTML,CSS,JavaScript,圖片,或者其他類型
的資源。
把這些資源,在本地緩存下來,當(dāng)你嘗試在沒有網(wǎng)絡(luò)連接時訪問網(wǎng)絡(luò)應(yīng)用程序,你的網(wǎng)絡(luò)瀏
覽器將自動切換并使用本地代替拢肆。

本地緩存列表依賴于.manifest清單文件,文件規(guī)定了緩存的規(guī)則

CACHE MANIFEST
# 這一句必須存在,而且必須放在頭部
CACHE
#這一句指明要緩存的內(nèi)容
NETWORK#聲明用于指定無需緩存的文件
FALLBACK
#這個聲明允許你在資源不可用的情況下,將用戶重定向到特定文件
#(當(dāng)更新文件不成功時,默認(rèn)使用原來的文件)

創(chuàng)建一個項目,使用http協(xié)議形式打開測試緩存是否成功

manifest

CACHE MANIFEST
###
CACHE:
01.html
01.js
01.css
NETWORK:
fate.jpg
FALLBACK

01.html

<!DOCTYPE html>
<html lang="en" manifest="my.manifest">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div>
    ![](fate.jpg)
</div>
<span>你好</span>
</body>
<script type="text/javascript" src='01.js'>

</script>
</html>

01.css

div{
    width: 200px;height: 150px;
}
img{
     width:100%; 
     height:100%
}

01.js

document.getElementsByTagName('img')[0].onclick = function(e){
    this.webkitRequestFullScreen();
    e.preventDefault()
}

訪問一次之后查看控制臺,關(guān)閉網(wǎng)絡(luò)并刷新,發(fā)現(xiàn)圖片并沒有加載,其他元素正常顯示

但是,當(dāng)我們修改被緩存文件的內(nèi)容時,更改并不能通過刷新獲取,這是因為瀏覽器因為默認(rèn)優(yōu)先使用了緩存,所以,當(dāng)我們寫一個用于離線緩存的網(wǎng)頁時,每一次修改必須修改manifest文件.

第十五章 Web Storage

JS在瀏覽器的生產(chǎn)環(huán)境中并不能操作本地文件,我們通常利用cookie來實(shí)現(xiàn)客戶端的數(shù)據(jù)存儲.
HTML5 提供了幾種在客戶端存儲數(shù)據(jù)的新方法,即localStorage减响、sessionStorage、 WebSql Database郭怪。前面兩個適用于存儲較少的數(shù)據(jù)一般稱為簡單存儲,而WebSql Database適用于存儲大型的,復(fù)雜的數(shù)據(jù);

簡單存儲與cookie的區(qū)別：

web存儲安全性較高支示，在數(shù)據(jù)量上可以達(dá)到5M,而cookie最多也就4KB,或者20個key/value對.

<body>
<script>
//如不設(shè)置聲明周期,關(guān)閉瀏覽器打開后即消失
document.cookie="name=zhangsan";
alert(document.cookie);
//關(guān)閉瀏覽器不會消失
localStorage.setItem("name","lisi");
alert(localStorage.getItem("name"));
//關(guān)閉瀏覽器會消失
sessionStorage.setItem("name","wangwu");
alert(sessionStorage.getItem("name"))
</script>
</body>

localStorage/sessionStorage都有相同的API

• localStorage.length 獲得storage中的個數(shù)
• localStorage .key(n) 獲得storage中第n個鍵值對的鍵
• localStorage.key = value
• localStorage.setItem(key, value) 添加
• localStorage.getItem(key)獲取
• localStorage.removeItem(key) 移除
• localStorage.clear() 清除

<script>
window.onload = function() {
    var names = document.getElementsByName("names")[0];
    var pass = document.getElementsByName("pass")[0];
    var save = document.getElementsByName("save")[0];
    if (localStorage.getItem("names") && localStorage.getItem("pass")) {
        names.value = localStorage.getItem("names");
        pass.value = localStorage.getItem("pass");
        save.checked = true;
    }
    save.onclick = function() {
        if (save.checked) {
            localStorage.setItem("names", names.value);
            localStorage.setItem("pass", pass.value);
        } else {
            localStorage.removeItem("names");
            localStorage.removeItem("pass");
        }
    }
}
</script>
</head>

<body>
    用戶名:
    <input type="text" name="names">
    <br/> 密碼 :
    <input type="password" name="pass">
    <br/> 是否永久保存 :
    <input type="checkbox" name="save">
</body>

第十六章 File

HTML5新增了文件API,提供客戶端本地操作文件的可能.

我們可以通過file表單或拖放操作選擇文件,還可以通過JavaScript讀取文件的名稱、大小鄙才、類型颂鸿、和修改時間.

file類型的input表單新增了files屬性,保存我們上傳文件的信息,如果要實(shí)現(xiàn)多文件上傳,可以設(shè)置input的multiple屬性.

可以使用accept屬性規(guī)定文件上傳的MIME類型 例如'image/jpeg'

<form action="#">
        <div class="form-group">
            <label for="input_1">請選擇文件</label>
            <input id="input_1" class="form-control" name="input_1" type="file">
        </div>
        <div class="form-group">
            <button id="btn_1" class="btn btn-default" type="button">讀取文件信息</button>
        </div>
</form>
<pre id="result"></pre>
</div>
<script>
var btn = document.querySelector('#btn_1');
var input = document.querySelector('#input_1');
btn.addEventListener('click', function() {
    // 獲取文件域中選擇的文件
    // var file = input.files[0];
    var file = input.files.item(0);
    if (file) {
        result.innerHTML =
            '文件名：' + file.name + '\n文件最近修改時間：' + file.lastModifiedDate+ '\n文件類型：' + file.type + '\n文件大小：' + file.size + '字節(jié)'
    } else {
        result.innerHTML = '沒有選擇任何文件';
    }
});
</script>

toLocaleTimeString toLocaleDateString

第十七章 拖拽操作

17.1 頁面內(nèi)拖拽

對于被拖拽的元素,HTML5增加了三個事件用于監(jiān)聽拖拽的過程

• dragstart 拖拽開始
• drag 正在拖拽
• dragend 拖拽結(jié)束

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
</body>
<script type="text/javascript">
    two.ondragstart = function(e){
        // e.preventDefault();
        console.log(e);
        e.dataTransfer.setData("Text",e.target.id);
        console.log(e.dataTransfer.getData("Text",e.target.id));
        one.innerHTML = '開始'
    }
    two.ondrag = function(e){
        one.innerHTML += '拖動中'
    }
    two.ondragend = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

想要拖拽元素,必須設(shè)置draggable屬性

頁面默認(rèn)的動作是拖拽后回到原位

在拖動階段攒庵，我們可以存儲被拖動元素的屬性或者狀態(tài)到事件對象的dataTransfer中嘴纺，如果出現(xiàn)跳轉(zhuǎn)，則是瀏覽器默認(rèn)的事件被觸發(fā)浓冒，我們需要使用e.preventDefault()來阻止默認(rèn)事件栽渴。

投放區(qū)的事件

對于被拖的元素而言，拖向何處則為投放區(qū)稳懒，投放區(qū)的事件如下：

• dragenter 被拖放元素進(jìn)入
• dragover 被拖放元素移動
• dragleave 被拖放元素離開

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
</body>
<script type="text/javascript">
    one.ondragenter = function(e){
        // e.preventDefault();
        console.log(e);
        one.innerHTML = '開始'
    }
    one.ondragover = function(e){
        one.innerHTML += '拖動中'
    }
    one.ondragleave = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

而drop則是監(jiān)聽被拖拽物拖拽到投放區(qū)并松開鼠標(biāo)的事件闲擦，他可以接收到dataTransfer中的數(shù)據(jù)，所以我們的頁面內(nèi)拖拽可以寫成如下效果：

<style type="text/css">
    *{
        box-sizing: border-box;
    }
</style>
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;">
        <div style="width: 50px;height: 100px;border:1px solid black;">第一個</div>
        <div style="width: 50px;height: 100px;border:1px solid pink;">第二個</div>
    </div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
two.onmousedown = function(e){
    e.target.draggable = true;
    e.target.ondragstart = function(ev) {
        ev.dataTransfer.setData("Text", ev.target.innerHTML);
    }
    e.target.ondragend = function(){
        two.removeChild(this)
    }
}
one.ondrop = function(e) {
    var div = document.createElement('div')
    div.style = "width: 50px;height: 100px;border:1px solid black;"
    div.innerHTML = e.dataTransfer.getData("Text")
    this.appendChild(div)
}
</script>

• 對于谷歌瀏覽器场梆，e.dataTransfer.setData(key,value)會導(dǎo)致拖拽到投放區(qū)域外的時候瀏覽器默認(rèn)搜索設(shè)置的值墅冷。如果需要，我們可以屏蔽它
• 對于火狐瀏覽器或油，沒有e.dataTransfer.setData(key寞忿，value)還不行。我們可以直接設(shè)置鍵值對為null顶岸，"";
• 最新版本的谷歌和火狐瀏覽器沒有發(fā)現(xiàn)問題
• drop事件并不能直接觸發(fā),因為默認(rèn)的松開鼠標(biāo)我們的拖拽物會返回原來的位置,并不會掉落,所以我們應(yīng)該阻止投放區(qū)域的默認(rèn)事件.

7.2 拖拽上傳

經(jīng)過觀察腔彰，事件對象中的dataTransfer也存在files屬性，我們可以用熟悉的方法上傳拖拽進(jìn)來的文件：

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
one.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer.files[0]);
}
</script>

然后做Ajax文件上傳即可

one.ondrop = function(e) {
    e.preventDefault()
    var file = e.dataTransfer.files[0];
    var formData = new FormData();
    formData.append("aa", file);
    var xml = new XMLHttpRequest();
    xml.open("post", url, false);
    xml.send(formData);
}