Shulou(Shulou.com)06/02 Report--

This article mainly introduces what are the new features of HTML5. It is very detailed and has a certain reference value. Friends who are interested must read it!

I. semantic label

Semantic tag transfer from HTML4 to HTML5

II. Enhanced form

(1) New input type

(2) New form elements.

Data list, providing a list of input suggestions for input

Progress bar showing the progress of connection / download

Scale / weights and measures, describe the stage of the data, red (danger) = > yellow (warning) = > green (excellent)

Output content, which semantically indicates that the data here is calculated and output

(3) New attributes of form elements

Common properties:

Placeholder: placeholder prompt text

Mutiple: whether multiple inputs are allowed

Autofocus: automatically get input focus

Form: specify the form to which the input element belongs, so that the input box is placed outside the form and can be submitted.

Verify the properties (learn more):

Required: input box content cannot be empty

Min: the minimum number allowed to enter

Max: maximum number allowed to enter

Minlength: minimum length of string allowed to be entered

Maxlength: maximum length of string allowed to be entered

Pattern: the regular expression that the contents of the input box must conform to

III. Video and audio

Video playback:

View all properties, methods, and events of the video: console.log (videoBirds)

Audio playback:

View all properties, methods, and events of the video: console.log (bgMusic)

New multimedia tags

Videoaudiosourceembedtrack

Code example:

Your browser does not support audio files

IV. Canvas drawing

H5 native technology, based on web canvas 2D bitmap drawing technology, is good at expressing delicate colors, and can be used for statistical charts, page games, map applications, web special effects and so on.

To use Canvas:

Canvas itself is a 300 '150 inline-block element; note: the Canvas canvas size cannot be set using CSS, it will distort the entire image!

Use H5 Canvas API to draw:

Var ctx = c2.getContext ('2d')

/ / draw a rectangle

Ctx.fillStyle ='# 000' fill Color / gradient object

Ctx.strokeStyle ='# 000' Stroke Color / gradient object

Ctx.lineWidth = 1 stroke line width

Ctx.fillRect (x, y, w, h): filled rectangle

Ctx.strokeRect (x, y, w, h): stroke rectangle

Ctx.clearRect (x, y, w, h): stroke rectangle

/ / draw text

Ctx.font = '10px sans-serif'

Ctx.textBaseline = 'alphabetic/top/bottom'

Ctx.fillStyle ='# 000'

Ctx.strokeStyle ='# 000'

Ctx.fillText (txt, x, y) fill text

Ctx.strokeText (txt, x, y) Stroke text

Ctx.measureText (txt). Width measures the width of the text based on the current font setting

/ / draw path-conceptually similar to the Pen tool in PS

Ctx.beginPath ()

Ctx.moveTo ()

Ctx.lineTo ()

Ctx.arc ()

Ctx.rect ()

Ctx.ellipse ()

Ctx.closePath ()

Ctx.stroke () strokes based on an existing path

Ctx.fill () populates based on the existing path

Ctx.clip () trims based on the existing path

/ / draw an image

Ctx.drawImage (img, x, y) draws the image (original size)

Ctx.drawImage (img, x, y, w, h) draws an image (specified size)

/ / drawing context deformation and state preservation

Ctx.rotate () image rotation

Ctx.translate () image translation

Ctx.scale () Image Zoom

Saving the drawing context of ctx.save ()

Restoration of ctx.restore () drawing context

A brief introduction to Chart.js. It is recommended to query https://www.chartjs.org/ on the official website.

5. SVG drawing

Scalable Vector Graphic, scalable vector graph

Usage before H5: SVG tags cannot be written directly in a web page, but can only be written in a separate XML document

Used in web pages

Add

Method of use after incorporating H5 standard: SVG tags can be written directly in the web page.

Commonly used SVG graphics:

(1) rectangle

(2) Circle

(3) Ellipse

(4) straight line (no fill, only stroke)

(5) broken line (fill must be transparent / stroke must be specified manually)

(6) Polygon

(7) text

Text information

(8) Image

The difference between SVG and Canvas:

(1) SVG is suitable for describing 2D graphics in XML.

(2) Canvas draws 2D graphics anytime, anywhere (using JavaScript)

(3) SVG is based on XML, which means that every element is available in SVG DOM. You can add JavaScript event handlers for each element

(4) in SVG, each shape drawn is remembered as an object. If the bookiness of the SVG object changes, the browser can automatically re-render the shape.

(5) Canvas is rendered pixel by pixel. In the canvas, once the graphics are drawn, they will be forgotten by the browser. If you want to change the position of one, the entire scene needs to be redrawn, including any objects that may have been covered by the graph.

VI. API of the new HTML5

(Application Programming Interface)-Application programming Interface

(1) HTML Geolocation geographical location

Through the browser to obtain the geographic coordinates of the current user, in order to achieve "LBS service" (Location Based Service), such as real-time navigation, peripheral recommendation.

(2) HTML Drag & Drop drag and drop

H5 did not drag and drop API before, you can use the "mouse down + mouse movement" two events to simulate the user drag event.

Seven mouse drag related event handles are specially provided after H5.

(3) HTML Local Storage local storage

(4) HTML Application Cache application caching

(5) HTML Web Workers web worker

(6) HTNL SSE

7. Support of browsers

All existing browsers support HTML5.

8. HTML5 deletes / discards unusable elements

The deleted element is replaced by the following acronym default font color and font size CSS style CSS style text horizontal center CSS style catalog list CSS style font appearance, size, color definition frameset displays to the browser the prompt text that cannot handle the frame, the text in the frameset element adds the delete line CSS style Or define typewriter text CSS style these are all the contents of this article "what are the new features in HTML5?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.