前端筆記之HTML5&CSS3（上）新特性&音頻視頻&本地存儲&自定義屬性

時間 2020-05-23

標籤前端筆記 html5&css3 html css 特性音頻視頻本地存儲自定義屬性欄目 HTML 简体版

原文原文鏈接

1、HTML5簡介

HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。javascript

2014年10月29日，萬維網聯盟宣佈，通過幾乎8年的艱辛努力，HTML5標準規範終於最終制定完成了，並已公開發布。css

HTML5不只僅是超文本標記語言的新版本，而是一整套瀏覽器新API的綜合：html

新的語義標籤。咱們知道HTML就是超文本標記語言，負責描述的是文檔的語義、結構。HTML5中，提供了很是多的新的標籤，<header>、<section>、<footer>、<nav>、<aside>、<article>、<address>等等。豐富了表單元素。前端

新的本地存儲。HTML若是想往客戶端存儲東西（不是服務器），只能經過cookie。HTML5中提供了一個新的API，叫作本地存儲，可讓瀏覽器輕鬆的在客戶端本地存儲數據。html5

設備兼容特性。HTML5提供了移動設置的全部兼容的API方案，瀏覽器得到攝像頭、陀螺儀、蜂鳴器等等的權利。對於PC瀏覽器，還加上了全屏API和拖放API。java

鏈接特性。HTTP是無鏈接的，你的瀏覽器和服務器之間沒有長久連接，HTML5中提出了web socket特性，可讓瀏覽器和服務器實時連接！好比製做聯機對戰的俄羅斯方塊。css3

新的音頻、視頻。曾幾什麼時候，Flash一統網頁中的音視頻，此時HTML5提出了新的video和audio標籤。可讓網頁輕鬆的，不經過安裝任何插件（好比不用安裝Adobe Flash Player）網頁播放視頻、音頻。程序員

新的畫布和svg：製做網頁的banner、遊戲，能夠不用Flash了！如今有了Canvas！咱們要用canvas製做手機遊戲，好比開心愛消除、Flappy Bird。web

性能與集成特性：好比XMLHTTPRequest對象出了2代版本，咱們能夠得到進度的API。HTML如今提供了網頁性能的API，可以檢測HTTP請求的擁堵、序列等等。正則表達式

新的樣式表：CSS3來了！炫酷爆了！

HTML5不是HTML的新版本，而是包含HTML、CSS、JavaScript、瀏覽器的一整套API！

因此HTML5簡稱爲H5有道理！不用刻意強調是HTML，由於HTML就是一個超文本標記語言，除了描述語義，什麼都沒有！可是你看見沒有HTML5幹到了HTTP！

1.1兼容性如何？

HTML5的兼容程度到底怎麼樣了呢？

兼容性測試：www.webqianduan.cn/css3test/

Chrome

Firefox

IE 11

IE9

IE8

HTML5的實現，特別依賴瀏覽器！因此如今PC端你們都在審慎使用HTML5，可是在移動端，HTML5已經火爆全球！！！整個微信中充斥HTML5小頁面！婚禮請柬、炫酷頁面。

華爲P9、iPhone中的測試：

量化評分網站：http://html5test.comHTML5一共555個新特性，每一個小點算一個，不分權重。

特性兼容性查詢網站https://caniuse.com/HTML5全部特性（包括CSS3新屬性，選擇器）都可以進行查詢，能夠精確的告訴你什麼瀏覽器兼容，什麼不兼容。

統計研究院：

http://tongji.baidu.com/

http://tongji.baidu.com/data/

2、HTML5骨架和語法改變

2.1HTML5新骨架

<!DOCTYPE html> →DTD極大簡化DTD的書寫 <html>
<head>
    <meta charset="UTF-8" /> →字符集設置 <title>Document</title>
</head>
<body>

</body>
</html>

這個DTD是IE67不支持，IE8開始支持。

<!DOCTYPE html>

IE8開始支持，若是爲了更大用戶兼容，還要寫之前的寫法

2.2HTML5新的語言規定

1、HTML5中，屬性的引號能夠省略（除了有不少屬性的）

2、HTML5中標籤不分大小寫

<DiV>標籤不分大小寫</dIv>

3、HTML5中，自封閉標籤能夠省略「/」關閉符號

<br>

4、HTML5中，type類型能夠不寫

