Several new features of html5

foreword

　　In order to better handle today's Internet applications, HTML5 adds many new elements and functions, such as: graphics drawing, multimedia content, better page structure, better form processing, and several api drag and drop elements, positioning, Includes web application cache, storage, web workers, etc.

---

Semantic tags

<hrader></header>	Defines the header area of ​​the document
<footer></footer>	Defines the trailer area of ​​the document
<nav></nav>	Define the navigation of the document
<section></section>	Define a section (section, section) in a document
<article></article>	Define separate content areas for pages
<aside></aside>	Define the sidebar content of the page
<detailes></detailes>	Used to describe details about a document or a part of a document
<summary></summary>	tag contains the title of the details element
<dialog></dialog>	Define dialog boxes, such as prompt boxes

Enhanced Form

color	Mainly used to select colors
date	Select a date from a datepicker
datetime	Select a date (UTC time)
datetime-local	Pick a date and time (no time zone)
email	input field containing an e-mail address
month	select a month
number	input fields for values
range	Input fields for numeric values ​​within a certain range
search	for search domain
tel	Define the input phone number field
time	choose a time
url	Input field for URL address
week	Select week and year

video and audio

HTML5 provides a standard for playing audio files, using the <audio> element

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

HTML5 specifies a standard way to include video 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>

SVG drawing

SVG stands for Scalable Vector Graphics

The difference between SVG and Canvas

　　SVG is a language for describing 2D graphics using XML.

　　Canvas draws 2D graphics through JavaScript.

　　SVG is based on XML, which means that every element in the SVG DOM is available. You can attach JavaScript event handlers to an element.

　　In SVG, each drawn shape is considered an object. Browsers can automatically reproduce graphics if the properties of the SVG object change.

　　Canvas is rendered pixel by pixel. In canvas, once the graphics are drawn, it doesn't continue to get the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

Drag and drop API

Drag and drop is a common feature where an object is grabbed and then dragged to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

　　The process of dragging and dropping is divided into source object and target object. The source object refers to the element you are about to drag, and the target object refers to the target position to be placed after dragging.

Events that can be triggered by dragged and dropped source objects (possibly moving ) - 3 :

dragstart: drag start

drag: dragging

dragend: drag end

The composition of the entire dragging process: dragstart*1 + drag*n + dragend*1

Events that can be triggered by the dragged and dropped target object ( no movement ) - 4 :

dragenter: drag to enter

dragover: dragging and hovering

dragleave: drag to leave

drop: release

Composition 1 of the entire dragging process: dragenter*1 + dragover*n + dragleave*1

Composition 2 of the entire dragging process: dragenter*1 + dragover*n + drop*1

dataTransfer: "tractor" object for data transfer;

  Use the e.dataTransfer property to save data in the drag source object event:

e.dataTransfer.setData( k, v )

  Use the e.dataTransfer property to read data in the drag target object event:

var value = e.dataTransfer.getData( k )