HTML5+CSS3面试题整理

元素的每个

元素 p:last-of-type 选择属于其⽗元素的最后

元素的每个

元素 p:only-of-type 选择属于其⽗元素唯⼀的

元素的每个

元素 p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个

元素 p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个

元素 ::after 在元素之前添加内容,也可以⽤来做清除浮动 ::before 在元素之后添加内容

:disabled 控制表单控件的禁⽤状态 :checked 单选框或复选框被选中2.10 CSS3有哪些新特性 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点） 圆⾓ （border-radius:8px） 多列布局 （column） 阴影和反射 （ShadowReflect） ⽂字特效 （text-shadow） 线性渐变 （gradient） 旋转，缩放,定位,倾斜 （transform） 动画 （Animation）多背景，背景裁剪2.11 请解释⼀下CSS3的Flexbox（弹性盒布局模型）,以及适⽤场景 ⼀个⽤于页⾯布局的全新CSS3功能，Flexbox可以把列表放在同⼀个⽅向（从上到下排列，从左到右），并让列表能延伸到占⽤可⽤的空间。 较为复杂的布局还可以通过嵌套⼀个伸缩容器（flex container）来实现。 采⽤Flex布局的元素，称为Flex容器（flex container），简称"容器"。 它的所有⼦元素⾃动成为容器成员，称为Flex项⽬（flex item），简称"项⽬"。 常规布局是基于块和内联流⽅向，⽽Flex布局是基于flex-flow流可以很⽅便的⽤来做局中，能对不同屏幕⼤⼩⾃适应。在布局上有了⽐以前更加灵活的空间2.12 ⽤纯CSS创建⼀个三⾓形的原理是什么 把上、左、右三条边隐藏掉（颜⾊设为 transparent） #demo {width: 0;height: 0;border-width: 20px;border-style: solid; border-color: transparent transparent red transparent;}2.13 ⼀个满屏 品 字布局 如何设计上⾯的div宽100%，下⾯的两个div分别宽50%，然后⽤float或者inline使其不换⾏即可2.14 css等⾼布局如何实现 利⽤padding-bottom|margin-bottom正负值相抵； 设置⽗容器设置超出隐藏（overflow:hidden），这样⼦⽗容器的⾼度就还是它⾥⾯的列没有设定padding-bottom时的⾼度， 当它⾥⾯的任 ⼀列⾼度增加了，则⽗容器的⾼度被撑到⾥⾯最⾼那列的⾼度，其他⽐这列矮的列会⽤它们的padding-bottom补偿这部分⾼度差2.15 li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？ ⾏框的排列会受到中间空⽩（回车空格）等的影响，因为空格也属于字符,这些空⽩也会被应⽤样式，占据空间，所以会有间隔，把字符⼤⼩设为0，就没有空格了2.16 为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页⾯显⽰差异。当然，初始化样式会对SEO有⼀定的影响，但鱼和熊掌不可兼得，但⼒求影响最⼩的情况下初始化。 最简单的初始化⽅法： * {padding: 0; margin: 0;} 淘宝的样式初始化代码： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }2.17 请解释⼀下为什么需要清除浮动？清除浮动的⽅式清除浮动是为了清除使⽤浮动元素产⽣的影响。浮动的元素，⾼度会塌陷，⽽⾼度的塌陷使我们页⾯后⾯的布局不能正常显⽰。 1、⽗级div定义height； 2、⽗级div 也⼀起浮动； 3、常规的使⽤⼀个class； .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1;}2.18 SASS/LESS编译的时候，浮动元素的⽗级div定义伪类:after &::after,&::before{ content: " "; visibility: hidden; display: block; height: 0; clear: both; } 解析原理： 1) display:block 使⽣成的元素以块级元素显⽰,占满剩余空间; 2) height:0 避免⽣成内容破坏原有布局的⾼度。 3) visibility:hidden 使⽣成的内容不可见，并允许可能被⽣成内容盖住的内容可以进⾏点击和交互; 4）通过 content:"."⽣成内容作为最后⼀个元素，⾄于content⾥⾯是点还是其他都是可以的，例如oocss⾥⾯就有经典的 content:".",有些版本可能content ⾥⾯内容为空,⼀丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产⽣额外的空隙； 5）zoom：1 触发IE hasLayout。通过分析发现，除了clear：both⽤来闭合浮动的，其他代码⽆⾮都是为了隐藏掉content⽣成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。2.19 CSS优化、提⾼性能的⽅法有哪些 关键选择器（key selector）。选择器的最后⾯的部分为关键选择器（即⽤来匹配⽬标元素的部分）； 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉⽆关的规则（这样样式系统就不会浪费时间去匹配它们了）； 提取项⽬的通⽤公有样式，增强可复⽤性，按模块编写组件；增强项⽬的协同开发性、可维护性和可扩展性; 使⽤预处理⼯具或构建⼯具（gulp对css进⾏语法检查、⾃动补前缀、打包压缩、⾃动优雅降级）；2.20 怎么让Chrome⽀持⼩于12px 的⽂字 1、⽤图⽚：如果是内容固定不变情况下，使⽤将⼩于12px⽂字内容切出做图⽚，这样不影响兼容也不影响美观。 2、使⽤12px及12px以上字体⼤⼩：为了兼容各⼤主流浏览器，建议设计美⼯图时候设置⼤于或等于12px的字体⼤⼩，如果是接单的这个时候就需要给客户讲解⼩于12px浏览器不兼容等事宜。 3、继续使⽤⼩于12px字体⼤⼩样式设置：如果不考虑chrome可以不⽤考虑兼容，同时在设置⼩于12px对象设置-webkit-text-size-adjust:none，做到最⼤兼容考虑。 4、使⽤12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。2.21 如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）多数显⽰器默认频率是60Hz，即1秒刷新60次，所以理论上最⼩间隔为1/60＊1000ms ＝ 16.7ms2.22 display:inline-block 什么时候会显⽰间隙？(携程) 移除空格、使⽤margin负值、使⽤font-size:0、letter-spacing、word-spacing、浮动2.23 超链接访问过后hover样式就不出现的问题是什么？如何解决被点击访问过的超链接样式不再具有hover和active了,解决⽅法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）2.24 rgba()和opacity的透明效果有什么不同rgba()和opacity都能实现透明效果，但最⼤的不同是opacity作⽤于元素，以及元素内的所有内容的透明度，⽽rgba()只作⽤于元素的颜⾊或其背景⾊。（设置rgba透明的元素的⼦元素不会继承透明效果！）2.25 px和em的区别px和em都是长度单位，区别是：px值固定，容易计算。em值不固定，是相对单位，其相对应⽗级元素的字体⼤⼩会调整2.26 描述⼀个”reset”的CSS⽂件并如何使⽤它。知道吗？你了解他们的不同之处？Reset样式的⽬的是清除浏览器某些默认样式，⽅便css书写，例如：*｛margin:0;padding:0;list-style:none;｝Normalize的理念与reset不同，它并不清除浏览器默认样式，⽽是尽量将所有浏览器的默认样式统⼀2.27 Sass、LESS是什么？⼤家为什么要使⽤他们？他们是CSS预处理器。他是CSS上的⼀种抽象层。他们是⼀种特殊的语法/语⾔编译成CSS。例如Less是⼀种动态样式语⾔. 将CSS赋予了动态语⾔的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运⾏ (⽀持IE 6+,Webkit, Firefox)，也可⼀在服务端运⾏ (借助 )。为什么要使⽤它们？结构清晰，便于扩展。可以⽅便地屏蔽浏览器私有语法差异。这个不⽤多说，封装对浏览器语法差异的重复处理，减少⽆意义的机械劳动。可以轻松实现多重继承。完全兼容 CSS 代码，可以⽅便地应⽤到⽼项⽬中。LESS 只是在 CSS 语法上做了扩展，所以⽼的 CSS 代码也可以与 LESS 代码⼀同编译。2.28 为什么要初始化样式⽤于浏览器默认css样式的存在并且不同浏览器对相同HTML标签的默认样式不同，若不初始化会造成不同浏览器之间的显⽰差异2.29 对WEB标准以及W3C的理解与认识标签闭合、标签⼩写、不乱嵌套、提⾼搜索机器⼈搜索⼏率、使⽤外 链css和js脚本、结构⾏为表现的分离、⽂件下载与页⾯速度更快、内容能被更多的⽤户所访问、内容能被更⼴泛的设备所访问、更少的代码和组件，容易维 护、改版⽅便，不需要变动页⾯内容、提供打印版本⽽不需要复制内容、提⾼⽹站易⽤性2.30 使⽤css实现⼀个持续的动画效果animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}}2.31 重排和重绘部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算。这被称为重排。注意这⾥⾄少会有⼀次重排-初始化页⾯布局。由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内容需要更新。这样的更新被称为重绘。2.32 什么情况会触发重排和重绘？

