• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 中的 b/strong,i/em 有什么区别?

HTML5 中的 b/strong,i/em 有什么区别?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

在HTML4.01中:
< b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder },仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在HTML4.01中并不被推荐使用;

< em > 和 < strong > 是表达要素(phrase elements)。 < em > (emphasized text)表示一般的强调文本,而 < strong > (strong emphasized text)表示比 < em > 语义更强的的强调文本。

而在新的 HTML5 工作草案 中:

< em > 和 < strong > 仍旧是表达要素(phrase elements)。但这时的 < strong > 表示html页面上的强调(emphasized text), < em > 表示句子中的强调(即强调语义)

对于 b 和 i 标签是这样定义的:
The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.

// b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Usage varies widely by language.

// i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本,例如:一个分类名称,一个技术术语,一个外语中的谚语,一个想法等。或者代表斜体的排版方式。

从规范中可以注意到:b 和 i 元素将被赋予真正的语义。更应有预见性注意 b 、i 与 strong 、em 的不同使用 。

参考文档:http://www.planabc.net/2008/03/14/html5_b_and_i_tags_read_semantic/ 应该说,在默认的 HTML 样式表定义中,b 和 strong 的样式一样,为 { font-weight: bolder };而 em 的默认样式为 { font-style: italic },与 i 相同。

在 HTML 4 中,em 表示 emphasized text,strong 表示 strong emphasized text,故 strong 的强度要更强。而在 HTML 5 中,strong 的定义改成了 important text。当然 emphasized 和 strong emphasized 乃至 important 之间怎么界定很模糊,关键是在自己编写 HTML 代码的时候保持使用上一致。

b 和 i 仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」。

参考:
  1. Default style sheet for HTML 4: http://www.w3.org/TR/CSS2/sample.html
在默认的html样式中和,和的样式一样。不过从语义上来讲和是表现元素,仅仅改变外观,和分别意味着行为的强调和加重强调,在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。

另外所有的表现元素其实都是不推荐使用的,应该使用css来代替 在没有被 CSS 定义的情况下,b 和 strong 在同一浏览器内的显示效果相同 — 该要素内的文字变粗了。在语义表达上,strong 表示的强度比 em 更强。另外,b 要素是视觉要素(presentationl elements);em 和 strong 是表达要素(phrase elements)。 我听说.....

em-emphasis 是强调

跟 strong 一样,

在搜索引擎中权重会高些。

而b 只是简单的 bold 或者black?

没有强调色彩。

所以重要内容或关键词用 em or strong

不重要的表象,用b 从将代码语义化的角度来讲:

strong:加重语气。最重的那种。

em:同为加强语气,但气势弱些。

b:是单纯的加粗,没感情色彩。 現在i都代表icon了。 在编写语意化的html时候确实很容易弄错。
HTML中i、em、b、strong的区别
What's the difference between and , and ? 就是bold,字体加粗
是要表达强调而字体被加粗

就是italic,字体斜体
也是强调内容,而被倾斜

这两组标签在实现方式上都是一样的,但使用的意义不同。 默认效果:i和em都是斜体。b和strong都是加粗。没有太多的泣别。
但是em和strong的语义性更强烈,对于搜索引擎的爬蛛来说更友好,能让它知道你这里面的内容的语义效果,b和i只对视觉效果进行了强调,而语义上没有帮助

您可能想查找下面的文章:

相关文章

  • 2018-12-03SVG基础|SVG TSPAN 元素
  • 2018-12-03HTML5实战与剖析之自定义数据属性(dataset)
  • 2018-12-03HTML5中canvas的使用总结
  • 2018-12-03HTML5计时器实现方法
  • 2018-12-03小强的HTML5移动开发之路(39)——jqMobi插件json格式ActionSheet
  • 2018-12-03ng-model ng-show
  • 2018-12-03HTML5怎样正确的使用HTML的地理定位?
  • 2017-08-06HTML5+CSS3实现拖放(Drag and Drop)示例
  • 2018-12-03关于HTML5 Canvas旋转动画的2个例子
  • 2018-12-03浅谈 粒子动画 特效实现实例总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5学习笔记简明版(6):新增属性(1)
    • 基于IE10/HTML5 开发_html5教程技巧
    • HTML5学习笔记(四)-列表, 块和布局代码实例
    • h5canvas实现黑客帝国矩形阵效果代码
    • 自定义元素函数定义与用法汇总
    • 探索HTML5本地存储功能运用技巧
    • html5的新增的标签和废除的标签简要概述_html5教程技巧
    • 近期在尝试用bootstrap做移动端开发,发现了一些问题,这里写下自己的一些想法与疑问?
    • html5设置或返回音频/视频是否应该在结束时再次播放的属性loop
    • HTML5-XMLHttpRequest Level 2概述详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有