XHTML系列，在HTML5誕生以後就中止維護了，在HTML5中規範都放寬了標準，可是IE678對上面的支持很差。

做爲老一代前端工程師，咱們要保持風骨，在HTML5中也要以XHTML1.0的規範嚴格要求本身。

3、HTML5新增語義化標籤

3.1新佈局標籤

傳統佈局風格：

<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>

HTML5推出了新的大綱標籤，都是雙標籤，都有div的性質，塊級元素，是容器

如下是HTML5新的佈局標籤：

<header></header> 頭部的語義 <footer></footer> 尾部的意義 <nav></nav> 導航語義 <main></main> 主體內容 <article></article> 文章語義 <section></section> 區域語義，代替div <aside></aside>     側邊語義

上面這些標籤，都是塊級元素，沒有任何默認樣式，容器級標籤，能夠包裹任何東西，在語義上都比div大，它們能包裹div，可是div不能包裹它們。

新的提綱標籤，IE9開始兼容，IE8仍是不能用這些標籤，移動端中能夠嗷嗷用，由於手機沒有IE。

<header class="header">
    <h1 class="logo"></h1>
    <section class="right">
    </section>
</header>
<nav>
    <ul>
        <li>導航</li>
        <li>導航</li>
        <li>導航</li>
        <li>導航</li>
    </ul>
</nav>
<section class="content">
    <aside>側邊欄</aside>
    <main>
        <article>
            <header><h2>文章標題</h2></header>
            <section> 文章內容 </section>
        </article>
    </main>
</section>
<footer> 底部 </footer>

3.2新的小語義標籤

以前XHTML1.0中語義標籤只有：p、ul、ol、dl、table等，HTML5極大豐富了語義標籤

● 地址Address：

<address>廣州市天河區棠東東路御富科貿園D座108 點擊查看百度地圖</address>

●縮寫詞語義 abbr：

<p>我們出去玩的時候，記得帶有<abbr title="GPS是英文Global Positioning System（全球定位系統）">GPS</abbr>的手機哈！</p>

●引用語義 cite：

<p>程序員通常不會老年癡呆，由於程序員都死得早，沒有老年。<cite>中科院社會調查局2017年報告</cite></p>

程序語義：code：

<code> for(var i = 0;i < 100;i++){ if(i % 2 == 0){ while(){ console.log() } } } </code>

● 數據和數據標題，figure和figcaption：

數據就是數據圖片、表格。其實普通圖片也能夠稱爲數據。

<figure>定義媒介內容的分組，以及它們的標題。

<figcaption>定義 figure 元素的標題。

<figure>
    <img src="images/1.jpg" >
    <figcaption>這個是我最喜歡的明星，可是有人了</figcaption>
</figure>

●<details> 標籤用於描述文檔或文檔某個部分的細節。

與 <summary> 標籤配合使用能夠爲 details 定義標題。標題是可見的，用戶點擊標題時會顯示出 details。

open 屬性規定 details 是可見的。

<details open="open">
    <summary>中南海</summary>
    <address>北京市西城區南長街81號</address>
    <img src="img/znh.jpg" alt="">
</details>

●對話框語義 dialog

規定 dialog 元素是活動的，用戶可與之交互。

<dialog open>
    <p>您好</p>
    <p>我很好</p>
</dialog>

●保留格式語義 pre：

沒有空白摺疊現象了

<pre> for(var i = 0 ; i < 100 ; i ++){ if(i % 2 == 0){ while(true){ } } } </pre>

●定義語義dfn：

<p><dfn>什麼是浮雲</dfn>通常暗指遊子，浮雲遊子意，落日故人情。</p>

●鍵盤按鍵語義 kbd：

定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它常常用在與計算機相關的文檔或手冊中

p>在QQ中，截圖的快捷鍵是<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>A</kbd></p>

●高亮語義 mark

<mark> 標籤訂義帶有記號的文本，突出顯示。

<p>明每天氣很熱，注意<mark>保暖</mark></p>

●引用語義 q：

<p>咱們學生必須<q>好好學習，每天向上</q></p>

瀏覽器在引用的周圍插入了引號。

●註釋語義，拼音語義：ruby 、rp、rt：

<ruby>定義 ruby 註釋。

<rt>定義 ruby 註釋的解釋。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內容（可選）

