20200822岳浩天

知识总结

link和import的区别

link是xhtml标签，@import是css标签

页面加载的区别：link在页面加载的时候会同时被加载，@import引用css时会等页面加载完成之后再进行加载

兼容问题：@import只能用于IE5以上的浏览器，link是xhtml标签没有兼容问题

link权重高于@import

前端页面由哪三层构成，分别是什么？作用是什么？

结构层

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层

由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答

行为层

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

css的优化有哪些？

不使用@import

避免使用复杂的选择器，层级越少越好。

利用继承减少代码量

命名和备注

提取重复样式

两个原则：
1.结构与样式分离：提取公用的样式出来，减少重复代码和精简css。
2.内容和容器分离。

html语义化

HTML语义化：就是页面去掉样式或者加载失败的时候能够让页面呈现出清晰的结构。HTML5新增了好多语义化的标签，例如：header、footer、nav、menu、section、article等等，单单从字面上理解，就知道标签的含义。在写页面的时候，我们可以直接引用这些标签，不需要再用没有任何含义的div标签了，对于机器可以识别，对于开发人员很容易明白。这就是HTML语义化。

语义化的好处：

1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
2）用户体验：例如title、alt用于解释名词
3）有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别
4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
5）便于项目的开发及维护，使HTML代码更具有可读性

em,rem的区别

em是相对于父元素字体大小来说的

rem是相对于html字体大小来说