65 道 HTML5+CSS3 相关面试知识点（附：HTML5 / CSS3 相关特效源码分享）

布满荆棘的人生 2022-10-11 01:27 149阅读 0赞

![093133597bdb16216cd844be3cd84ece.png][]

#### 前言 ####

HTML5 是构建 Web 内容的一种语言描述方式。HTML5 是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。

CSS3 是 CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

**HTML5 + CSS3 学习路线图**：  
![bc7b92d22fdfa3f9c22206d4a4109736.png][]

> #### HTML5 面试知识点 ####

1.  H5的新特性有哪些
2.  Label的作用是什么？是怎么用的？
3.  HTML5的form如何关闭自动完成功能
4.  dom如何实现浏览器内多个标签页之间的通信? (阿里)
5.  实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效
6.  title与h1的区别、b与strong的区别、i与em的区别？
7.  你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
8.  每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
9.  div+css的布局较table布局有什么优点
10. img的alt与title有何异同？ strong与em的异同
11. 简述一下src与href的区别
12. 知道的网页制作会用到的图片格式有哪些
13. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理
14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
15. 你如何理解HTML结构的语义化

![cb0a220f5fd8983f3687d0f2403e7062.png][]

1.  谈谈以前端角度出发做好SEO需要考虑什么
2.  html5有哪些新特性、移除了那些元素
3.  如何处理HTML5新标签的浏览器兼容问题
4.  如何区分HTML和HTML5？
5.  HTML5 Canvas元素有什么用
6.  如何在 HTML5 页面中嵌入音频
7.  如何在HTML5页面中嵌入视频
8.  HTML5引入什么新的表单属性
9.  语义化的理解
10. 介绍一下你对浏览器内核的理解
11. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
12. 请描述一下cookies，sessionStorage 和localStorage的区别
13. css sprite是什么,有什么优缺点
14. canvas 如何绘制一个三角形|正方形
15. 弹性盒子模型? flex|box区别?
16. 解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

![469b31f63ef71a3977b620b2b34a0834.png][]

> #### CSS3 面试知识点 ####

1.  解释box-sizing
2.  水平垂直居中的方法
3.  三列布局（中间固定两边自适应宽度）
4.  清除浮动元素的方法和各自的优缺点
5.  css实现自适应正方形
6.  介绍position的值
7.  如何在页面上实现一个圆形的可点击区域
8.  CSS3新增伪类有那些
9.  CSS3有哪些新特性
10. 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景
11. 用纯CSS创建一个三角形的原理是什么
12. 一个满屏品字布局如何设计
13. css等高布局如何实现
14. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

*  ![c1c8998b268b4b111cdbf1dc5bd0d4b9.png][]

1.  为什么要初始化CSS样式
2.  请解释一下为什么需要清除浮动？清除浮动的方式
3.  SASS/LESS编译的时候，浮动元素的父级div定义伪类:after
4.  CSS优化、提高性能的方法有哪些
5.  怎么让Chrome支持小于12px 的文字
6.  如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
7.  display:inline-block 什么时候会显示间隙？(携程)
8.  超链接访问过后hover样式就不出现的问题是什么？如何解决
9.  rgba()和opacity的透明效果有什么不同
10. px和em的区别
11. 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
12. Sass、LESS是什么？大家为什么要使用他们？
13. 为什么要初始化样式
14. 对WEB标准以及W3C的理解与认识
15. 使用css实现一个持续的动画效果
16. 重排和重绘
17. 什么情况会触发重排和重绘？
18. animation对应的属性
19. transition?

![a9eadb2b5900680976e06a0593000323.png][]

> #### 最后 ####

最后分享一些 HTML5 / CSS3 相关特效源码。篇幅有限，文章部分内容展示截图，**需要领取前端学习笔记，素材源码，面试题 PDF完整版（含答案解析）[可以点击此处免费领取][Link 1]**

![b7893f5a5d4dba5f9a9bc3328644f828.png][]

[093133597bdb16216cd844be3cd84ece.png]: /images/20221005/6cf1442289824576b2dafac84790dc72.png
[bc7b92d22fdfa3f9c22206d4a4109736.png]: /images/20221005/ca1b21d45fa141bdaba5bb1addb0879c.png
[cb0a220f5fd8983f3687d0f2403e7062.png]: /images/20221005/0eb1c9cba6cd4223a8c32932ddf5ef79.png
[469b31f63ef71a3977b620b2b34a0834.png]: /images/20221005/c29eade4d17a47b4b11e68eb03270014.png
[c1c8998b268b4b111cdbf1dc5bd0d4b9.png]: /images/20221005/64b471325487413f8baa4ccc07fbe240.png
[a9eadb2b5900680976e06a0593000323.png]: /images/20221005/22bce4a00b6541ea8ae579a1a2f53092.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=Kw1Uwele
[b7893f5a5d4dba5f9a9bc3328644f828.png]: /images/20221005/252b7a0fe32d4059a160b0b1590ba7d4.png