前端面试题整合（HTML，CSS等基础篇）（前端面试常见题）

25-03-05 9

对于前端面试题整合感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍HTML，CSS等基础篇，并为您提供关于2019届校招前端面试题整理——HTML、CSS篇、BAT各大互联网公司html+css

对于前端面试题整合感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍HTML，CSS等基础篇，并为您提供关于2019届校招前端面试题整理——HTML、CSS篇、BAT各大互联网公司html+css前端面试题总结、ES6+（前端面试题整合）、HTML+CSS部分前端基础面试题的有用信息。

本文目录一览：

前端面试题整合（HTML，CSS等基础篇）（前端面试常见题）
2019届校招前端面试题整理——HTML、CSS篇
BAT各大互联网公司html+css前端面试题总结
ES6+（前端面试题整合）
HTML+CSS部分前端基础面试题

前端面试题整合（HTML，CSS等基础篇）（前端面试常见题）

浏览器的内核
IE: trident内核，Firefox：gecko内核，Safari:webkit内核，Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核，Chrome:Blink(基于webkit，Google与Opera Software共同开发)
HTML中的Doctype有什么作用
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
div+css的布局较table布局有什么优点
改版的时候更方便只要改css文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（SEO）搜索引擎更友好，排名更容易靠前
img的alt与title有何异同？ strong与em的异同？
alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性。
em:斜体强调标签，更强烈强调，表示内容的强调点。
渐进增强和优雅降级之间的不同
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
src与href的区别
简单来讲，src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src：src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
harf：href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href=”common.css” rel=”stylesheet”/> 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
什么是微格式，谈谈理解
微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。
在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存
优化大型网站加载图片方案
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。如果图片为css图片，可以使用CSssprite，SVGsprite，Iconfont、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
HTML结构的语义化
html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
有哪项方式可以对一个DOM设置它的CSS样式
外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部
内联样式，将css样式直接定义在 HTML 元素内部
CSS都有哪些选择器
派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（a[rel = "external"]）
除了前3种基本选择器，还有一些扩展选择器，
包括后代选择器（利用空格间隔，比如div .a{ }）
相邻选择器（利用加号间隔，h1 + p）
群组选择器（利用逗号间隔，比如p,div,#a{ }）
通配符选择器（ * ）
伪类选择器（a: hover,li: nth - child）
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内
设置display属性为none，或者设置visibility属性为hidden
设置宽高为0，设置透明度为0，设置z-index位置在-1000em
超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

什么是Css Hack？ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
示例如下：

   #test{   
        width:300px;   
        height:300px;   
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px)
     { #test {background-color:black;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }       /*chrome and safari*/

行内元素和块级元素的具体区别是什么？
块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：和相邻的内联元素在同一行;
什么是外边距重叠？有什么效果
外边距重叠就是margin-collapse。在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。
rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
水平垂直居中一个浮动元素

方法一：position加margin

方法二： diaplay:table-cell

方法三：position加 transform

方法四：flex;align-items: center;justify-content: center

方法五：display:flex;margin:auto

方法六：纯position

方法七：兼容低版本浏览器，不固定宽高
讲一下你对盒模型的了解
有padding、margin、border、content属性
Box-sizing: content-Box 是W3C盒子模型，元素的width和height属性只包含内容content部分，不包含内边距padding和边框border部分。
Box-sizing: border-Box 是IE盒子模型，元素的width和height属性同时包含内容content，内边距padding和边框border部分
position定位
Relitive: 相对于自身,会指引子元素相对于他自身进行定位
Absolute: 根据父元素的relitive进行定位
Fixed:现对于window窗口定位
rem原理与em/ vw/vh 区别
Rem是基于根元素的字体大小发生改变,而em是基于body的字体大小发生改变
1.因为html5和css3引入视口的概念来代替显示器的物理尺寸。通过在Meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。
2. 1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视30px改成5vw，意思就是窗口宽度的5%，同理10vw。
3.不过由于vw和vh是css3才支持的长度单位，所以在不支持css3的浏览器中是无效的口高度（viewport height）的百分之一。
Css3的动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
Sass、LESS是什么，优点
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+,Webkit,Firefox)，也可一在服务端运行 (借助 Node.js)。
优点：
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。
LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
CSS中link和@import的区别
Link属于html标签，而@import是CSS中提供的
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题 Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）
BFC是什么
BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
html常见兼容性问题
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline -3px
3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important 解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法： .opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
行内元素有哪些?块级元素有哪些?空(void)元素有哪些？
块级元素：address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 div – 常用块级容易，也是css layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3级标题 h4 – 4级标题 h5 – 5级标题 h6 – 6级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容） noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容） ol – 排序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 非排序列表
行内元素:a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) big – 大字体 br – 换行 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 label – 表格标签 s – 中划线(不推荐) select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线 var – 定义变量
知名的空元素：<br><hr><img><input><link><Meta>鲜为人知的是： <area><base><col><command> <embed><keygen><param><source><track><wbr>
前端页面有哪三层构成
结构层 Html 表示层 CSS 行为层 js
CSS哪些属性可以继承？
可继承： font-size font-family color,UL LI DL DD DT;
不可继承：border padding margin width height ;
CSS优先级算法（权重）
优先级就近原则，样式定义最近者为准
载入样式以最后载入的定位为准
!important> 内联 > id > class > tag
高度自适应，宽度是高度的一半，如何布局
利用padding-top/bottom/left/right属性在设置为百分比时按照父元素的宽度来进行设置，可以通过设置padding-top/bottom：100%；padding-left/right:50%;将元素撑开，使用需注意设置父元素的宽度，特别是在父元素的宽度是继承的情况下，也可更具情况只设置父元素的宽度而不设置高度来隐藏父元素；

