今天看了《html5 從入門到精通》這本書，感覺閱讀下來很舒心，不像閱讀其他書籍很揪心。html增加的知識點，我覺得非常有價值，看完幾章記錄了一些內容，不但能鞏固，也為下次遺忘知識點做好準備。

一、視頻（video）

　　video元素支持三種視頻格式：Ogg,mpeg4和WebM。

　　Ogg：帶有 Thera 視頻編碼和 Vorbis 音頻編碼的Ogg文件

　　MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG4文件

　　WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

　　1.使用方式

　　第一種：

　　<video src="movie.ogg" width="320" height="240" controls="controls">

　　　　Your browser does not support the video tag.

　　</video>?

　　第二種：

　　<video width="320" height="240" controls="controls">

　　　　<source src="movie.ogg" type="video/ogg">

　　　　<source src="movie.mp4" type="video/mp4">

　　　　Your browser does not support the video tag.

　　</video>?

　　2.屬性

　　autoplay：如果出現該屬性，則視頻在就緒后馬上播放。

　　control：向用戶顯示空進，比如播放按鈕。

　　height：播放器高度。

　　width：播放器寬度。

　　loop：當媒介文件完成播放后再次開始播放。

　　preload：視頻在頁面加載時進行加載，并預備播放。

　　src：要播放視頻的URL。

?

二、音頻（audio）

　　video元素支持三種視頻格式：Ogg Vorbis,mp3和Wav。

　　使用方式和視頻video類似，屬性少了width和height設置。

?

三、繪制圖像（Canvas）

　　例：

　　html代碼：

<canvas id="myCanvas" width="400" height="200" style="border: 1px solid gray;">Your browser does not support the canvas element. </canvas>

　　js代碼：

<script type="text/javascript">$(function(){/* 漸變 */var txt = document.getElementById("myCanvas");var c = txt.getContext("2d");var grd = c.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#0000FF");c.fillStyle = grd;c.fillRect(0,0,175,50);/* 添加圖片 */var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");var img = new Image();img.src = "images/p1.jpg";cxt.drawImage(img, 0 , 0);})</script>

如下圖所示：

?

四、web存儲

localStorage.lastname = "Smith"; /* 永久保存 */$(document).data("lastname","Ann");console.log("lastname:"+localStorage.lastname+" ,"+$(document).data("lastname")); /* 分別html5、jquery存儲數據 *//* 訪問頁面次數 */if(localStorage.pagecount){localStorage.pagecount = Number(localStorage.pagecount) + 1;}else{localStorage.pagecount = 1;}console.log("pagecount:"+localStorage.pagecount);sessionStorage.firstname = "wiy"; /* 瀏覽器關閉就刪除 */console.log(sessionStorage.firstname);

?

五、input類型

　　email,url,number,range,date picker(date,month,week.time,datetime,datetime-local),search,color，用例子的顯示說明，還存在瀏覽不兼容問題。

　　

<form action="" method="post">Email: <input type="email" name="user_email"/><br/>Url: <input type="url" name="user_url"/><br/>Number: <input type="number" name="points" step="3" min="0" max="10" value="3"/><br/>Range: <input type="range" name="points" min="1" max="10"/><br/>Date: <input type="time" name="user_date"/><br/>Search: <input type="search" name="user_search"/><br/></form>

如下圖所示：

六、表單元素

　　datalist,keygen和output，兼容性很差，我這邊沒有Opera，所以基本上沒看出來是什么樣。

　　html代碼：

　　　　　　<datalist id="url_list"><option label="W3School" value="W3School"/><option label="Google" value="Google"/><option label="Microsoft" value="Microsoft"/></datalist><br/>Encryption: <keygen name="security"/><br/><input type="number" id="num_a"/>+<input type="number" id="num_b"/>=<output id="result" onforminput="resCalc();"></output>

　　js代碼：

　　　　　　　　　function resCalc(){var num_a = document.getElementById("num_a").value;var num_b = document.getElementById("num_b").value;var result = document.getElementById("result").value;result = Number(num_a) + Number(num_b);alert(result);}

　　今天就看了這些，感覺布局分塊很清晰，但是兼容性不好，ie里基本上不行，讓用戶下載Google Chrome Frame不太現實，希望html5能早日發揮真正作用，做到傳統化。

　　

　　

轉載于:https://www.cnblogs.com/tattoo/p/3498203.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的《html5 从入门到精通》读书笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。