当你决心攻克前端开发，HTML与CSS是你无法绕过的第一座山。这座山看似平缓，却决定了你后续所有技术栈的稳固与高度。
这份资料，就是你攀登这座山的速行地图与核心装备清单。它不追求大而全的百科全书式覆盖，而是经过大量实践提炼出的高频、关键、易错知识点集合。从每个标签的语义，到每个属性的细节，再到每种布局方案的选择，这里汇总的正是构建现代网页界面最需要的那“80%”的内容。
“背”是形式，理解与内化才是目的。我们的目标不是死记硬背，而是通过系统性的梳理，帮助你建立清晰的知识网络，让你在编码时能条件反射般地选出最合适的标签与属性，写出更简洁、更健壮、更易维护的代码。
请带着你的代码编辑器，开始这场从“标签”到“界面”的创造之旅。当你真正掌握了这里的内容，你将拥有从容搭建任何视觉稿的底气，并会真切地感受到那句话：“差不多了”。
现在，深吸一口气，我们开始。
注：文中的前端面试题汇总 PDF 已经打包完毕，希望对大家有帮助
HTML
2.简单描述从输入网址到页面显示的过程
3.一台设备的dpr，是否是可变的?
4.前端该如何选择图片的格式?
5.前端跨页面通信，你知道哪些方法?
6.说说你对 Dom 树的理解
7.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
8.html和css中的图片加载与渲染规则是什么样的?
9.title与h1的区别、b与strong的区别、i与em的区别?
10.script 标签为什么建议放在 body 标签的底部(defer、async)
11.说说你对 SSG 的理解
12.什么是HTML5，以及和HTML的区别是什么?
15.导致页面加载白屏时间长的原因有哪些，怎么进行优化?
16.如何控制 input 输入框的输入字数?
17.渐进式jpg有了解过吗?
18.假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？
19.怎么实现“点击回到顶部“的功能?
20.SPA应用怎么进行SEO?
21.如何实现SEO优化
22.SEO是什么?
23.SEO的原理是什么?
24.DNS 预解析是什么?怎么实现?
25.HTML5 有哪些 drag 相关的 API?
26.浏览器乱码的原因是什么?如何解决?
27.Canvas和SVG有什么区别?
28.浏览器是如何对 HTML5 的离线储存资源进行管理和加载?
29.HTML5的离线储存怎么使用，它的工作原理是什么
30.img的srcset属性的作用?
31.label标签有什么用?
32.js和css是如何影响DOM树构建的?
33.CSSOM树和DOM树是同时解析的吗?
34.如何实现浏览器内多个标签页之间的通信?
35.说说你对以下几个页面生命周期事件的理解:DOMContentLoaded，loadbeforeunload,unload
36.使用input标签上传图片时，怎样触发默认拍照功能?
37.input上传文件可以同时选择多张吗?怎么设置?
38.如何禁止input展示输入的历史记录?
39.能否使用自闭合script标签引入脚本文件?
40.iconfont是什么?有什么优缺点?
41.页面统计数据中，常用的 PV、UV 指标分别是什么?
42.mete标签中的viewport 有什么用?
43.style标签写在body后与body前有什么区别?
44.webSocket如何兼容低浏览器
45.说说 HTML、XML、XHTML 的区别
46.标签上title属性与alt属性的区别是什么?
CSS
1.css 中的 animation、transition、transform 有什么区别?
2.怎么做移动端的样式适配?
3.相邻的两个inline-block节点为什么会出现间隔，该如何解决?
4.grid网格布局是什么?
5.CSS3新增了哪些特性?
6.怎么使用 CSS3 实现动画?
7.怎么理解回流跟重绘?什么场景下会触发?
8.什么是砋偃式响应式设计?响应式设计的基本原理是什么?如何进行实现?
9.如果使用CSS提高页面性能?
10.如何实现单行/多行文本溢出的省略样式?
11.如何使用css完成视差滚动效果?
12.怎么使用 CSS 如何画一个三角形
13.说说对 CSS 工程化的理解
14.怎么触发BFC，BFC有什么应用场景?
15.单行文本怎么实现两端对齐?
16.说说你对 CSS 模块化的理解
17.CSS 模块化的实现方式
18.怎么让Chrome支持小于12px 的文字?
19.怎么让Chrome支持小于12px 的文字?
20.flexbox(弹性盒布局模型)是什么，适用什么场景?
21.如何实现两栏布局，右侧自适应?三栏布局中间自适应呢?
22.设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别?
23.说说你对盒子模型的理解
24.怎么实现样式隔离?
25.flex 布局下，怎么改变元素的顺序?
26."flex: auto;"是什么意思?
27.object-fit 用法
28.行内元素和块级元素有什么区别
29.em/px/rem/vh/vw 这些单位有什么区别?
30.html和css中的图片加载与渲染规则是什么样的?
31.CSS中，有哪些方式可以隐藏页面元素?有什么区别?
32.CSS3 中 transition 和 animation 的属性分别有哪些?
33.说说对 CSS 预编语言的理解，以及它们之间的区别
34.::before 和::after 中双冒号和单冒号有什么区别、作用?
35.z-index属性在什么情况下会失效?
36.使用原生js实现以下效果:点击容器内的图标，图标边框变成borde...
37.position: fixed 一定是相对于浏览器窗口进行定位吗?
38.css选择器有哪些?优先级分别是什么?哪些属性可以继承?
39.使用css实现一个无限循环动画
40.怎么实现一个宽高自适应的正方形?
41.Sass、Less 是什么?为什么要使用他们?
42.CSS预处理器/后处理器是什么?为什么要使用它们?
43.为什么有时候用translate来改变位置而不是使用position进行定位?
注：文中的前端面试题汇总 PDF 已经打包完毕，希望对大家有帮助
技术之路，知易行难。真正的掌握源于持续不断的实践与挑战。请立即行动起来，用这些知识去构建、去模仿、去创造，在解决实际问题的过程中，将这些条目内化为你的开发者本能。
前路漫漫，但基石已稳。恭喜你完成这个重要的阶段，期待你创造出令人惊艳的作品！
勇往直前，代码不负有心人！
