Html5學習系列

来源:https://www.cnblogs.com/zmlljx/archive/2020/01/19/12215085.html
-Advertisement-
Play Games

Html5學習系列 HTML5 規定了一種通過 video 元素來包含視頻的標準方法 Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 WebM = 帶有 VP8 視頻編碼和 Vo ...


Html5學習系列

 

 

HTML5 規定了一種通過 video 元素來包含視頻的標準方法

 

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

 

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

 

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

 

如需在 HTML5 中顯示視頻，您所有需要的是：

<video src="movie.ogg" controls="controls">

</video>

control 屬性供添加播放、暫停和音量控制項。

 

 

HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。

 

audio 元素能夠播放聲音文件或者音頻流。

 

<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：

 

實例

 

<audio src="song.ogg" controls="controls">

Your browser does not support the audio tag.

</audio>

 

 

HTML5 拖放實例

 

 

設置元素為可拖放

 

首先，為了使元素可拖動，把 draggable 屬性設置為 true ：

 

<img draggable="true" />

 

 

拖動什麼 - ondragstart 和 setData()

 

然後，規定當元素被拖動時，會發生什麼。

 

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

 

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

 

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

 

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

 

 

 

放到何處 - ondragover

 

ondragover 事件規定在何處放置被拖動的數據。

 

預設地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的預設處理方式。

 

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

 

event.preventDefault()

 

 

 

進行放置 - ondrop

 

當放置被拖數據時，會發生 drop 事件。

 

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

 

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

 

代碼解釋：

 

    調用 preventDefault() 來避免瀏覽器對數據的預設處理（drop 事件的預設行為是以鏈接形式打開）

    通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。

    被拖數據是被拖元素的 id ("drag1")

    把被拖元素追加到放置元素（目標元素）中

 

 

 

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像

 

創建 Canvas 元素

向 HTML5 頁面添加 canvas 元素。

規定元素的 id、寬度和高度：

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

通過 JavaScript 來繪製

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</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>

 

 

 

什麼是SVG？

 

    SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

    SVG 用於定義用於網路的基於矢量的圖形

    SVG 使用 XML 格式定義圖形

    SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失

    SVG 是萬維網聯盟的標準

 

 

SVG 的優勢

 

與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：

 

    SVG 圖像可通過文本編輯器來創建和修改

    SVG 圖像可被搜索、索引、腳本化或壓縮

    SVG 是可伸縮的

    SVG 圖像可在任何的解析度下被高質量地列印

    SVG 可在圖像質量不下降的情況下被放大

把 SVG 直接嵌入 HTML 頁面

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

實例

<!DOCTYPE html>

<html>

<body>

 

<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>

 

</body>

</html>

 

 

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不同之處。

Canvas

  • 依賴解析度
  • 不支持事件處理器
  • 弱的文本渲染能力
  • 能夠以 .png 或 .jpg 格式保存結果圖像
  • 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

SVG

  • 不依賴解析度
  • 支持事件處理器
  • 最適合帶有大型渲染區域的應用程式（比如谷歌地圖）
  • 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
  • 不適合游戲應用

 

HTML5 - 使用地理定位

 

請使用 getCurrentPosition() 方法來獲得用戶的位置。

 

下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。

 

 

<!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>

 

在客戶端存儲數據

 

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

 

    localStorage - 沒有時間限制的數據存儲

    sessionStorage - 針對一個 session 的數據存儲

 

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

 

 

 

localStorage 方法

 

localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。

 

如何創建和訪問 localStorage：

實例

 

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

 

 

 

下麵的例子對用戶訪問頁面的次數進行計數：

實例

<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>

 

 

 

 

 

sessionStorage 方法

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器視窗後，數據會被刪除。

如何創建並訪問一個 sessionStorage：

實例

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

 

 

 

 

使用 HTML5，通過創建 cache manifest 文件，可以輕鬆地創建 web 應用的離線版本。

 

 

什麼是應用程式緩存（Application Cache）？

HTML5 引入了應用程式緩存，這意味著 web 應用可進行緩存，並可在沒有網際網路連接時進行訪問。

應用程式緩存為應用帶來三個優勢：

  • 離線瀏覽 - 用戶可在應用離線時使用它們
  • 速度 - 已緩存資源載入得更快
  • 減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。

 

 

 

Cache Manifest 基礎

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

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴展名是：".appcache"。

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

 

 

 

web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。

什麼是 Web Worker？

 

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

 

web worker 是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

瀏覽器支持

 

所有主流瀏覽器均支持 web worker，除了 Internet Explorer。

HTML5 Web Workers 實例

 

下麵的例子創建了一個簡單的 web worker，在後臺計數：

 

 

在創建 web worker 之前，請檢測用戶的瀏覽器是否支持它：

 

if(typeof(Worker)!=="undefined")

  {

  // Yes! Web worker support!

  // Some code.....

  }

else

  {

  // Sorry! No Web Worker support..

  }

 

創建 web worker 文件

 

現在，讓我們在一個外部 JavaScript 中創建我們的 web worker。

 

在這裡，我們創建了計數腳本。該腳本存儲於 "demo_workers.js" 文件中：

 

var i=0;

 

function timedCount()

