html5知識點整理總結

阿新 • • 發佈：2019-01-18

1.html5新元素：

新的輸入型別：email；url；number；range；Date pickers (date, month, week, time, datetime, datetime-local)；search；color
新的表單元素：datalist；keygen；output

2.video和audio

<html>
<body>
<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>
</body>
</html>
Ogg = 帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
MPEG4 = 帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案
WebM = 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案
屬性值描述
autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放。
controls controls 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕。
height pixels 設定視訊播放器的高度。
loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
preload preload 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
src url 要播放的視訊的 URL。
width pixels 設定視訊播放器的寬度。

<html>
<body>
<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>

3.客戶端儲存

HTML5 提供了兩種在客戶端儲存資料的新方法：
localStorage - 沒有時間限制的資料儲存
sessionStorage - 針對一個 session 的資料儲存
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。
對於不同的網站，資料儲存於不同的區域，並且一個網站只能訪問其自身的資料。
HTML5 使用 JavaScript 來儲存和訪問資料。

localStorage 方法:
localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用。
如何建立和訪問 localStorage：例項
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
記錄訪問次數
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>重新整理頁面會看到計數器在增長。</p>
<p>請關閉瀏覽器視窗，然後再試一次，計數器會繼續計數。</p>
</body>
</html>

sessionStorage 方法：
sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後，資料會被刪除。
如何建立並訪問一個 sessionStorage：
例項
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
記錄本次瀏覽器的訪問次數
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

4.canvas

矩形：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
</script>
線條：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
圓形：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
圖片:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>

5.HTML5 中的一些有趣的新特性：
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search

html5知識點整理總結

html5知識點整理總結

《響應式Web設計——HTML5和CSS3實戰》——知識點整理總結(持更~)

Java 知識點整理-12.Java集合框架 Map+HashMap+LinkedHashMap+TreeMap+Collections+泛型固定下邊界+集合框架總結

HTML5知識點總結

【整理】html5知識點5

自動加載類的知識點整理

JavaEE常用小知識點整理

MyBatis知識點整理

Jquery知識點整理

kafka學習筆記：知識點整理

salesforce零基礎學習（七十二）項目中的零碎知識點小總結（一）

MySQL知識點整理

ajax技術整理總結（1）

aNDROIDWEBVIEW整理總結

cmake使用示例與整理總結

JavaScript易錯知識點整理

PHP初入，div知識點整理（特效&字體等元素的使用整理）

17年項目工作知識點小總結------彭記（022）

MySQL:表的操作知識點難點總結:表完整性約束及其他常用知識點二次總結🙄

知識點整理--組合數學

html5知識點整理總結

相關推薦