类似圣杯布局的多种代码方式
圣杯布局是一种很常见的css布局。
要求：
1、上部和下部各自占领屏幕所有宽度。
2、上下部之间的部分是一个三栏布局。
3、三栏布局两侧宽度不变，中间部分自动填充整个区域。
4、中间部分的高度是三栏中最高的区域的高度。

浮动实现
外层框架
<div>这里是头部</div>
<div></div>
<div>这里是底部</div>
.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
填充三栏
这一步骤，首先给底部区域清除浮动，防止跟随上边的区域一起浮动。
另外：把中，左，右三个区域设置成度浮动。给左右两块区域固定的宽度，中间部分的宽度设置成100%。
这样实现下来，因为浮动的关系，[middle]会占据[container]的所有部分，而左右两块区域都会被挤到下面，但是，由于第一步设置了内边距的关系，[container]的左右各剩余了一块区域，且宽度与左右区域相同。
<div>这里是头部</div>
<div>
    <div>中间部分</div>
    <div>左边</div>
    <div>右边</div>
</div>
<div>这里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}
移动左侧区域
接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。
先移动左边，新加一个样式 margin-left:-100%。这样一来，因为浮动关系，就把左边块上移到了[middle]左侧，与其交织在一起，而右侧栏就自动往左移动。然后再给左侧栏一个偏移量，偏移量恰好是其宽度，这一步要给[container]的position设成relative
<div>这里是头部</div>
<div>
    <div>中间部分</div>
    <div>左边</div>
    <div>右边</div>
</div>
<div>这里是底部</div>
.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}
移动右边
同上一步的原理一样，把右侧区域也给弄上去，设置负外边距和本身宽度相同就行了。
<div>这里是头部</div>
<div>
    <div>中间部分</div>
    <div>左边</div>
    <div>右边</div>
</div>
<div>这里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

 


flexBox弹性盒子实现
弹性盒子用来实现圣杯布局特别简单。只需要把中间的部分用flex布局即可。
<div>这里是头部</div>
<div>
    <div>左边</div>
    <div>中间部分</div>
    <div>右边</div>
</div>
<div>这里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}
很简单，在写html的时候，因为不再涉及到浮动，只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死，把中间的区域的flex属性设置成1就可以了。
css grid网格
grid是一种新的布局方式，截止2018年初，绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分成一个一个的网格，就和围棋的棋盘一样。
用网格来解决圣杯问题，可以摆脱弹性盒子时需要格外加一个[container]的问题，也就是左中右三款区域不需要在他们外边包装一个额外的div。
<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>
  
body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}
简单说一下代码的实现。回头会专门看一下css grid的细节。
首先给最外层的body设成display:grid。当然，是外层父级元素即可，不一定是body。
grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。
而grid-column表示，在横向从左向右，分成了五格。其中#header和#footer占据全部。#left占据第1格，#middle占据第2到第4格，#right占据第5格。
不管是实现起来还是理解起来都很方便。

2019届校招前端面试题整理——HTML、CSS篇

前言

2019届校招陆陆续续开始了，整理了一些高频的面试题。

HTML部分

1. 什么是<!DOCTYPE>？

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

文档解析类型有：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

2. meta标签

提供给页面的一些元信息（名称/值对），有助于SEO。

属性值：

name：名称/值对中的名称。author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。
http-equiv：没有name时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部
content ：名称/值对中的值，可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用
scheme ：用于指定要用来翻译属性值的方案

3. HTML语义化

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4. 常见的浏览器内核

Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto内核：Opera7及以上。[现为：Blink]
Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5. 简单介绍对浏览器内核的理解

主要分成两部分：渲染引擎和JS引擎。

渲染引擎：将代码转换成页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性：

(1) 用于绘画的canvas元素；

(2) 用于媒介回放的video和audio元素；

(3) 对本地离线存储有更好的支持，localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；

(4) 语意化更好的内容元素，比如header,nav,section,article,footer；

(5) 新的表单控件：calendar,date,time,email,url,search；

(6) 新的技术webworker,websockt、Geolocation；

移除元素：

(1) 纯表现的元素：basefont,big,center,font,s,strike,tt,u;

(2) 对可用性产生负面影响的元素：frame,frameset,noframes;

处理兼容性问题：

IE8/IE7/IE6支持document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

7. html5哪些标签可以做SEO优化？