<ruby> 漢<rp>(</rp><rt>hàn</rt><rp>)</rp> 子<rp>(</rp><rt>zǐ</rt><rp>)</rp>
</ruby>

●定義樣本文本 samp

<p> 有錢人基本長得醜 <samp>馬雲</samp> 不過張的醜的不必定是有錢人<samp>我</samp>
</p>

●小號文本 small

<p>極品雷事利驅使，淡定繼續作<small>獵奴</small></p>

●時間 time

●變量語義 var

<p>二元一次方程：<var>x</var> = <var>y</var>+ 2</p>

●換行機會 wbr

<p>On the second Friday of term Anthony Bevan, whom all his world called "Bruiser Bevan," House<wbr>master of "B. House" in Hamchester College, sat at dessert with three of his prefects.</p>

●菜單語義 menu：

<menu type="context">
    <menuitem>西紅柿炒番茄</menuitem>
    <menuitem>土豆炒馬鈴薯</menuitem>
    <menuitem>番薯煮地瓜</menuitem>
</menu>

●<meter>標籤訂義已知範圍或分數值內的標量測量。也被稱爲尺度

帶有當前值以及 min、max、high、low 屬性的測量範圍：

<h1>顯示度量：</h1>
<p>張三的分數：<meter min="0" low="40" high="90" max="100" value="95"></meter></p>
<p>李四的成績：<meter min="0" low="40" high="90" max="100" value="65"></meter></p>
<p>王五的成績：<meter min="0" low="40" high="90" max="100" value="35"></meter></p>

●<progress>標籤標示任務的進度（進程）

請結合 <progress> 標籤與 JavaScript 使用，來顯示任務的進度。

下載進度：<progress value="22" max="100"></progress>

●模版存放盒子 template

<template>
    <p><%p%></p>
    <span><%sp%></span>
</template>

就是<script type="text/template"></script>瀏覽器自動給這個標籤隱藏：

3.3選項列表分組標籤

<select>
    <optgroup label="明星">
        <option>張學友</option>
        <option>劉德華</option>
        <option>黎明</option>
        <option>郭富城</option>
    </optgroup>
    <optgroup label="汽車">
        <option>奧拓</option>
        <option>比亞迪</option>
        <option>衆泰</option>
    </optgroup>
</select>

4、HTML5新表單元素

4.1HTML5表單輸入類型

類型	說明
type="email"	限制用戶輸入必須爲Email格式
type="url"	限制用戶輸入必須爲網址格式
type="date"	限制類型爲日期
type="time"	限制類型爲時間
type="month"	限制類型爲月份
type="week"	限制類型爲星期
type="number"	限制用戶輸入必須爲數字
type="range"	滑動條表單，value滑動條的值，min=’0’ max=’100’屬性限制範圍
type="color"	顏色選擇表單 value的值必須爲完整的16進制 value="#ffffff"
type="datetime-local"	本地時間
type="search"	搜索

以上大部分表單元素類型，在手機瀏覽器顯示效果都不同，在觸摸屏鍵盤顯示效果也不同。

4.2 HTML5表單屬性

●autofocus屬性

autofocus 屬性規定在頁面加載時，域自動地得到焦點。

註釋：autofocus 屬性適用於全部 <input> 標籤的類型。

●required屬性

required 屬性規定必須在提交以前填寫輸入域（不能爲空）。

註釋： required屬性適用於如下類型<input>標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

實例：

●placeholder屬性

placeholder 屬性提供一種提示，描述輸入域所期待的值。

註釋：placeholder 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。

提示文本會在輸入域爲空時顯示出現，會在輸入域得到焦點時消失：

●autocomplete 屬性

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

註釋：適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。

當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

<form action="http://www.baidu.com" autocomplete="on">
    <p><input type="text" name="user1" ></p>
    <p><input type="text" name="user2" ></p>
    <p><input type="email" autocomplete="off" ></p>
    <input type="submit" >
</form>

●multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。

註釋：multiple 屬性適用於如下類型的 <input> 標籤：email 和 file。

●form 屬性

form 屬性規定輸入域所屬的一個或多個表單。

註釋：form 屬性適用於全部 <input> 標籤的類型。

form 屬性必須引用所屬表單的 id：

<form action="" id="user_form">
</form>
<input type="text" name="name" form="user_form" />

●pattern屬性

pattern 屬性規定用於驗證 input 域的模式是正則表達式。

