web前端基础面试题

1、<img> 的title 和alt 有什么区别

alt属性和title属性相同点：

    它们都会出现浮层，显示自己设置的图片相关的内容。

alt属性和title属性不同点：

    alt属性:1.当图片加载不出来的时候，就会在图片未显示的地方出现一段alt设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息，即使在网络比较差的时候，用户也可以知道图片的内容，方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2.浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。

    title属性：title属性可以用在任何的元素上，当用户把鼠标移动到元素上时，就会显示预先设置的title的内容，起到对图片说明的作用，实质上就是对图片的解释和备注。

如果图片设置了title属性和alt属性，鼠标悬停或者经过图片区域的时候，只会显示title属性设置的内容。

2、从浏览器地址栏输⼊url到显示⻚⾯的步骤

浏览器根据请求的URL 交给DNS 域名解析，找到真实IP ，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构

（如HTML 的DOM ）；

载⼊解析到的资源⽂件，渲染⻚⾯，完成。

3、HTTP状态码及其含义

1XX ：信息状态码

100 Continue 继续，⼀般在发送post 请求时，已发送了http header 之后服务端

将返回此信息，表示确认，之后发送具体参数信息

2XX ：成功状态码

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

3XX ：重定向

301 Moved Permanently 请求的⽹⻚已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。

304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。

4XX ：客户端错误

400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内

容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁⽌访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error 最常⻅的服务器端错误。

503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

4、html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素，⽐如article 、footer 、header 、nav 、section

表单控件， calendar 、date 、time 、email 、url 、search

新的技术webworker 、 websocket 、 Geolocation

移除的元素：

纯表现的元素： basefont 、big 、center 、font 、 s 、strike 、tt 、u

对可⽤性产⽣负⾯影响的元素： frame 、frameset 、noframes

⽀持HTML5 新标签：

IE8/IE7/IE6 ⽀持通过document.createElement ⽅法产⽣的标签

可以利⽤这⼀特性让这些浏览器⽀持HTML5 新标签

浏览器⽀持新标签后，还需要添加标签默认的样式

当然也可以直接使⽤成熟的框架、⽐如html5shim

5、请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常

经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回

传递

sessionStorage 和localStorage 不会⾃动把数据发给服务器，仅在本地保存

存储⼤⼩：

cookie 数据⼤⼩不能超过4k

sessionStorage 和localStorage 虽然也有存储⼤⼩的限制，但⽐cookie ⼤得多，可以达到5M或更⼤

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

6、⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元素和块级元素有什么区别？

⾏内元素有： a b span img input select strong

块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p

空元素：

---

<img> <input> <link> <meta>

⾏内元素不可以设置宽⾼，不独占⼀⾏

块级元素可以设置宽⾼，独占⼀⾏

7、Canvas和SVG有什么区别？

svg 绘制出来的每⼀个图形的元素都是独⽴的DOM 节点，能够⽅便的绑定事件或⽤来修改。canvas 输出的是⼀整幅画布

svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮

8、如何在⻚⾯上实现⼀个圆形的可点击区域？

svg

border-radius

纯js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

9、浏览器的内核分别是什么

IE : trident 内核

Firefox ： gecko 内核

Safari : webkit 内核

Opera :以前是presto 内核， Opera 现已改⽤Google - Chrome 的Blink 内核

Chrome:Blink (基于webkit ，Google与Opera Software共同开发)

10、viewport

// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’

// device-width 设备宽度

// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置

// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数

// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数

// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数

// user-scalable 是否允许⼿动缩放

怎样处理 移动端 1px 被 渲染成 2px 问题

局部处理

mate 标签中的 viewport 属性 ， initial-scale 设置为 1

rem 按照设计稿标准⾛，外加利⽤transfrome 的scale(0.5) 缩⼩⼀倍即可；

全局处理

mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5

rem 按照设计稿标准⾛即可

11、简述⼀下src与href的区别

src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。

src 是source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所

在位置；在请求src 资源时会将其指向的资源下载并应⽤到⽂档内，例如js 脚本，