title、meta、header、footer、nav、article、aside

8. src和href的区别

src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

9. 渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

10. defer和async的区别

defer要等到整个页面在内存中正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行。多个defer脚本会按照它们在页面出现的顺序加载。==“渲染完再执行”==
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。多个async脚本是不能保证加载顺序的。==“下载完就执行”==

11. 如何实现浏览器内多个标签页之间的通信？

方法一：调用localstorge

标签页1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>

标签页2：

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动作  
});

方法二：使用cookie+setInterval

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});

标签页2：

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});

CSS部分

1. css盒模型

IE盒模型 box-sizing:border-box;（怪异模式）；
W3C标准盒模型 box-sizing:content-box;（标准模式）。

应用场景：

（1）表单：
表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

（2）设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。

2. 行内元素和块级元素的区别？行内块级元素的兼容性使用？（IE8以下）

块级元素：div,p,h1,form,ul,li

（1）各占一行，垂直方向排列；

（2）可以包含其他块级或者行内元素；

（3）高度、行高以及外边距和内边距都可控制；

（4）默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关。

行内元素：span,a,label,input,img,strong,em

（1）水平方向排列，不会自动换行；

（2）不可以包含块级元素，但是可以包含其他行内元素或者文本；

（3）行内元素设置width、height无效(可以设置line-height)，margin和padding上下无效；

（4）宽度就是它的文字和图片的宽度，不可改变。

行内块级元素在IE8以下的兼容性（块元素模拟inline-block）

div {
    display： inline-block；
    zoom： 1；   //在IE下触发hasLayout
    display：inline；//一旦触发了hasLayout设置display：inline和display：block效果相似。
}

haslayout 是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

注意: 通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况。

3. 页面导入样式时，使用link和@import有什么区别？

（1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器（IE5以下）不支持。

（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

4. 清除浮动有哪些方式？

（1）在浮动元素下方添加一个非浮动元素

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

（2）将父容器也改成浮动定位

<div>
    <div></div>
    <div></div>
</div>

这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

（3）父容器设置overflow: hidden或者auto。（开启BFC）

<div>
    <div></div>
    <div></div>
</div>

缺点：一个是IE6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

（4）利用:after伪选择符，在父容器的尾部自动创建一个子元素 ==（推荐这种）==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"属性，让父元素拥有自己的布局
.clearfix {
    zoom: 1;  //或者height：1%；
}

5. 简单介绍BFC和IFC

BFC —— 块级格式化上下文

（1）BFC触发条件：

根元素或其他包含他的元素
浮动元素 float：left/right
position：absolute/fixed
display：inline-block,table-cell,table-caption
overflow不为visible
弹性盒子：display: flex 或 inline-flex

（2）BFC特性

内部的Box会在垂直方向上一个接一个的放置；
垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)；
每个元素的margin box的左边，与包含块border； box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动子元素也参与计算，可以解决父元素高度塌陷问题；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然；
文档流中的BFC元素, width为auto时，会占满当前行的剩余宽度。

（3）应用

阻止两个相邻的普通流中的块元素垂直方向上的margin折叠；
BFC可以包含浮动元素，撑开父元素；
BFC可以阻止元素被浮动元素覆盖。

（4）BFC与hasLayout

IE6-7不支持BFC，而是使用私有属性hasLayout，要用zoom：1触发hasLayout属性。Zoom用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸。

IFC —— 行内格式化上下文

（1）创建方式：

和BFC相比，它的创建方式是被动的、隐式的，是由所包含的子元素来创建：只有在一个区域内仅包含可水平排列的元素时才会生成，这些子元素可以是文本、inline-level元素或inline-block-level元素。

（2）特性：

IFC内部的元素，按从左到右、从上到下的顺序排布；
IFC内部的每个元素，都可以通过设置vertical-align属性，来调整在垂直方向上的对齐；
包含这些内部元素的矩形区域，形成的每一行，被称为line box（行框）。

6. 选择器优先级

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法：(0,0,0,0) ——> 第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，合起来就是当前选择器的权重。

比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

7. 怎么实现水平垂直居中

（1）行内元素的水平居中

text-align: center;
line-height: 100px;

（2）块级元素水平居中

margin: 0 auto;

（3）已知高度宽度元素的水平垂直居中

利用绝对定位和负边距实现

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

利用绝对定位和margin

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

（4）未知高度和宽度元素的水平垂直居中

被居中的元素是inline或者inline-block元素

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

css3的transform属性

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

最简单的写法：

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8. 实现左边定宽，右边自适应布局

（1）左盒子左浮动，右盒子width=100%

（2）左盒子左浮动，右盒子margin-left=左盒子宽度

（3）左盒子左浮动，右盒子右浮动，设置width: calc（100% - 左盒子宽度）

（4）父容器设置display：flex，右盒子flex：1

9. 实现中间自适应宽度，左右两栏固定宽度布局

两招搞定三栏布局——圣杯布局、双飞翼布局

10. 脱离文档流

(1) 浮动脱离文档流：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

