HTML与CSS基础第四课—strong、em、b、i 各表示什么

简单示例（strong、em、b、i）

这四个标签都用在一句话里面，标出其中几个字。还用上一篇的文件外壳，body 换成下面这样，UTF-8 保存，刷新。Mac 用 Cmd + R，Windows 用 F5。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标出几个字</title>
</head>
<body>
  <h1>前端从零到架构师</h1>
  <p>这门课<strong>必须先写对结构</strong>。读到「结构」时要<em>重读</em>。</p>
  <p>产品名写成 <b>HTML</b>，书名写成 <i>HTML 入门</i>。</p>
</body>
</html>

代码效果截图

页面上，「必须先写对结构」和「HTML」通常是粗体，「重读」和「HTML 入门」通常是斜体。粗和斜是浏览器附带的样子。这四个标签要表达的是：这几个字在句子里扮演什么角色。

标签介绍（概念和特征）

它们都是行内标签，包住几个字，不自己另起一块。一段话仍放在 p 里，标题仍用 h1 到 h6。

标签	表示什么	浏览器通常画成
`strong`	内容上更重要	粗体
`em`	读的时候要重读	斜体
`b`	把这几个字标出来，便于扫到，例如产品名、关键词	粗体
`i`	换一种语气，或标出术语、书名、外来词	斜体

strong 和 b 看起来常常都是粗体，意思不同。strong 是在说「这里更重要」。b 只是让人眼容易停在这几个字上，句子的分量没有增加。

em 和 i 看起来常常都是斜体，意思也不同。em 是朗读时要加重力的地方。i 是语气换了，或这几个字本来就和正文不是同一种说法，并不表示重读。

规范里的用词以 WHATWG HTML 为准，日常对照用 MDN（developer.mozilla.org）。浏览器的默认粗体和斜体可以被样式改掉，所以不能靠看起来粗不粗来判断该用哪一个标签。

要改颜色，或只是想让字粗一点、斜一点，用 CSS。这一篇不换标签去完成外观。样式从后面的模块再写。

要点总结

strong：样式上是加粗、同时表达内容上更重要。
b：仅仅表达，样式上是加粗。
em：样式上是斜体、同时表达内容上要重读。
i：样式上是斜体，同时表达内容上要换一种语气、但不表示重读。
p：段落标签,表示一整段话的时候使用。

下一篇：源码里连着按了几次回车，页面上为什么还是连在一起？