HTML5行内元素和块级元素使用场景的快速指南

<p>这是一段<span style="color: blue;">蓝色</span>的文字<span style="font-size: 20px;">（字号为20px）</span></p>

<nav>
  <a href="index.html">首页</a>
  <a href="about.html">关于</a>
  <a href="contact.html">联系我们</a>
</nav>

<p>在这种情况下，<span class="highlight">强调</span>和<span class="highlight">重点</span>非常重要。</p>

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<header>
  <h1>网页标题</h1>
  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于</a></li>
      <li><a href="contact.html">联系我们</a></li>
    </ul>
  </nav>
</header>

<p>这是一个段落。</p>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<div class="box">
  <p>这是一个盒子</p>
</div>

<hr>

<section>
  <h2>区块标题</h2>
  <p>这是一个区块</p>
</section>

<style>
  .box {
    border: 1px solid black;
    padding: 10px;
  }
</style>