(2) 绝对定位脱离文档流：使用absolute: position | fixed 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

11. CSS3新特性

颜色：新增RGBA、HSLA模式
文字阴影(text-shadow)
边框：圆角（border-radius）边框阴影：box-shadow
盒子模型：box-sizing
背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
渐变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
在CSS3中唯一引入的伪元素是::selection
多媒体查询、多栏布局
border-image
2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D转换

12. display:none;与visibility:hidden的区别是什么？

(1) display:none; HTML元素（对象）的宽高，高度等各种属性值都将“丢失”,视为不存在，而且不加载。

(2) visibility:hidden; HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。

13. 响应式布局原理

媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。

14. flex布局

flex布局可以看阮一峰老师的这两篇文章： Flex 布局教程：语法篇， Flex 布局教程：实例篇，讲的非常详细。

（1）设置在容器上的属性

flex-direction：row | row-reverse | column | column-reverse 项目的排列方向
flex-wrap：nowrap | wrap | wrap-reverse 是否换行
flex-flow：<flex-direction> || <flex-wrap> flex-direction和 flex-wrap的简写
justify-content：flex-start | flex-end | center | space-between | space-around 在水平方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item有多行时)

（2）设置在项目上的属性

order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放大
flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。
flex：none | [ <''flex-grow''> <''flex-shrink''>? || <''flex-basis''> ]flex-grow, flex-shrink 和 flex-basis的简写默认值：0 1 auto，即不放大，可缩小，大小就是项目本身的大小。
align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其他项目不一样的对齐方式

之后仍会继续更新...

关于HTTP方面的相关知识，可以看我总结的这篇文章： HTTP协议知识点总结

JavaScript相关的基础知识可以看这两篇思维导图：你不知道的JavaScript（上卷），你不知道的JavaScript（中卷）第一部分

中卷第二部分和下卷还在整理中。

BAT各大互联网公司html+css前端面试题总结

本篇文章给大家带来的内容是关于BAT各大互联网公司html+css前端面试题总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。

而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。

前面几题是会很基础，越下越有深度。

Html篇：

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3.Quirks模式是什么？它和Standards模式有什么区别

答案：

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

　　盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）

4.DIV+css的布局较table布局有什么优点？

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（SEO）搜索引擎更友好，排名更容易靠前。

5.a：img的alt与title有何异同？b：strong与em的异同？

答案：

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

6.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　

　　“优雅降级”观点

　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

　　“渐进增强”观点

　　“渐进增强”观点则认为应关注于内容本身。

　　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded browser Support)”策略的原因所在。

　　那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

　　（自由发挥）

　　7.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

　　8.请谈一下你对网页标准和标准制定机构重要性的理解。

　　（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

　　9.请描述一下cookies，sessionStorage和localStorage的区别？　　

　　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

　　web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

　　10.简述一下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方式。

　　11.知道的网页制作会用到的图片格式有哪些？

　　答案：

　　png-8，png-24，jpeg，gif，svg。

　　但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）

　　科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

　　在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

　　Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

　　12.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

　　答案：

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

　　13.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

　　答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

　　14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSssprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

　　15.你如何理解HTML结构的语义化？　　

去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

　　例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

　　使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

　　语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

　　过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

　　因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.
SEO主要还是靠你网站的内容和外部链接的。

便于团队开发和维护

　　W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

　　16.谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页

　　你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签优化

　　主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

如何选取关键词并在网页中放置关键词

　　搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

了解主要的搜索引擎

　　虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

　　Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎

　　搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

搜索引擎登录

　　网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

链接交换和链接广泛度（Link Popularity）

　　网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用

　　Css篇：

　　1.有哪项方式可以对一个DOM设置它的CSS样式？　　

外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部
内联样式，将css样式直接定义在 HTML 元素内部

　　2.CSS都有哪些选择器？

派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

　　除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如p .a{ }）
群组选择器（利用逗号间隔，比如p,p,#a{ }）

　　那么问题来了，CSS选择器的优先级是怎么样定义的？

　　基本原则：

　　一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

　　复杂的计算方法：

用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1

　　那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？。

<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p> 123 </p>
</body>

　　答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p>中的先后关系无关。

　　3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？　　

　　最基本的：

　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

　　4.超链接访问过后hover样式就不出现的问题是什么？如何解决？

　　答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

　　5.什么是Css Hack？ie6,7,8的hack分别是什么？

　　答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

　　示例如下：

#test       {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

　　6.请用Css写一个简单的幻灯片效果页面

　　答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

/**HTML**/
        div.ani

        /**css**/
        .ani{
          width:480px;
          height:320px;
          margin:50px auto;
          overflow: hidden;
          Box-shadow:0 0 5px rgba(0,0,0,1);
          background-size: cover;
          background-position: center;
          -webkit-animation-name: loops;
          -webkit-animation-duration: 20s;
          -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes loops {
            0% {
                background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
            }
            25% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
            }
            50% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
            }
            75% {
                background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
            }
            100% {
                background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
            }
        }

　　7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

　　块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

