HTML5 the relevant knowledge points of the summary (perhaps some errors or deficiencies, I hope you have a lot of advice, thank you)

1. Some loose changes in the structure of the page

<! DOCTYPE html> default to Standard mode

<meta charset= "UTF-8" >

2. Some new semantic tags in HTML5

<section></section> is used to block content on a page in a Web site or application. Usually consists of the content and its title.

<article></article> represents a separate, complete, externally referenced content in a document, page, or application. When we describe a specific thing, we usually use article instead of section. such as a post, a user comment, and so on.

<aside></aside> represents the current page or the subsidiary Information section of the article. such as references related to the current page or main content, sidebar, ads, nav element groups, and so on.

<nav></nav> is used as a group of links for page navigation, which can include <ul><li><p> elements.

<time></time> represents a time or a date. Where the Pubdate property represents the date the document was published and can be used in the Time tab.

<footer></footer> footer, the bottom of the page or the content of the section.

<address></address> contact information for author or document maintainer.

<figure></figure> is typically used for pictures, charts, or code examples with optional headings. When you remove it from a webpage, it does not affect other content on the page.

<figcaption></figcaption> represents the caption of a figure, which belongs to the figure element.

The <mark></mark> page needs to highlight or highlight a section of text that is useful for the current user.

<progress></progress> represents the progress of a task's completion.

<details></details> describe the details that the document or user requires and can get. Used in conjunction with the summary element.

<summary></summary> provides a caption or legend for the details element. The title is visible, and when the user clicks on the title, details are displayed.

List of <datelist></datelist> options. Used in conjunction with the INPUT element to define the possible values for input.

<keygen></keygen> add a public key to the form.

<menu></menu> Menu list. Not recommended for use in HTML4.

3, HTML5 in the new label in the IE6 to IE8 compatibility solution

Add Html5.js to the HTML header to resolve.

4. Selectors API

Add Selector

Queryselector () returns the first matching element found on the page, based on the established selection rules.

Queryselectorall () returns all matching elements in the page according to the specified rule.

Getelementsbyclassname ()

Note: The selectors API is more than just a convenience, and when traversing the DOM, the selectors API is often faster than the previous sub-node search API. The browser also makes an efficient search match.

5. New changes in form

• New properties

The form has an ID for each form, and then a form property for that element, with the value of the form's ID, which declares that the element belongs to the specified form.

FormAction set the submission address in all the submit buttons, either the same or different.

FormMethod Specifies the commit method, post, or get.

Placeholder input box prompt information.

Autofocus specifies that the form gets the input focus.

List and datelist: Constructs a selection list for the input box, and the list value is the ID of the datelist tag.

AutoComplete: Whether to save user input value, default is on, turn off prompt to select off.

Required: Checks whether the contents of the element are blank. The default is not blank, usually must be filled.

Pattern: Regular validation of input content in input, non-compliant when not committed.

• New input controls (inputs)

URL: Enter the address of the Web page.

Email: e-mail text box, but required to enter the correct email text format.

Tel: used exclusively for telephones, with the same look and text in each browser.

Search: For searches, such as site search or Google search.

Date: Used to enter a date.

Week: Used to count days, the number of weeks entered is checked.

Month: Used to enter the month, the entered month will be checked.

Numbe: Enter a number and the number entered will be checked.

Time: Enter a duration to check for validity of the time entered.

DateTime: Enter the UTC date and time for validity checks.

Date-local: Enter the local date and time for the validity check.

Range: A text selection box within a specific range with min and Max attributes, step (steps).

Use JS to display the current value.

Color: Used to select a colour, which provides a color picker.

• Form Validation

Implicit validation: max,min,step,pattern,required attributes, and so on.

Show Validation:

1, checkvalidity method.

Call this method to display the validation of all elements or individual content within the form. Returns the validation result in boolean form.

2, validity property.

This property returns a Validitystate object. The object has a number of attributes, the most important of which is the valid property, which indicates whether all elements in the form are valid or whether the contents of a single INPUT element are valid.

• Cancel Validation

1. The novalidate attribute of the form element--you can turn off form validation (set true and false).

2. The formnovalidate attribute of input or submit element.

Using this property on input can invalidate a single INPUT element.

The use of this property on the Submit button is equivalent to the entire form being used to novalidate the property, and the entire forms validation is invalidated.

6. Get Class List Properties

classlist

Length of-length:class

-add (): Method to add Class

-remove (): Method to delete Class

-toggle (): How To switch class

