2021前端面试必备：HTML+CSS+JS+Vue知识点梳理

在2021年的前端面试题汇总中，面试者通常会关注基础技术和新趋势的理解。以下是一些关键知识点： 1. HTML与CSS的区别： - **页面导入样式**：`link`标签用于在HTML头部引入外部CSS文件，是HTML的一部分，保证样式在页面渲染早期加载；而`@import`是CSS语法，但因其在解析时可能阻塞页面渲染，导致不推荐使用，尤其是对IE5及以下版本不兼容。 - **元素类型**：区分行内元素（如`span`, `a`, `img`等）与块级元素（如`div`, `h1-6`, `p`），行内元素水平排列，高度和宽度无效；块级元素独立占据一行，可以嵌套行内元素。 2. HTML5的新特性： - **语义化标签**：如`header`, `footer`, `section`, `nav`, `aside`, `article`用于提高内容结构的可读性和SEO优化。 - **表单增强**：`input`类型扩展，如`email`, `url`, `date`等，新元素如`datalist`、`keygen`、`output`和属性如`placeholder`、`required`、`min`、`max`。 - **多媒体支持**：`<video>`和`<audio>`标签处理音频和视频内容，以及`canvas`用于图形绘制和地理位置API。 - **新的事件处理**：如`onresize`, `onscroll`, `onerror`, `onplay`, `onpause`, `ondrag`, `onmousewheel`等。 - **Websocket**：全双工通信协议，实现实时数据传输。 3. CSS选择器与盒模型： - **选择器优先级**：`!important`高于内联样式，然后是ID选择器，类选择器，标签选择器。 - **盒模型**：CSS盒模型包括标准盒模型（content + padding + border + margin）和IE盒模型（content + padding + border + empty space），理解元素边距（margin）、填充（padding）与内容区域的关系至关重要。 - **Margin与Padding的区别**：margin是元素边缘之间的空间，padding是元素内容与边框之间的空间。 掌握这些知识点可以帮助应聘者展示其扎实的前端基础知识，包括HTML、CSS的布局和样式控制，以及对现代HTML5特性和CSS选择器的理解。面试时，候选人应能灵活运用这些知识，解决实际开发中的问题。同时，了解CSS盒模型的深入细节对于优化网页性能和设计响应式布局至关重要。