1. 添加、删除、更新 DOM 节点2. 通过 display: none 隐藏⼀个 DOM 节点-触发重排和重绘3. 通过 visibility: hidden 隐藏⼀个 DOM 节点-只触发重绘，因为没有⼏何变化4. 移动或者给页⾯中的 DOM 节点添加动画5. 添加⼀个样式表，调整样式属性6. ⽤户⾏为，例如调整窗⼝⼤⼩，改变字号，或者滚动2.33. animation对应的属性写法：animation: name duration timing-function delay iteration-count direction;

下⾯是对应的属性的介绍

animation-name 规定需要绑定到选择器的 keyframe 名称。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。2.34 transition?css的transition允许css的属性值在⼀定的时间区间内平滑地过渡。这种效果可以在⿏标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进⾏2D转换的 如移动，⽐例化，反过来，旋转，和拉伸元素。

1. 移动端⾯试题3.1 说说你知道的移动端web的兼容性bug1、⼀些情况下对⾮可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。on 在Safari下的两个属性(top,left)需要都写，只写⼀个容易发⽣错乱 的placeholder会出现⽂本位置偏上的情况 input 的placeholder会出现⽂本位置偏上的情况：PC端设置line-height等于height能够对齐，⽽移动端仍然是偏上，解决是设置line-height:点击穿透问题 tDefault + 重新给元素绑定新的链接3.2 有哪些多屏适配⽅案1. media query + rem2. flex3. 弹性布局3.3 H5页⾯窗⼝⾃动调整到设备宽度，并禁⽌⽤户缩放页⾯3.4 忽略将页⾯中的数字识别为电话号码3.5 忽略Android平台中对邮箱地址的识别

