前端面试必备：HTML+CSS核心知识点详解

需积分: 16 118 浏览量更新于2024-07-19 1 收藏 1.01MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

本资源是一份针对前端面试题的详细指南，涵盖了HTML、CSS以及前端开发中常见的基础知识和实践经验。以下是部分知识点的详细解读： 1. **Doctype的作用与浏览器模式**： Doctype声明用于告知浏览器当前文档采用哪种HTML版本或标准模式。标准模式（如<!DOCTYPE html>）让浏览器按照最新标准渲染，兼容模式则是为了解决旧版本浏览器对新特性的支持问题，可能会导致布局和样式差异。 2. **HTML元素分类**：行内元素（如`<span>`、`<a>`）占据文本行的宽度，块级元素（如`<div>`、`<p>`）独占一行。空元素（如`<br>`、`<img>`)没有内容区域，仅影响布局。 3. **link与@import的区别**： `link`通过`<link>`标签引入外部样式表，通常更推荐，因为它允许浏览器下载其他资源的同时下载样式；`@import`在CSS内部使用，可能导致样式延迟加载，可能影响用户体验。 4. **浏览器内核与HTML语义化**：浏览器内核主要负责解析渲染网页，现代浏览器通常包含多个内核，如WebKit（Safari、Chrome）、Gecko（Firefox）和Trident（IE）。HTML语义化强调使用正确的标签来表达内容结构，提升可读性和SEO，方便辅助技术理解和机器处理。 5. **CSS基础概念**： - Label与控件关联，提供输入焦点提示； - 不同HTML标签的用途和语义区别，如`title`与`h1`标题的重要性不同，`b`与`strong`强调程度，`i`与`em`强调文本的风格； - CSS盒子模型：标准盒模型包括content、padding、border和margin；IE6/7的盒模型中，`width`和`height`不包含`border`和`padding`。 6. **CSS布局和定位**： - 居中div的方法：使用Flexbox、Grid或者设置`margin: auto`； - `position`属性的`relative`和`absolute`的定位原点不同，前者基于静态位置，后者相对于最近的非static定位祖先元素； - 布局技巧如“品”字布局和多列等高实现方法。 7. **兼容性问题与解决策略**： - 常见的浏览器兼容性问题及其原因，如CSS前缀、IE特定 hack等； - 如何处理li之间的隐形间距，可能涉及list-style、margin或white-space属性。 8. **CSS优化与性能**： - 使用CSS预处理器（如Sass、Less），提高代码复用和维护性； - CSS优化技巧，如减少HTTP请求、使用CSS Sprites、避免不必要的重绘和回流。 9. **CSS选择器与伪元素**： - CSS选择器类型、继承属性； - `::before`和`:after`伪元素用于插入内容或创建装饰效果，区别在于是否影响元素的实际内容区域。 10. **CSS私有浏览器特性与清除浮动**： - 清除浮动的原因及清除浮动的方法，包括使用`:after`伪元素添加clear属性或设置`overflow: auto`。这份面试宝典覆盖了前端开发中的核心知识点，对于准备前端面试或希望提升CSS技能的开发者来说，是宝贵的参考资料。

资源详情

资源推荐

214

12.自定义 match 方法

.......................................................................................................

199

13.面试：寻找重复最多的字符以及个数

.......................................................................

199

14.点击 a 标签，删除对应的父节点 li

............................................................................

200

15.获取元素的绝对坐标(自定义)

.....................................................................................

201

16.获取元素的相对坐标

...................................................................................................

202

17.如何检测 ie 版本

..........................................................................................................

203

18.滚轮事件（处理兼容代码）

.......................................................................................

203

19.区分 onmouseover,onmouseout,onmouseenter,onmouseleave

................................

204

20.视口

...............................................................................................................................

205

21.PC 端事件在移动端会有 300ms 延迟的问题

.............................................................

205

22.事件绑定通用代码

.......................................................................................................

205

23.em 与 rem

.....................................................................................................................

206

24.适配：等比缩放

...........................................................................................................

206

25.viewport 适配

................................................................................................................

207

八、NodeJs

.............................................................................................................................

208

1.如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）

...............................

208

2.对 Node 的优点和缺点提出了自己的看法？

..............................................................

208

3.需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确

响应。给出你的技术实现方案？

....................................................................................

208

4.Node.js 的适用场景？

....................................................................................................

209

5.(如果会用 node)知道 route, middleware, cluster, nodemon, pm2, server-side rendering

么?

......................................................................................................................................

209

6.什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和

缺点?

..................................................................................................................................

209

7.对 Node 的优点和缺点提出了自己的看法？

..............................................................

209

九、前端概括性问题

............................................................................................................

210

1.你有用过哪些前端性能优化的方法？

.........................................................................

210

2.对前端工程师这个职位是怎么样理解的？它的前景会怎么样？

.............................

211

3.最近在看哪些前端方面的书？

.....................................................................................

211

4.平时如何管理你的项目，如何设计突发大规模并发架构？

.....................................

211

5.那些操作会造成内存泄漏？

.........................................................................................

212

214

6.你说你热爱前端，那么应该 WEB 行业的发展很关注吧？说说最近最流行的一些东

西吧？

................................................................................................................................

212

7.你有了解我们公司吗？说说你的认识？

.....................................................................

212

7.移动端（比如：Android IOS）怎么做好用户体验?

....................................................

212

8.你所知道的页面性能优化方法有那些？

.....................................................................

212

9.除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

.....................

212

10.谈谈你认为怎样做能使项目做的更好？

...................................................................

213

11.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

...............

213

12.如何优化网页加载速度？

...........................................................................................

213

13.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

...................

213

一、HTML+CSS

1．Doctype 作用？标准模式与兼容模式各有什么区别?

（1）<!DOCTYPE>声明位于位于 HTML 文档中的第一行，处于 <html> 标签之前。

告知浏览器的解析器用什么文档标准解析这个文档。

DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

（2）标准模式的排版和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容

模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默

认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；

span 默认 display 属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气）

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

剩余213页未读，继续阅读

__小明__

粉丝: 0
资源: 1

前端面试必备：HTML+CSS核心知识点详解

前端最全汇总面试题及答案.docx

前端面试题

2019年前端面试题

实战案例：如何利用微信小程序进行字节跳动春招前端面试题的学习和实践

尚硅谷大数据技术之高频面试题8.0.9.docx

前端八股文面试题pdf

web前端八股文面试题

阿里主管面试前端面试题

前端promise的面试题

前端面试题 43578943

高级前端工程师面试题答案 pdf

web前端开发面试题校招

bat前端面试题2019

前端面试用人部门面试题

2024 前端面试题

2020年前端大厂面试题最全汇总.pdf

天津安鑫一家前端面试题

web前端开发面试题

前端app开发面试题

web前端面试题2022

最新资源