foreword
HTML5 has been proposed for many years. What new features does HTML5 bring? What's the difference from the previous HTML version? This is often a topic that interviewers get tested. Let us summarize this question in depth~
What's New in HTML
1: Semantic tags
Through semantic tags, the page can have a more complete structure, make the elements of the page meaningful, and at the same time, it is conducive to being parsed by search engines, which is beneficial to SEO. The main tags include the following tags:
| Label | describe |
|---|---|
| header | Represents the header area of the document |
| footer | Represents the trailing area of the document |
| are not | Indicates the document navigation section |
| section | Represents a section of a document |
| article | show article |
| main | Represents the main content area of the document |
2: Enhanced Forms
For example, you can specify whether the type is number or date or url through the type attribute of input, and also add form attributes such as placeholder and required.
3. Media Elements
Two media-related tags, audio and video, have been added, allowing developers to embed browser audio and video content in web pages without any plug-ins.
4. Canvas drawing
Canvas drawing refers to setting an area on the page, and then dynamically drawing graphics in this area through JS.
5. svg drawing
This part is not detailed, and friends who want to know more can refer to other articles~
6. Geolocation
Use the getCurrentPosition() method to get the user's position, so as to achieve the team's geographic location positioning.
7. Drag and drop API
By setting the attribute draggable value to true for the label element, the dragging of the target element can be realized.
8. Web Worker
By loading a script file, Web Worker creates an independent working thread, which runs outside the main thread. After the worker thread finishes running, it will return the result to the main thread. The worker thread can handle some computationally intensive tasks, so that the main thread It will become relatively easy. This does not mean that JS has the ability of multi-threading, but the real browser as the host environment provides a JS multi-threaded running environment.
9. Web Storage
Regarding the Web Storage part, what you need to focus on is the difference between cookies, Localstorage and SessionStorage:
10. Websocket
Regarding the websocket protocol, the main thing you need to remember is the difference between websocket and HTTP.
- Same point
Both HTTP and Websocket are application layer protocols based on TCP.
- difference
Websocket is a two-way communication protocol, which simulates the socket protocol and can send and receive messages in both directions. HTTP is one-way, which means that communication can only be initiated by the client.
Websocket requires the browser and the server to establish a connection through a handshake, but HTTP is a connection sent by the browser to the server, and the server does not know this connection in advance.
- connect
When websocket establishes a handshake, it needs to be transmitted based on HTTP. After the connection is established, the HTTP protocol is no longer required.
Summarize
Regarding the new features of HTML5, I hope you can give a systematic answer from the above ten points.