2021年前端面试题汇总.docx

preview
试读
13页
前端面试题
前端面试汇总
需积分: 0 48 下载量 106 浏览量 更新于2021-03-16 1 收藏 43KB DOCX 举报
2021年前端面试题汇总 本资源汇总了前端开发中常见的面试题，涵盖了HTML、CSS、JavaScript、Vue等领域，旨在帮助开发者更好地准备面试。下面是本资源中的一些重要知识点： 一、HTML与CSS基础知识 1. 页面导入样式时，link和@import的区别在于： * 从属关系：link是HTML标签，@import是CSS提供的 * 加载差异：页面加载时，link会同时加载，而@import引入的CSS会在页面加载完成后加载 * 兼容性，@import不兼容IE5以下浏览器 2. 块级元素与行内元素的区别： * 行内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直方向排列 * 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文字或其它行内元素 * 行内元素设置width、height无效，margin上下无效，padding上下无效 三、HTML5新特性 1. 语义化标签：header、footer、section、nav、aside、article 2. 增强型表单：input新增了多个type 3. 新增表单元素：datalist、keygen、output 4. 新增表单属性：placeholder、require、min、max 5. 音频、视频：video、audio 6. Canvas、地理定位、拖拽 7. 本地存储：localStorage-没有时间限制的数据存储，sessionStorage---针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除 8. 新事件：onresize、onscroll、onerror、onplay、onpause、ondrag、onmousewheel 9. webSocket：单个TCP链接上的全双工协议 四、CSS选择器 1. 通配符选择器（*） 2. 元素选择器 3. Id选择器 4. Class选择器 5. 后代选择器 6. 子元素选择器 7. 相邻选择器 * 优先级：!Import>内联>ID选择器>Class选择器>标签选择器 五、CSS盒模型 1. CSS盒模型是CSS技术的一种思维模式。每个盒模型有内容（content）、填充（padding）、边框（border）、外边距（margin）组成 2. CSS盒模型又两种，IE盒模型和W3C标准盒模型，其中IE模型width=content+padding+border，而标准盒模型width=content 3. Margin是自身容器边框到另一个容器边框的距离，就是容器的外边距 4. Padding是自身容器边框到自身内容之间的距离，是为内边距 六、语义化的理解 1. 根据内容的结构化使用合适的语义化标签，让浏览器的爬虫和机器更好的解析，同时增加代码的可读性及可维护性 七、HTML与XHTML的区别 1. XHTML必须被正确地嵌套 2. XHTML标签必须小写 3. XHTML空标签必须关闭 4. XHTML文档必须有根元素<html></html> 八、Div+CSS布局的好处 1. 代码精简，且结构与样式分离，易于维护 2. 代码量减少了，页面加载速度更快，用户体验提升 3. 对SEO搜索引擎更加友好，且H5又新增了许多语义化标签更是如此 4. 允许更多炫酷的页面效果，丰富了页面 5. 符合W3C标准，保证网站不会因为网络应用的升级而淘汰 九、盒模型及如何转换 1. Box-sizing:content-box（W3C盒模型，标准盒模型） 2. Box-sizing:border-box（IE盒模型，又名怪异盒模型） 十、实现水平垂直居中的几种方式 1. Flex * Display:flex; * Justify-content:center; * Align-items:center; 2. 定位 * .box { Position: relative; Height: 100px; Width: 100px; Background-color: pink; } * .box-center { Position: absolute; Left: 0; Right: 0; Bottom: 0; Top: 0; Margin: auto; } 这些知识点涵盖了前端开发的基础知识，是面试过程中的常见问题。掌握这些知识点将有助于开发者更好地应对面试，提高自己的职业竞争力。
 年前端面试题汇总
一， 与 
，页面导入样式，使用  与 有什么区别？
 从属关系： 是  标签， 是  提供的
 加载差异：页面加载时， 会同时加载，而 引入的  会在页面加载完
成后加载
 兼容性， 不兼容  以下浏览器
  可以通过  操作  插入  标签改变样式， 不能
，描述块级元素与行内元素的区别？行内元素与块级元素有哪些？  是什么元素？如何
制定元素以块级元素展示
 区别：
行内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直
方向排列；
块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能
包含文字或其它行内元素
行内元素设置 ， 无效，! 上下无效，! 上下无效
 列举
行内元素：!"!""""#"
块级元素：$，#，，，%&，
  和 # 属于行内替换元素，' '!'! 均可用。效果等同
于块级元素
 (!)*+
，, 有哪些新特性？
 语义化标签：!"-"."!$"!"!.
 增强型表单：# 新增了多个 )
 新增表单元素：!!，)，##
 新增表单属性：!，/#，"!0
 音频，视频：$，!#
& 1!$!，地理定位，拖拽
2 本地存储，!3!%没有时间限制的数据存储，3!%%%针对一个
 的数据存储，当用户关闭浏览器窗口后，数据会被删除
4 新事件：5，""!)"!#"!"# 
6 +3*单个  链接上的全双工协议
， 选择器有哪些？优先级
 通配符选择器（7）：
 元素选择器
  选择器
 1! 选择器
 后代选择器
& 子元素选择器
2 相邻选择器
优先级：！8内联8( 选择器8! 选择器8标签选择器
，什么叫  盒模型？有几种盒模型？9! 与 ! 的区别
 1 盒模型是  技术的一种思维模式。每个盒模型有内容（ ），填充
（!），边框（+），外边距（!）组成
 1 盒 模 型 又 两 种 ， : 盒 模 型 和  标 准 盒 模 型 ， 其 中 : 模 型
;<!<+，而标准盒模型 ;
 9! 是自身容器边框到另一个容器边框的距离，就是容器的外边距
 =! 是自身容器边框到自身内容之间的距离，是为内边距
&，说说你对语义化的理解
 根据内容的结构化使用合适的语义化标签，让浏览器的爬虫和机器更好的解析，
同时增加代码的可读性及可维护性
2，, 与 0 的区别
 > 必须被正确地嵌套
 > 标签必须小写
 > 空标签必须关闭
 > 文档必须有根元素?8?'8
4，$< 布局的好处
 代码精简，且结构与样式分离，易于维护
 代码量减少了，页面加载速度更快，用户体验提升
 对  搜索引擎更加友好，且  又新增了许多语义化标签更是如此
 允许更多炫酷的页面效果，丰富了页面
 符合 标准，保证网站不会因为网络应用的升级而淘汰
6，盒模型及如何转换
 @0%5*%+0  盒模型，标准盒模型
 @0%5：+%+0（: 盒模型，又名怪异盒模型）
，实现水平垂直居中的几种方式
 A0
(!)：B0；#.-)%*C!%*C
 定位
D+0E
.*!.$C
*0C
 *0C
+!#%*C
F
D+0%E
.*!+#C
G*C
*C
+H*C
*C
!*!#C
 *0C
*0C
+!#%*) C

剩余12页未读，继续阅读

资源推荐
资源评论
胡不说
  • 粉丝: 224
  • 资源: 2
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源