Web front-end development learning----8. HTML5 some new tags

Look at a picture first

It is obvious that HTML5 's page layout is much simpler than html4.0 div+css traditional layout mode, and more friendly to search engines. The benefits of semantic tagging are not much to say.

Say a few interesting new tags:

<meter></meter> display a measuring meter for temperature, pressure, etc.

Meter Demo

<progress><progress/> display a progress bar, with JS can show the dynamic loading effect. Used to load progress, download progress, and so on.

Progress Demo

<details></details> only chrome support. With <summary></summary> and <dd></dd><dt></dt> can replace the JS effect.

Details Demo

<mark></mark> can highlight text

Mark Demo

<ruby></ruby> to rare words phonetic notation. With <rt></rt><rp></rp> use, RT is used for phonetic notation, and the RP is used to define what is displayed when the browser does not support "Ruby" elements.

Ruby Demo

<figure> tags provide separate flow content (images, charts, photos, code, etc.), with <figcaption></figcaption> add a caption to a figure

Of course, there are many other new tags, such as canvas canvas, audio,video media tags and so on.

Record these first, have time to come back to fill in the notes.

Web front-end development learning----8. HTML5 some new tags