大家好，我是梅巴哥er。上篇 对前端经典问题进行了总结。 本篇，我们来总结一下前端的知识，做个归纳。
全篇分为若干的版块，如
- html版块，
- css版块，
- js版块，
- es版块，
- react等框架版块（我用的是react，主要介绍react），
- webpack等打包工具的版块，后端node版块，
- 封装接口ajax版块，
- 实操场景问题的处理
- 其他
其中css占比较大，其次是js和es的知识，都比较琐碎。框架和后端的知识占比少，但是一般都是大知识点，系统性问题。
本篇来看看HTML版块
这个版块包含的知识不太多，在项目代码量里通常占比1%左右，常敲代码很容易达到熟练甚至精通的。重点关注HTML5的知识，经常搞点新花样。那我们来总结下相关知识。
常用的学习网站：
知识归纳：
- 兼容性：凡是提到兼容性，主要考虑IE浏览器。IE9以后开始支持部分HTML5属性，其他浏览器都支持。
- 新特性：（你知道哪些？用过哪些？）
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
- Doctype的作用是什么？严格模式与混杂模式如何区分？它们有何意义？
- Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
- 严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行
- 混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面
- 对HTML语义化标签的理解
- HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签
- link标签和import标签的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
- link方式样式的权重高于@import的
- 讲一下块元素和行元素，行内块元素
- 块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
- 行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
- 行内块元素：不自动换行，从左到右排列在一行，可以设置宽高。