H5 new features of the basic-html of front-end interview

Source: Internet
Author: User

The new features of H5 (as currently understood by the individual) are as follows
    • Semantic tags
    • New features of the form
    • Video and Audio
    • Canvas Canvases
    • SVG drawing
    • Geo-positioning
    • Drag-and-drop APIs for the mouse
    • Webworker
    • (key) Storage
    • (key) Websocket
What is the semantics of HTML?

Semantics refers to the structure of content (content semantics), the selection of appropriate tags (code semantics), so that developers read and write more elegant code, while the browser crawler and machine very good parsing.

Why semantic?
    • In favor of SEO, help crawlers crawl more effective information, crawler is dependent on the label to determine the context and the weight of the individual keywords.

    • Semantic HTML can also present a good structure of content and code without CSS.

    • Facilitate the resolution of other devices

    • Facilitates team development and maintenance

1. <section></section>

Defines the sections and segments of the body part of a document.

2. <article></article>

A special section tag that has more explicit semantics than the section. Define a separate, complete block of content from the outside, such as what forum articles, blog text ...

3. <aside></aside>

Used to load non-body content of the page, independent of other modules. such as ads, groups of links, sidebar ...


Defines the header of a document, page. It is usually a guide and navigation information, not confined to the entire page header, but also can be used in the content.

5. <footer></footer>

Defines a document, page footer, similar to the header.

6. <nav></nav>

Defines a navigation section consisting of a link group that links to other pages or to other parts of the current page.


Used to group the title elements (H1~H6) of a Web page or section.

8. <figure></figure>

Used to group elements.

9. <figcaption></figcaption>

Adds a caption to the figure element. The first child element or the last one is usually placed in a figure.

10. <details></details>

Define the details of the element, which the user can click to view or hide.

11. <summary></summary>

Used with details to include the details title.

12. <canvas></canvas>

Used for canvas drawing.

13. <video></video>

Define the video.

14. <audio></audio>

Defines the audio.

15. <embed></embed>

Defines the content of the embedded Web page. such as plugins.

16. <source></source>

The label defines the media element for the media element (such as video, audio).

17, <datalist id= ' DL ' ></datalist>

Defines a list of optional data that is used in conjunction with input (<input list= ' dl ' >) to make a drop-down list of input values.

18. <mark></mark>

Visually display to the user the words that they want to highlight. For example, the search results highlight the search keywords to the user.

19, <meter [min/max/low/high/optimum/value]></meter>

Weights and measures, denoted by a range of values in red, yellow and green.

20. <output></output>

Defines different types of output, which are the same style as span.

21. <progress></progress>

Progress bar, progress in the run.

22. <time></time>

Define the date or time.

23. <keygen></keygen>

Defines the encrypted content.

24. <command></command>

Defines the command behavior.

H5 new features of the basic-html of front-end interview

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.