前端面试题-H5移动web开发前端面试题-H5移动web开发 ,持续更新ing.....................

1、H5 的新特性有哪些？C3 的新特性有哪些？（必会）

H5 新特性

1、拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

1.设置元素为可拖放
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
注意：  链接和图片默认是可拖动的，不需要 draggable 属性。

2.拖拽API的相关事件
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
保存数据
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手

DataTransfer 在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

lis[index].ondragstart = function (event) {
    event.dataTransfer.setData('text', event.target.id)
    console.log(event.target.id)
  }

2、自定义属性 data-id

在HTML5中增加了一项新的功能：自定义数据属性，也就是data-xxx自定义属性。在h5中通过使用data-为前缀来设置我们需要的自定义属性来进行一些数据的存放，在高级浏览器下可以通过脚本进行定义和数据存取。

<div id="div1" class="div1" data-id="ownId" data-fruit="ownFruit" data-id-and-fruit="a">

id是选择器,data-id只是行内存放数据的标签，等同于input中的value的作用。

获取data-id的值
方法一：使用attribute方法存取data-
attributes属性返回指定节点属性的集合，返回的是NamedNodeMap对象。

const div=document.getElementById("box")

//设置自定义值
div.setAttribute("data-name","hi")

//获取自定义属性
const ownId=div.getAttribute("data-id")
const ownFruit=div.getAttribute("data-fruit")
console.log(ownId)//ownId
console.log(ownFruit)//ownFruit

方法二：使用dataset属性存取这个属性是h5 js API的一部分，用来返回一个所有选择元素的data-*属性的DOMSringMap对象，用这种方法时，要去掉前缀。同时，data-属性名如果包含连字符，data-id-and，连字符将被去掉并且转换为驼峰式命名。但是要注意的是这个属性只有在Chrome8+、Firefox（gecko）6.0、IE11+、Opera11.10+、Safari6+浏览器中实现，所以最好还是先使用getAttribute和setAttribute来操作。

const div=document.getElementByid("box")
const att=div.attributes
const data=div.dataset
const id=div.id
const ownId=data.id
const abc=data.idAndFruit
console.log(att)//NamedNodeMap对象
console.log(data)//DOMStringMap对象
console.log(id)//box
console.log(ownId) //ownId
console.log(abc) //a

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?
在属性中添加 autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)
audio标签详细解读

5、画布 Canvas
(1) getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
(2) cxt.stroke() 绘制线条
(3) canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.
Canvas标签详细解读

6、地理(Geolocation) API 其实 Geolocation 就是用来获取到当前设备的经纬度（位置）
(Geolocation) API标签详细解读

7、本地离线存储 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
localStorage.setItem('list',xxx) localStorage.getItem('list')

8、 sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

9、表单控件 calendar , date , time , email , url , search , tel , file , number

10、新的技术 webworker, websocket , Geolocation
webworker
Web Worker 之全面讲解
 websocket

CSS3 新特性

1、颜色: 新增 RGBA , HSLA 模式
RGBA(R,G,B,A)
取值介绍：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。

HSLA(H,S,L,A)
取值介绍：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

直白点讲，H就是来控制颜色的变化（这个最好理解），S就是控制颜色的浓淡，L来控制亮度，100%是白色，0%是黑色，不论是那种颜色或者饱和度，A是透明度。

2、文字阴影(text-shadow)

3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing

5、背景:
background-size,
background-origin 背景图片起点,
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面.文档

6、渐变: 线性渐变linear-gradient , 放射性渐变radial-gradient

7、过渡 : transition 可实现属性的渐变

8、自定义动画 animate @keyfrom

9、媒体查询多栏布局 @media screen and (width:800px) {…}

10、border-image 图片边框

11、2D 转换/3D 转换:
transform: translate(x,y)
rotate(x,y)
skew(x,y)歪曲
scale(x,y)

12、字体图标 iconfont/icomoon

13、弹性布局 flex

2、如何使一个盒子水平垂直居中？（必会）

方法一：利用定位（常用方法,推荐）
利用子绝父相
父元素设置
position: relative;
子元素设置
position: absolute;
top: 50%;
left: 50%;
margin-top: -子元素自身高度的一半;
margin-left: -子元素自身宽度的一半;

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;
                        height: 500px;
                        border: 1px solid #000;
                        position: relative;
                }            
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-top: -50px;
                        margin-left: -50px;
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

