To better handle today’s Web applications, HTML5 has added many new features, such as:

  • Canvas element for drawing

  • Video and audio elements for media playback have better support for local offline storage

  • New special content elements such as article, footer, header, nav, section

  • New form controls such as Calendar, Date, Time, email, URL, and Search

The article tag

Usage: The tag specifies independent self-contained content (defining the article).

Value labels

Usage: A tag defines something other than the content it is in (aside should be related to something nearby).

Footer tags

Usage: The tag defines the footer of a document or section. The footer usually contains the author of the document, copyright information, links to terms of use, contact information, and so on.

The header tags

Usage: The tag defines the header of a document (introductory information)

The nav tag

Usage: The part of the tag that defines the navigation link.

Section label

Usage: The tag defines sections in a document. Such as a chapter, header, footer, or other part of a document

Bdi label

Usage: The tag allows you to set a piece of text away from its parent element’s text orientation setting. This tag is useful when Posting user reviews or other content over which you have no complete control. Note: Currently only Firefox and Chrome support the BDI TAB. I haven’t tested it yet (to be studied)

Datalist label

Usage: The tag defines a list of options. Use this element in conjunction with the input element to define the possible values for the input. Datalist and its options are not displayed, it is just alist of valid input values; Bind datalist using the list attribute of the input element. Note: Ie and Safari are not supported; Comparison with SELECT: fuzzy query function, can be input; Example:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>
Copy the code

The details TAB

Note: Only Chrome and Safari 6 support the Details TAB

Embed tags

Usage: Tag defines embedded content, such as plug-in example: using Tencent’s video in the project

<embed src="//player.video.iqiyi.com/d9e0f1893caafc1708b45b622c153312/0/0/v_19rqu21yik.swf-albumId=2028493200-tvId=2028493200-isPur chase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
Copy the code

SRC: content address type: defines the type of embedded content. Width and height: Defines the width and height of the embedded content

Figure labels

Usage: The tag specifies separate stream content (images, charts, photos, code, and so on). Example:

<figure> <p> </p> <img SRC ="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
Copy the code

Figcaption label

Usage: The tag defines the caption of the figure element. Example:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"</ Figure caption> </figure>Copy the code

The keygen tag

Example of defining a generated key:

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Copy the code

Note: IE does not support it

Mark label

Usage: tag defines marked text examples:

<p> I'm sorting out <mark>html5 new features </mark></p>Copy the code

Effect:

Meter label

Usage: The tag defines a scalar measure within a known range or fractional value. Also known as gauge. Disk usage, correlation of query results, and so on. Note: IE does not support; The Meter tag should not be used to indicate progress (in the progress bar). To mark a progress bar, use the example progress TAB:

<meter value="3" min="0" max="10"</meter> <meter value="0.6">60%</meter>
Copy the code

Effect:

Progress label

Usage: Labels indicate the progress of a task (process) example:

Download progress: <progress value="22" max="100"></progress>
Copy the code

Effect:

The output label

Usage: The tag defines different types of output, such as an example of the output of a script:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>
Copy the code

Effect:








The time tag

Usage: The tag defines the time (24 hours) or date of the Gregorian calendar example:

<p> We open at <time>9:00</time> every morning. </p> <p> I am at <time datetime="2008-02-14""> </time> Have an appointment on Valentine's Day. </p>Copy the code

Note: Tags do not render any special effects in any browser.

Audio tags

Usage: The tag defines sounds, such as music or other audio streams. Currently, the element supports three file formats: MP3, Wav, and Ogg. However, Internet Explorer only supports MP3 format and Safari does not support Ogg format. Example:

<audio src='Audio address' controls='controls' loop='loop' autoplay='autoplay'></audio>
Copy the code

SRC: path of the song controls: Play control (do not add this property, the default play control does not appear) loop: play a loop autoplay: The audio is played immediately after it is ready. Fraternal: The audio output is muted if this attribute is present. Preload: Specifies whether and how audio is loaded by default when a web page is loaded. There are three values auto, metadata, and None. Explain in detail please refer to www.runoob.com/jsref/prop-… Note: here is simply to record some audio information, better understanding please stamp www.cnblogs.com/leinov/p/38…

Video element

Usage: The tag defines video, such as movie clips or other video streams. However, browser compatibility for this tag varies, as follows:





MP4 = MPEG 4 files use H264 video codec and AAC audio codec

WebM = WebM files use VP8 video codecs and Vorbis audio codecs

Ogg = Ogg files use Theora video codec and Vorbis audio codec

<video src="Video Address" controls="controls" autoplay='autoplay' height='200' width='200' loop='loop'>
</video>
Copy the code

SRC: video address controls: video controls Autoplay height: video height width: video width loop: video playback preload: If this property is displayed, the video is loaded when the page is loaded and ready toplay. If “autoplay” is used, this property is ignored.

The source tag

Usage: Tags define media resources for media elements such as video and audio. Tags allow you to specify alternate video/audio files for the browser to select based on its support for media types or codecs. Example:

<audio controls>
<source src="/i/horse.ogg" type="audio/ogg">
<source src="/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Copy the code

tag

Usage: tags define the graphics, charts and other images, for example, the label only graphics containers, you must use the script to draw graphics Specific usage see www.liaoxuefeng.com/wiki/001434…