Home > Web Front-end > H5 Tutorial > body text

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

不言
Release: 2018-08-31 15:42:22
Original
7991 people have browsed it

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>
Copy after login
<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>
Copy after login

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:

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

: 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

##Example:
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!