所有的 HTML 标记标签可以根据它们的显示方式分为 块级标记标签 和 内联标记标签

块级标记标签

块级标记标签始终占用一行，后面的标签从新行开始

可以在 CSS 中更改块级标签的宽度 width，高度 height，填充 padding 和外边距 margin

下面列出了 HTML 中的所有的块级标签

• <address>
• <article>
• <aside>
• <blockquote>
• <canvas>
• <dd>
• <div>
• <dl>
• <dt>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <h1> - <h6>
• <header>
• <hr>
• <li>
• <main>
• <nav>
• <noscript>
• <ol>
• <output>
• <p>
• <pre>
• <section>
• <table>
• <tfoot>
• <ul>
• <video>

内联标记标签

内联标记标签和相邻的内联标记标签会显示在同一行上

对于内联标记标签，修改 width，height，padding-top，padding-bottom，margin-top 和 margin-bottom 都是无效的，不管是使用属性来修改还是使用 CSS 样式来修改

下面列出了 HTML 中的所有的内联标记标签

• <a>
• <abbr>
• <acronym>
• <b>
• <bdo>
• <big>
• <br>
• <button>
• <cite>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <q>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>
• <time>
• <tt>
• <var>

<div> 标记标签

<div> 标记标签是 HTML 中最典型的块级标记标签，通常是其它 HTML 标记标签的容器

<div> 标记标签最常见的用途是设置 HTML 页面的布局，也就是常说的 div + css 布局取代了早期的表格布局

我们可以设置 <div> 块的样式，比如定义样式属性，例如背景颜色，字体和外边距等

<div style="background-color:black;color:white;padding:20px;">
  <h2>HTML</h2>
  <p>HTML 是用于描述网页的标准标记语言</p>
</div>

<span> 标记标签

<span> 标记标签是 HTML 中最典型的内联标记标签，通常作为文本的容器

我们可以通过设置 <span> 标记标签的 style 属性来定义该标签内的文本的样式

<h1>我 <span style="color:red">最重要的</span> 标题</h1>

CSS diplay 属性

我们可以使用 CSS 中的 display 属性来改变元素的显示方式

该 CSS 属性可选的值有

• display:block - 将一个标记标签显示为块状的
• display:inline - 将一个标记标签显示为内联的
• display:inline-block - 显示为出现在同一行中的内联块元素，并且可以修改内边距和外边距的宽度和高度

例如，我们可以将 <span> 标记标签转换为块级的

<span>这是一个内联元素</span>

<span style="display:block;">这是一个内联元素，但显示为块级元素</span>

<span>这是一个内联元素</span>

运行代码后，你可以发现第二个 <span> 元素本身就在一行上，并且已成为块级元素