　　内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案：<input> 、<img> 、<button> 、<textarea> 、<label>。

　　8.什么是外边距重叠？重叠的结果是什么？

　　答案：

　　外边距重叠就是margin-collapse。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

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

　　答案：

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

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

　　10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

　　答案：

　　垂直方向：line-height

　　水平方向：letter-spacing

　　那么问题来了，关于letter-spacing的妙用知道有哪些么？

　　答案:可以用于消除inline-block元素间的换行符空格间隙问题。

　　11.如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽

#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;

    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }

//方法二:

  #div1{
    width: 200px;
    height: 200px;
    background-color: #6699FF;

    margin:auto;
    position: absolute;        //父元素需要相对定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

　　那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

#container     //<img>的容器设置如下
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

　　12.px和em的区别。

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

　　浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

　　13.描述一个reset的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？　

　　重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

　　你可能会用normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

　　在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

　　14.Sass、LESS是什么？大家为什么要使用他们？

　　他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

　　15.display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。

　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

　　16.知道css有个content属性吗？有什么作用？有什么应用？

　　答案：

　　知道。css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

　　最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码
 .clearfix:after {
    content:.;       //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; }

.clearfix { 
    *zoom:1; 
}

　　after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。

　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

　　答案：css计数器是通过设置counter-reset 、counter-increment 两个属性、及 counter()/counters()一个方法配合after / before 伪类实现。

　　具体实现方案：请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解。

　　觉得题目还ok的亲点个推荐哦，题量会不断增加。

　　暂且贴出做出答案的部分。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知。

ES6+（前端面试题整合）

谈一谈let与var和const的区别

let为ES6新添加申明变量的命令，它类似于var，但是有以下不同：

let命令不存在变量提升，如果在let前使用，会导致报错
let暂时性死区的本质，其实还是块级作用域必须“先声明后使用”的性质，let 暂时性死区的原因：var 会变量提升，let 不会。
let，const和class声明的全局变量不是全局对象的属性
const可以在多个模块间共享
const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可随意修改，否则会导致SyntaxError（语法错误）
const只是保证变量名指向的地址不变，并不保证该地址的数据不变

说说箭头函数的特点

箭头函数不属于普通的 function，所以没有独立的上下文。
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
由于箭头函数没有自己的this，函数对象中的call、apply、bind三个方法，无法"覆盖"箭头函数中的this值。
箭头函数没有原本(传统)的函数有的隐藏arguments对象。
箭头函数不能当作generators使用，使用yield会产生错误。

在以下场景中不要使用箭头函数去定义：

1. 定义对象方法、定义原型方法、定义构造函数、定义事件回调函数。

2. 箭头函数里不但没有 this，也没有 arguments,super

对Symbol，Map和Set的理解

Symbol 是一种特殊的、不可变的数据类型，可以作为对象属性的标识符使用，即使使用同样的参数实例化symbol，得到的symbol实例也不会相等

let _symbol1 = Symbol('test');
let _symbol2 = Symbol('test');
console.log(_symbol1 == _symbol2);//false

Map对象保存键值对，有点类似于Object，但是Object的键只能是字符串或者Symbols，而Map可以是任何值

        let myMap = new Map()
        let str1 = 'dog'
        let str2 = 'cat'
        myMap.set(str1,'汪')
        myMap.set(str2,'喵')
        console.log(myMap) // {0: {"dog" => "汪"}1: {"cat" => "喵"}}
        console.log(myMap.get(str1)) // 汪

Set 对象允许你存储任何类型的唯一值（数组去重），有点类似于Array，Set中的元素只会出现一次

        let mySet = new Set()
        mySet.add('hello')
        mySet.add('1')
        mySet.add('2')
        mySet.add('2')
        console.log(mySet) // {0: "hello",1: "1",2: "2"}

使用ES6如何监测数组变化（proxy监测读写）

        let list = [1,2,3]
        // 代理
        let _proxy = new Proxy(list,{
            set: function (target,prop,val,rec) {
                console.log('写入')
                target[prop] = val
                return true
            },get: function (target,prop) {
                console.log('读取')
                return target[prop]
            }
        })
        _proxy[0] = 4 // 写入
        console.log(_proxy[1]) // 读取

JS有哪些处理异步的方法

回调函数：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行

优点：简单，方便，实用，易懂
缺点：当逻辑复杂时，会产生回调函数地狱，耦合度高，流程会很混乱

        // 回调
        let cb = (props) => {
            console.log(props) // 2
        }
        let init = (props) => {
            // 异步操作
            setTimeout(() => {
                cb(props) // 异步传参
            },1000)
        }
        init(2)
        console.log(1) // 1

事件发布/订阅：采用事件驱动模式，任务的执行取决于某一个事件是否发生

优点：事件监听方式相对回调实现了代码的解耦，对模块化开发很友好
缺点：每次执行任务都需要发布/订阅事件

        // 事件发布/订阅
        let cb = (event) => {
            console.log(event.props) // 2
        }
        let init = (props) => {
            // 异步操作
            setTimeout(() => {
                let event = new Event('myEvent')
                event.props = props // 异步传参
                document.dispatchEvent(event)
            },1000)
        }
        init(2)
        console.log(1) // 1
        document.addEventListener('myEvent',cb)

Promise：Promise是异步编程，它将异步操作以同步的方式表现出来，避免回调地狱的产生

优点：避免回调地狱，链式调用，函数思路清晰，逻辑相对前两者更强
缺点：理解性差，异步操作在promise构造函数内部

        // ES6  Promise
        let init = (props) => {
            return new Promise((resolve,reject) => {
                // 异步操作
                setTimeout(() => {
                    resolve(props)
                },1000)
            })
        }
        init(2).then((res) => {
            console.log(res) // 2
        })
        console.log(1) // 1

Generator：generator（生成器）是ES6标准引入Python的新的数据类型

优点：取消链式调用的then，和发布/订阅模式非常相似，对于理解同步操作很直观
缺点：多个异步函数时不够直观，原函数需要通过next去维护外部函数的yield

        // ES6  Generator
        const fn = init(2)
        let cb = (props) => {
            console.log(props) // 2
        }
        function* init(props) {
            // 异步操作
            yield setTimeout(() => {
                fn.next()
            },500)
            yield setTimeout(() => {
                fn.next()
            },500)
            cb(props)
        }
        fn.next()
        console.log(1) // 1

async/await：async函数是generator函数的语法糖，函数（function关键字）前添加async关键字，函数中通过await等待异步执行

优点：同步流程清晰，简洁，异步操作可以返回promise对象，后续操作更方便
缺点：JS的执行器功能较其他co模块较弱

        // ES6+  async/await
        let cb = (props) => {
            console.log(props) // 2
        }
        let cb2 = (props) => {
            return new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve(props)
                },1000)
            })
        }
        async function init(props) {
            // 异步操作
            let num2 = await cb2(props)
            cb(num2)
        }
        init(2)
        console.log(1) // 1

