What are the new features of html5? Summary of new features of html5

We all know that html5 is the fifth major modification of html. So, since it is a major modification, there will definitely be new features. So, What are the new features of html5? The following article will summarize the new features of html5.

First of all, we should all know what html5 means. If you don’t know much about html5, then you can take a look at this article: What is html5? What is the use of html5? , okay, after knowing the specific definition of html5, let's take a look at the new features of html5.

What are the new features of html5?

1. The new features of HTML5: canvas element for painting

The canvas element is used to draw graphics on the web page. The canvas is a rectangle area, you can control every pixel of it. canvas has many ways to draw paths, rectangles, circles, characters, and add images.

<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="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>

Let’s talk about the content of svg: svg is a graphics format used to describe two-dimensional vector graphics.

There are three ways to use svg:

1. Put svg directly as a picture on the web page.

2. svg realizes animation.

3. Interaction and filter effects of svg images.

Instructions:

(1) Canvas draws 2D graphics through JavaScript.

(2) Canvas is rendered pixel by pixel.

(3) In canvas, once the graphic is drawn, it will no longer receive the attention of the browser. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

(4) svg is a language that uses XML to describe 2D graphics.

(5) svg is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

(6) In svg, each drawn graphic is considered an object. If the properties of the svg object change, the browser can automatically reproduce the graphic.

For more information about canvas and svg, please refer to: HTML5 canvas and HTML5 inline SVG

2. The new features of html5 are richer and more powerful forms

html5 has multiple new form input types. These new features provide better input control and validation.

html5 also adds the following form elements:

fc86e7b705049fc9d4fccc89a2e80ee3: The element specifies the option list of the input field, using the list attribute of the d5fd7aea971a85678ba271703566ebfd element and the id of the fc86e7b705049fc9d4fccc89a2e80ee3 element Binding.

aa983b9eb8086376f1f6481364a02e5a: Provides a reliable way to authenticate the user, the tag specifies the key pair generator field to be used in the form.

be6d67dae90cc1ad6469079e163d0939: Used for different types of output, such as calculation or script output.

HTML5 New form attributes:

placehoder attribute: A short prompt will be displayed on the input field before the user enters the value. That is, our common default prompt of the input box disappears after the user inputs.

required attribute: It is a boolean attribute. The input field required to be filled in cannot be empty

pattern attribute: describes a regular expression used to verify the value of the d5fd7aea971a85678ba271703566ebfd element.

min and max attributes: Set the minimum and maximum values ​​of the element.

step attribute: Specifies the legal number interval for the input field.

Height and width attributes: Image height and width for d5fd7aea971a85678ba271703566ebfd tags of type image.

autofocus attribute: is a boolean attribute. Specifies that the field automatically gains focus when the page loads.

multiple attribute: It is a boolean attribute. Specifies that multiple values ​​can be selected within the d5fd7aea971a85678ba271703566ebfd element.

3. HTML5 new features: video and audio elements for media

1. HTML5 provides a standard for playing audio files, that is, using the b97864c2e0ef2353a16c4d64c7734e92 element

##Example: 18dbbd863b2f3ec472f4bf0ef643e619

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

Description:

（1）control Properties for adding play, pause, and volume controls.

(2) Between b97864c2e0ef2353a16c4d64c7734e92 and 81d2bc32cafa2076a27f10cdd878d0ab you need to insert the prompt text of the b97864c2e0ef2353a16c4d64c7734e92 element that the browser does not support.

(3) The b97864c2e0ef2353a16c4d64c7734e92 element allows the use of multiple e02da388656c3265154666b7c71a8ddc elements. The e02da388656c3265154666b7c71a8ddc element can link different audio files, and the browser will use the first supported audio file.

(4) The b97864c2e0ef2353a16c4d64c7734e92 element supports three audio format files: MP3, Wav, and Ogg.

2. HTML5 provides a standard way to include videos through the video element.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

Description:

(1) control provides play, pause and volume controls to control the video. You can also use DOM operations to control the playback and pause of the video, such as the play() and pause() methods.

（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。

（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。

四、html5新特性之html5地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　　　

获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用户定位数据获取成功')
      　　　　//console.log(arguments);
      　　　　console.log('定位时间：',pos.timestamp)
      　　　　console.log('经度：',pos.coords.longitude)
      　　　　console.log('纬度：',pos.coords.latitude)
      　　　　console.log('海拔：',pos.coords.altitude)
      　　　　console.log('速度：',pos.coords.speed)
},    //定位成功的回调
function(err){ 
 　　　　console.log('用户定位数据获取失败')
      　　　　//console.log(arguments);
}        //定位失败的回调
)

五、html5新特性之html5拖放

拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

想要了解更多拖放中的内容可以参考：HTML拖放

下面给出一个实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;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");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>

六：html5新特性之html5 Web存储

在客户端存储数据：

html5 提供了两种在客户端存储数据的新方法：

（1）localStorage - 没有时间限制的数据存储：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

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

七、html5新特性之html5应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

（1）离线浏览 - 用户可在应用离线时使用它们

（2）速度 - 已缓存资源加载得更快

（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

八、html5新特性之html5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

九、html5新特性之html5服务器发送事件

html5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

十、html5新特性之html5 WebSocket　

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

关于后面这几个特性的更多内容大家可以去看一看：HTML5 完整版手册

以上就是给大家总结的十个html5的新特性，当然了，如果想更深入的学习html5，这里给大家推荐关于html5视频教程。

相关推荐：

HTML5新特性dataset的使用方法

HTML5 中的一些有趣的新特性

The above is the detailed content of What are the new features of html5? Summary of new features of html5. For more information, please follow other related articles on the PHP Chinese website!