Additional elements added to 2.HTML5

Additional elements added to HTML5:

　　 The video element is used to define videos.

　　 The audio element is used to define the sound.

　　The embed element is used to insert various multimedia formats, such as MIDI, Wav, AIFF, AU, MP3, and so on.

　　The mark element is primarily used to visually present to the user which text is highlighted or highlighted. A more classic application of the Mark element is to highlight search keywords to the user in the search results.

　　The progress element represents a running process, and you can use the process element to display the progress of a function that consumes time in JavaScript. <progress value= "max=" ></progress>

　　The meter element represents weights and measures, and is used only for measurements of known maximums and minimums. You must define the scope of the measure, that is, the text of the element that can be re-defined, or you can define it in the Min/max property.

<meter value= "9" min= "0" max= "ten" >9/10</meter><br>
<meter value= "0.4" >40%</meter>

　　 The time element is used to represent dates or times, and they can also represent both.

<p>
We start our business every morning <time>9:00</time>.
</p>

<p>
I have an appointment at <time datetime= "2010-02-14" > Valentine's Day </time>.
</p>

　　Ruby elements represent ruby annotations (Chinese phonetic notation or characters). The RT element represents the interpretation or pronunciation of characters (Chinese phonetic symbols or characters). RP elements are used in Ruby annotations to define what is displayed by browsers that do not support ruby elements

<ruby>
Han <rp> (</rp><rt>Han</rt><rp>) </rp>
Word <rp> (</rp><rt>zi</rt><rp>) </rp>
</ruby>

The effect is as follows:

　　　　　　　　　

　　The wbr element represents a soft line break. The difference between the WBR element and the BR element is that the BR element must be wrapped here, and the second WBR element is that the width of the browser window or the parent element is wide enough (no newline is necessary), does not wrap, and when the width is not enough, the active line wraps here. WBR elements seem to be useful for character-based languages, but for Chinese, they seem to be of little use.

<p>
If you want to learn AJAX, then you must be familiar with Xml<wbr>http<wbr>request objects.
</p>
<p>
If you want to learn AJAX, then you must be familiar with Xml<br>http<br>request objects.
</p>

　　canvas elements represent graphs, scales, and other images. The element itself has no behavior and only provides a single canvas, but presents a drawing API to client-side JavaScript so that the script can draw what it wants to draw onto this canvas.

　　 The command element represents a CommandButton, such as a radio button, a check button, or a button. Only IE 9 Support <command> tags

　　 The details element represents the detail information that the user requests and can get. It can be used with the summary element to provide a caption or legend using the summary element. The title is visible, and when the user clicks on the title, details are displayed. The summary element should be the first child element of the details origin. Currently only Chrome and Safari 6 support <details> tags.

<details>
<summary>copyright 2011.</summary>
<p>all pages and graphics on this web site is the property of w3school.</p>
</details>

The effect is as follows:

　　　　　　

Click on the icon to display p tag content, such as

　　　　　　

　　The DataList element represents a list of optional data, used in conjunction with the INPUT element, to create a drop-down list of input values. (using Google Chrome)

<form action= "demo-form.php" method= "Get" >
<input list= "Browsers" name= "Browser" >
<datalist id= "Browsers" >
<option value= "Internet Explorer" >
<option value= "Firefox" >
<option value= "Chrome" >
<option value= "Opera" >
<option value= "Safari" >
</datalist>
<input type= "Submit" >
</form>

<p><strong> Note:</strong> Internet Explorer 9 (earlier IE version), Safari does not support DataList tags. </p>

　　The DataGrid element represents a list of optional data, which is displayed as a tree-shaped list. Https://www.quackit.com/html_5/tags/html_datagrid_tag.cfm

　　The keygen element represents the generated key.

<form action= "/example/html5/demo_form.asp" method= "Get" >
User name: <input type= "text" name= "Usr_name"/>
Encryption: <keygen name= "Security"/>
<input type= "Submit"/>
</form>

　　 The output element represents different types of outputs, such as the output of a script.

<form oninput= "X.value=parseint (a.value) +parseint (b.value)" >0
<input type= "range" id= "a" value= ">100"
+

<input type= "number" id= "B" value= ">"
=<output name= "x" for= "a B" ></output>
</form>

<p><strong> Note:</strong> Internet Explorer does not support output labels. </p>

　　The source element defines media resources for media elements such as video and audio.

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

　　 The menu element represents a list of menus. Use this label when you want to list the form controls.

<menu>
<li><input type= "checkbox"/>red</li>
<li><input type= "checkbox"/>blue</li>
</menu>

　　The dialog element represents a dialog box. Only Chrome and Safari 6 and Support dialog tags.

Additional elements added to 2.HTML5