HTML5新特性

最新推荐文章于 2022-06-21 21:33:20 发布

qq_36223144

最新推荐文章于 2022-06-21 21:33:20 发布

阅读量222

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML HTML5 文章标签： HTML5 HTML

本文链接：https://blog.youkuaiyun.com/qq_36223144/article/details/83500815

HTML 同时被 2 个专栏收录

1 篇文章

订阅专栏

HTML5

1 篇文章

订阅专栏

HTML5新特性

HTML5是最新的HTML标准，html的上一版本诞生于遥远的1999年。在上一版的HTML标准发布后，新的HTML5被推迟了很久，为了推动web的发展，一些公司就联合起来决定创建一个新版本的HTML。直到2014年，W3C终于宣布HTML5的标准规范最终制定完成。

HTML5中的多媒体

HTML5 视频

直到现在，仍有许多的网页上的视频是通过flash插件来显示的，但并非所有的浏览器都装有插件，并且flash也存在非常严重的安全漏洞，所以使用flash来播放视频并不是一种理想的方式。
HTML5规定了一种通过video元素来包含视频的标准方法。
HTML5现在支持三种格式的视频格式，但在不同的浏览器中有着不同的兼容性。

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	no	3.5+	10.5+	5.0 +	no
MPEG4	9.0+	no	no	5.0+	3.0+
Webm	no	4.0+	10.6+	6.0+	no

那么如何在HTML5 中使用呢？

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

video 的属性

autoplay：出现该属性视频在准备就绪后马上开始播放。
controls ：向用户显示播放控件。
height ：设置播放器的高度。
width : 设置播放器的宽度。
loop ：循环播放。
preload ：在页面加载时加载视频，并预备播放。如果使用“autoplay”，则该属性会被忽略。
src : 要播放的视频的URL.

HTML5 音频

有了视频肯定也就少不了音频，在HTML5中规定了audio元素来播放音频。
同样的，audio也支持三种格式的音频。

格式	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

如果需要在HTML5中播放音频，难么你可以

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

audio的属性

autoplay：出现该属性音频在准备就绪后马上开始播放。
controls ：向用户显示播放控件。
loop ：循环播放。
preload ：在页面加载时加载音频，并预备播放。如果使用“autoplay”，则该属性会被忽略。
src : 要播放的音频的URL.

HTML5 拖放

拖放是一种常见的特性，从字面意思理解就是抓取一个对象后拖放到另一位置。该特性在手机等移动触屏设备上有着重要的作用。
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 都支持拖放。
下面是一个简单的例子：

<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
	function allowDrop(ev)
	{
		ev.preventDefault();
	}
	
	// 数据类型是 "Text"，值是可拖动元素的 id ("drag1")
	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>
</head>
<body>

	<!-- ondragover 事件规定在何处放置被拖动的数据 -->
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<!-- 为了使元素可拖动，把 draggable 属性设置为 true，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值-->
	<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，从字面以上我们就能理解，HTML5给我们提供了一张画布，我们可以使用 JavaScript这支“画笔”在画布上作画。

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

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

在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();

于是就得到了这样的图画。
在这里插入图片描述

HTML SVG

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

效果
在这里插入图片描述

HTML5 地理定位

HTML5 Geolocation API 可以获得用户的地理位置信息，但该特性涉及到了用户的隐私，所以需要获取用户的授权，否则将不能使用这个特性。
在HTML5中使用 getCurrentPosition() 方法来获得用户的位置。

var x=document.getElementById("demo");
function getLocation()
  {
  //检测是否支持地理定位
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else {
  	x.innerHTML="Geolocation is not supported by this browser.";}
  }
  //showPosition() 函数获得并显示经度和纬度
function showPosition(position)
  {
  	x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  }

getCurrentPosition() 方法

若getCurrentPosition() 方法成功则会返回一个对象。

coords.latitude：十进制数的纬度
coords.longitude ：十进制数的经度
coords.accuracy：位置精度
coords.altitude：海拔，海平面以上以米计
coords.altitudeAccuracy：位置的海拔精度
coords.heading：方向，从正北开始以度计
coords.speed：速度，以米/每秒计
timestamp：时间戳

HTML5 Web 存储

HTML5提供了两种存在于浏览器客户端存储数据的方法来暂时或永久的存储某些属性。

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

在这之前，这些任务都是通过cookie来完成的。虽然cookie也能达到存储数据的目的，但是cookie也存在着一些缺点。比如说cookie并不适合存储大量的数据，它的存储空间和loaclStorage和sessionStorge相比之下要小很多，并且cookie也存在着一些安全性的问题。
在Web存储中，对于不同的网站，数据存储也不同的区域，并且一个网站也只能访问自身的属性，并且Web存储不用通过每个服务器请求来传递数据，所以对比cookie来说Web存储具有更高的性能和安全性。

localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周甚至是下一年之后，只要没有去手动清除数据，它所存储数据依然可用。

localStorage.lastname="Smith";
document.write(localStorage.lastname);

sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据就会被删除。

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);