没有合适的资源?快使用搜索试试~ 我知道了~
阿里前端面试题(第一期)1
需积分: 0 3 下载量 190 浏览量
2022-08-03
14:13:28
上传
评论
收藏 1.87MB PDF 举报
温馨提示
试读
82页
1.2 标准模式与兼容模式各有什么区别 1.3 HTML5 为什么只需要写 < 1.6 行内元素定义6 1.7 块级元素定义6 1.8 行内元素与块级元素的区别
资源详情
资源评论
资源推荐
目录
1.HTML 面试知识点总结................................................................................................................5
1.1 DOCTYPE 的作用是什么?...................................................................................................... 5
1.2 标准模式与兼容模式各有什么区别?.................................................................................... 5
1.3 HTML5 为什么只需要写 <!DOCTYPE HTML>,而不需要引入 DTD?.............................5
1.4 SGML 、 HTML 、XML 和 XHTML 的区别?....................................................................6
1.5 DTD 介绍................................................................................................................................... 6
1.6 行内元素定义............................................................................................................................ 6
1.7 块级元素定义............................................................................................................................ 6
1.8 行内元素与块级元素的区别?................................................................................................ 6
1.9 HTML5 元素的分类.................................................................................................................. 6
1.10 空元素定义..............................................................................................................................7
1.11 link 标签定义...........................................................................................................................7
1.12 页面导入样式时,使用 link 和 @import 有什么区别?................................................ 7
1.13 你对浏览器的理解?..............................................................................................................7
1.14. 介绍一下你对浏览器内核的理解?..................................................................................... 8
1.15 常见的浏览器内核比较.......................................................................................................... 8
1.16 常见浏览器所用内核..............................................................................................................8
1.17 浏览器的渲染原理?..............................................................................................................9
1.18 渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程).............................................. 9
1.19 async 和 defer 的作用是什么?有什么区别?(浏览器解析过程)..............................9
1.20 什么是文档的预解析?(浏览器解析过程).................................................................... 10
1.21 CSS 如何阻塞文档解析?(浏览器解析过程)................................................................ 10
1.22 渲染页面时常见哪些不良现象?(浏览器渲染过程)....................................................10
1.23 如何优化关键渲染路径?(浏览器渲染过程)................................................................10
1.24 什么是重绘和回流?(浏览器绘制过程)........................................................................ 11
1.25 如何减少回流?(浏览器绘制过程)................................................................................ 11
1.26 为什么操作 DOM 慢?(浏览器绘制过程).................................................................. 12
1.27 DOMContentLoaded 事件和 Load 事件的区别?..........................................................12
1.28 HTML5 有哪些新特性、移除了那些元素?...................................................................... 12
1.29 如何处理 HTML5 新标签的浏览器兼容问题?............................................................... 12
1.30 简述一下你对 HTML 语义化的理解?............................................................................. 12
1.31 b 与 strong 的区别和 i 与 em 的区别?.......................................................................13
1.32 前端需要注意哪些 SEO ?.................................................................................................13
1.33 HTML5 的离线储存怎么使用,工作原理能不能解释一下?.......................................... 14
1.34 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?............................... 15
1.35. 常见的浏览器端的存储技术有哪些?............................................................................... 15
1.36 请描述一下 cookies,sessionStorage 和 localStorage 的区别?.............................. 15
1.37 iframe 有那些缺点?............................................................................................................16
1.38 Label 的作用是什么?是怎么用的?................................................................................. 16
1.39 HTML5 的 form 的自动完成功能是什么?......................................................................17
1.40 如何实现浏览器内多个标签页之间的通信?...................................................................... 17
1.41. webSocket 如何兼容低版本浏览器?...............................................................................18
1.42. 页面可见性(Page Visibility API) 可以有哪些用途?..................................................18
1.43. 如何在页面上实现一个圆形的可点击区域?................................................................... 18
1.44. 实现不使用 border 画出 1 px 高的线,在不同浏览器的标准模式与怪异模式下都能
保持一致的效果。......................................................................................................................... 18
1.45. title 与 h1 的区别?...........................................................................................................18
1.46. <img> 的 title 和 alt 有什么区别?................................................................................19
1.47. Canvas 和 SVG 有什么区别?.......................................................................................... 19
1.48. 网页验证码是干嘛的,是为了解决什么安全问题?....................................................... 19
1.49 渐进增强和优雅降级的定义................................................................................................ 19
1.50. attribute 和 property 的区别是什么?............................................................................19
1.51. 对 web 标准、可用性、可访问性的理解........................................................................19
1.52. IE 各版本和 Chrome 可以并行下载多少个资源?.........................................................20
1.53. Flash、Ajax 各自的优缺点,在使用中如何取舍?..........................................................20
1.54. 怎么重构页面?................................................................................................................... 20
1.55. 浏览器架构........................................................................................................................... 20
1.56. 常用的 meta 标签.............................................................................................................. 21
1.57. css reset 和 normalize.css 有什么区别?........................................................................22
1.Normalize.css 保护了有价值的默认值..................................................................................... 22
2.Normalize.css 修复了浏览器的 bug......................................................................................... 22
3.Normalize.css 没有复杂的继承链............................................................................................. 22
4.Normalize.css 是模块化的......................................................................................................... 22
5.Normalize.css 拥有详细的文档................................................................................................. 22
1.58. 用于预格式化文本的标签是?........................................................................................... 23
1.59. DHTML 是什么?.................................................................................................................23
1.60. head 标签中必不少的是?................................................................................................. 23
1.61 HTML5 新增的表单元素有?.............................................................................................. 24
1.62. 在 HTML5 中,哪个方法用于获得用户的当前位置?.................................................. 24
1.63. 文档的不同注释方式?....................................................................................................... 24
1.64. disabled 和 readonly 的区别?........................................................................................24
1.65. 主流浏览器内核私有属性 css 前缀?..............................................................................24
1.66. 前端性能优化?................................................................................................................... 25
1.67. Chrome 中的 Waterfall ?................................................................................................ 25
1.68. 扫描二维码登录网页是什么原理,前后两个事件是如何联系的?............................... 26
1.69. Html 规范中为什么要求引用资源不加协议头 http 或者 https?.................................. 26
2. CSS 面试知识点总结................................................................................................................ 26
2.1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?................. 26
2.2.CSS 选择符有哪些?.............................................................................................................. 27
2.3.::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用。...27
2.4.伪类与伪元素的区别............................................................................................................... 28
2.5.CSS 中哪些属性可以继承?.................................................................................................. 28
2.6.CSS 优先级算法如何计算?.................................................................................................. 30
2.7.关于伪类 LVHA 的解释?........................................................................................................31
2.8.CSS3 新增伪类有那些?........................................................................................................ 31
2.9.如何居中 div?........................................................................................................................32
2.10.display 有哪些值?说明他们的作用。...............................................................................35
2.11.position 的值 relative 和 absolute 定位原点是?.........................................................35
2.12.CSS3 有哪些新特性?(根据项目回答).......................................................................... 36
2.13.请解释一下 CSS3 的 Flexbox(弹性盒布局模型),以及适用场景?.........................36
2.14.用纯 CSS 创建一个三角形的原理是什么?...................................................................... 37
2.15.一个满屏品字布局如何设计?............................................................................................... 38
2.16.CSS 多列等高如何实现?.................................................................................................... 38
2.17.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧?.38
2.18.li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?................... 40
2.19.为什么要初始化 CSS 样式?.............................................................................................. 40
2.20.什么是包含块,对于包含块的理解?................................................................................... 41
2.21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么
区别?............................................................................................................................................. 41
2.22.width:auto 和 width:100%的区别......................................................................................42
2.24.简单介绍使用图片 base64 编码的优点和缺点。.............................................................42
2.25.'display'、'position'和'float'的相互关系?......................................................................... 43
2.26.margin 重叠问题的理解。...................................................................................................43
2.27.对 BFC 规范(块级格式化上下文:blockformattingcontext)的理解?.....................45
2.28.IFC 是什么?..........................................................................................................................46
2.29.请解释一下为什么需要清除浮动?清除浮动的方式......................................................... 46
2.30.使用 clear 属性清除浮动的原理?.....................................................................................47
2.31.zoom:1 的清除浮动原理?.................................................................................................... 47
2.32.移动端的布局用过媒体查询吗?......................................................................................... 48
2.33.使用 CSS 预处理器吗?喜欢哪个?.................................................................................. 48
2.34.CSS 优化、提高性能的方法有哪些?................................................................................ 48
2.35.浏览器是怎样解析 CSS 选择器的?.................................................................................. 50
2.36.在网页中应该使用奇数还是偶数的字体?为什么呢?..................................................... 50
2.37.margin 和 padding 分别适合什么场景使用?................................................................50
2.38.抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题].......................51
2.39.简单说一下 css3 的 all 属性。..........................................................................................51
2.40.为什么不建议使用统配符初始化 css 样式。....................................................................51
2.41.absolute 的 containingblock(包含块)计算方式跟正常流有什么不同?..................52
2.42.对于 hasLayout 的理解?................................................................................................... 52
2.43.元素竖向的百分比设定是相对于容器的高度吗?............................................................. 52
2.44.全屏滚动的原理是什么?用到了 CSS 的哪些属性?(待深入实践).......................... 52
2.45.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?(待深入
了解)............................................................................................................................................. 53
2.46.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只
出现一次分别怎么做?)............................................................................................................. 53
2.47.如何修改 chrome 记住密码后自动填充表单的黄色背景?............................................53
2.48.怎么让 Chrome 支持小于 12px 的文字?.......................................................................53
2.49.让页面里的字体变清晰,变细用 CSS 怎么做?.............................................................. 54
2.50.font-style 属性中 italic 和 oblique 的区别?.................................................................54
2.51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?.................................... 54
2.52.layoutviewport、visualviewport 和 idealviewport 的区别?........................................ 55
2.53.position:fixed;在 android 下无效怎么处理?...................................................................56
2.54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)..................... 56
2.55.如何让去除 inline-block 元素间间距?............................................................................ 56
2.56.overflow:scroll 时不能平滑滚动的问题怎么处理?..........................................................56
2.57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的
高度。............................................................................................................................................. 57
2.58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?.. 57
相关知识点:................................................................................................................................. 57
2.59.浏览器如何判断是否支持 webp 格式图片....................................................................... 59
2.60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)..... 59
2.61.style 标签写在 body 后与 body 前有什么区别?......................................................... 60
2.62.什么是 CSS 预处理器/后处理器?.....................................................................................60
2.63.阐述一下 CSSSprites............................................................................................................ 60
2.64.使用 rem 布局的优缺点?.................................................................................................. 61
2.65.几种常见的 CSS 布局.......................................................................................................... 61
2.66.画一条 0.5px 的线................................................................................................................61
2.67.transition 和 animation 的区别.........................................................................................61
2.68.什么是首选最小宽度?......................................................................................................... 62
2.69.为什么 height:100%会无效?............................................................................................. 62
2.70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?................... 62
2.71.内联盒模型基本概念............................................................................................................. 62
2.72.什么是幽灵空白节点?......................................................................................................... 63
2.73.什么是替换元素?................................................................................................................. 63
2.74.替换元素的计算规则?......................................................................................................... 63
2.75.content 与替换元素的关系?..............................................................................................64
2.76.margin:auto 的填充规则?..................................................................................................64
2.77.margin 无效的情形...............................................................................................................65
2.78.border 的特殊性?............................................................................................................... 65
2.79.什么是基线和 x-height?.................................................................................................... 65
2.80.line-height 的特殊性?........................................................................................................66
2.81.vertical-align 的特殊性?.................................................................................................... 67
2.82.overflow 的特殊性?............................................................................................................67
2.83.无依赖绝对定位是什么?..................................................................................................... 68
2.84.absolute 与 overflow 的关系?.........................................................................................68
2.85.clip 裁剪是什么?.................................................................................................................68
2.86.relative 的特殊性?.............................................................................................................. 68
2.87.什么是层叠上下文?............................................................................................................. 69
2.88.什么是层叠水平?................................................................................................................. 69
2.89.元素的层叠顺序?................................................................................................................. 69
2.90.层叠准则?............................................................................................................................. 70
2.91.font-weight 的特殊性?...................................................................................................... 70
2.92.text-indent 的特殊性?....................................................................................................... 70
2.93.letter-spacing 与字符间距?...............................................................................................70
2.94.word-spacing 与单词间距?...............................................................................................71
2.95.white-space 与换行和空格的控制?..................................................................................71
2.96.隐藏元素的 background-image 到底加不加载?........................................................... 71
2.97.如何实现单行/多行文本溢出的省略(...)?.................................................................. 72
2.98.常见的元素隐藏方式?......................................................................................................... 72
2.99.css 实现上下固定中间自适应布局?..................................................................................73
2.100.css 两栏布局的实现?........................................................................................................74
2.102.实现一个宽高自适应的正方形...........................................................................................81
2.103.实现一个三角形...................................................................................................................81
2.104.一个自适应矩形,水平垂直居中,且宽高比为 2:1........................................................81
1.HTML 面试知识点总结
1.1 DOCTYPE 的作用是什么?
相关知识点:
IE5.5 引入了文档模式的概念,而这个概念是通过使用文档类型(DOCTYPE)切换实现
的。
<!DOCTYPE>声明位于 HTML 文档中的第一行,处于 <html> 标签之前。告知浏览器的
解析器用什么文档标准解析这个文档。
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
<!DOCTYPE> 声明一般位于文档的第一行,它的作用主要是告诉浏览器以什么样的模
式来解析文档。一般指定了之后会以标准模式来
进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按
照最新的标准进行解析的。而在兼容模式下,浏
览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。
在 html5 之后不再需要指定 DTD 文档,因为 html5 以前的 html 文档都是基于
SGML 的,所以需要通过指定 DTD 来定义文
档中允许的属性以及一些规则。而 html5 不再基于 SGML 了,所以不再需要使用 DTD。
1.2 标准模式与兼容模式各有什么区别?
标准模式的渲染方式和
JS
引擎的解析方式都是以该浏览器支持的最高标准运行。在兼
容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
1.3 HTML5 为什么只需要写 <!DOCTYPE HTML>,而不需要引入 DTD?
HTML5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 DOCTYPE 来规范浏览
器的行为(让浏览器按照它们应该的方式来运行)。而 HTML4.01 基于 SGML ,所以需要对
剩余81页未读,继续阅读
张景淇
- 粉丝: 39
- 资源: 277
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0