What are the new tags in html5-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What are the new tags in html5

青灯夜游

Nov 23, 2022 pm 06:55 PM

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.

What are the new tags in html5

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.

##TagDescription

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

New Multimedia Elements

TagDescription

Define audio content##

##Define multimedia resources

Define 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

elementDefine 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('这是菜单一')" 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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Agnes Tachyon Build Guide | A Pretty Derby Musume

2 weeks ago By Jack chen

Oguri Cap Build Guide | A Pretty Derby Musume

3 weeks ago By Jack chen

Peak: How To Revive Players

4 weeks ago By DDD

Grass Wonder Build Guide | Uma Musume Pretty Derby

1 weeks ago By Jack chen

PEAK How to Emote

3 weeks ago By Jack chen

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

8646

Java Tutorial

1789

CakePHP Tutorial

1731

Laravel Tutorial

1582

PHP Tutorial

1451

Related knowledge

HTML5: The Standard and its Impact on Web Development Apr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

The Connection Between H5 and HTML5: Similarities and Differences Apr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

Understanding H5: The Meaning and Significance May 11, 2025 am 12:19 AM

H5 is HTML5, the fifth version of HTML. HTML5 improves the expressiveness and interactivity of web pages, introduces new features such as semantic tags, multimedia support, offline storage and Canvas drawing, and promotes the development of Web technology.

H5: Exploring the Latest Version of HTML May 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

HTML5: Limitations May 09, 2025 pm 05:57 PM

HTML5hasseverallimitationsincludinglackofsupportforadvancedgraphics,basicformvalidation,cross-browsercompatibilityissues,performanceimpacts,andsecurityconcerns.1)Forcomplexgraphics,HTML5'scanvasisinsufficient,requiringlibrarieslikeWebGLorThree.js.2)I

Significant Goals of HTML5: Enhancing Web Development and User Experience May 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

What is Microdata? HTML5 Explained Jun 10, 2025 am 12:09 AM

MicrodataenhancesSEOandcontentdisplayinsearchresultsbyembeddingstructureddataintoHTML.1)Useitemscope,itemtype,anditempropattributestoaddsemanticmeaning.2)ApplyMicrodatatokeycontentlikebooksorproductsforrichsnippets.3)BalanceusagetoavoidclutteringHTML

HTML5: Goals in 2024 May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

See all articles