3.6 移动端click屏幕产⽣200-300 ms的延迟响应移动设备上的web⽹页是有300ms延迟的，玩玩会造成按钮点击延迟甚⾄是点击失效。以下是历史原因，来源⼀个公司内⼀个同事的分享：2007年苹果发布⾸款iphone上IOS系统搭载的safari为了将适⽤于PC端上⼤屏幕的⽹页能⽐较好的展⽰在⼿机端上，使⽤了双击缩放(double tap to zoom)的⽅案，⽐如你在⼿机上⽤浏览器打开⼀个PC上的⽹页，你可能在看到页⾯内容虽然可以撑满整个屏幕，但是字体、图⽚都很⼩看不清，此时可以快速双击屏幕上的某⼀部分，你就能看清该部分放⼤后的内容，再次双击后能回到原始状态。双击缩放是指⽤⼿指在屏幕上快速点击两次，iOS ⾃带的 Safari 浏览器会将⽹页缩放⾄原始⽐例。原因就出在浏览器需要如何判断快速点击上，当⽤户在屏幕上单击某⼀个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定⽤户是单纯要点击链接还是要双击该部分区域进⾏缩放操作，所以，捕获第⼀次单击后，浏览器会先Hold⼀段时间t，如果在t时间区间⾥⽤户未进⾏下⼀次点击，则浏览器会做单击跳转链接的处理，如果t时间⾥⽤户进⾏了第⼆次单击操作，则浏览器会禁⽌跳转，转⽽进⾏对该部分区域页⾯的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，⼤概为300毫秒。这就是延迟的由来。造成的后果⽤户纯粹单击页⾯，页⾯需要过⼀段时间才响应，给⽤户慢体验感觉，对于web开发者来说是，页⾯js捕获click事件的回调函数处理，需要300ms后才⽣效，也就间接导致影响其他业务逻辑的处理。解决⽅案：fastclick可以解决在⼿机上点击事件的300ms延迟zepto的touch模块，tap事件也是为了解决在click的延迟问题3.7 触摸事件的响应顺序1. ontouchstart2. ontouchmove3. ontouchend4. onclick3.8 什么是Retina 显⽰屏，带来了什么问题retina：⼀种具备超⾼像素密度的液晶屏，同样⼤⼩的屏幕上显⽰的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显⽰屏中，像素点1个变为4个在⾼清显⽰屏中的位图被放⼤，图⽚会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍那么，前端的应对⽅案是：

