2019前端面试精华:HTML、CSS与JavaScript基础技巧
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
本文档主要涵盖了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); }); ``` 这些知识点展示了前端开发的基础理论和实践技巧,对准备面试或深入理解前端工作具有重要意义。
![](https://csdnimg.cn/release/download_crawler_static/34220773/bg5.jpg)
剩余21页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 1
- 资源: 9万+
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Lombok 快速入门与注解详解
- SpringSecurity实战:声明式安全控制框架解析
- XML基础教程:从数据传输到存储解析
- Matlab实现图像空间平移与镜像变换示例
- Python流程控制与运算符详解
- Python基础:类型转换与循环语句
- 辰科CD-6024-4控制器说明书:LED亮度调节与触发功能解析
- AE particular插件全面解析:英汉对照与关键参数
- Shell脚本实践:创建tar包、字符串累加与简易运算器
- TMS320F28335:浮点处理器与ADC详解
- 互联网基础与结构解析:从ARPANET到多层次ISP
- Redhat系统中构建与Windows共享的Samba服务器实战
- microPython编程指南:从入门到实践
- 数据结构实验:顺序构建并遍历链表
- NVIDIA TX2系统安装与恢复指南
- C语言实现贪吃蛇游戏基础代码
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)