ES6中的class关键字跟function什么区别

在function定义的构造函数中，其prototype.constructor属性指向构造器自身，在class定义的类中，constructor其实也相当于定义在prototype属性上
function如果重复定义，会覆盖之前定义的方法，而class重复定义则会报错
class中定义的方法不可用Object.keys(Point.prototype)枚举到，function构造器原型方法可被Object.keys(Point.prototype)枚举到
class没有变量提升，也就是说，必须先定义class，再使用，而function定义后，会被提升至当前作用域顶端
class定义的类没有私有方法和私有属性，function可以通过闭包实现私有方法和属性

ES6新增哪些数组方法

find()：返回数组中第一个满足条件的元素（如果有的话），如果没有，则返回 undefined
findindex()：返回数组中第一个满足条件的元素的索引（如果有的话），如果没有，则返回 -1
keys()：返回一个数组索引的迭代器
values()：返回一个数组迭代器对象，该对象包含数组中每个索引的值
entries()：返回一个数组迭代器对象，该对象包含数组中每个索引的键值对

for in 和 for of 的区别

for in 适合用于遍历对象，for of可以用来遍历数组，类数组对象，argument，字符串，Map和Set

for in 遍历数组时会有以下问题：

index索引为字符串型数字，不能直接进行几何运算
遍历顺序有可能不是按照实际数组的内部顺序
使用for in会遍历数组所有的可枚举属性，包括原型，原型上的方法和属性

所以for in 不适合遍历数组，而适合用于遍历对象

而for of遍历数组时：

只会遍历数组内的元素，而不包括数组的原型属性method和索引name

Commonjs 中的 require/exports 和 ES6 中的 import/export 区别

Commonjs模块输出的是一个值的拷贝，ES6模块输出的是值的引用
Commonjs模块是运行时加载，ES6模块是编译时输出接口，ES6可以在编译时就完成模块加载，效率要比Commonjs模块的加载方式高
Commonjs模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。而Es6模块的运行机制与Commonjs不一样。JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，在根据引用到被加载的那个模块里面去取值。ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
require/exports是Commonjs在Node中实现的，import/export是ES6的模块
require/exports是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而ES6模块是异步导入，因为用于浏览器，需要下载文件，如果也采用导入会对渲染有很大影响
ES6模块的设计思想，是尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，ES6模块会编译成 require/exports 来执行的
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

尝试实现Promise

https://blog.csdn.net/time_____/article/details/109721703

Object.is()与“==”，“===”的区别

“==”会在比较时进行类型转换

“===”比较时不进行隐式类型转换

Object.is()在三等号判等的基础上特别处理了NaN、-0和+0，保证-0和+0不再相同，但Object.is(NaN,NaN)会返回true

ES6中为何出现Class

Class的功能实际上在ES5都能实现，可以算是ES6的语法糖，其作用是使JS语法清晰，更像面向对象语法

基础写法

        class MyEvent extends EventTarget { // 继承EventTarget
            constructor(e) {
                super(e) // 父类的构造函数
                this.consoleThis() // 执行函数
            }
            consoleThis() {
                console.log(this)
            }
        }
        let myEvent = new MyEvent(document) // EventTarget