3.9 ios系统中元素被触摸时产⽣的半透明灰⾊遮罩怎么去掉ios⽤户点击⼀个链接，会出现⼀个半透明灰⾊遮罩, 如果想要禁⽤，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后⼀位设置为0就可以去除半透明灰⾊遮罩a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}3.10 webkit表单输⼊框placeholder的颜⾊值怎么改变？input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}3.11 打电话发短信写邮件怎么实现

3.12 解释⼀下移动端的缩放放⼤ 会使⼀个css像素的⾯积变⼤ ⼀个css像素所包含的物理像素变多 视觉视⼝所包含的css像素的个数变少

缩⼩（默认情况下（没有meta标签）其实已经有了⼀个缩⼩操作了） 会使⼀个css像素的⾯积变⼩ ⼀个css像素所包含的物理像素变少 视觉视⼝所包含的css像素的个数变多

3.13⼿机端上图⽚长时间点击会选中图⽚，如何处理?οnselect=function() { return false}3.14 video标签的⼏个个属性⽅法1. src：视频的URL2. poster：视频封⾯，没有播放时显⽰的图⽚3. preload：预加载4. autoplay：⾃动播放5. loop：循环播放6. controls：浏览器⾃带的控制条7. width：视频宽度8. height：视频⾼度3.15 常见的视频编码格式有⼏种?视频格式有⼏种?视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式

视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-13.16 canvas在标签上设置宽⾼ 和在style中设置宽⾼有什么区别？canvas标签的width和height是画布实际宽度和⾼度，绘制的图形都是在这个上⾯。⽽style的width和height是canvas在浏览器中被渲染的⾼度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。

3.17 viewport 所有属性 ？(1)width :设置layout viewport的宽度，为⼀个正整数，或字符串'device-width';(2)initial-scale:设置页⾯的初始缩放值，为⼀个数字，可以带⼩数。(3)minimum-scale:允许⽤户的最⼩缩放值，为⼀个数字，可以带⼩数。(4)maximum-scale:允许⽤户的最⼤缩放值，为⼀个数字，可以带⼩数。(5)height:设置layout viewport的⾼度，这个属性对我们并不重要，很少使⽤(6)user-scalable:是否允许⽤户进⾏缩放，值为‘no’或者‘yes’。安卓中还⽀持：target-densitydpi，表⽰⽬标设备的密度等级，作⽤是决定css中的1px 代表多少物理像素(7)target-densitydpi:值可以为⼀个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这⼏个字符串中的⼀个