{

i=i+1;

postMessage(i);

setTimeout("timedCount()",500);

}

 

timedCount();

 

以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。

 

註釋：web worker 通常不用於如此簡單的腳本，而是用於更耗費 CPU 資源的任務。

 

 

創建 Web Worker 對象

我們已經有了 web worker 文件，現在我們需要從 HTML 頁面調用它。

下麵的代碼檢測是否存在 worker，如果不存在，- 它會創建一個新的 web worker 對象，然後運行 "demo_workers.js" 中的代碼：

if(typeof(w)=="undefined")

  {

  w=new Worker("demo_workers.js");

  }

 

然後我們就可以從 web worker 發生和接收消息了。

向 web worker 添加一個 "onmessage" 事件監聽器：

w.onmessage=function(event){

document.getElementById("result").innerHTML=event.data;

};

 

當 web worker 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。

 

完整的 Web Worker 實例代碼

我們已經看到了 .js 文件中的 Worker 代碼。下麵是 HTML 頁面的代碼：

實例

<!DOCTYPE html>

<html>

<body>

 

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

<br /><br />

 

<script>

var w;

 

function startWorker()

{

if(typeof(Worker)!=="undefined")

{

  if(typeof(w)=="undefined")

    {

    w=new Worker("demo_workers.js");

    }

  w.onmessage = function (event) {

    document.getElementById("result").innerHTML=event.data;

  };

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser

 does not support Web Workers...";

}

}

 

function stopWorker()

{

w.terminate();

}

</script>

 

</body>

</html>

 

 

HTML5 伺服器發送事件（server-sent event）允許網頁獲得來自伺服器的更新。

 

Server-Sent 事件 - 單向消息傳遞

Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件，更新能夠自動到達。

 

 

 

接收 Server-Sent 事件通知

 

EventSource 對象用於接收伺服器發送事件通知：

實例

 

var source=new EventSource("demo_sse.php");

source.onmessage=function(event)

  {

  document.getElementById("result").innerHTML+=event.data + "<br />";

  };

 

 

伺服器端事件流的語法是非常簡單的。把 "Content-Type" 報頭設置為 "text/event-stream"。現在，您可以開始發送事件流了。

PHP 代碼 (demo_sse.php)：

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

 

$time = date('r');

echo "data: The server time is: {$time}\n\n";

flush();

?>

ASP 代碼 (VB) (demo_sse.asp):

<%

Response.ContentType="text/event-stream"

Response.Expires=-1

Response.Write("data: " & now())

Response.Flush()

%>

代碼解釋：

  • 把報頭 "Content-Type" 設置為 "text/event-stream"
  • 規定不對頁面進行緩存
  • 輸出發送日期（始終以 "data: " 開頭）
  • 向網頁刷新輸出數據

 

 

 

 

HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本章全面介紹這些新的輸入類型：

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

 

HTML5 的新的表單元素：

HTML5 擁有若幹涉及表單的元素和屬性。

本章介紹以下新的表單元素：

  • datalist
  • keygen
  • output

 

----來自w3cschool


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Prop驗證、inheritAttrs、$attrs的用法和坑
    Prop 1. Prop驗證 javascript Vue.component('my component', { props: { // 基礎的類型檢查 ( 和 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的 ...
  • 自定義的可分類可搜索的下拉框組件
    效果圖 註：值是根據原生select中的值來動態獲取併進行分類 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" ...
  • typescript-環境搭建
    這個環境比較簡單 搭建 TypeScript 開發環境 什麼是 compiler？ less 編譯器： EcmaScript 6 編譯器： TypeScript 編譯器： 一句話：把 TypeScript 轉換為 JavaScript ，瀏覽器就具有運行了 線上測試編譯環境 compiler "線上 ...
  • babel環境安裝與編譯
    babel：將瀏覽器不支持的ES6語法轉為javascript 查看node是否安裝： npm -v node -v 實例演示：在桌面新建part5目錄在cmd命令行中 cd desktop cd part5 安裝babel：初始化package.json文件：描述當前項目信息，包括依賴等 npm ...
  • ng-簡介
    Angular 是什麼 Angular（讀音['æŋgjʊlə]）是一套用於構建用戶界面的 JavaScript 框架。由 Google 開發和維護，主要被用來開發單頁面應用程式。 類似於 "Vue.js" + MVVM（數據驅動視圖思想） + 組件化 + 模塊化 + 指令 + ...... 由 G ...
  • ng-起步
    目前，無論你使用什麼前端框架，都必然要使用到各種 NodeJS 工具，Angular 也不例外。與其它框架不同，Angular 從一開始就走的“全家桶”式的設計思路，因此 @angular/cli 這款工具裡面集成了日常開發需要使用的所有 Node 模塊，使用 @angular/cli 可以大幅度降 ...
  • ng-項目結構
    ng啟動過程 目錄結構 介紹 文件 main.js 描述：模塊化啟動入口 職責：載入啟動根模塊 AppModule 描述：項目根模塊 職責：把組件、服務、路由、指令等組織到一起，設置啟動組件為根組件 AppComponent 描述：項目根組件 職責：替換掉 文件中的 `` 節點 ...
  • ES6--Proxy
    ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類