img 图⽚和frame 等元素

<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他

资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素

也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底

部⽽不是头部

href 是Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚

点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加

<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为css ⽂

件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link ⽅

式来加载css ，⽽不是使⽤@import ⽅式

12、display: none; 与visibility: hidden; 的区别

display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；

visibility: hidden ;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可⻅

display: none ;是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示；visibility: hidden; 是继承属性，⼦孙节点消失由于继承了hidden ，通过设置visibility: visible; 可以让⼦孙节点显式

修改常规流中元素的display 通常会造成⽂档重排。修改visibility 属性只会造成本元素的重绘。

读屏器不会读取display: none ;元素内容；会读取visibility: hidden; 元素内容

13、link 与@import 的区别

1. link 是HTML ⽅式， @import 是CSS⽅式

2. link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现FOUC (⽂档样式

短暂失效)

3. link 可以通过rel="alternate stylesheet" 指定候选样式

4. 浏览器对link ⽀持早于@import ，可以使⽤@import 对⽼浏览器隐藏样式

5. @import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件

6. 总体来说： link 优于@import

14、清除浮动的⼏种⽅式，各⾃的优缺点

⽗级div 定义height

结尾处加空div 标签clear:both

⽗级div 定义伪类:after 和zoom（推荐）

⽗级div 定义overflow:hidden

⽗级div 也浮动，需要定义宽度

结尾处加br 标签clear:both

15、css3有哪些新特性

新增各种css 选择器

圆⻆ border-radius

多列布局

阴影和反射

⽂字特效text-shadow

线性渐变

旋转transform

16、CSS3新增伪类有那些？

p:first-of-type 选择属于其⽗元素的⾸个<p> 元素的每个<p> 元素。

p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个<p> 元素。

p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。

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

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

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

:before 在元素之后添加内容。

:enabled 已启⽤的表单元素。

:disabled 已禁⽤的表单元素。

:checked 单选框或复选框被选中。

17、CSS优先级算法如何计算？

!important 大于一切 > 内联 1000 > id 100  > class 10  > tag  1 ; 

18、介绍⼀下标准的CSS的盒⼦模型？低版本IE的盒⼦模型有什么不同的？

有两种， IE 盒⼦模型、W3C 盒⼦模型；

盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；

区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;

19、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）

多数显示器默认频率是60Hz ，即1 秒刷新60 次，所以理论上最⼩间隔为  --  1/60*1000ms ＝ 16.7ms

20、如何美化CheckBox

<label> 属性 for 和 id

隐藏原⽣的 <input>

:checked + <label>

21、rgba()和opacity的透明效果有什么不同？

rgba() 和opacity 都能实现透明效果，但最⼤的不同是opacity 作⽤于元素，以及元素内的所有内容的透明度，

⽽rgba() 只作⽤于元素的颜⾊或其背景⾊。（设置rgba 透明的元素的⼦元素不会继承透明效果！）

22、["1", "2", "3"].map(parseInt) 答案是多少

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ，其中radix 表示解析时⽤的基数。

map 传了 3 个(element, index, array) ，对应的 radix 不合法导致解析失败。

23、闭包

闭包就是能够读取其他函数内部变量的函数

闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个

函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域

闭包的特性：

.函数内再嵌套函数

.内部函数可以引⽤外层的参数和变量

.参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺

点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。在js中，函数即

闭包，只有函数才会产⽣作⽤域的概念

闭包 的最⼤⽤处有两个，⼀个是可以读取函数内部的变量，另⼀个就是让这些变量始终保持在内存中

闭包的另⼀个⽤处，是封装对象的私有属性和私有⽅法

好处：能够实现封装和缓存等；

坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题

使⽤闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在IE中可能导致内存泄露

解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除

24、介绍js的基本数据类型

Undefined 、Null 、Boolean 、Number 、String

25、如何使⽤CSS实现硬件加速？

⼀般触发硬件加速的CSS 属性有transform 、opacity 、filter ，为了避免2D动画，在 开始和结束的时候的repaint 操作，⼀般使⽤tranform:translateZ(0)