方法二：利用 margin:auto;
利用子绝父相
父元素设置
position: relative;
子元素设置
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;height: 500px;
                        border: 1px solid #000;
                        position: relative;
                }
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                        position: absolute;
                        margin: auto;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

方法三：利用 display:table-cell
display:table-cell : 指定对象作为表格单元格,类似<td>
父元素设置
display: table-cell;
vertical-align: middle;
text-align: center;

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;
                        height: 500px;
                        border: 1px solid #000;
                        display: table-cell;
                        vertical-align: middle;//中线对齐
                        text-align: center;//内容居中对齐
                }
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                        display: inline-block;
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

方法四：利用 display：flex;设置垂直水平都居中
利用flex布局
父元素设置
display: flex;
justify-content: center;
align-items: center;

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;
                        height: 500px;
                        border: 1px solid #000;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;
                        height: 500px;
                        border: 1px solid #000;
                }
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                        margin-top: 200px;
                        margin-left: 200px;
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

方法六：利用 transform(推荐)
利用子绝父相
父元素设置
position: relative;
子元素设置
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .parent {
                        width: 500px;
                        height: 500px;
                        border: 1px solid #000;
                        position: relative;
                }
                .child {
                        width: 100px;
                        height: 100px;
                        border: 1px solid #999;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                }
        </style>
</head>
<body>
        <div class="parent">
                <div class="child">我是子元素</div>
        </div>
</body>
</html>

3、如何实现双飞翼（圣杯）布局？（必会）

1、利用定位实现两侧固定中间自适应
(1)父盒子设置左右 padding 值
(2)给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
(3)中间盒子自适应 (不设宽)
具体 CSS 代码：

<style>
    .father {
        height: 400px;
        background-color: pink;
        position: relative;
        padding: 0 200px;
    }
    .left,.right {
        width: 200px;
        height: 300px;
        background-color: yellow;
        position: absolute;
        top: 0;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .center {
        background-color: blue;
        height: 350px;
    }
 
</style>
html 结构
<div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

2、利用 flex 布局实现两侧固定中间自适应
(1)父盒子设置 display:flex;
(2)左右盒子设置固定宽高
(3)中间盒子设置 flex:1 ;

<style>
    .father {
        height: 400px;
        background-color: pink;
        display: flex;
    }
    .left {
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
    .right {
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
    .center {
        flex: 1;
        background-color: blue;
    }
</style>
//html 结构
<div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应
(1)左右固定宽高，进行浮动
(2)中间 overflow: hidden;

<style>
    .father {
      height: 500px;
      background-color: pink;
    }
    .left {
      float: left;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .right {
      float: right;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .center {
      height: 450px;
      background-color: green;
      overflow: hidden;
    }
  </style>
html 结构
 <!-- 注意:left 和 right 必须放在 center 前面 -->
 <div class="father">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
 </div>

4、CSS 的盒模型？（必会）

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分
盒子模型分为两种:
第一种是 W3C 标准的盒子模型（标准盒模型）
第二种 IE 标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处：
1、标准盒模型中
width 指的是内容区域 content 的宽度
height 指的是内容区域 content 的高度
标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中
width 指的是内容、边框、内边距总的宽度（content + border + padding）
height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin

通过属性 box-sizing 来设置盒子模型的解析模式
box-sizing 的两种取值：
(1) content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。
总宽=width+padding+border+margin
(2) border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

5、CSS 中选择器的优先级以及 CSS 权重如何计算？（必会）

！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性
权重
CSS 权重选择器优先级计算表格：

优先级注意点:

权重是有 4 组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推..
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为 0, 标签选择器为 1,类(伪类)选择器为 10, id 选择器 100, 行内样式表为 1000, !important 无穷大.
继承的权重是 0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1 (伪类优先级同类选择器)
.nav a ------> 0,0,1,1

6、列举 5 个以上的 H5input 元素 type 属性值？（必会）

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
month	定义日期字段的月（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 "浏览..." 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段 ; min="",max="" 不能控制输入的数字
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

7、CSS 中哪些属性可继承，哪些不可以？（必会）

能继承的属性

字体系列属性:font、字体font-family、加粗font-weight、font-size、倾斜font-style;
文本系列属性:
2.1）内联元素：color、行高line-height、单词之间的间隙word-spacing、字符之间的间隙letter-spacing、文本字母大小写text-transform;
2.2）块级元素：首行缩进text-indent、text-align;
元素可见性：visibility
表格布局属性：表格布局的算法caption-side、border-collapse、当表格独立时,行和单元格的边距在横向和纵向上的间距border-spacing、empty-cells、 table-layout;
列表布局属性：list-style

border-collapse:collapse相邻边被合并
border-collapse:separate独立边框
empty-cells:hide当表格单元格无内容时,隐藏该单元格边框
empty-cells:show

不能继承的属性

display：规定元素应该生成的框的类型；
文本属性：图片文本对齐方式vertical-align、下划线text-decoration;
盒子模型的属性：width、height、margin 、border、padding;
背景属性：background、background-color、background-image;
定位属性：float、clear、position、top、right、bottom、left、min-width、 min-height、max-width、max-height、overflow、设置可视区域clip;

8、CSS 单位中 px、em 和 rem 的区别？（必会）

9、rem 适配方法如何计算 HTML 根字号及适配方案？（必会）

10、display：none 与 visibility：hidden 的区别？（必会）

11、position 的值有哪些，分别有哪些作用？（必会）

12、为什么会出现浮动？浮动元素会引起什么问题？如何清除浮；动？（必会）

13、简述弹性盒子 flex 布局及 rem 布局？（必会）

14、如何解决 margin“塌陷”？（必会）

15、::before 和::after 中双冒号和单冒号有什么区别、作用？（必会）

16、CSS3 新增伪类，以及伪元素？（必会）

17、Bootstrap 栅格系统的工作原理？（必会）

18、BFC 是什么？（高薪常问）

定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干布局规则 1、内部的 Box 会在垂直方向，一个接一个地放置 2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 3、每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此 4、BFC 的区域不会与 float box 重叠 5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 6、计算 BFC 的高度时，浮动元素也参与计算哪些元素会生成 BFC： 1、根元素 2、float 属性不为 none 3、position 为 absolute 或 fixed 4、display 为 inline-block， table-cell， table-caption， flex， inline-flex 5、overflow 不为 visible

19、什么是渐进增强和优雅降级?它们有什么不同？（了解）

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异举个例子：

a {  

display：block； width：200px； height： 100px；  

background：aquamarine；  

/*我就是要用这个新 css 属性*/ transition：all 1s ease 0s；  

/*可是发现了一些低版本浏览器不支持怎么办呢*/  

/*往下兼容*/  

-webkit-transition：all 1s ease 0s；  

-moz-transition：all 1s ease 0s；  

-o-transition： all 1s ease 0s；  

/*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/  

}  a:hover{  

height：200px；  

}

/  *那如果我们的产品要求我们要从低版本的浏览器兼容开始*/ a {  

/*优先考虑低版本的*/
-webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；  

-o-transition： all 1s ease 0s；  

/*高版本的就肯定是渐进渐强*/ transition：all 1s ease 0s；  

}

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站

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

20、iframe 有哪些优缺点？（了解）

iframe 的优点：
1、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
2、技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
iframe 的缺点：
1、iframe 会阻塞主页面的 Onload 事件；
2、会产生很多页面，不容易管理
3、不容易打印（目前只能实现分框架页面的打印，不能实现对 frameset 的打印）
4、浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现 frameset 整个页面的前进与后退）
5、代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
6、多数小型的移动设备（手机）无法完全显示框架
7、多框架的页面会增加服务器的 http 请求，影响页面的并行加载。
（并行加载：同一时间针对同一域名下的请求。一般情况，iframe 和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。

21、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？（了解）

作法针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！
因为10px/12px=0.83 , 所以transform:scale(0.83)
实际上并没有改变字体大小,只是将标签缩放了
webkit是Chrome、Safari浏览器的内核
-moz是Firefox浏览器的私有属性
-ms是IE浏览器的私有属性
-o是Opera浏览器的私有属性

<style>
    p span{font-size:10px;-webkit-transform:scale(0.83);display:block;}
</style>
<p>
    <span>豪豪豪 10px</span>
</p>

前端面试题-H5移动web开发