註釋：pattern 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。

下面的例子是驗證11位手機號碼：

●min、max 和 step 屬性

min、max 和 step 屬性用於爲包含數字或日期的 input 類型規定限定（約束）。

max 屬性規定輸入域所容許的最大值。

min 屬性規定輸入域所容許的最小值。

step 屬性爲輸入域規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等）。

註釋：min、max 和 step 屬性適用於如下類型的 <input> 標籤：date pickers、number 以及 range。

下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進爲 3（即合法的值爲 0、3、6 和 9）：

注：屬性和屬性值同樣的狀況下，能夠省略不寫值。

4.3 HTML5表單元素

●datalist 元素

定義和用法：

<datalist> 標籤訂義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

請使用 input 元素的 list 屬性來綁定 datalist。

列表是經過 datalist內的option 元素建立的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

<input type="url" list="url_list" />
<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="text" list="cur" />
<datalist id="cur">
    <option value="奧迪汽車">奧迪</option>
    <option value="奧利奧餅乾">奧利奧</option>
    <option value="迪奧汽車">迪奧</option>
    <option value="寶馬汽車">寶馬</option>
    <option value="悍馬汽車">悍馬</option>
    <option value="寶寶汽車">寶寶</option>
    <option value="衆泰汽車">衆泰</option>
    <option value="大衆汽車">大衆</option>
</datalist>

5、HTML5音頻（audio）

5.1音頻格式

5.2音頻標籤

基本寫法：

兼容寫法：

<audio controls>
    <source src="music/yinyue.mp3">
    <source src="music/yinyue.ogg">
    <a href="http://www.baidu.com">您的瀏覽器太舊了，請升級！</a>
</audio>

5.3音頻標籤屬性

6、HTML5視頻（video）

6.1視頻格式

6.2視頻標籤語法

基本語法：

兼容語法：

<video controls>
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
    <a href="http://www.baidu.com">您的瀏覽器太舊了，請升級！</a>
</video>

6.3視頻標籤屬性

音頻和視頻標籤JS的API大全：

6.4音頻/視頻標籤JavaScript API

6.4.1事件監聽

當視頻播放或中止時觸發的事件

v.onpause = function(){}

v.onplay = function(){}

6.4.2方法

play() 播放音頻/視頻

pause() 暫停音頻/視頻

load() 從新加載音頻/視頻元素

注意：這是原生JS的方法，不能直接用jQuery，但能夠間接使用。

$()[0].play() 經過[0]把選中的元素轉換成原生對象就可使用這些方法了。

6.4.3音頻視頻JS API屬性

paused 設置或返回音頻/視頻是否暫停

muted 設置或返回音頻/視頻是否靜音

currentTime 設置或返回音頻/視頻中的當前播放位置（以秒計），製做加速減速播放

playbackRate 設置或返回音頻/視頻播放的速度

duration 返回當前音頻/視頻的長度（以秒計）

volume 設置或返回音頻/視頻的音量 1.0最高音量（默認）0.5一半音量（50%） 0.0靜音

7、HTML5本地存儲

7.1 本地存儲簡介

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

HTML5 使用 JavaScript 來存儲和訪問數據。

7.2 localStorage語法

localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。localStorage 和sessionStorage分別是本地存儲和會話存儲，統稱本地存儲。

存儲數據：localStorage.setItem(‘key’,’value’);

讀取數據：localStorage.getItem(‘key’)

存儲數據：sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

讀取數據：sessionStorage.getItem('testKey'); //返回testKey對應的值

刪除指定數據：localStorage.removeItem(‘key’);

清空全部數據：localStorage.clear()

本地存儲數據庫會自動的爲每個網站（IP地址）創建一個獨立的表格，在同一個網站（IP地址）下數據是能夠共享的，可是不能跨域。不能跨瀏覽器存儲，每一個瀏覽器都有本身的小數據庫，Chrome存儲的，火狐看不見。

localStorage是簡單的數據庫，沒有查詢功能，不能用sql操做，只能簡單的存儲、讀取k-v對。

sessionStorage 瀏覽器窗口一旦關閉，數據就丟失了

localStorage存儲的數據，永遠不丟失，關機，重啓都不會致使數據丟失，除非清除了瀏覽器記錄

7.3使用JSON持久數據

很明顯，若是隻能存儲字符串，這個數據威力不大，因此存儲字符串意義不大，咱們要存儲JSON對象。

