html5 Common new features: 1. Canvas drawing; 2. Form elements; 3. Semantic tags; 4. Media elements; 5. Geolocation; 6. Drag and drop API; 7. WebWorker; 8. WebStorage; 9. WebSocket; 10. SVG drawing. HTML5 is the latest HTML standard, specifically designed to carry rich web content without the need for additional plug-ins. It provides new elements and new APIs that simplify the construction of web applications. The operating system for this tutorial: Windows 10 system, HTML5 version, DELL G3 computer. What is HTML5: 1. HTML5 is the latest HTML standard. 2. HTML5 is specially designed to host rich web content without the need for additional plug-ins. 3. HTML5 has new semantics, graphics and multimedia elements. 4. The new elements and new APIs provided by HTML5 simplify the construction of web applications. 5. HTML5 is cross-platform and is designed to run on different types of hardware (PCs, tablets, mobile phones, TVs, etc.). Common new features of HTML5: 1. Canvas element##Canvas Elements are used to draw graphics on web pages, with multiple ways to draw paths, rectangles, circles, characters, and add images. Canvas draws 2D graphics through js and renders them pixel by pixel. If the picture is modified after it is completed, the entire scene will be redrawn. 2. Form elements (1) New form element : The element specifies the option list of the input field, use The list element of the element is bound to the id of the element; : Provides a reliable method to verify the user. The tag specifies the key pair generator used for the form. Field; : used for different types of output, such as calculation or script output. (2) New form attributesplacehoder attribute: A short prompt will be displayed on the input field before the user enters the value, which is the default box prompt; required Attribute: It is a boolean attribute that requires the input field to be filled in not to be empty; pattern attribute: describes a regular expression used to verify the value of the element; max/ min attribute: maximum and minimum values; step attribute: specifies the legal number interval for the input field; height/width attribute: used for the image height and sum of the tag of the image type Width; autofocus attribute: is a boolean attribute, which automatically obtains focus when the page is loaded; multiple attribute: is a boolean attribute, which specifies the selection of multiple values in the element. 3. Semantic tags Semantic tags not only make the tags have their own meaning, but also have the advantages of semantic tags: (1) Make the code structure of the interface clear, Convenient for code reading and collaborative team development; (2) Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a semantic manner; (3) Conducive to search engine optimization (SEO). 4. Media elementsElements for playing audio files————(1)control The attribute provides playback, pause and volume controls; (2) Insert prompt text for the element that the browser does not support between and ; (3) Allows the use of multiple elements to link different audio files. The browser uses the first supported audio file; (4) Supports three audio format files: mp3, wax, ogg. Elements for playing video files (1) The control attribute provides playback pause and volume controls, and you can also use dom operations: play() and pause(); (2) The video element provides width and height to control the size of the video. If set, it will be retained when the page loads. If not set, it will not be retained. The page will change based on the original video. 5. GeolocationHTML5 uses the getCurrentPosition() method to obtain the user's location, and the location distance can be calculated based on this. 6. Drag-and-drop APIDrag-and-drop is a common feature, that is, grabbing an object and dragging it to another location. In HTML5, drag and drop is part of the standard and any element can be dragged and dropped. The drag-and-drop process is divided into source objects and target objects. The source object refers to the element you are about to drag, and the target object refers to the target location where you want to place it after dragging. Events that can be triggered by the drag-and-drop source object (which may be moved) - 3: dragstart: dragging starts drag: dragging dragend: dragging ends The entire dragging process consists of: dragstart*1 drag*n dragend*1. Events that can be triggered by the drag-and-drop target object (which will not move) - 4: dragenter: dragging into dragover: dragging and hovering dragleave: dragging Leave drop: releaseThe composition of the entire dragging process 1: dragenter*1 dragover*n dragleave*1;The composition of the entire dragging process 2: dragenter*1 dragover*n drop* 1. 7. Web Worker When executing a script in an HTML page, the state of the page is unresponsive until the script has completed. Web Worker is JavaScript that runs in the background, independent of other scripts and does not affect the performance of the page. You can continue to do whatever you want: click, select content, etc., while the Web Worker runs in the background. 8. Web Storage Web Storage is an important function introduced by H5 to help solve the local cache of cookie storage. Earlier, local storage used cookies. But Web storage needs to be more secure and faster, and Web Storage has 5M capacity and cookies are only 4k. 9. Web Socket The WebSocket protocol provides a full-duplex communication mechanism between the web application client and the server. In the WebSocket API, the browser and the server only need to perform a handshake action, and then a fast channel is formed between the browser and the server, and data can be transmitted directly between the two. The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and server can directly exchange data through the TCP connection. After you obtain the Web Socket connection, you can send data to the server through the send() method, and receive data returned by the server through the onmessage event. 10. SVG Drawing SVG refers to scalable vector graphics, which is a language that uses XML to describe 2D graphics. In SVG, every drawn shape is treated as an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic. Extended reading What are the common html5 events: Common html5 events are: 1. General events; 2. Page-related events; 3. Form-related events; 4. Rolling subtitle events; 5. Editing events; 6. Triggered events; 7. External events. 1. General events onClick: mouse click event, mostly used for mouse clicks within the range controlled by an object; onDblClick: mouse double-click event; onMouseDown: mouse The button on is pressed; onMouseUp: an event triggered when the mouse is pressed and released; onMouseOver: an event triggered when the mouse moves above the range of an object; onMouseMove: an event triggered when the mouse moves; onMouseOut: when An event triggered when the mouse leaves the scope of an object; onKeyPress: an event triggered when a key on the keyboard is pressed and released; onKeyDown: an event triggered when a key on the keyboard is pressed; onKeyUp: an event triggered when a key on the keyboard is pressed An event triggered when a key is pressed and released. 2. Page related events onAbort: The image is interrupted by the user when downloading; onBeforeUnload: An event triggered when the content of the current page is about to be changed; onError: Catching Catch errors that occur on the current page for some reason, such as script errors and external data reference errors; onLoad: an event triggered when the page is empty and transferred to the browser, including the completion of the introduction of external files; onMove: the browser window is moved Events triggered when moving; onResize: events triggered when the browser window size is changed; onScroll: events triggered when the browser's scroll bar position changes; onStop: events triggered when the browser's stop button is pressed Or the file being downloaded is interrupted; onUnload: event triggered when the current page will be changed. 3. Form related events onBlur: An event triggered when the current element loses focus [can be triggered by both mouse and keyboard]; onChange: The current element loses focus and An event triggered when the content of an element changes [can be triggered by mouse or keyboard]; onFocus: an event triggered when an element gains focus; onReset: an event triggered when the RESET attribute in the form is activated; onSubmit: an event Event triggered when the form is submitted. 4. Rolling subtitle event onBounce: An event triggered when the content in the Marquee moves outside the Marquee display range; onFinish: When the Marquee element is completed and needs to be displayed Event triggered after the content; onStart: event triggered when the Marquee element starts to display content. 5. Edit event onBeforeCopy HTML: An event triggered before the currently selected content of the page is to be copied to the clipboard of the viewer's system; onBeforeCut: When the page is An event triggered when part or all of the content will be moved off the current page [clip] and moved to the viewer's system clipboard. 6. Triggered events onBeforeEditFocus: The current element is about to enter the editing state; onBeforePaste: The event is triggered when the content is about to be transferred [pasted] from the viewer's system clipboard to the page; onBeforeUpdate: Notifies the target when the viewer pastes the content in the system clipboard Object; onContextMenu: an event triggered when the browser presses the right mouse button to display the menu or triggers the page menu through keyboard keys [try adding onContentMenu="return false" to the page to disable the use of the right mouse button]; onCopy: an event triggered when the currently selected content on the page is copied; onCut: an event triggered when the currently selected content on the page is cut; onDrag: an event triggered when an object is dragged [activity event] ;onDragDrop: an external object is dragged into the current window or frame by the mouse; onDragEnd HTML: an event triggered when the mouse drag ends, that is, the mouse button is released; onDragEnter: when the object dragged by the mouse enters its container range onDragLeave: an event triggered when an object dragged by the mouse leaves the scope of its container; onDragOver: an event triggered when a dragged object is dragged within the scope of another object's container [active event ]; onDragStart: an event triggered when an object is about to be dragged; onDrop: an event triggered when the mouse button is released during a dragging process; onLoseCapture: an event triggered when an element loses the selection focus formed by mouse movement; onPaste: event triggered when content is pasted; onSelect: event triggered when text content is selected; onSelectStart HTML: event triggered when text content selection will begin to occur. 7. External events onAfterPrint: an event triggered when the document is printed; onBeforePrint: an event triggered when the document is about to be printed; onFilterChange: when an object An event triggered when the filter effect of Event triggered when the initialization property value changes.
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
