Home > Article > Web Front-end > Summary of all HTML5 tags and explanation of tag meanings
Summary of all HTML5 tags and explanation of tag meanings
- 不言Original
- 2018-05-08 15:51:232328browse
This article mainly introduces the summary of all HTML5 tags and the explanation of tag meanings. This article summarizes the structure tags, multimedia interaction tags, Web application tags, annotation tags, other tags, etc. Friends who need it can refer to it
Structure tag: (block element) Meaningful p
23c3de37f2f9ebcb477c4a90aac6fffd Tag defines an article
1aa9e5d373740b65a0cc8f0a02150c53 Tag defines a page or an area Head
& lt; nav & gt; mark definition navigation link
& lt; section & gt; mark a region
& lt; aside & gt; marked the side bar of the page content part
& lt; hgroup & gt; Information about a block in
24203f2f45e6606542ba09fd2181843a The tag defines a set of media content and their titles
614eb9dc63b3fb809437a716aa228d24 The tag defines the title of the figure element.
c37f8231a37e88427e62669260f0074d Mark defines the bottom of a page or an area
a38fd2622755924ad24c0fc5f0b4d412 Mark defines a dialog box (conversation box) similar to WeChat
Multimedia interactive label
39000f942b2545a5315c57fa3276f220 Tag defines a video
b97864c2e0ef2353a16c4d64c7734e92 Tag defines audio content
e02da388656c3265154666b7c71a8ddc Tag defines media resource
5ba626b379994d53f7acf72a64f9b697 Tag defines image
bc135b9339d0bfa3cf747b3932074090 tag defines external interactive content or plug-ins such as flash
Web application tag
5c0e96d12fc7501cef2ae2efde646ee0Command list
9b8d7b889acba92c978f783c55ba01dcmenu command List tag FF (embedded system)
e2b9f03cad787b9644e1f51fd23b7dac menu tag defines a command button
49c6123c49c6be380cb91db06cd3bfa9 status label (real-time status display: air pressure, temperature) C, O
6ecb87e5318a36c03c59e25d55f43372 status label (Task process: installation, loading) C, F, O
fc86e7b705049fc9d4fccc89a2e80ee3 Define a drop-down list for the input tag, and use the option F, O
a5e9d42b316b6d06c62de0deffc36939 tag to define the detailed content of an element, and use dt , dd C
Comment tag
ec41f2147470148e85ad0337a362103e Tag definition comment or phonetic symbol
515718f19dfe6612658be14be18aa0ec Tell browsers that do not support Ruby elements how to display it
7240f116d85a7ee375466871bc33670a Tag defines the comment content text for ruby
Other tags
aa983b9eb8086376f1f6481364a02e5a Tag defines a generated key value (encrypted) in the form Information transmission) O, F
f920514e6447cf1d171079d1371f007f mark defines marked text (yellow selected state)
be6d67dae90cc1ad6469079e163d0939 mark defines some output types, calculates form results and cooperates with oninput events
Deleted HTML tags
Purely expressive elements:
basefont, big, center, font, s, strike, tt, u;
Have a negative impact on usability Elements:
frame, frameset, noframes;
Confusing elements:
acronym, applet, isindex, dir
Redefined HTML tags
a4b561c25d9afb9ac8dc4d70affff419 Represents inline text, usually in bold, not conveyed to indicate important meaning Sample code: XML/HTML CodeCopy content to clipboard The above is the detailed content of Summary of all HTML5 tags and explanation of tag meanings. For more information, please follow other related articles on the PHP Chinese website!
5a8028ccc7a7e27417bff9f05adf5932 Represents inline text, usually in italics, not conveyed to indicate important meaning
67bc4f89d416b0b8236eaa5f43dee742 Can be used with details and figure. The definition contains text. Dialog can also be used.
73de882deff7a050a357292d0a1fca94 Can be used with details and figure to summarize details. Dialog can also be used.
f32b48428a809b51f04d3228cdf461fa indicates the end of the topic. , instead of horizontal lines, although the display is the same
5c0e96d12fc7501cef2ae2efde646ee0 Redefine the menu of the user interface, use it with commond or menuitem
d015d241ae6d34c34210679b5204fe85 to represent small fonts, such as printing comments or legal terms<xmp>
<!doctype html>
<html>
<head>
<style>
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#ff9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
div{margin-top:10px;height:1000px;}
section{height:1000px;background:#ABCDEF;width:70%;float:left}
article{background:#F90;width:500px;margin:0 auto;text-align:center}
aside{height:1000px;background:#ABCDEF;width:28%;float:right}
footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
</style>
</head>
<body>
<header>
<p>这是一个header标签</p>
<nav>
<ul>
<li>首页</li>
<li>起夜</li>
<li>论坛</li>
<li>商城</li>
<li>社区</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section标签</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br />
处处蚊子咬，<br />
打上敌敌畏，<br />
不至死多少。<br />
</p>
</article>
<hr />
<article>
<h2>上学歌</h2>
<p>
太阳当空照，<br />
花儿对我笑，<br />
小鸟说早早早，你为什么背上小书包?<br />
我要炸学校老师不知道，一拉线，赶快跑，<br />
轰的一声，学校炸没了。<br />
</p>
</article>
<hr />
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unknown Flying Object</p>
</figure>
<figure>
<dt>DDS</dt>
<dd>大屌丝</dd>
</figure>
<hr />
<dialog>
<dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
<dd>悟空:...(看着)</dd>
<dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
<dd>悟空:...(纠结)</dd>
<dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>
<dd>悟空:我靠!(一棍子抡上去！)</dd>
</dialog>
<hr />
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr />
<span contextmenu="candan">右键单击我试试</span>
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem>
</menu>
<hr />
<meter min="0" max="10" value="5" low="3" high="7" ></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro =document.getElementByIdx_x_x_x('pro');
setInterval(function(){
pro.value+=1;
},100);
</script>
<hr />
<details>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
</details>
<hr />
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr />
女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，
于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·
</section>
<aside>
<p>这是一个aside标签</p>
<hgroup>
<h3>女生宿舍为何频频被盗</h3>
<h3>两百头母猪为何半夜惨死</h3>
<h3>是人性的扭曲？</h3>
<h3>还是道德的沦丧！</h3>
</hgroup>
</aside>
</div>
<footer>
<p>这是一个footer标签</p>
<hr />
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
<small>商户合作</small>
</footer>
</body>
</html>
</xmp>