ES6语法糖的对象的属性简写和属性名表达式是什么

属性简写：对象的字面量可以直接写入与之名称相同的变量和函数

        let name = '小明'
        function showName() {
            console.log(this.name)
        }
        let person = {
            name,showName
        }
        console.log(person.name)// 小明
        person.showName()// 小明

属性名表达式简写：ES6允许把表达式放在方括号内，作为对象的属性名

        let num = 0
        let obj = {
            "1": 'a',"2": 'b',"3": 'c'
        }
        console.log(obj[++num]) // a
        console.log(obj[++num]) // b
        console.log(obj[++num]) // c

谈谈解构赋值的理解

解构赋值是对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

        // 数组
        let [a,b,c] = [1,3];
        console.log(a,c) // 1,3
        // 对象
        let {
            d,e,f
        } = {
            d: 4,e: 5
        };
        console.log(d,f) // 4,5,undefined

使用ES6如何合并多个对象，复制对象

ES6中的对象新增（...）拓展运算符，用于取出参数对象所有可遍历属性然后拷贝到当前对象

ES6新增对象拷贝方法：Object.assign(target,source1，source2，source3， ···)，将源对象的所有可枚举属性复制到目标对象中，即，将source1，source2，source3......复制到target中

合并：

        let name = {
            name: '小明'
        }
        let age = {
            age: 20
        }
        let hobby = {
            hobby: 'music'
        }
        let person = {// 拓展运算符
            ...name,...age,...hobby
        }
        console.log(person)// age: 20,hobby: "music",name: "小明"

        Object.assign(person,name,age,hobby)// 对象拷贝
        console.log(person) // age: 20,name: "小明"

复制：

        let list = [1,3,4,5]
        let list2 = [...list]// 拓展运算符
        Object.assign(list2,list)// 对象拷贝
        let index = 0
        do {
            list[index] += 10
        } while (index++ < list.length - 1)
        console.log(list,list2) // [11,12,13,14,15]  [1,5]

如何控制类中属性的读写性

setter...getter...

        class Animal {
            constructor() {
                this._dog = '小黑'
                this._cat = '小黄'
            }
            set cat(val) { // 只写
                this._cat = val
            }
            get dog() { // 只读
                return this._dog
            }
        }
        let animal = new Animal()
        animal.dog = '小白'
        animal.cat = '小灰'
        console.log(animal.dog,animal.cat) // 小黑 undefined
        console.log(animal._dog,animal._cat) // 小黑 小灰

Object.defineProperty（）修改对象只读

        class Animal {
            constructor() {
                this.dog = '小白'
            }
        }
        let animal = new Animal()
        Object.defineProperty(animal,'dog',{
            writable: false,// 可写，false为只读
        });
        animal.dog = '小黑'
        console.log(animal.dog) // 小白

HTML+CSS部分前端基础面试题

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?

行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；行元素转换为块级元素方式：display：block；

专题推荐：2020年CSS面试题汇总（最新）

2.将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行：float，inline-block
清除浮动的方式：方法一：添加新的元素、应用 clear：both；
方法二：父级p定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪异盒模型box-sizing？弹性盒模型|盒布局?

立即学习“前端免费学习笔记（深入）”；

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

4.简述几个css hack?

