Home > Article > Web Front-end > Summary details of html5 common tags

Summary details of html5 common tags

黄舟Original: 2017-03-20 16:13:362280browse

1. Main structure

##footerFooter

header	The page header is different from
aside	sidebar
nav	External link collection
section	Chapter or paragraph
article	Records in the form of articles, summary, or message POST (generally paired with inline headers Head, tail, and bottom structures are used)
hggroup	Data such as subtitles, title information, optional titles, and TAG tags are better understood in English. , heading of a section
address	Contact information, generally used around article or body anchor elements

2. Summary table of HTML 5 element tags

Document type declarationRoot element elementhtml##META elementComponent elementsGroupdlText level semantic elementtimeEdit elementsEmbedded content elementsobjectTableForm elementInteractive elementsScript element##3. HTML 5 element general attributes and event handlers



head, title, base, link, meta, style
body, section, nav, article, aside, h1, h2, h3, h4 , h5, h6, hgroup, header, footer, address
Content elementp, hr, br, pre, blockquote, ol ,ul,li,	,dt,dd,figure,figcaption,p
a,em,strong, small, cite, q, dfn, abbr,	, code, var, samp, kbd, sub, sups, i, b, mark, ruby, rt, rp, bdo, span
ins,del
img,iframe,embed,	, param, video, audio, source, canvas, map, area
Elementtable,caption,colgroup,col,tbody,thread,tfoot,tr,td,th
form,fieldset,legend,label , button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter
details, summary, command, menu
script, noscript

HTML5Element general attribute table、contenteditable、contextmenu、onabort, onblur*, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror*, onfocus*, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload*, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate ,onvolumechange,onwaiting.

accesskey、class

dir、draggable , hidden, id, lang, spellcheck, style, tabindex, title ##HTML5 element event handle attribute

4. HTML5 element tag interpretation

