What are the new tags in html5

HTML5 new tags: canvas, audio, video, source, embed, track, datalist, keygen, output, article, aside, bdi, nav, mark, rt, rp, ruby, time, wbr, etc. . The canvas tag can define graphics, the audio tag can define audio content, video can define video, source can define multimedia resources, and embed can define embedded content, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 is the latest version of HTML, which was customized by the W3C in 2014. Enhanced browser native functions reduce browser plug-in (such as flash) applications, improve user experience satisfaction, and make development more convenient. HTML has undergone tremendous changes from 1.0 to 5.0, from a single text display function to a multimedia display function with pictures and texts. After many years of improvement, many features have developed into a very important markup language.

New tags in html5

HTML5 adds some new structural tags, multimedia tags and form tags. Let me introduce it to you below.

New element

##TagDescription Tags define graphics, such as charts and other images. The tag is based on the JavaScript drawing API

New Multimedia Elements

TagDescriptionDefine audio content####Define multimedia resourcesDefine embedded content, such as plug-ins. Specifies an external text track for media such as New form element

Define video (video or movie)

##TagDescriptionDefine the option list. Use this element in conjunction with an input element to define the possible values ​​of the input. Specifies the key pair generator field to use for the form. Define different types of output, such as script output.

New semantic and structural elements

##TagDescription

Define an independent content area of ​​the page.

Define the sidebar content of the page. Allows you to set a piece of text independent of the text direction setting of its parent element. Define a command button, such as a radio button, check box, or button< details>Used to describe the details of a document or a certain part of a document##

##

is specified independently of streaming content (images, charts, photos, code, etc.).

Define the title of the

element

Define the footer of section or document.

Defines the header area of ​​the documentDefine text with tokens. Define weights and measures. Use only for measurements with known maximum and minimum values. The part that defines the navigation link. Define the progress of any type of task. Define ruby ​​comments (Chinese phonetic or characters). Defines the interpretation or pronunciation of a character (Chinese phonetic phonetic or character). is used in ruby ​​comments to define the content displayed by browsers that do not support ruby ​​elements. Define the section (section, section) in the document. Define the date or time. Specifies where in the text it is appropriate to add line breaks.

Define a dialog box, such as a prompt box
The tag contains the title of the details element
	##
	html5 tag usage example (1) Define navigation link It is also a meaningful tag. It does not mean that adding this tag somewhere will create a navigation style. These are just meaningful p. Add the menu tag tags html code: <header> <p>这是一个header部分</p> <nav> <!--导航链接标签--> <ul> <!--配合ul使用--> <li>首页</li> <li>关于</li> <li>产品</li> <li>联系</li> </ul> </nav> </header> css code: /*定义nav的高和颜色*/ nav{ height:30px; background-color:#F33; margin-top:100px;} /*正常设置li的样式*/ li{ list-style:none; float:left; width:100px; height:30px; } In this way, only p can be used before The menu layout is (2) Define the article tag You can use the article Block tag is used to write articles, so use this tag to write articles in the section section. It can be used together with html code: <article><!--文章块p--> 　　<h2>文章标题</h2><!--标题--> 　　<p>文章内容文章内容文章内容文章内容文章内容文章内容 　　<br> 　　文章内容文章内容文章内容文章内容文章内容文章内容<br> 　　文章内容文章内容文章内容</p> </article> css style: article{ background-color:#F33; width:500px; text-align:center; /*水平居中*/ margin:0px auto; } This way you can write an article (3) Define the grouping of media content and their titles A. This tag can be used in conjunction with its matching tag , but the title <figure> <figcaption>标题</figcaption><!--配套--> <p>标题内容</p> </figure> B must be written in the middle of . It can also be used in combination with , where is used to write the title, while is used to write the content. The display effect is also different from the effect of matching use <figure> <dt>标题1</dt> <dd>标题内容</dd> </figure> (4) Define a dialog box or window You can also use the dd and dt tags in this tag, the title and content of the dialog box, the dialog box has The first attribute is open, and the compatibility of this tag is not very good <dialog open> <dt>1问题</dt> <dd>1答案</dd> <dt>2问题</dt> <dd>2答案</dd> </dialog> 　 (5) Define a list or menu of commands A. This tag can be used together with li <menu> <li>定义列表</li> <li>定义列表</li> <li>定义列表</li> </menu> B. You can add your own content to the right-click (only compatible with Firefox) Union (define commands/menu items that the user can call from the popup menu) tag using <menu type="context" id="cai"> <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem> </menu> <span contextmenu="cai">单击我试试</span> The desired menu item appears after right-clicking Click the menu item and the content will pop up (6) Title group You can write some combinations of titles for common use <hgroup><!--标题组--> <h3>标题</h3> <h3>标题1</h3> <h3>标题2</h3> <h3>标题3</h3> </hgroup> # #(7) Define small text This tag is actually similar to other bold tags <small>法律条文</small> <small>联系我们</small> <small>客户意见</small> (8) Define the details of the element The content inside can be used with the title and content tags <details> <dt>问题</dt> <dd>解答</dd> <dt>问题</dt> <dd>解答</dd> <dt>问题</dt> <dd>解答</dd> </details> Click on the details to see the title And the content is (9) Define ruby ​​comment If you encounter a word you don’t recognize, you can use this Annotate Pinyin, but some compatibility is not very good, you can modify it at that time <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby> <!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容--> (10) Define the measurement within the predefined range There are several attribute values, min="" max="" value="" low="" high="", where low and high are ranges. When the value range exceeds, different effects will be displayed <meter min="0" max="10" value="4" low="2" high="7"> After the value value exceeds the range <meter min="0" max="10" value="8" low="2" high="7"> (11) The label of the progress bar <progress id="jindu" max="100" value="0"></progress>进度条 The maximum value is the length of the progress bar, and the value value is the displayed progress. Use it to create a dynamic progress bar <progress id="jindu" max="100" value="0"></progress>进度条 <script> var pro = document.getElementById("jindu"); setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1 </script> The progress bar can be completed in this way, right? It’s much better than writing only in js. Different browsers have different expressions For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What are the new tags in html5. For more information, please follow other related articles on the PHP Chinese website!