在学习html的初期,小伙伴们肯定对各种标签有点混淆,尤其在每个元素是行内元素还是块级元素的概念上更容易出错,这个看似无关紧要的问题实则关系到我们写出更规范、更简洁、更具“语义化”的页面,下面我们就仔细分辨一下html5中的常用标签。

  <!--行内元素-->

<!--1.span标签-->
<span>行内元素</span>
<!--2.q标签-->
<q>行内元素</q>
<!--3.a标签-->
<a href="">行内元素</a>
<!--4.img标签-->
<img src="" alt="行内元素">
<!--5.strong,b标签-->
<strong>行内元素</strong>
<b>行内元素</b>
<!--6.em,i标签-->
<em>行内元素</em>
<i>行内元素</i>
<!--7.abbr标签-->
<abbr title="行内元素就是我">行内元素</abbr>
<!--8.audio、video标签-->
<audio src="">行内元素</audio>
<video src="">行内元素</video>
<!--9.td、th标签-->
<td>行内元素</td>
<!--10.input标签-->
<input type="text">
<!--11.button标签-->
<button>行内元素</button>
<!--12.label标签-->
<label for="">行内元素</label>
<!--13.textarea标签-->
<textarea name="" id="" cols="30" rows="10">行内元素</textarea>
<!--14.mark标签-->
<mark>行内元素</mark>
<!--15.sup、sub标签-->
<sup>行内元素</sup>
<sub>行内元素</sub>
<!--16.time标签-->
<time>行内元素</time>
<!--17.canvas标签-->
<canvas width="200" height="200">行内元素</canvas>
<!--18.command标签-->
<command>行内元素</command>
<!--19.meterb标签-->
<meter>行内元素</meter>
<!--20.output标签-->
<output>行内元素</output>
<!--21.progress标签-->
<progress>行内元素</progress>
<!--22.ruby、rp、rt标签-->
<ruby>行内元素</ruby>
<rp>行内元素</rp>
<rt>行内元素</rt>
<!--23.source标签-->
<source>
<!--24.dialog-->
<dialog>


<!--块级元素-->
<!--1.h标签-->
<h1>块级元素</h1>
<h2>块级元素</h2>
<h3>块级元素</h3>
<h4>块级元素</h4>
<h5>块级元素</h5>
<h6>块级元素</h6>
<!--2.ul、li标签-->
<ul>
块级元素
<li>块级元素</li>
<li>块级元素</li>
</ul>
<!--3.ol、li标签-->
<ol>
块级元素
<li>块级元素</li>
<li>块级元素</li>
</ol>
<!--4.dl、dt、dd标签-->
<dl>
块级元素
<dt>块级元素</dt>
<dd>块级元素</dd>
</dl>
<!--5.p标签-->
<p>块级元素</p>
<!--6.pre标签-->
<pre>块级元素</pre>
<!--7.blockquote标签-->
<blockquote>块级元素</blockquote>
<!--8.hr标签-->
<hr>
<!--9.br标签-->
<br>
<!--10.figure、figcaption标签-->
<figure>
<img src="" alt="块级元素">
<figcaption>块级元素</figcaption>
</figure>
<!--11.table、tr标签-->
<table>
<tr>
<td>块级元素</td>
</tr>
</table>
<!--12.form标签-->
<form action="">
块级元素
</form>
<!--13.select、option标签-->
<select name="" id="">
<option value="">块级元素</option>
</select>
<!--14.article、aside标签-->
<article>块级元素</article>
<aside>块级元素</aside>
<!--15.section标签-->
<section>块级元素</section>
<!--16.header、footer标签-->
<header>块级元素</header>
<footer>块级元素</footer>
<!--17.nav标签-->
<nav>块级元素</nav>
<!--18.iframe标签-->
<iframe src="" frameborder="0">块级元素</iframe>
<!--19.div标签-->
<div>块级元素</div>
<!--20.address标签-->
<address>块级元素</address>
<!--21.small标签-->
<small>块级元素</small>
<!--22.details标签-->
<details>块级元素</details>
<!--23.embed标签-->
<embed src="" type="块级元素"></embed>
<!--24.hgroup标签-->
<hgroup>块级元素</hgroup>
<!--25.keygen标签-->
<keygen>
<!--26.summary标签-->
<summary>块级元素</summary>
<!--27.wbr标签-->
<wbr>
<!--28.menu标签-->
<menu></menu>