Rupeng net Study Notes (12) HTML5 and pengnet Study Notes html5

Rupeng net Study Notes (12) HTML5 and pengnet Study Notes html5

I. Introduction to HTML5

HTML5 is the new HTML language version generated after the fifth modification of the HTML language.

Improvements include:
Add new HTML tags or attributes, new CSS style attributes, and new JavaScript APIs. Some outdated HTML tags and attributes related to styles are also deleted.

It brings new features to webpages:
Multimedia support, local storage, graphic rendering, style effects, etc.

Ii. New multimedia tags

1. <video> used to play a video on a page
Some attributes:
The address of the video to be played by src.
Width: sets the width of the player, in pixels.
Height: sets the height of the player, in pixels.
If this attribute is displayed in controls, the control is displayed to the user, such as the play button.
Play the autoplay video right after it is ready
Loop playback is complete and starts again

Sample Code:
<Video controls = "control" width = "960px" height = "450px">
<Source src = "resource/evolution history of the world's map in 5500. webm"/>
<Source src = "resource/World's 5500 release history. MP4"/>
</Video>


2. <audio> play audio on the page
Supports OFF \ MP3 \ WAV audio formats
Similar to <video>

Sample Code:
<Audio controls = "controls">
<Source src = "resource/breeze-ye yixi"/>
<Source src = "resource/wind blows-ye yixi .wav"/>
<Source src = "resource/wind blows-ye yixi .ogg"/>
</Audio>


3. <source> specifies the location of the multimedia resource, which is used with the preceding two tags. It is a single tag.

3. New Form Controls

The new form control adds a new option to the type attribute of the input tag.

Date control value format: 2016-03-20
Time Control value format:
Number Numeric Control
The range control uses the max and min attributes to control the drag range.
Search box Control
Color selector value format: hexadecimal color value
Not all browsers support email, url, and datetime.

HTML5 integrates the effects of third-party plug-ins.

Iv. New attributes of the input tag

Enter the prompt information in The placeholder input box.

Required: required. required = "required"

Pattern user verification user input

Form specifies the form to which the control belongs, so that the control does not have to be included in the <form> label.

Autofocus automatically obtains the focus

Multiple specifies whether multiple files can be selected during file upload.

Accept specifies the MIME type (file type) allowed for file upload. For example, image/* indicates all image formats.

5. added the JavaScript processing function for the files to be uploaded.

Provides a new API for JavaScript to process files to be uploaded.

1. File indicates the selected File, which contains information related to the File.

Size attribute File size
Type attribute file type
Name attribute file name

2. FileList: list of objects selected for upload

3. FileReader processes file data
ReadAsText (file, encoding) reads file data in the form of text
ReadAsDataURL (file) reads file data in base64 encoding format
Processed file data read by the result attribute
Onload event attribute, triggered when the file is read successfully

6. New semantic tags of documents

Before HTML5, in terms of layout and content structure, the document uses div labels.

Html5 defines some new labels for the language structure of the document content:

Generally, the header is placed in the logo or menu bar.

Generally, nav stores directories, navigation bar links, or links outside the website.

A relatively independent structure in the article Page, such as an article or every comment in this article

Section defines the page or chapter of the article.

Aside generally places advertising or explanatory information

Footer generally places copyright information

The usage of articles and sections is flexible and can be nested with each other.

In addition to making the semantic structure of the document clearer, these tags can also facilitate search engine crawling and provide the possibility for the program to accurately analyze the page.
However, these labels have not become mainstream in the current stage.

VII. New event types

Triggered before the beforeunload page is disabled or before refreshing

Triggered when scroll page is rolled

Triggered when the page size is adjusted

Triggered when the mouse wheel is scroll.

Dragstart, dragover, and drop

8. drag and drop an element)
In HTML5, elements can be dragged or dropped)

1. Whether draggable can be dragged (Public attribute of the element)

2. dragstart: drag the start event. This event is triggered when element a is dragged.

3. dragover is dragged to another element. It is triggered when element a is dragged to the range of Element B.

4. drop and drag the stop event. The event is triggered when the mouse is released. The event source is Element B.

By default, images and hyperlinks can be dragged. To drag other elements, you must set the draggable attribute of the element to true.

By default, the drop event is not triggered when the mouse pointer changes to another drag-and-drop element is rejected.

Note:
You can also drag the selected text to ignore it. The drag-and-drop action only triggers some events and does not perform any practical tasks,
Just as clicking a normal button won't trigger any effect, you need to write the processing code in the event processing function to do something.


9. Implementation of element drag and drop

To drag element a to Element B, perform the following steps:

1. Make sure that element a can be dragged (set the draggable attribute of the element to true)

2. Register a dragstart event handler for element a (mainly used to store related data)

3. register the dragover event processing function for Element B (mainly used to cancel the default event behavior)

4. register the drop event handler function for Element B (mainly used to insert element a to Element B)

Because the entire drag-and-drop process involves multiple events, you need the event. dataTransfer object to store and transmit the required data throughout the drag-and-drop process.

Event. dataTransfer. setData (key, value) stores data
Event. dataTransfer. getData (key) to get data

10. Drawing

HTML5 adds the <canvas> label (canvas meaning) and provides a set of new JavaScript APIs to complete the drawing function.

The rendering process is controlled by the js Code. The general steps are as follows:

1. Obtain the canvas Element Object.

2. Set the paint brush color or fill color.

3. Draw basic images or images

4. Repeat steps 2 and 3 to generate a complex image.

5. Use the timer to draw an animation.

11. JavaScript drawing API

Var context = canvas. getContext ("2d"); // obtain the drawing context (the core object of the drawing function)
Context. strokeStyle = "color value"; // you can specify the paint color.
Context. fillStyle = "color value"; // you can specify the fill color.
Context. fillRect (x, y, width, height); // draw and fill the rectangle
Context. strokeRect (x, y, width, height); // draw a rectangle
Context. clearRect (x, y, width, height); // clear the image in the rectangular area
// Draw an image
Var img = new Image (); // create an Image object
Img. src = "resource/1.png"; // set the src of the image, and then start loading the image data.
Img. onload = function () {// This image can be drawn only after the image data is loaded.
Context. drawImage (img, 230,10 );
}

Note: For Our backend developers, you only need to understand the drawing function.

12. Local Storage

Before HTML5, the server can store a small amount of data to the user's local computer through cookies. The Storage Limit of each website is about 4 kb.

HTML5 adds the localStorage attribute object for the window object to store string-type key-value pair data,

For example, localStorage. username = "egg"; localStorage. age = "20 ";

These key-value pairs are stored on the user's local computer, and the data is exclusive to the website. The data between various websites does not affect each other, and the data is not shared between browsers.

HTML5 local storage can store about 5 MB of data, and some browsers can set the Storage Limit.