3.18 media属性？screen？All？max-width?min-width?media 属性规定被链接⽂档将显⽰在什么设备上。media 属性⽤于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕，all适⽤于所有设备，max-width超过最⼤宽度就不执⾏，min-width必须⼤于最⼩宽度才执⾏。

2023年6月20日发(作者：)

HTML5+CSS3⾯试题整理

HTML5 + CSS3⾯试题集锦5⾯试题1.1 H5的新特性有哪些1. 画布(Canvas) API2. 地理(Geolocation) API3. ⾳频、视频API(audio,video)4. localStorage和sessionStorage5. webworker和 websocket6. header,nav,footer,aside,article,section7. web worker是运⾏在浏览器后台的js程序，他不影响主程序的运⾏，是另开的⼀个js线程，可以⽤这个线程执⾏复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进⾏复杂且耗时的操作时就不会阻塞主线程了1.2 Label的作⽤是什么？是怎么⽤的？label标签来定义表单控制间的关系,当⽤户选择该标签时，浏览器会⾃动将焦点转到和标签相关的表单控件上。Number:Date:1.3 HTML5的form如何关闭⾃动完成功能给不想要提⽰的 form 或某个 input 设置为 autocomplete=off

1.4 如何实现浏览器内多个标签页之间的通信? (阿⾥)1. WebSocket、SharedWorker；2. 也可以调⽤localstorge、cookies等本地存储⽅式；localstorge另⼀ 个浏览上下⽂⾥被添加、修改或删除时，它都会触发⼀个事件，我们通 过监听事件，控制它的值来进⾏页⾯信息通信；3. 注意quirks：Safari 在⽆痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

1.5 实现不使⽤ border 画出1px⾼的线，在不同浏览器的标准模式与怪异模式下都能保持⼀致的效果

1.6 title与h1的区别、b与strong的区别、i与em的区别？ title属性没有明确意义只表⽰是个标题，H1则表⽰层次明确的标题，对页⾯信息的抓取也有很⼤的影响； strong是标明重点内容，有语⽓加强的含义，使⽤阅读设备阅读⽹络时： 会重读，⽽是展⽰强调内容。 i内容展⽰为斜体，me表⽰强调的⽂本； Physical Style Elements -- ⾃然样式标签 b, i, u, s, pre Semantic Style Elements -- 语义样式标签 strong, em, ins, del, code 应该准确使⽤语义样式标签, 但不能滥⽤, 如果不能确定时⾸选使⽤⾃然样式标签。

1.7 你做的页⾯在哪些流览器测试过？这些浏览器的内核分别是什么?Trident内核:IE系列Gecko内核:FirefoxWebkit内核:SafariBlink内核：是基于Webkit内核的⼦项⽬,使⽤的浏览器有：Chrome/opera等除IE、Firefox、Safari之外的⼏乎所有浏览器⼏乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等

1.8 每个HTML⽂件⾥开头都有个很重要的东西，Doctype，知道这是⼲什么的吗？⽂档声明。 声明位于⽂档中的最前⾯的位置，处于 标签之前。此标签可告知浏览器⽂档使⽤哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页⾯）IE下如不书写⽂档声明会使⽤怪异模式解析⽹页导致⼀系列CSS兼容性问题

1.9 div+css的布局较table布局有什么优点正常场景⼀般都适⽤div+CSS布局，优点： 1. 结构与样式分离 2. 代码语义性好 3. 更符合HTML标准规范 4. SEO友好

Table布局的适⽤场景：某种原因不⽅便加载外部CSS的场景，例如邮件正⽂，此时⽤table布局可以在⽆css情况下保持页⾯布局正常

1.10 img的alt与title有何异同？ strong与em的异同alt(alt text):为不能显⽰图像、窗体或applets的⽤户代理（UA），alt属性⽤来指定替换⽂字。替换⽂字的语⾔由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显⽰)title(tool tip):该属性为设置该属性的元素提供建议性的信息。em:表现为斜体，语义表⽰强调strong:表现为粗体，语义为强烈语⽓，强调程度超过em