##<tr> <td>●</td> <td>Title</td> <td>Define the file title, displayed at the top of the browser</td> <td></td> </tr><base><tr> <td>o</td> <td>Basic mark</td> <td>can convert relative URL to absolute and specified link</td> <td></td>##< ;link></tr> <tr>o<td></td>External resource connection<td></td>Must have rel attribute description<td></td> <td></td><meta></tr> <tr>o<td></td> <td>Other</td>META data<td><a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">META data that cannot be described by title, base, link, style, and script elements</a></td> <td> </td><style></tr> <tr>●<td></td>Embedded document style information<td></td> <td></td> <td></td>##Component tags</tr> <tr><td colspan="4"> <strong></strong><body></td></tr>●<tr> <td>Document body start</td> <td>Document content container</td> <td></td> <td><section></td> </tr>●<tr> <td>Represents a common document or application component</td> <td> </td> <td></td>##<nav><td></td>●</tr> <tr> <td>Navigation</td>Links<td></td>External link or document internal link<td><a href="http://www.php.cn/code/9303.html" target="_blank"></a></td><article><td> </td>●</tr> <tr>Page module<td></td>Records in the form of articles, abstracts or messages POST etc.<td></td> <td></td><aside><td></td>●</tr> <tr>Isolated module<td></td>Generally used as sidebar advertisements, descriptions, <td>citations</td>, navigation, etc., the aside containment part is generally less coupled with the main text<td></td> <td><a href="http://www.php.cn/wiki/231.html" target="_blank"><h1></a></td>●</tr> <tr>Title tag<td></td>In addition, there are h2, h3, h4, h5, h6<td></td> <td></td><hgroup><td></td>●</tr> <tr>Group title<td></td> is used when a set of elements such as h1-h6 is used to distinguish the main and subtitles ? ?</tr> <tr> <td><header></td> <td>●</td> <td>Group description or group navigation</td> <td>Can also be called the header title</td> </tr> <tr> <td><footer></td> <td>●</td> <td>Footer title</td> <td>The scope is related to the nearest widget element</td> </tr> <tr> <td><address></td> <td>●</td> <td>Address or contact information</td> <td> </td> </tr> <tr> <td>##Group content tag<strong></strong> </td> <td></td> <td></td> <td></td> </tr> <tr><p><td></td>●<td></td>Paragraph mark <td></td> <td></td> </tr> <tr><hr><td></td>o<td></td>Horizontal dividing line<td></td> <td></td> </tr> <tr><br><td></td>o<td></td>Line break<td></td> <td></td> </tr>##<pre class="brush:php;toolbar:false"><tr> <td>●</td> <td>Preformatted block</td> <td> </td> <td></td>##<blockquote></tr> <tr>●<td></td> Block quote<td></td> <td></td> <td>##<ol></td> </tr>●<tr> <td>Numbered list</td> <td> </td> <td></td> <td><ul></td> </tr>●<tr> <td>Project list</td> <td> </td> <td></td> <td><li></td> </tr>●<tr> <td>List items</td> <td> </td> <td></td>##<dl><td></td>●</tr> <tr>Definition list <td></td> <td></td> <td></td><dt><td></td>●</tr> <tr>Definition name<td></td> <td></td> <td></td><dd><td></td>●</tr> <tr>Definition description<td></td> <td></td> <td>##<figure></td> <td>●</td> </tr>Stream content block description<tr> <td>Use in combination with figcaption</td> <td></td>##<figcaption><td></td>●<td> </td>figureContent attribute</tr> <tr> <td></td> <td>##<p></td> <td>●</td> <td>Positioning tag</td> </tr>None Actual meaning <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td></td>Text-level semantics Tag<td></td> <td></td> </tr><a><tr><td colspan="4">●<strong></strong>Link tag</td></tr> <tr> <td></td> <td><em></td> <td>●</td> <td>Emphasis mark</td> </tr> <tr> <td></td> <td><strong></td> <td> ●</td> <td>Emphasis mark</td> </tr> <tr> <td></td>##<small><td></td>●<td></td>Reduce font<td></td> </tr> <tr> <td>##<cite></td> <td>●</td> <td>italic mark</td> <td> </td> </tr> <tr> <td><q></td> <td>●</td> <td>Quotation mark content</td> <td>The original text is phrasing content, it is not clear how to translate it</td> </tr> <tr> <td>< ;dfn></td> <td>●</td> <td>Definition of terms</td> <td> </td> </tr> <tr> <td><abbr></td> <td>●</td> <td>Abbreviation</td> <td> </td> </tr> <tr>##<time><td></td>●<td></td>Date Time<td></td> <td></td> </tr> <tr><code><td></td>●<td></td>Program code<td></td> <td></td> </tr>##<var> ;<tr><td>●</td><td></td>Variable<td></td><td> </td></tr><tr>##<samp><td></td>● <td></td>Example<td><a href="http://www.php.cn/wiki/70.html" target="_blank"> </a></td> <td></td><kbd><tr>●<td></td>Keyboard words<td></td> <td></td> <td>##<sub><sups></td> </tr>●<tr> <td>Superscript/Subscript</td> <td> </td> <td></td> <td><i></td> </tr>●<tr> <td>Italic mark</td> <td> </td> <td></td>##<b><td></td>●</tr> <tr>Bold mark<td></td> <td></td> <td>##<mark></td> <td>●</td> </tr> Mark or highlight<tr> <td> </td> <td></td>##<ruby><td></td>●<td></td>Annotation Mark</tr> <tr> <td> </td> <td></td><rt><td></td>●<td></td>ruby child element</tr> <tr>Use in conjunction with ruby, for example: <ruby>天<rt> Tian</rt>Yuan<rt>Yuan</rt></ruby><td></td> <td>##<rp></td> <td>●</td> <td>ruby Child elements </td> </tr> are generally used as rt elements <tr> Comments <td> Use </td> <td></td> <td><bdo></td> <td>●</td> </tr> <tr> <td> </td> <td></td> <td><span></td> <td>●<a href="http://www.php.cn/code/8105.html" target="_blank"></a>Custom tag</td> </tr> <tr> <td></td> <td></td>Edit tag<td></td> <td></td>#<ins></tr> <tr>●<td></td> <td></td> <td></td> <td></td><del></tr> <tr>●<td colspan="4"><strong> </strong></td> </tr> <tr> <td></td> <td>Embedded content Tag</td> <td></td> <td></td><img></tr> <tr>●<td></td> <td>Picture</td> Tag<td></td> <td> </td> </tr> <tr><iframe><td colspan="4"><strong>●</strong></td> </tr>Frame<tr>Mark<td></td> <td></td> <td><a href="http://www.php.cn/css/css-rwd-images.html" target="_blank"><embed></a></td>●<td></td>Embed tag</tr> <tr> <td></td> <td>##<object></td> <td>● <a href="http://www.php.cn/css/css-rwd-frameworks.html" target="_blank"></a> </td>Object<td>Mark</td> <td> </td> </tr> <tr>##<param><td></td>●<td></td>Parameter mark<td></td> <td></td> </tr> <tr><video><td></td>●<td></td> <td>Video<a href="http://www.php.cn/code/6707.html" target="_blank"> Tag</a> </td> <td></td> </tr> <tr>< ;audio><td></td>●<td></td> <td>audio<a href="http://www.php.cn/code/6093.html" target="_blank">tag</a> </td> <td></td> </tr>##<source><tr> <td>●</td> <td>Source tag</td> <td> </td> <td></td>##<canvas></tr> <tr>●<td></td>Cartographic tag<td></td> <td></td> <td></td><map></tr> <tr>●<td></td> <td>Map</td>Mark<td> <a href="http://www.php.cn/code/7891.html" target="_blank"> </a> </td> <td></td><area></tr> <tr>●<td></td>Area Marker<td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td>##Table mark</tr> <tr> <td colspan="4"><strong>##<table> </strong></td>●</tr> <tr>Table tag<td></td>Set the parameters of the table<td></td> <td></td><caption><td></td>●</tr> <tr>Table title<td></td>Make one column to fill in the table title<td></td> <td>##<colgroup></td> <td>●</td> </tr> <tr> <td> </td> <td></td>##<col><td></td>●<td></td> </tr> <tr> <td></td> <td></td><tbody><td></td>●<td></td> </tr> <tr> <td></td> <td></td><thread><td> </td>●<td></td> </tr> <tr> <td></td> <td>##<tfoot></td> <td>●</td> <td> </td> </tr> <tr> <td></td> <td><tr></td> <td>●</td> <td>Table columns</td> </tr>Set the columns of the table<tr> <td> </td> <td><td></td> <td>●</td> <td>Table columns</td> </tr>Set the columns of this table<tr> <td></td>##< ;th><td></td>●<td></td>Table header<td></td> is equal to <TD>, but the text font will be bolder</tr> <tr> <td></td> <td>Form tag</td> <td></td> <td>##<form></td> </tr>●<tr><td colspan="4">Form tag<strong></strong>Determine the form Operation mode</td></tr> <tr> <td><fieldset></td> <td>●</td> <td> </td> <td> </td> </tr> <tr>## <legend><td></td>●<td></td> <td></td> <td></td> </tr> <tr><input><td></td>●<td></td>Input label<td></td> <td></td> </tr>##<label><tr> <td>●</td> <td> </td> <td> </td> <td></td> </tr><button><tr> <td>●</td> <td></td>Button<td></td> <td> </td> </tr> <tr> <td>< ;select></td> <td>●</td> <td>Select mark<a href="http://www.php.cn/code/5991.html" target="_blank"></a> </td> <td></td> </tr><datalist><tr> <td>●</td> <td> </td> <td> </td> <td></td>##<optgroup></tr> <tr>●<td></td> <td></td> <td></td> <td></td><option></tr> <tr>●<td></td>Option<td></td> <td></td> <td>##<textarea></td> </tr>●<tr> <td> </td> <td> </td> <td></td>##<keygen><td></td>●</tr> <tr> <td></td> <td></td> <td></td><output><td></td>●</tr> <tr> <td></td> <td></td> <td></td><progress> ;<td></td>●</tr><tr> <td></td> <td></td><td>##<meter><td>●</td> </tr> <tr> <td> </td> <td></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td></td> <td></td> <td>Interactive elements</td> </tr> <tr> <td></td>##<details><td></td>●<td></td> <td></td> </tr> <tr> <td colspan="4"><p><summary><strong></strong>●</p></td> </tr> <tr> <td></td> <td>##<command></td> <td>●</td> <td> </td> </tr> <tr> <td></td>##<menu><td></td>●<td></td> <td></td> </tr> <tr> <td></td> <td>Other tags</td> <td></td> <td>##<script></td> </tr>●<tr> <td> </td> <td> </td> <td></td> <td><noscript></td> </tr>●<tr><td colspan="4"> <strong></strong> </td></tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td>Remark: </td> <td></td> 1. ● indicates that the mark is a containment mark and needs to end with the mark </mark>. <td></td>2. o means that the tag is an empty tag and does not require an end tag. </tr> </tbody></table> </td> </tr> </tbody></table><p>The above is the detailed content of Summary details of html5 common tags. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>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</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="html5 WebWorkers sample code sharing to prevent browser from suspended animation" href="http://m.php.cn/faq/357701.html">html5 WebWorkers sample code sharing to prevent browser from suspended animation</a></span><span>Next article：<a class="dBlack" title="html5 WebWorkers sample code sharing to prevent browser from suspended animation" href="http://m.php.cn/faq/357705.html">html5 WebWorkers sample code sharing to prevent browser from suspended animation</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348281.html" title="AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds" class="aBlack">AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348372.html" title="HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)" class="aBlack">HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348373.html" title="Detailed explanation of image drawing examples in HTML5 canvas 9" class="aBlack">Detailed explanation of image drawing examples in HTML5 canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348374.html" title="Regular expressions and new HTML5 elements" class="aBlack">Regular expressions and new HTML5 elements</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348469.html" title="How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server" class="aBlack">How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>

Mark	Type	Meaning	Introduction
File tag
	●	Root file tag	Let the browser know that this is an HTML file
# #META tag
●	begins	provides overall file information