大家好，我是IT修真院郑州分院第三期的学员高雪峰，一枚正直、纯洁、善良的前端程序员

今天给大家分享一下，修真院官网CSS任务5，深度思考中的知识点——易混淆标签

1.背景介绍

随着CSS的发展和版本的迭代，我们能够使用的标签也随之增多，有许多标签虽然在结果上表现出来十分相似，但如果不理解其内涵和意义，容易引起编程规范上的错误， 本次小课堂会分享文本格式、图像的文字注释和替代以及链接的一些属性，对他们进行区分学习。

2.知识剖析

2.1 title与h1的区别

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的，一般在网页中出现一次。

2.1代码实战

title和h1的区别

我是网页内文本标题(h1的效果)

2.2 b与strong的区别

定义：b(bold)是实体标签，用来给文字加粗，而strong是逻辑标签，作用是加强字符语气。

区别：b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言； 而strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式

建议：为了符合CSS3的规范，b应尽量少用而改用strong。

b和strong的区别

2.3 i与em的区别

定义：i(italic)是实体标签，用来使字符倾斜，而em(emphasis)是逻辑标签，作用是强调文本内容

区别：i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语（比如「de facto」这样的英语里常用的拉丁语短语）；而em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：为了符合CSS3的规范，i应尽量少用而改用em

i和em的区别

2.5 src与href的区别

定义：href指定网络资源的位置建立链接或关系，用在link和a等元素上。src将外部资源嵌入到当前标签所在位置，如img图片和js脚本等。

区别：我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。 浏览器解析src属性时，会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕。 浏览器解析到href的时候会识别该链接内容，对其进行下载不会停止对当前文档的处理。

3.常见问题

如何正确的使用链接属性在代码中加入样式表和js文件呢？

4.解决方案

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下：

浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被暂停）。 这与把css文件内容写在style标签里不相同，因此建议使用link标签而不是"@import"来把样式表导入到html文档里

src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置。当浏览器找到

在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。 这个过程与把js文件放到script标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

5.代码实战

参看以上截图，有兴趣的话可自行演示。

6.拓展思考

如何使用这些标签并尽量符合编码规范呢？

以下是W3C中相关的一段话

注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 b 标签作为最后的选项。HTML5 规范声明：应该使用 h1 - h6 来表示标题，使用 em 标签来表示强调的文本，应该使用 strong 标签来表示重要文本，应该使用 mark 标签来表示标注的/突出显示的文本。

提示：您也能够使用 CSS "font-weight" 属性来设置粗体文本。

7.参考文献

参考一：W3C：http://www.w3cschool.cn/

参考二：url、href、src 详解：https://segmentfault.com/a/1190000002877022

参考三：知乎：b和 strong的区别：https://www.zhihu.com/question/20961933

8.更多讨论

有没有其他类似的容易被混淆的标签呢？

PPT链接：https://ptteng.github.io/PPT/PPT/css-05-h1&title.b&strong.i&em.alt&title.src&href.html#/

视频链接：https://v.qq.com/x/page/a05122puf9p.html

html和css中易混淆的一些标签或者样式属性_腾讯视频

文本链接：http://www.jnshu.com/daily/25376?dailyType=others&total=138&page=1&uid=7446&sort=0&orderBy=3

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

你可以直接点击此链接：http://jnshu.com/login/1/84959420