前端面试必备:HTML/CSS/JS核心知识点解析
"这份资料是前端面试题的汇总,涵盖了HTML、CSS、JavaScript等多个方面的知识,旨在帮助前端工程师准备面试和自我检测技能。" **HTML和CSS** 1. **浏览器兼容性**:面试中可能会询问你是否测试过不同浏览器,比如IE、Chrome、Firefox、Safari等,以及它们的内核,如Trident、Blink、Gecko、Webkit等。 2. **DOCTYPE的作用**:DOCTYPE声明告知浏览器文档应按照哪种HTML或XHTML规范解析。 3. **Quirks模式与Standards模式**:Quirks模式下,浏览器模拟老版本的行为;Standards模式则遵循最新的W3C标准,呈现效果更一致。 4. **div+css布局的优势**:相比table布局,div+css更利于SEO,代码结构清晰,易于维护,响应式设计更方便。 5. **img的alt与title**:alt是图片无法显示时的替代文本,对SEO友好;title是鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**:渐进增强是从基础功能开始,逐步增强用户体验;优雅降级则是确保核心功能在旧浏览器中正常工作,然后添加新特性。 **网页资源管理与优化** 7. **多域名存储**:可以分散请求,减少单个域名的并发限制,提高加载速度。 8. **网页标准和机构的重要性**:标准保证了网页的互操作性,降低了开发成本,提高了用户体验。 9. **cookies,sessionStorage和localStorage**:cookies存储量小,每次请求都会发送;sessionStorage只在当前会话有效;localStorage长期存储,但不随会话关闭而消失。 10. **src与href**:src用于引入外部资源,如脚本、图片;href用于链接页面或资源。 **图像优化与性能** 11. **图片格式**:常见的有JPEG、PNG、GIF、SVG等,根据需求选择合适的格式。 12. **微格式**:微格式是一种将结构化数据嵌入HTML的方式,有助于搜索引擎理解和解析页面内容。 13. **缓存处理**:包括HTTP缓存、浏览器缓存、本地存储等,通过设置缓存策略提升页面加载速度。 14. **图片优化**:如延迟加载、合并图片为雪碧图、使用WebP等高效格式、压缩图片大小等。 **HTML语义化与SEO** 15. **HTML语义化**:使页面结构更清晰,有利于屏幕阅读器和搜索引擎理解。 16. **前端SEO**:考虑关键词、元标签、URL结构、页面速度、可爬取性等因素。 **CSS相关** 17. **DOM样式设置**:通过内联样式、内部样式表、外部样式表或JavaScript操作DOM元素的style属性。 18. **CSS选择器**:包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**:display:none、visibility:hidden等。 20. **超链接hover问题**:确保a:hover样式写在a:link和a:visited之后。 **CSS高级技巧** 21. **CssHack**:针对不同IE版本的样式兼容性问题,如_、*前缀、条件注释等。 22. **幻灯片效果**:通常使用CSS动画、过渡或JavaScript实现。 **元素类型与布局** 24. **行内元素与块级元素**:行内元素不独占一行,如span;块级元素独占一行,如div。行内元素的padding和margin有限制,但可通过display属性转换类型。 **CSS其他特性** 25. **外边距重叠**:相邻的垂直外边距会合并,结果是最大的那个。 26. **rgba()与opacity**:rgba()指定颜色的透明度,不影响子元素;opacity影响整个元素及其所有子元素。 27. **垂直和水平重叠**:使用position属性和z-index控制元素叠加。 28. **垂直居中浮动元素**:可以使用负margin、display:table-cell等方法。 29. **px与em**:px是固定单位,em是相对单位,基于父元素的字体大小。 30. **CSS reset**:清除浏览器默认样式,如Eric Meyer Reset,确保跨浏览器的一致性。 这份资料全面覆盖了前端开发者需要掌握的基础和进阶知识,对面试和实际工作都具有很高的参考价值。
![](https://csdnimg.cn/release/download_crawler_static/12571007/bg10.jpg)
![](https://csdnimg.cn/release/download_crawler_static/12571007/bg11.jpg)
![](https://csdnimg.cn/release/download_crawler_static/12571007/bg12.jpg)
![](https://csdnimg.cn/release/download_crawler_static/12571007/bg13.jpg)
![](https://csdnimg.cn/release/download_crawler_static/12571007/bg14.jpg)
剩余177页未读,继续阅读
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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/c06ecd3e41f541759d17e9e46b63eac3_qq_43520419.jpg!1)
- 粉丝: 1
- 资源: 1
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 岩石滑动与断层冲击地压:声发射特征分析
- 新时代煤炭工业八大战略新取向剖析
- 开采强度对华亭矿区冲击地压危险性的影响分析
- 新安煤矿探采对比:影响安全生产的关键因素与技术支撑
- 210MW循环流化床锅炉引风机变频改造优化与节能效果
- 浅埋煤层开采沉陷预测:方法应用与影响分析
- 优化巷道过陷落柱支护方案:数值模拟与现场试验
- 坚硬顶板定向断裂爆破技术:安全高效采煤新方案
- 北航2019算法课作业解析:投资策略与凸子多边形优化
- 断层破碎带垮冒下堆积体边界抗力分布关键影响因素
- 哈拉沟选煤厂优化末煤系统提高效率与处理能力
- 瓦斯涌出影响下采动煤体蠕变失稳研究
- 提升煤矿装载效率的可控箕斗定量装载设备设计
- 水分调控下烟煤瓦斯吸附特性对比研究
- 重介质悬浮液密度控制硬件设计与选型探讨
- 坚硬顶板巷道支护参数设计:现场测试与数值分析
![](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)