前端面试必备：HTML与XML的区别、CSS权重与布局技巧

"2021年前端经典面试题.docx" 前端面试中，涉及的知识点广泛且深入，这里我们根据给定的文件内容提取出一些关键的前端开发知识点进行详细阐述。 1. HTML与XML的区别： - HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，其语法相对宽松，主要用于展示结构化数据。HTML提供了预定义的标签来描述页面内容。 - XML（eXtensible Markup Language）则是一种更加严格的标记语言，设计用来传输和存储数据。XML的语法严格，强调语义性，允许用户自定义标签来描述数据。 2. CSS选择器及权重优先级： - CSS选择器包括属性选择器、ID选择器、类选择器、伪类选择器、后裔选择器、标签选择器、通用选择器和伪元素选择器。权重优先级从高到低分别为：内联样式（1000）、ID选择器（0100）、类/伪类/属性选择器（0010）、标签/伪元素选择器（0001）、通配符/子/相邻选择器（0000）以及继承样式（无权值）。 3. 网页构成： - 构造层：HTML负责构建网页的基本结构。 - 表达层：CSS用于控制网页元素的样式和布局。 - 行为层：JavaScript和DOM（Document Object Model）用于实现动态交互和页面操作。 4. CSS实现响应式居中： - 通过设置`position: absolute;`，`width: 200px;`，`height: 200px;`，`top: 50%;`，`left: 50%;`以及`margin-top: -100px;`，`margin-left: -100px;`，可以将一个200*200的div在任何分辨率的屏幕上水平垂直居中。 5. 清除浮动的方法： - 方法一：设定父级div的高度（height），适用于高度固定的布局。 - 方法二：在父级div上设置`overflow: hidden;`，这会使父级div自动包含其浮动子元素。 - 方法三：在末尾添加一个空标签并设置`clear: both;`，使得父级div能自动获取高度。 - 方法四：使用父级div的伪类`:after`和`zoom`属性来创建一个新的BFC（块格式化上下文）并清除浮动。 6. CSS Sprites技术： - CSS Sprites是将多个小图片合并成一张大图的技术，通过调整`background-position`来显示不同的部分。这样可以减少HTTP请求，提高页面加载速度。 7. 原生JavaScript绑定多个onclick事件： - 使用`addEventListener`方法可以为同一个元素添加多个事件监听器。例如，要给一个按钮绑定两个点击事件，可以写成： ```javascript var btn1 = document.getElementById('myButton'); btn1.addEventListener('click', function1); btn1.addEventListener('click', function2); ``` 这样，每次点击按钮，`function1`和`function2`都会依次执行。 以上就是根据文件内容提取的前端面试中的核心知识点，涵盖了HTML、CSS和JavaScript的基础和进阶应用，这些都是前端开发者必须掌握的关键技能。在实际面试中，面试官可能会围绕这些知识点提出更具体、更深入的问题，以测试候选人的理解和实践能力。