-contains (): The given value exists in the list and returns "true" if it exists, otherwise "false" is returned.

7. Date Custom Data

Dateset

-data-name:dataset.name

-data-name-first:dataset.namefirst

Reading is also done through the DataSet object, using "." To get the property, you also need to remove the data-prefix, the hyphen needs to be converted to hump naming.

Data-* 's browser compatibility is not very optimistic

8. Drag and Drop API

• Steps to implement a drag-and-drop operation:

① the Draggable property of the object element to be dropped is set to True (draggable= "true"). The IMG element and a element (which must be an href) are allowed to drag and drop by default.

② writes the event code related to drag and drop.

• Drag element Event: Event object is dragged element

-dragstart, trigger before drag

-drag, continuous triggering during drag and drop

-dragend, drag end Trigger

• Target Element Event: The event object is the target element

-dragenter, enter the target element trigger, equivalent to MouseOver

-dragover, enter the target, leave the target, and trigger continuously.

-dragleave, leaving the target element trigger, equivalent to Mouseout

-drop, releasing the mouse trigger on the target element

• Order of execution of events: When drop does not trigger

-dragstart > Drag > DragEnter > DragOver > DragLeave > Dragend

• Order of execution of events: When drop triggers (dragover or Dragend block default events)

-dragstart > Drag > DragEnter > DragOver > Drop > Dragend

The cursor that cannot be released is not the same as the cursor that can be released.

DataTransfer Object

When you start dragging, you save the dragged data to the DataTransfer object. It can be set to drag the DataTransfer property of the event object when it is dedicated to storing data for drag and drop.

-setdata (): Sets the stored data, key and value (must be a string). Where key represents the type of data: Text/plain,text/html,text/xml,text/uri-list.

-getdata (): Gets the stored data, based on the key value, to obtain the corresponding value.

effectallowed Property

-effectallowed: Set cursor style (none, copy, Copylink, Copymove, Link, linkmove, move, all, and uninitialized), generally set in the DragStart event.

setdragimage: Custom Drag-and-drop icon

Three parameters: The specified picture element, coordinate x, coordinate y.

9. File API

FileList Object

The FileList object represents the list of files selected by the user.

Blob Object

An original data object that provides the slice method to access the raw data block inside the byte. There are also two properties: size (the amount of data), type (MIME type of data).

Note: For files of the image type, the Type property of the Blob object is preceded by "image/", followed by the image type, which we can use in JS to determine whether the file selected by the user is an image file.

File Object

Inheriting from a Blob object pointing to a specific file, it also has two properties: name (filename), lastmodifieddate (last modified).

FileReader Interface

Used to read the data inside the file, providing three commonly used methods of reading file data. It provides an asynchronous API that allows you to access the file system asynchronously in the main thread of the browser.

Three methods:

--readastext: The file is read as text and the results are stored in the result property.

--readasbinarystring: The file is read bit binary string, usually we send it to the backend, the backend can store the file through this string.

--readasdataurl: Reads a file as a string of data URLs, which in fact reads the small file directly into the page in a specially formatted URL address. Small files here usually refer to files in the format of images and HTML.

10. Canvas API

The canvas element is specifically designed to draw graphics. Just a colorless transparent area, you need to use JS to write the script in which to paint.

Canvas steps to draw a rectangle:

⑴ gets the canvas element.

⑵ gets the context. Using the GetContext method of the canvas object, the parameter in the method can only be set to 2d.

⑶ fills and draws a border.

⑷ sets the drawing style (style).

fillstyle--fills the color value of the fill in this property.

strockstyle--The property value that is filled in with the border.

⑸ Specifies the LineWeight (width linewidth property of the drawing border)

⑹ Specifies the color value.

⑺ draws a rectangle.

FillRect (x,y,width,height): The default color is black.

Strokerect (x,y,width,height): Box with border, default 1 pixel black border.

Canvas Draw other shapes other than rectangles or squares: you need to use a path.

The steps are as follows:

⑴ starts creating the path.

Context.beginpath (), the method does not use parameters, and in the process of creating a path several times, the Beginpath () is called each time the creation is started.

⑵ Draw a circular path

Context.arc (x, y, round radius, start angle, end angle, clockwise).

⑶ Close Path

Context.closepath (), this is where the path was created, but it hasn't really started drawing any graphs.

⑷ set the drawing style for drawing.

Context.fillstyle ....

Context.fill ().

HTML5 the relevant knowledge points of the summary (perhaps some errors or deficiencies, I hope you have a lot of advice, thank you)