2019前端面试精华：HTML、CSS与JavaScript基础技巧

本文档主要涵盖了2019年前端开发面试中常见的经典问题，包括HTML与XML的区别、CSS选择器的权重、网页构成部分、响应式设计中的元素居中、浮动元素的处理方法、CSS Sprites的原理及应用以及原生JavaScript绑定多个点击事件的方法。 1. **HTML与XML的差别** - HTML（超文本标记语言）主要用于创建网页结构，其语法相对宽松，使用固定标签来表示元素，如`<h1>`、`<p>`等，主要用于展示数据。 - XML（可扩展标记语言）是一种结构化数据存储格式，语法严谨，强调数据的描述而非表现，使用自定义标签，更适合用于数据交换和描述性数据存储，而不是直接渲染。 2. **CSS选择器的权重优先级** - CSS选择器按权重分为八类：内联样式（1000）、ID选择器（100）、类选择器和属性选择器（10）、类型选择器（1）、通配符（0）、子选择器、相邻兄弟选择器和通用选择器（0）。理解这些权重有助于确定样式规则的执行顺序。 3. **网页构成** - 网页通常由三部分构成：构造层（HTML用于构建页面结构）、表示层（CSS负责页面样式）、行为层（JavaScript处理交互，DOM用于操作DOM树）。 4. **响应式设计中的元素居中** - 要使一个200x200像素的div在不同分辨率下居中，可以使用绝对定位和负外边距，如给出的代码所示： ``` Div { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这样，div会相对于其父元素居中。 5. **浮动元素的处理** - 浮动有四种方式：设置父元素的高度（适合已知高度），使用`overflow: hidden`隐藏溢出内容，使用`clear: both`清除浮动，以及利用伪类`:after`和`zoom`进行高度调整。 6. **CSS Sprites的应用** - CSS Sprites是一种优化技术，通过合并多个小图片为一张大图，然后通过`background-image`、`background-repeat`和`background-position`控制显示特定区域，减少HTTP请求，提高网页加载速度。 7. **原生JavaScript绑定多个点击事件** - 要给一个按钮绑定两个`onclick`事件，可以使用JavaScript的事件委托或者直接添加多个事件处理器，如： ```javascript var btn1 = document.getElementById('button1'); btn1.onclick = function() { // 事件1 }; btn1.onclick = function() { // 事件2 }; ``` 或者利用数组和`Array.prototype.forEach()`方法： ```javascript var events = [event1Handler, event2Handler]; events.forEach(function(handler) { btn1.addEventListener('click', handler); }); ``` 这些知识点展示了前端开发的基础理论和实践技巧，对准备面试或深入理解前端工作具有重要意义。