1.11 简述⼀下src与href的区别src⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应⽤到⽂档内，例如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底部⽽不是头部。href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加那么浏览器会识别该⽂档为css⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link⽅式来加载css，⽽不是使⽤@import⽅式。

1.12 知道的⽹页制作会⽤到的图⽚格式有哪些png-8，png-24，jpeg，gif，svg。但是上⾯的那些都不是⾯试官想要的最后答案。⾯试官希望听到是Webp。（是否有关注新技术，新鲜事物）科普⼀下Webp：WebP格式，⾕歌（google）开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有JPEG的2/3，并能节省⼤量的服务器带宽资源和数据空间。Facebook Ebay等知名⽹站已经开始测试并使⽤WebP格式。在质量相同的情况下，WebP格式图像的体积要⽐JPEG格式图像⼩40%

1.13 在css/js代码上线之后开发⼈员经常会优化性能，从⽤户刷新⽹页开始，⼀次js请求⼀般情况下有哪些地⽅会有缓存处理dns缓存，cdn缓存，浏览器缓存，服务器缓存

1.14 ⼀个页⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪些⽅法优化这些图⽚的加载，给⽤户更好的体验1. 图⽚懒加载，在页⾯上的未可视区域可以添加⼀个滚动条事件，判断图⽚位置与浏览器顶端的距离与页⾯的距离，如果前者⼩于后者，优先加载。2. 如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展⽰图⽚的前⼀张和后⼀张优先下载。3. 如果图⽚为css图⽚，可以使⽤CSSsprite，SVGsprite，Iconfont、Base64等技术。4. 如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼⽤户体验。5. 如果图⽚展⽰区域⼩于图⽚的真实⼤⼩，则因在服务器端根据业务需要先⾏进⾏图⽚压缩，图⽚压缩后⼤⼩与展⽰⼀致1.15你如何理解HTML结构的语义化1. 更符合W3C统⼀的规范标准，是技术趋势。2. 没有样式时浏览器的默认样式也能让页⾯结构很清晰。3. 对功能障碍⽤户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的⽹页。4. 对其他⾮主流终端设备友好。例如机顶盒、PDA、各种移动终端。5. 对SEO友好。1.16谈谈以前端⾓度出发做好SEO需要考虑什么搜索引擎主要以:外链数量和质量,⽹页内容和结构等来决定某关键字下的⽹页搜索排名。前端应该注意⽹页结构和内容⽅⾯的情况：1. Meta标签优化：主要包括主题（Title)，⽹站描述(Description)。还有⼀些其它的隐藏⽂字⽐如Author（作者），Category（⽬录），Language（编码语种）等，符合W3C规范的语义性标签的使⽤2. 如何选取关键词并在⽹页中放置关键词：搜索就得⽤关键词。关键词分析和选择是SEO最重要的⼯作之⼀。⾸先要给⽹站确定主关键词（⼀般在5个上下），然后针对这些关键词进⾏优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。1.17html5有哪些新特性、移除了那些元素新特性：1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. ⾳频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；7. sessionStorage 的数据在浏览器关闭后⾃动删除8. 表单控件，calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation移除的元素：1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；2. 对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；1.18如何处理HTML5新标签的浏览器兼容问题1. IE8/IE7/IE6⽀持通过 Element ⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签，浏览器⽀持新标签后，还需要添加标签默认的样式（当然最好的⽅式是直接使⽤成熟的框架、使⽤最多的是html5shim框架）：1.19如何区分 HTML 和 HTML5？DOCTYPE声明新增的结构元素、功能元素1.20 HTML5 Canvas 元素有什么⽤Canvas 元素⽤于在⽹页上绘制图形，该元素标签强⼤之处在于可以直接在 HTML 上进⾏图形操作1.21 如何在 HTML5 页⾯中嵌⼊⾳频HTML 5 包含嵌⼊⾳频⽂件的标准⽅式，⽀持的格式包括 MP3、Wav 和 Ogg：1.22 如何在HTML5页⾯中嵌⼊视频和⾳频⼀样，HTML5 定义了嵌⼊视频的标准⽅法，⽀持的格式包括：MP4、WebM 和 Ogg：1.23 HTML5 引⼊什么新的表单属性datalist datetime output keygen date month week time number range emailurl1.24语义化的理解⽤正确的标签做正确的事情！html语义化就是让页⾯的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的。搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO。使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解1.25介绍⼀下你对浏览器内核的理解主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎渲染引擎：负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊CSS等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。所有⽹页浏览器、电⼦邮件客户端以及其它需要编辑、显⽰⽹络内容的应⽤程序都需要内核JS引擎则：解析和执⾏javascript来实现⽹页的动态效果最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎

