<div>

<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。

<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

<div>是无语义的块级元素。下面的例子使用<div>，将图像和文字组合在一起，构成一个警告区块。

只要样式上需要多个块级元素组合在一起，就可以使用<div>。但是，这应该是最后的措施，带有语义的块级标签（比如<article>、<section>、<aside>、<nav>等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<div>。

<p>

p标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素。

<p>hello world</p>

上面代码就是一个简单的段落。

<span>

<span>是一个通用目的的行内标签（即不会产生换行），不带有任何语义。它通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式，就可以把它们放置在<span>。

<p>这是一句<span>重要</span>的句子。</p>

上面代码中，句子里面需要强调的部分，就可以放在<span>。

<br>，<wbr>

<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

hello<br>world

浏览器渲染上面代码时，会分成两行，hello和world各占一行。

<br>对于诗歌和地址的换行非常有用。

<p>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>

上面的代码如果不用<br>，会显示成一行。

注意，块级元素的间隔，不要使用<br>来产生，而要使用 CSS 指定。

<p>第一段</p>
<br>
<br>
<p>第二段</p>

上面的代码希望段落之间有两个换行，这时不应该使用<br>，而应该使用 CSS。

<wbr>标签跟<br>很相似，表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行。它是为了防止浏览器在一个很长的单词中间，不正确地断行或者不断行，所以事先标明可以断行的位置，主要用于欧洲一些单词很长的语言或者 URL 的断行。

<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

上面代码是一个很长的德语单词，为了防止不正确断行，事先用<wbr>告诉浏览器，可以选择在哪里断行。