web前端笔试面试资源-CSDN文库

需积分: 10 54 浏览量 2018-05-15 11:37:06 上传评论 2 收藏 22KB DOCX 举报

### Web前端笔试面试知识点详解 #### 一、HTML常见题目详解 **1. Doctype作用？严格模式与混杂模式如何区分？它们有何意义?** - **Doctype作用**: 它告诉浏览器文档采用哪种HTML标准编写，从而决定浏览器以何种模式来渲染页面。 - **严格模式与混杂模式区分**: - **严格模式**: 如果文档声明了`<!DOCTYPE>`，并且语法正确，则浏览器以严格模式解析。 - **混杂模式**: 如果文档没有`<!DOCTYPE>`声明或声明错误，浏览器则以混杂模式解析。 - **意义**: 不同的模式会影响CSS的解析方式，导致布局差异。 **2. HTML5为什么只需要写`<!DOCTYPE HTML>`？** - HTML5简化了文档类型声明，仅需`<!DOCTYPE HTML>`即可，这是为了让文档类型声明更加简洁，同时保证向前兼容。 **3. 行内元素、块级元素及空元素有哪些？** - **行内元素**: `<a>`, `<span>`, `<img>`, `<input>`等。 - **块级元素**: `<div>`, `<p>`, `<ul>`, `<table>`等。 - **空元素**: `<img>`, `<br>`, `<hr>`等。 **4. 页面导入样式时，使用`link`和`@import`有什么区别？** - **`link`**: - 写在HTML头部，浏览器解析到就会加载。 - 优先级高于`@import`。 - **`@import`**: - 写在CSS文件中，必须等待整个页面解析完毕后才会加载。 - 可以在CSS文件中导入其他样式表。 **5. 浏览器内核的理解？** 浏览器内核主要包括两部分： - **渲染引擎**: 负责解析HTML/CSS并呈现结果。 - **JS引擎**: 负责执行JavaScript代码。 **6. 常见的浏览器内核有哪些？** - **Webkit**: Safari, Chrome等。 - **Gecko**: Firefox。 - **Trident/Blink**: IE/Edge (旧版)。 **7. HTML5的新特性、移除的元素及处理兼容性问题？** - **新特性**: 新增语义化标签（如`<header>`, `<nav>`）、多媒体标签（如`<video>`, `<audio>`）等。 - **移除元素**: `frame`, `frameset`, `acronym`等。 - **兼容性处理**: 使用Polyfills、条件注释等技术。 **8. 如何区分HTML和HTML5？** HTML5不仅包含了HTML4的所有功能，还引入了新的元素和特性，如拖拽功能、离线存储、多媒体标签等。 **9. HTML语义化的理解？** - 使用具有明确含义的标签（如`<article>`, `<section>`），使页面结构更清晰，有利于SEO和辅助设备访问。 **10. HTML5的离线储存如何使用？工作原理？** - **离线储存**: 包括`localStorage`, `sessionStorage`和`Application Cache`。 - **原理**: 数据被缓存于客户端，即使断网也能访问应用的一部分。 **11. 浏览器对HTML5离线储存资源管理与加载？** - 浏览器会根据`manifest`文件指示缓存资源，并在离线时加载缓存资源。 **12. cookies、sessionStorage和localStorage的区别？** - **cookies**: - 存储量小（约4KB）。 - 随HTTP请求发送。 - **sessionStorage**: - 生命周期为当前会话。 - 存储量较大。 - **localStorage**: - 永久存储。 - 存储量更大。 **13. iframe的缺点？** - 影响性能。 - 加载速度慢。 - 安全问题（如XSS攻击）。 **14. Label的作用及其使用？** - **作用**: 提高表单元素的可访问性。 - **使用**: `<label for="id">文本</label>` 或 `<label>文本<input type="text">`。 **15. HTML5的form如何关闭自动完成功能？** 通过添加`autocomplete="off"`属性。 **16. 实现浏览器内多个标签页之间的通信？** - 使用`BroadcastChannel API`。 - 或者通过`SharedWorker`实现共享状态。 **17. WebSocket如何兼容低浏览器？** - 使用polyfill库（如`socket.io`）提供兼容性支持。 **18. 页面可见性(PageVisibility)API用途？** - 检测页面是否处于活动状态。 - 用于暂停视频播放、调整音量等操作。 **19. 如何实现圆形可点击区域？** 使用`border-radius: 50%;`设置圆形，并确保宽度等于高度。 **20. 实现不同模式下的1px线？** - 使用透明边框或`background-color`。 - 或者使用`:before`伪元素覆盖背景色。 **21. 网页验证码的作用？** - 验证码用于防止机器人的自动化操作。 - 解决安全问题，如防止垃圾邮件。 **22. title与h1的区别、b与strong的区别、i与em的区别？** - **title** vs **h1**: `title`是文档标题，`h1`是页面主标题。 - **b** vs **strong**: `b`表示加粗，`strong`强调文本的重要性。 - **i** vs **em**: `i`表示斜体，`em`强调文本的重要性。 #### 二、CSS类题目详解 **1. CSS盒子模型？** - **标准模型**: `width + padding + border = 元素实际宽度`。 - **IE模型**: `width = 元素实际宽度 - padding - border`。 **2. CSS选择符及可继承属性？** - **选择符**: 类选择符（`.class`）、ID选择符（`#id`）、标签选择符（`div`）等。 - **可继承属性**: 字体大小、颜色等。 **3. CSS优先级算法？** - 内联样式 > ID选择符 > 类选择符 > 标签选择符。 - 后声明的样式优先级更高。 **4. CSS3新增伪类？** - `:not()`, `:nth-child()`, `:target`等。 **5. 如何居中div？** - **水平居中**: 设置`margin: auto`。 - **垂直居中**: 使用`flex`或`grid`布局。 **6. display的值及作用？** - `block`: 占据整行。 - `inline`: 与其他元素并排显示。 - `inline-block`: 显示为行内元素，但可以设置宽高。 **7. position的值relative和absolute定位原点？** - **relative**: 相对于自身位置偏移。 - **absolute**: 相对于最近的非static定位祖先元素定位。 **8. CSS3新特性？** - **过渡和动画** (`transition`, `animation`)。 - **响应式设计** (`media queries`)。 - **弹性盒子** (`flexbox`)。 **9. Flexbox适用场景？** - 用于创建灵活且响应式的布局。 - 特别适用于不确定尺寸的元素布局。 **10. 用CSS创建三角形？** 使用`border`属性创建。 **11. 满屏品字布局设计？** - 使用`flex`布局，将元素设置为三列，中间列占据剩余空间。 - 或者使用`grid`布局实现。 **12. 常见兼容性问题？** - 浏览器解析差异。 - 版本间的CSS差异。 **13. li间空白间隔的原因及解决办法？** - **原因**: 默认`display: block`和`white-space`。 - **解决办法**: 设置`display: inline-block`，或者调整`margin`和`padding`。 **14. 浏览器兼容性问题的解决方法及常用hack技巧？** - 使用条件注释。 - 针对特定浏览器版本的CSS hack。 **15. 为什么要初始化CSS样式？** - 为了消除浏览器默认样式的差异。 - 统一页面样式。 **16. absolute的containingblock计算方式？** - 通常基于最近的`position`不是`static`的祖先元素。 - 在某些情况下（如父元素设置了`transform`），`absolute`元素会根据这个父元素定位。 **17. visibility的`collapse`属性值的作用？** - `visibility: collapse`用于隐藏表格单元格。 - 不同浏览器下可能有差异。 **18. position与其他特性叠加后的表现？** - 受到`z-index`的影响。 - `margin collapse`不会发生在绝对定位元素上。 **19. BFC规范的理解？** - **BFC**: 块级格式化上下文。 - 决定了元素如何布局以及与相邻元素的关系。 **20. CSS权重优先级计算？** - 权重由选择器类型（如ID、类等）决定。 - 计算公式：`!important` > ID > 类/伪类/属性选择符 > 标签/伪元素。 **21. 浮动与清除浮动？** - **浮动**: 使元素脱离正常文档流。 - **清除浮动**: 使用`clear`属性或添加额外的元素。 **22. 移动端布局使用媒体查询？** - 使用`@media`查询适应不同屏幕尺寸。 **23. 使用CSS预处理器？** - **Sass**/ **Less**等，用于简化CSS编写。 **24. CSS优化方法？** - 减少冗余。 - 使用CSS Sprites合并图片。 - 利用浏览器缓存。 **25. 浏览器解析CSS选择器？** - 自上而下解析。 - 具体顺序取决于浏览器实现。 **26. 应该使用奇数还是偶数的字体？** - 这取决于具体设计需求。 - 一般而言，没有绝对规则。 **27. margin和padding使用场景？** - **margin**用于元素间的间距。 - **padding**用于元素内部的填充。 **28. 抽离样式模块？** - 将样式组织成可复用的模块。 **29. 元素竖向百分比？** - 相对于包含块的高度。 **30. 全屏滚动原理？** - 使用`position: fixed`或`position: sticky`。 - 控制元素的位置。 **31. 响应式设计？** - 适应不同屏幕尺寸。 - 使用`media queries`调整布局。 **32. 视差滚动效果？** - 通过调整不同层的速度差异来实现。 **33. ::before和:after中双冒号与单冒号的区别？** - **单冒号** (`:after`): 所有浏览器都支持。 - **双冒号** (`::after`): 标准语法，IE8及以下不支持。 **34. 修改自动填充表单的黄色背景？** - 使用`::-webkit-input-placeholder`伪元素。 **35. 对line-height的理解？** - 控制行内元素的垂直对齐。 - 可用于调整文本行高。 **36. 设置元素浮动后display值？** - 默认为`block`。 **37. 让Chrome支持小于12px的文字？** - 使用`transform: scale()`。 - 或者使用`font-size-adjust`属性。 **38. 让字体变清晰、变细？** - 使用`-webkit-font-smoothing: antialiased;`。 **39. font-style的"oblique"？** - 表示倾斜。 **40. position:fixed在android下无效？** - 确保浏览器版本支持。 - 使用`position: sticky`作为备选方案。 **41. 动画最小时间间隔？** - 一般建议不小于`16ms`（大约60FPS）。

资源推荐

资源详情

资源评论