數據庫只能存儲字符串，因此存儲JOSN的時候會顯示object

localStorage.setItem('iqianduan.cn_json',{"a":100,"b":200})

此時就要進行一個轉換：

把JSON變爲字符串 → 存儲 → 讀取 → 把字符串轉爲JSON對象

JSON.parse() 把字符串轉爲對象

JSON.stringify() 把對象轉爲字符串

btn[0].onclick = function(){ //要存儲的數據
   var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]} //存儲以前，把數據轉爲字符串
   var dataStr = JSON.stringify(data); //存儲數據
   localStorage.setItem('iqianduan.cn',dataStr); //讀取
   var str = localStorage.getItem('iqianduan.cn'); //轉爲JSON對象
   var dataObj = JSON.parse(str); console.log(dataObj.a) }

當咱們上面的策略都會了，此時JSON能夠很是複雜，本地存儲是沒有字節限制的，此時JSON用字符串保存不會變形。

屢次保存同一個key會覆蓋，全部要追加內容到本地數據庫的時候，必定要先：讀取→修改→再存儲：

btn[0].onclick = function(){ //要存儲的數據
   var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]} //存儲以前，把數據轉爲字符串
   var dataStr = JSON.stringify(data); //存儲數據
   localStorage.setItem('iqianduan.cn',dataStr); //讀取
   var str = localStorage.getItem('iqianduan.cn'); //轉爲JSON對象
   var dataObj = JSON.parse(str); //改變數據
   dataObj.c = 999; dataObj.e = 888; console.log(dataObj) //修改，再存儲新的值
   var dataStr = JSON.stringify(dataObj); localStorage.setItem('iqianduan.cn',dataStr); }

8、自定義屬性和classList

8.1 classList

參考手冊：http://www.runoob.com/jsref/prop-element-classlist.html

classList 屬性返回元素的類名，做爲 DOMTokenList 對象。

該屬性用於在元素中添加，移除及切換 CSS 類。

classList 屬性是隻讀的，但你可使用 add() 和 remove() 方法修改它。

方法	描述
add(class1, class2, ...)	在元素中添加一個或多個類名。若是指定的類名已存在，則不會添加
remove(class1, class2, ...)	移除元素中一個或多個類名。注意：移除不存在的類名，不會報錯
toggle(class, true\|false)	在元素中切換類名。第一個參數爲要在元素中移除的類名，並返回 false。若是該類名不存在則會在元素中添加類名，並返回 true。第二個是可選參數，是個布爾值用於設置元素是否強制添加或移除類，無論該類名是否存在。注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個參數。
contains(class)	返回布爾值，判斷指定的類名是否存在。可能值： true - 元素包已經包含了該類名 false - 元素中不存在該類名

<button>按鈕</button>
<p class="border">這是一段文字</p>
<script type="text/javascript">
    var btn = document.querySelector("button"); var p = document.querySelector("p"); btn.onclick = function(){ //p.className = "border red";//咱們以前的處理方法 爲了避免丟失以前的類名 咱們在增長類名的時候把以前的全部類名重寫一遍
 console.log(p.classList);//該標籤的全部類名集合
                
        //元素.classList.對應的方法()
 p.classList.add("red");//增長類(他不會覆蓋以前的類名)
 p.classList.remove("border");//刪除類(他不會覆蓋以前的類)
 p.classList.toggle("fs");//切換類
 console.log(p.classList.contains("red"));//判斷是否有該類
 } </script>

8.2 自定義屬性

新的HTML5標準容許你在普通的元素標籤裏，嵌入相似data-*的屬性，來實現一些簡單數據的存取。它的數量不受限制，而且也能由javascript動態修改，也支持CSS選擇器進行樣式設置。這使得data屬性特別靈活，也很是強大。有了這樣的屬性咱們可以更加有序直觀的進行數據預設或存儲。

<!-- 在html5以後咱們建議自定義屬性前面加data <p data-自定義屬性名稱="屬性值"></p> -->
<p data-zdy="這是我自定義的屬性">這是一個段落標籤</p>
        
<script type="text/javascript">
    var p = document.querySelector("p"); console.log(p.dataset.zdy);//獲取自定義屬性
 p.dataset.other = "我設置的另外一個自定義屬性";//設置自定義屬性
</script>