Html5高級

時間 2019-12-08

標籤 html5 html 高級欄目 HTML5 简体版

原文原文鏈接

什麼是 HTML5？

HTML5 將成爲 HTML、XHTML 以及 HTML DOM 的新標準。HTML 的上一個版本誕生於 1999 年。自從那之後，Web 世界已經經歷了鉅變。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持javascript

HTML5 是如何起步的？

HTML5 是 W3C 與 WHATWG 合做的結果。
編者注：W3C 指 World Wide Web Consortium，萬維網聯盟。
編者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力於 web 表單和應用程序，而 W3C 專一於 XHTML 2.0。在 2006 年，雙方決定進行合做，來建立一個新版本的 HTML。
爲 HTML5 創建的一些規則：
1.新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
2.減小對外部插件的需求（好比 Flash）
3.更優秀的錯誤處理
4.更多取代腳本的標記
5.TML5 應該獨立於設備
6.開發進程應對公衆透明css

HTML5 中的一些有趣的新特性：

1.用於繪畫的 canvas 元素
2.用於媒介回放的 video 和 audio 元素
3.對本地離線存儲的更好的支持
4.新的特殊內容元素，好比 article、footer、header、nav、section
5.新的表單控件，好比 calendar、date、time、email、url、searchhtml

HTML5的優點：

1.跨平臺：
　　在多屏年代，開發者的痛苦指數是至關高的，HTML5能夠扮演救星嗎?多套代碼、不一樣技術工種、業務邏輯同步等等，由此來看跨平臺確實是剛需。
2.快速迭代：
　　移動互聯網能夠說是一個快魚吃慢魚的時代，誰對用戶需求知足的快，誰的試錯成本更低，誰就能夠擁有巨大的優點。前端

3.持續交付：
　　不少人有這樣的體會，一個原生應用上線Appstore，忽然發現因爲某種緣由而致使在市場上出現一片差評、用戶大量流失，等到新應用審覈上線，用戶早已卸載，但HTML5沒有這些問題，你能夠事實更新，有問題就當即響應。
　4.大幅降低成本：
　　若是你使用原生開發的App和競爭對手使用HTML5開發的App沒什麼區別，但你的開發成本高出一倍，相信沒有投資人會喜歡給你投錢。java

5.開源生態系統發達：
　　HTML5前端是開放的正反饋循環生態系統，有大量的開源庫可使用，開源應用也會變得更輕鬆、敏捷，能夠說這種開放的正反饋循環生態將來的生命力要比原生生態系統更強勁。
　6.開發數據交換：
　　HTML是以page爲單元開發代碼的，無需專門開發SDK，只要不混淆，就可以與其餘應用交互數據。git

7.更易推廣：
　　導流入口會不少，HTML5應用導流很是容易，微信朋友圈、搜索引擎、應用市場和瀏覽器等等，處處都是HTML5的流量入口。web

canvas 元素用於在網頁上繪製圖形

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

畫布是一個矩形區域，您能夠控制其每一像素。瀏覽器

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。微信

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

JavaScript 使用 id 來尋找 canvas 元素：

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

而後，建立 context 對象：

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

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸

理解座標

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

以下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。

實例 - 線條

經過指定從何處開始，在何處結束，來繪製一條線：

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

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

實例 - 圓形

經過規定尺寸、顏色和位置，來繪製一個圓：

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


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

實例 - 漸變

使用指定的顏色來繪製漸變背景：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

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

實例 - 圖像

把一幅圖像放置到畫布上：

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

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

什麼是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>

結果：

HTML 5 Canvas vs. SVG

Canvas 和 SVG 都容許在瀏覽器中建立圖形，可是它們在根本上是不一樣的。

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas

Canvas 經過 JavaScript 來繪製 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas 與 SVG 的比較

Canvas

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

SVG

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

HTML5 地理定位

定位用戶的位置

HTML5 Geolocation API 用於得到用戶的地理位置。

鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。

使用地理定位

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

可返回用戶位置的經度和緯度。

實例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

解釋：

檢測是否支持地理定位

1.若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶顯示一段消息。

2.若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象

3.showPosition() 函數得到並顯示經度和緯度

HTML 5 拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

拖放

拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。

在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。

下面的例子是一個簡單的拖放實例：

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        #div1, #div2
        {float:left; width:120px; height:120px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
</head>
<body>

<p>請來回將圖片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="img/17.jpeg" draggable="true" ondragstart="drag(event)" id="drag1" width="130px" height="130px"/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<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");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

相關標籤/搜索

每日一句

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