云计算百科
云计算领域专业知识百科平台

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

简单示例(strong、em、b、i)

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

<!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:段落标签,表示一整段话的时候使用。
  • 下一篇:源码里连着按了几次回车,页面上为什么还是连在一起?

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » HTML与CSS基础第四课—strong、em、b、i 各表示什么
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!