前端面试必备:HTML/CSS/JS知识精要

"前端面试题总结,涵盖了HTML, CSS, HTML5, CSS3, JS, Vue的基础面试题目,包括Web标准理解、浏览器内核差异、兼容性、CSS布局、盒子模型、选择器优先级等核心知识点。"
1、HTML/CSS元素类型:
- 行元素(如`<span>`):在一行内显示,不会自动换行。
- 块元素(如`<div>`):独占一行,宽度默认占据父元素的100%。
- 行内块元素(如`<img>`):既可以保持内联特性,又有一定的宽度和高度。
2、CSS引入方式与区别:
- 行内样式(`style`属性):优先级最高,但不利于代码复用。
- 内嵌样式(`<style>`标签):位于`<head>`中,优先级次之,适用于全局样式。
- 外部样式(`<link>`或`@import`):通过链接外部CSS文件,便于管理,`link`优先加载,`@import`在文档加载后执行,部分旧浏览器不支持。
3、`<pre>`标签:
- 用于保留文本格式,包括空格和换行,常用于代码展示。
4、Bootstrap网格系统:
- Bootstrap采用12列响应式布局,允许自定义断点和灵活的列布局。
5、CSS背景属性:
- `background-attachment`: 控制背景图像是否随滚动条移动,`scroll`(默认)跟随滚动,`fixed`固定在视口,`inherit`继承父元素。
- `background-origin`:设置背景图像的位置原点,`padding-box`(默认)从内边距开始,`border-box`从边框开始,`content-box`从内容区域开始。
- `background-clip`:控制背景颜色或图像的绘制范围,`padding-box`只填充到内边距,`border-box`延伸至边框,`content-box`仅限内容区域。
6、DOCTYPE声明:
- 定义文档类型,确保浏览器按预期解析HTML,例如`<!DOCTYPE html>`声明HTML5文档。
7、HTML5的新特性与优缺点:
- 新特性:离线存储、拖放功能、画布(Canvas)、SVG图形、音频/视频API、表单控件增强等。
- 优点:更好的语义化标签、更好的错误处理、更丰富的媒体支持、更强大的本地存储。
- 缺点:老浏览器兼容性问题、部分特性实现不一致、开发者需学习新知识。
8、主流浏览器内核:
- Chrome/Safari:Blink内核。
- Firefox:Gecko内核。
- Internet Explorer/Edge: Trident(旧版)/EdgeHTML(新版)。
- Opera:Presto(旧版)/Blink(新版)。
9、JSON数据:
- JavaScript Object Notation,轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,基于JavaScript语法,但不依赖JavaScript运行。
10、Cookie与WebStorage:
- Cookie:存储在客户端,用于跟踪用户状态,大小有限(通常4KB),每次HTTP请求都会携带。
- WebStorage(HTML5):提供了sessionStorage和localStorage,存储容量大(通常5MB),sessionStorage仅在当前会话有效,localStorage长期有效,但不随HTTP请求发送,更适用于大量数据的本地存储。
这些是前端面试中常见的技术点,理解和掌握它们对于前端开发者至关重要。
543 浏览量
1627 浏览量
2019-11-23 上传
270 浏览量
258 浏览量
2022-11-04 上传
109 浏览量
2022-04-06 上传

Smile_zxx
- 粉丝: 5184
最新资源
- Android开源项目合集:实用小工具与源码大全
- 轻松美化代码:sublime HTML-CSS-JS Prettify插件
- C#开发必备:常用类库全解析
- ASRock华擎H77M主板BIOS 1.60版升级要点解析
- 局部化脸部特征实时视频转变技术深度解析
- 数据存储解决方案与实践指南
- Laravel与Vue.js打造投票系统详解
- 掌握SublimeLinter:Sublime文本插件的安装与配置
- 实现单表增删改查的SSH框架整合教程
- C#实现两点间平行动态字体绘制方法
- LFM与巴克码组合信号MATLAB仿真分析
- 华擎Z87超频主板BIOS 1.70版升级详解
- Unreal Development Kit入门教程:创建塔防游戏
- Sublime Text 3的使用技巧与插件推荐
- 激光引导设备:救援与紧急疏散的技术革新
- Qt仿qq浮动弹窗插件封装及跨平台使用教程