1.26浏览器是怎么对HTML5的离线储存资源进⾏管理和加载的呢在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest⽂件，如果是第⼀次访问app，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载页⾯，然后浏览器会对⽐新的manifest⽂件与旧的manifest⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。离线的情况下，浏览器就直接使⽤离线存储的资源1.27请描述⼀下 cookies，sessionStorage 和 localStorage 的区别cookie是⽹站为了标⽰⽤户⾝份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递sessionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存存储⼤⼩：cookie数据⼤⼩不能超过4ksessionStorage和localStorage虽然也有存储⼤⼩的限制，但⽐cookie⼤得多，可以达到5M或更⼤有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除cookie 设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭1.28 css sprite是什么,有什么优缺点概念：将多个⼩图⽚拼接到⼀个图⽚中。通过background-position和元素尺⼨调节需要显⽰的背景图案。优点：减少HTTP请求数，极⼤地提⾼页⾯加载速度增加图⽚信息重复度，提⾼压缩⽐，减少图⽚⼤⼩更换风格⽅便，只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现缺点：图⽚合并⿇烦维护⿇烦，修改⼀个图⽚可能需要从新布局整个图⽚，样式1.29 canvas 如何绘制⼀个三⾓形|正⽅形moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。这两个函数加起来就是画⼀条直线。 画线要⽤“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终⽌位置要⽤到LineTo函数确定终⽌位置（xend,yend）,这样⼀条线就画出来了。 每次与前⾯⼀个坐标相连 。

stroke() ⽅法会实际地绘制出通过 moveTo() 和 lineTo() ⽅法定义的路径。默认颜⾊是⿊⾊。 Your browser does not support the canvas element.

1.30弹性盒⼦模型? flex|box区别?1. 引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的条⽬进⾏排列、对齐和分配空⽩空间。即便容器中条⽬的尺⼨未知或是动态变化的，弹性盒布局模型也能正常的⼯作。在该布局模型中，容器会根据布局的需要，调整其中包含的条⽬的尺⼨和顺序来最好地填充所有可⽤的空间。当容器的尺⼨由于屏幕⼤⼩或窗⼝尺⼨发⽣变化时，其中包含的条⽬也会被动态地调整。⽐如当容器尺⼨变⼤时，其中包含的条⽬会被拉伸以占满多余的空⽩空间；当容器尺⼨变⼩时，条⽬会被缩⼩以防⽌超出容器的范围。弹性盒布局是与⽅向⽆关的。在传统的布局⽅式中，block 布局是把块在垂直⽅向从上到下依次排列的；⽽ inline 布局则是在⽔平⽅向来排列。弹性盒布局并没有这样内在的⽅向限制，可以由开发⼈员⾃由操作。

(2) flex和box的区别: display：box 是⽼规范，要兼顾古董机⼦就加上它； ⽗级元素有display:box;属性之后。他的⼦元素⾥⾯加上box-flex属性。可以让⼦元素按照⽗元素的宽度进⾏⼀定⽐例的分占空间。 flex是最新的，董机⽼机⼦不⽀持的；⽗元素设置display:flex后，⼦元素宽度会随⽗元素宽度的改变⽽改变，⽽display:box不会。 Android UC浏览器只⽀持display:box语法；⽽iOS UC浏览器则⽀持两种⽅式。