(1) 图片间隙
在p中插入图片，图片会将p下方撑大3px。hack1：将
与写在同一行。hack2：给添加display：block；
dt li 中的图片间隙。hack：给添加display：block；
(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height：；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；

5.href和src区别? title和alt

href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.

6.transform？animation？区别?animation-duration

Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

7.nth-of-type | nth-child?

举例说明：

111
222
1

2

3

li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。
建议一般使用nth-of-type，不容易出问题。

8. :before 和 ::before 区别?

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

9.如何让一个p 上下左右居中?

答：有三种方法。

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <p></p> 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <p></p> 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <p></p>

登录后复制

10.css2.0 和css3.0

答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。

11.弹性盒子模型?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浏览器则支持两种方式。

12.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 这几个字符串中的一个

13.如何理解HTML结构的语义化？

所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。

14.伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪类选择器：
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

伪元素选择器：
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；

c3中引入的伪类选择器：
:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。:root选择器等同于元素。

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素。

:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

:only-child表示的是一个元素是它的父元素的唯一一个子元素。

:first-line为某个元素的第一行文字使用样式。

:first-letter 为某个元素中的文字的首字母或第一个字使用样式。

:before 在某个元素之前插入一些内容。

:after 在某个元素之后插入一些内容。

c3中伪元素：
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果

15.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 拖拽释放(Drag and drop) API 语义化更好的内容标签(header,nav,footer,aside,article,section) 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除表单控件，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框架
* 如何区分： DOCTYPE声明\新增的结构元素\功能元素

16.placeholder?如何在ie8上兼容placeholder这个效果

方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。

HTML：<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>CSS：.phcolor{ color:#999;}JS$(function(){  
  //判断浏览器是否支持placeholder属性  supportPlaceholder=&#39;placeholder&#39;in document.createElement(&#39;input&#39;),
  placeholder=function(input){
    var text = input.attr(&#39;placeholder&#39;),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数  if(!supportPlaceholder){
    $(&#39;input&#39;).each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }});

登录后复制

方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。

CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){  
   //判断浏览器是否支持placeholder属性   supportPlaceholder=&#39;placeholder&#39; in document.createElement(&#39;input&#39;);
   if(!supportPlaceholder){
     //初始状态添加背景图片     $("#uname").attr("class","phbg");
     //初始状态获得焦点     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，添加背景图片；有值时去掉背景图片     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按键按下的第一时间去掉背景图片      $("#uname").removeClass("phbg");
     });
   }});

登录后复制

方法三：
使用插件：Placeholders.js

17.常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

* 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

* 超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：``

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式旧的雅虎34条|h5新添加的方式

1、尽量减少HTTP请求次数
2、减少DNS查找次数
3、避免跳转
4、可缓存的AJAX
5、推迟加载内容
6、预加载
7、减少DOM元素数量
8、根据域名划分页面内容
9、使iframe的数量最小
10、不要出现404错误
11、使用内容分发网络
12、为文件头指定Expires或Cache-Control 13、Gzip压缩文件内容
14、配置ETag
15、尽早刷新输出缓冲
16、使用GET来完成AJAX请求
17、把样式表置于顶部
18、避免使用CSS表达式（Expression）
19、使用外部JavaScript和CSS
20、削减JavaScript和CSS
21、用代替@import
22、避免使用滤镜
23、把脚本置于页面底部
24、剔除重复脚本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x拥有同样的API，但是不再支持IE6、7、8。
推荐使用 1.x version，除非你确定IE6、7、8用户不再访问网站。
jquery1.11属于1.x 版本，其兼容IE6、7、8，所以也支持IE9.

20.块级？行内？空元素?

行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素。

21.media属性？screen？All？max-width?min-width?

media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕，all适用于所有设备，max-width超过最大宽度就不执行，min-width必须大于最小宽度才执行。

22.meta标签的name属性值？

name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞。
其中name属性主要有以下几种参数：
A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。
B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all。
举例：＜meta name="robots" content="none"＞D 、author(作者)

23.一般做手机页面切图有几种方式?

响应式布局，弹性布局display：flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。

24.px/em/rem有什么区别？为什么通常给font-size 设置的字体为62.5%

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem是相对于浏览器进行缩放的。1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，所以重置rem
body{font-size=62.5% } 此时1rem = 10px;若是12px则是1.2rem.

25.sass和scss有什么区别?sass一般怎么样编译的

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

26.如果对css进行优化如何处理？

压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证日后的维护。

27.如何对css文件进行压缩合并? gulp ?

使用gulp, 首页全局安装gulp。
1、npm install --global gulp
2、其次局部安装gulp。npm install gulp --save-dev
3、在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require(''gulp'');
gulp.task(''default'', function() {
// 将你的默认的任务代码放在这});
4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp ）
gulp
合并和压缩JS、CSS文件
压缩JS，CSS文件需要引用如下组件：
gulp-minify-css: 压缩css

28.组件? 模块化编程？

组件化编程: 将js css html包装一起提供方法和效果；
模块化化: 将相同的功能抽取出来存放在一个位置进行编程

29.图片和文字在同一行显示?

1 在css中给p添加上“vertical-align:middle”属性。
2 分别把图片和文字放入不同的p中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
3 把图片设置为背景图片。

30.禁止事件冒泡

event.stopPropagation()

31.禁止默认事件

event.preventDefault()

32.a标签中 active hover link visited 正确的设置顺序是什么?

a标签的link、visited、hover、active是有一定顺序的
a:link
a:visited
a:hover
a:active

33.a标签中如何禁用href 跳转页面或定位链接

e.preventDefault();
href="javascript:void(0);

34.手机端上图片长时间点击会选中图片，如何处理?

onselect=function() {
return false
}

35.video标签的几个个属性方法

src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度

36.常见的视频编码格式有几种?视频格式有几种?

视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式
视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

37.canvas在标签上设置宽高和在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值。

38.border-image？box-sizing?

Border-image : 图形化边框
Box-sizing : 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding) 此属性表现为标准模式下的盒模型 .
Border-box : padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

39.渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

40.解释在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弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

41.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 规定是否应该轮流反向播放动画。

42.transition?

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值注意区别transform，transform是进行2D转换的如移动，比例化，反过来，旋转，和拉伸元素。

43.h5新特性？

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。每次与前面一个坐标相连。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

登录后复制

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义伪类:after 和 zoom
4、父级p定义 overflow:hidden
5、父级p定义 overflow:auto
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在之间加入一个或者

关于前端面试题整合和HTML，CSS等基础篇的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于2019届校招前端面试题整理——HTML、CSS篇、BAT各大互联网公司html+css前端面试题总结、ES6+（前端面试题整合）、HTML+CSS部分前端基础面试题的相关信息，请在本站寻找。

本文标签：