HTML5技術要點

時間 2019-11-05

標籤 html5 html 技術要點欄目 HTML5 简体版

原文原文鏈接

HTML5技術要點

1.HTML5視頻

 
    <!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html> 
   

注:control 屬性供添加播放、暫停和音量控件。<video> 與 </video> 之間插入的內容是供不支持 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> 
   

注:video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式

2.音頻和視頻其餘屬性同樣<audio>

3 .HTML5 拖放

瀏覽器支持:

Internet Explorer 九、Firefox、Opera 十二、Chrome 以及 Safari 5 支持拖放。javascript

註釋：在 Safari 5.1.2 中不支持拖放。css

 
    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//設置被拖數據的數據類型和值
}
 
function drop(ev)
{
ev.preventDefault();//阻止對元素的默認處理方式(默認地，沒法將數據/元素放置到其餘元素中)
var data=ev.dataTransfer.getData("Text");//得到被拖的數據,該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目標元素）中
}
</script>
</head>
<body>
 
<p>請把 W3School 的圖片拖放到矩形中：</p>
 
<div id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
 
<br />
 
<img id="drag1"
src="/i/eg_dragdrop_w3school.gif"
draggable="true" //爲了使元素可拖動，把 draggable 屬性設置爲 true
ondragstart="drag(event)"//拖動時調函數,它規定了被拖動的數據
/>
 
</body>
</html> 
   

4.HTML5畫布

建立Canvas元素

向 HTML5 頁面添加 canvas 元素。規定元素的 id、寬度和高度：html

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

 
     <script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 來尋找 canvas 元素
var cxt=c.getContext("2d");//是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法
...
</script> 
    

5.HTML5 內聯 SVG

在 HTML5 中，您可以將 SVG 元素直接嵌入 HTML 頁面中：

 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg> 
    

6.HTML5地理定位

主要代碼以下:html5

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕，得到您的座標：</p>
<button onclick="getLocation()">試一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
function showError(error)//顯示錯誤信息
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

7.HTML5web存儲java

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

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

localStorage :

 
       <script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉！您的瀏覽器不支持 Web Storage ...";
}
</script> 
      

sessionStorage:

 
       <script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已經點擊這個按鈕 " + sessionStorage.clickcount + " 次。";
} else {
document.getElementById("result").innerHTML = "抱歉！您的瀏覽器不支持 Web Storage ...";
}
}
</script> 
      

8.HTML5應用程序緩存

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

如需啓用應用程序緩存，請在文檔的 <html> 標籤中包含 manifest 屬性：

 
       <!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html> 
      

注:

每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。manifest 文件的建議的文件擴展名是：".appcache"。

請注意，manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。

實例 - 完整的 Manifest 文件

 
       CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
# 2012-02-21 v1.0.0
/theme.css //會自動緩存這三個
/logo.gif
/main.js
 
NETWORK: - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
login.asp
-----------
* //指示全部其餘資源/文件都須要因特網鏈接
 
FALLBACK: - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）
/html5/ /404.html
註釋：第一個 URI 是資源，第二個是替補。用404代替html5 
      

重要的提示：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。