1.31 解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?IE当padding+border的值⼩于width或者height:

盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）

盒模型的⾼度=margin(上下)+height（height已经包含了padding和border的值）

当padding+border的值⼤于width或者height:

盒模型的宽度=margin(左右)+padding(左右)+border(左右)

盒模型的⾼度=margin(上下)+padding(上下)+border(上下)+19px （加⼀个默认⾏⾼ 19px） 所以相当于是padding+border和width或者height⽐⼤⼩，谁⼤取谁。

以上⼏种DOCTYPE都是标准的⽂档类型，⽆论使⽤哪种模式完整定义DOCTYPE，都会触发标准模式，⽽如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值⼀个是content-box，另⼀个是border-box。

当设置为box-sizing:content-box时，将采⽤标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采⽤怪异模式解析计算；

Css3弹性盒模型引⼊了新的盒⼦模型—弹性盒模型，该模型决定⼀个盒⼦在其他盒⼦中的分布⽅式以及如何处理可⽤的空间。使⽤该模型，可以很轻松的创建⾃适应浏览器窗⼝的流动布局或⾃适应字体⼤⼩的弹性布局。

3⾯试题2.1 解释box-sizingbox-sizing属性主要⽤来控制元素的盒模型的解析模式。默认值是content-box。content-box：让元素维持W3C的标准盒模型。元素的宽度/⾼度由border + padding + content的宽度/⾼度决定，设置width/height属性指的是content部分的宽/⾼border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding +content应⽤场景：统⼀风格的表单元素 表单中有⼀些input元素其实还是展现的是传统IE盒模型，带有⼀些默认的样式，⽽且在不同平台或者浏览器下的表现不⼀，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建⼀个风格统⼀的表单元素2.2 ⽔平垂直居中的⽅法⾏内元素布局line-height + text-align⾏内块元素布局vertical-align + line-height + text-align块布局position absolute + margin auto +top,bottom,left,right=0position absolute + top:50%,left50% + translate(-50%, -50%) position absolute + top:50%,left50% +margin:-元素宽度⼀半 0 0 -元素⾼度⼀半

⽗容器⼦容器不确定宽⾼的块级元素，做上下居中#wrap{ display:flex; justify-content:center; align-items:center;} { text-align: center;//⽔平居中 display: table-cell; vertical-align: middle;//垂直居中}.child { display: inline-block;//防⽌块级元素宽度独占⼀⾏，内联元素可不设置}-box//对⽗级元素设置position: relative;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;2.3 实现左边定宽右边⾃适应效果(⽗级元素)与tabel-cell（两个⼦集元素）(⽗级元素)+flex :1（右边⼦元素）3.左边定宽，并且左浮动；右边设置距离左边的宽度4.左边定宽，左边设置position:absolute；右边设置距离左边的宽度2.4 三列布局（中间固定两边⾃适应宽度）1. 采⽤浮动布局（左边左浮动，右边右浮动，中间margin：0 宽度值）2. 绝对定位⽅式（左右绝对定位，左边left0右边right0，中间上同）3. 圣杯布局与双飞翼布局2.5 清除浮动元素的⽅法和各⾃的优缺点清除浮动，实际上是清除⽗元素的⾼度塌陷。因为⼦元素脱离了⽗元素的⽂档流，所以，⽗元素失去了⾼度，导致了塌陷。要解决这个问题，就是让⽗元素具有⾼度。浮动元素的特性： 在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。浮动到右侧的元素，其他内容将从左侧环绕它（浮动元素影响的不仅是⾃⼰，它会影响周围的元素对其进⾏环绕。float仍会占据其位置，position:absolute不占⽤页⾯空间 会有重叠问题 ）

1.在浮动元素末尾添加空标签清除浮动 clear:both （缺点：增加⽆意义标签）