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:

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

: 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 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 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 element.

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

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

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

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

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);
}        //定位失败的回调
)

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