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>