说明: 在HTML中,b和strong都是加粗,i和em都是斜体。但是从HTML4到HTML5中,又发生了转变。所以有必要写下来。
说明:虽然b和strong的展示效果一样,都是将字体加粗表示。但是b在HTML5中又发生了变化。
b标签(bold):
HTML4的定义:
The tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思为b标签仅仅表示加粗,不带有任何强调的意味。(只是为了排版或者好看)
HTML5的定义:
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思为表示“文体突出”文字,通俗讲就是突出不安分的文字。像概要中的关键字,产品名。或者代表强调的排版方式
2.strong标签(全称是stronger emphasis):
represents a span of text with strong importance.a tag within another tag has even more importance.
// 意思为strong标签是语气加重,更为重要的强调,如果两个strong标签嵌套还表示极度重要。strong的重要程度是要大于em标签的
总结:b仅仅只是加粗,并没有任何语义。但是strong标签则有语气加重的强调的意思。
说明:就像b和strong的关系一样。i和em的对应关系也很容易理解。
i标签(全称是italic):
HTML4的定义:
The tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思为i标签仅仅只是将字体显示为斜体,无任何语义化意思
HTML5的定义:
The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思为i元素现在表现为在文章中突出不同意见或语气或的一段文本,例如外语,科技术语、或者是排版用的斜体文字
em(全称是emphasis):
The represents a span of text with emphatic stress.
// 意思是说em有强调的意思
总结:i仅仅只是斜体显示,并没有任何语义。但是em标签则有加强的语义在内。
说明:在上面的介绍中,已经介绍了em和strong,个中差别,看英文既能分辨。
em的全称是:emphasis,意思为强调。
strong的全称是:stronger emphasis,意思就是语气更强的强调。
总结:em和strong标签均带有强调的语义,但是strong标签所表现的强调语气要大于em的。
这一部分,查阅的文档和资料太多了,看完了html4发现html5又更改了意思,只能跑去w3c去看规范。
总结:i和b在Html5中被赋予语义,不同于html4。em和strong的差别在于强调的程度。
参考链接:
Using and elements
HTML5: The Semantic Difference Between Bold and Strong
暂时总结的就这么多了,重点在于b/strong , i/em几个标签的区别。也是目前前端学习中的盲点。
前两天看到一句话:
"很多人非常努力的学习JavaScript,认为学好了JavaScript就是一切。但是忽略了JavaScript其实是一门'胶水语言'的本质,它是用来粘合HTML和CSS的。"
看到这句话后,决定在寒假认真学习HTML与CSS。这些东西,虽说简单,但写好也很难。比如说最近学习的Sass,PS切图等。无论哪个,都属于技术盲点。
因为经验尚浅,所以如果有出错的地方,希望各位能帮忙指正。
最后附上本人博客地址和原文链接,希望能与各位多多交流。
Lxxyx的前端乐园
原文链接:寒假前端学习(2)——HTML语义化标签探析
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com