文本标签
历史上,网页的主要功能是文本展示。所以,HTML 提供了大量的文本处理标签。
<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>
<img src="warning.jpg" alt="警告">
<p>小心</p>
</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>