HTML from getting started to selling computers (ii)

In the early days of learning HTML, the small partners must be a little confused with the various labels, especially if each element is more prone to error in the concept of inline or block-level elements, and this seemingly insignificant problem is related to the fact that we write more standardized, concise, and more "semantic" pages. Let's take a closer look at the common tags in HTML5.

<!--inline Elements--

<!--1.span Label--
<span> Inline Elements </span>
<!--2.q Label--
<q> Inline Elements </q>
<!--3.a Label--
<a href= "" > Inline elements </a>
<!--4.img Label--

<!--5.strong,b Label--
<strong> Inline Elements </strong>
<b> Inline Elements </b>
<!--6.em,i Label--
<em> Inline Elements </em>
<i> Inline Elements </i>
<!--7.abbr Label--
<abbr title= "inline element is me" > inline element </abbr>
<!--8.audio, video label--
<audio src= "" > Inline elements </audio>
<video src= "" > Inline elements </video>
<!--9.td, th label--
<td> Inline Elements </td>

<!--10.input Label--
<input type= "Text" >
<!--11.button Label--
<button> Inline Elements </button>
<!--12.label Label--
<label for= "" > Inline elements </label>
<!--13.textarea Label--
<textarea name= "" id= "" cols= "" rows= "> Inline elements </textarea>
<!--14.mark Label--
<mark> Inline Elements </mark>
<!--15.sup, sub label--
<sup> Inline Elements </sup>
<sub> Inline Elements </sub>
<!--16.time Label--
<time> Inline Elements </time>
<!--17.canvas Label--
<canvas width= "height=" > Inline elements </canvas>
<!--18.command Label--
<command> Inline Elements </command>
<!--19.meterb Label--
<meter> Inline Elements </meter>
<!--20.output Label--
<output> Inline Elements </output>
<!--21.progress Label--
<progress> Inline Elements </progress>
<!--22.ruby, RP, RT Label--
<ruby> Inline Elements </ruby>
<rp> Inline Elements </rp>
<rt> Inline Elements </rt>
<!--23.source Label--
<source>
<!--24.dialog-->
<dialog>

<!--block-level elements--
<!--1.h Label--
<!--2.UL, Li label--
<ul>
Block-level elements
<li> block-level elements </li>
<li> block-level elements </li>
</ul>
<!--3.ol, Li label--
<ol>
Block-level elements
<li> block-level elements </li>
<li> block-level elements </li>
</ol>
<!--4.dl, DT, DD label--
<dl>
Block-level elements
<dt> block-level elements </dt>
<dd> block-level elements </dd>
</dl>
<!--5.P Label--
<p> block-level elements </p>
<!--6.pre Label--
<pre> block-level elements </pre>
<!--7.blockquote Label--
<blockquote> block-level elements </blockquote>
<!--8.hr Label--
<!--9.br Label--
<br>
<!--10.figure, figcaption label--
<figure>

<figcaption> block-level elements </figcaption>
</figure>
<!--11.table, tr label--
<table>
<tr>
<td> block-level elements </td>
</tr>
</table>
<!--12.form Label--
<form action= "" >
Block-level elements
</form>
<!--13.select, option label--
<select name= "" Id= "" >
<option value= "" > Block-level elements </option>
</select>
<!--14.article, aside label--
<article> block-level elements </article>
<aside> block-level elements </aside>
<!--15.section Label--
<section> block-level elements </section>
<!--16.header, footer label--
<footer> block-level elements </footer>
<!--17.nav Label--
<nav> block-level elements </nav>
<!--18.iframe Label--
<iframe src= "" frameborder= "0" > block-level elements </iframe>
<!--19.div Label--
<div> block-level elements </div>
<!--20.address Label--
<address> block-level elements </address>
<!--21.small Label--
<small> block-level elements </small>
<!--22.details Label--
<details> block-level elements </details>
<!--23.embed Label--
<embed src= "" type= "block-level element" ></embed>
<!--24.hgroup Label--
<!--25.keygen Label--
<keygen>
<!--26.summary Label--
<summary> block-level elements </summary>
<!--27.WBR Label--
<wbr>
<!--28.menu Label--
<menu></menu>

HTML from getting started to selling computers (ii)