移动端开发

移动端开发

1. HTML5

1.1 新增长的语义化标签

H5新增标签最大的特色：让标签语义话； H5新增标签：

• header 头部
• footer 尾部
• main 主体
• section 块，区域
• article 文章区域
• aside 侧边栏，与内容无关的部分（例如：广告）
• nav 导航
• figure 配图区域
• figcaption 配图文字说明，图片注释
• mark 标记
• time 时间标记
• progress 进度条
• hgroup 标题组合

1.2 表单元素

传统的表单元素： input：text/password/radio/checkbox/file/hidden/button/submit/reset... select 下拉框 textarea 文本域 button 按钮 form 表单 action： 是路径地址 method: 提交方式； label

<form action="">
	<input type="submit" /> </form>
//把数据提交到form表单的action属性值的地址中；向这个空间地址发送请求，而且把input框中的内容发送给这个地址； form通常用于登陆注册；
复制代码

H5新增的一些表单元素/类型： input：search搜索框/email邮箱框/tel电话框/number数字框/range滑动条/color颜色框/date日期框/time时间框/url地址框

<input type="range" id="range" step="1" min="1" max="10" value="7">  //默认值为7
<input type="number" id="number" step="1" min="1" max="10" value="7" disabled> //disabled表示不可编辑

range.oninput = function(){
	let val = this.value;
	number.value = val;
}
复制代码

input文本框都有一个value属性，value属性的属性值就是文本框中输入的内容； 单选框、双选框有一个checked属性，获取或设置值； 表单新增长的属性（html5） （1）autocomplete属性
autocomplete属性有两个值：on和off，默认为on； 含义：自动完成，（在表单中填写的数据写完就自动提交了）

<form autocomplete="on"></form>
复制代码

form和input都有autocomplete自动完成功能的属性 （2）autofocus属性
含义：页面加载时，域自动得到焦点；

<input autofocus="autofocus" />
复制代码

autofocus属性适用于全部的<input>标签 （3）multiple属性 规定输入域中可选择多个值

<input type="file" multiple="multiple" />
复制代码

multiple属性适用于如下类型的<input>标签：email和file （4）placeholder属性 提示语 placeholder属性适用于<input>标签type属性为：text、search、url、tel、email、password；

//如何实现时间输入框有输入提示？
<input type="text" name="date" onfocus="(this.type='date')" placeholder='请选择日期' />
复制代码

（5）required属性 设置必填项，必须在提交前填写输入域

<input type="text" required="required" />
复制代码

required属性适用于<input>标签type类型为：text、search、url、tel、email、password、date全部类型、number、checkbox、radio、file等；

1.3 表单验证

（1）使用list和datalist实现什么效果

<input type="text" list="tips">
	<dataList id="tips"> <option value="aaa"></option> <option value="www"></option> <option value="eee"></option> <option value="fff"></option> </dataList>
复制代码

（2）当有type=“file”类型的输入框时，form标签中必需要添加enctype的属性，设置文件发送到服务器以前对表单数据进行编码

<form action="" method="" enctype="multipart/form-data" >
<input type="file"> 复制代码

（3）novalidate和formnovalidate novalidate用在form标签上，formnovalidate用在input标签上；

<form action="" method="" enctype="multipart/form-data" novalidate autocomplete="on">
复制代码

（4）pattern 设置正则表达式验证，能够完成各类复杂的验证

<input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[imooc]$">
复制代码

（5）maxlength和minlength为输入的最大长度和最小长度

<input type="text" id="test" name="test" value="" maxlength="5" minlength="2" pattern="^\d{5}" />   
//表示input输入框最少输入2个，最多输入5个字符
复制代码

（6）label标签

<label for="man">男</label>
<input type="radio" name="sex" id="man" required="">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" required="">
复制代码

HTML5的约束验证API

1. willValidate属性
2. validity属性
3. validationMessage属性
4. checkValidity()方法：H5新提供的表单内容格式验证方法；（新表单类型中有内置验证机制的，均可以基于这个方法验证）
5. setCustomValidity()方法

表单元素中新增的类型做用：

1. 功能变强大了，不少东西不须要本身导入JS插件就能够完成了，例如date日历；
2. 在移动端根据设置的类型不同，用户输入过程当中调出来的虚拟键盘也不同；例如：number类型的文本框调出来的是数字键盘；
3. 新增长的类型提供了CSS和JS验证，能够验证用户出入的内容是否符合格式，以前都是用正则本身验证，如今h5中的新类型自带验证机制；

<input type="email" id="userEmail">
<span id="span"></span>

//CSS验证方式：
<style>
	#userEmail{border:1px solid #DDD; outline:none} //当文本框获取焦点后去除浏览器默认的边框颜色
	#userEmail:valid{border-color:green} //经过验证分为两种：一种是什么都不输入；另一种是格式符合要求；
	#userEmail:invalid{border-color:red} //没经过验证
	#userEmail:valid+span:after{content:"邮箱格式正确"}
	#userEmail:invalid+span:after{content:"邮箱格式不正确"}
</style>

//JS验证方式 
userEmail.oninput = function(){
	if(this.checkValidity()){
		span.innerHTML = 'OK';
	}else{
		span.innerHTML = 'NO';
	}
}
//真实项目中通常都是本身用正则来验证
userEmail.onkeyup = function(){
	let val = this.value.trim(); //去掉首尾的空格
	if(val.length === 0){
		span.innerHTML = "必填";
		return;
	}
	let reg = /$\w+((-\w+)|(\.\w))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
	if(!reg.test(val)){
		span.innerHTML = "NO";
		return;
	}
	span.innerHTML = "OK";
}
复制代码

---

2. CSS3

2.1 选择器

经常使用的属性选择器： A B{} 后代 A.B{} 既具有A也具有.B的（同级二次筛选） A>B{} 子代 A+B{} 下一个弟弟选择器 A~B{} 兄弟

经常使用的伪类选择器：

1. 通配符选择器 A[name=""] 属性选择器
   A[name!=""]不等于
   A[name^=""]以什么开始
   A[name$=""]以什么结尾
   A[name*=""] 包含

2. 状态伪类 1)正常状态（:link）：未访问状态； 2)放上状态（:hover）：鼠标悬浮状态； 3)激活状态（:active）：按住鼠标左键不松开时的连接样式，这个状态特别短暂 4)已访问状态（:visited）：按下鼠标左键并弹起，这时的样式效果。 注意：（1）伪选择器经常使用于连接（a元素），:hover和:active也能够用于其余元素； （2）连接伪类的顺序：:link > :visited > :hover > :active 不然不生效； 5）得到焦点状态（:focus）：经常使用于文本框中，在文本框中点击一下就得到焦点了 eg：input:focus{background:yellow;}

3. UI元素状态伪类 :enabled、:disabled、:checked 例如：一个文本框，可输入的状态就是enabled，不可输入的状态就是disabled，单选框复选框中选中的状态就是checked； 注意：input输入框可编辑的才有输入框，不可编辑的没有宽和高； input:enabled 能够设置宽高 input:disabled 没有宽高

4. 伪元素
   css伪元素用于向某些选择器设置特殊效果
   语法格式：元素::伪元素 1）Element::first-line 给Element元素的第一行文本加样式； 注意：first-line伪元素只能用于块级元素； 2）Element::first-letter 用于向文本的首字母设置样式，只能用于块级元素； 3）Element::before 在元素的内容前面插入新内容；常与“content”配合使用； ::before伪元素的特色：会成为第一个子元素、属于行级元素、内容只能经过content写入、支持全部的css属性； 4）Element::after 在元素的内容后面插入新内容 常与“content”配合使用，多用于清除浮动； ::after伪元素的特色：会成为最后一个子元素、属于行级元素、内容只能经过content写入、支持全部的css属性； 5）Element::selection用于设置在浏览器中选中文本后的背景色与前景色；

5. nth选择器 1）Element:first-of-type 匹配属于其父元素的特定类型的首个子元素中的每一个元素； Element:last-of-type 匹配属于其父元素的特定类型的最后一个子元素中的每一个元素； 2）Element:nth-of-type(n)、Element:nth-last-of-type(n)选择器 注意：Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1） Element:nth-of-type(n)和Element:nth-child(n)的区别在于： div:nth-of-type(2) 匹配第二个div标签（也可能这个div标签排第三或第四，前面有a或li标签），指定元素类型； div:nth-child(2) 匹配第二个子标签，且第二个子标签必须是div标签，不限定元素类型； 3）Element:nth-child(n) 匹配某个父元素中的第n个子元素是Element标签，不论父元素是什么 注意：ul>li:nth-child(n) 表示匹配ul下的全部li标签 只能写n，不能够用其它字母代替； ul>li:nth-child(2) 表示匹配ul下的第二个li标签； ul>li:nth-child(odd) 奇数 至关于2n+1； ul>li:nth-child(even) 偶数 至关于2n； 4）Element:nth-last-child(n) 倒数第n个 5）Element:first-child 选择属于其父元素的首个子元素的每一个元素 能够配合其余选择器一块儿使用，例如：section>div:first-child{} 6）Element:last-child 某个元素的最后一个子元素是Element的元素 7）Element:only-child 匹配属于其父元素的惟一子元素的每一个元素； 8）Element:only-of-type 匹配属于其父元素的特定类型的惟一子元素的每一个元素； 9）Element:empty 匹配没有子元素（包括文本节点）的每一个元素；

6. 否认选择器
   语法：父元素:not(子元素/子选择器) 匹配不是这个标签的其余全部标签；

2.2 样式属性

2.2.1基本属性

1）border-radius 圆角边框 2）box-shadow:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
例如：box-shadow:10px 10px 5px 2px yellow; 参数说明： a.投影方式：此值可选，惟一取值为inset意为内阴影；如不设值，默认投影方式是外阴影。 b.X轴偏移量：阴影水平偏移量，取值可正可负；若是为正值，则阴影在对象的右边；若是为负值，则阴影在对象的左边。 c.Y轴偏移量：阴影垂直偏移量，取值可正可负；若是为正值，则阴影在对象的底部；若是为负值，则阴影在对象的顶部。 d.阴影模糊半径：此值可选，但取值必须为正值，若是取值为0，表示阴影不具备模糊效果，值越大阴影的边缘就越模糊。 e.阴影扩展半径：此值可选，取值可正可负，若是值为正则整个阴影都延展扩大，反之则缩小。 f.阴影颜色：此值可选，若是不设定颜色，浏览器会取默认色。 例如：box-shadow:10px 5px red; //沿X轴10px，沿Y轴5px 阴影为红色 3）text-shadow 文本阴影 4）border-image 边界图片

2.2.2文本

1）文本换行：word-wrap:值; 取值：break-word和normal（默认normal） word-wrap属性是针对长单词或url地址换行 2）单词拆分换行，指定换行规则：word-break:值; 取值：normal、keep-all和break-all。 3）文本阴影：text-shadow:水平阴影 垂直阴影 模糊的距离 阴影的颜色; 例：text-shadow:10px 10px 5px pink; 盒阴影、阴影框：box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色; 4）文本轮廓：text-outline:轮廓的粗细 模糊半径 颜色;
注意：任何主流浏览器都不支持text-outline属性； 5）文本溢出属性：text-overflow:clip; 文本溢出属性指定溢出的内容如何向用户显示。 取值：clip（修剪文本）、ellipsis（用省略号来表明被修剪的文本）、string（使用给定的字符串来表明被修剪的文本，这个值只有在火狐浏览中才起做用），默认值为clip。

2.2.3字体图标

@font-face：导入字体图标； 在@font-face规则中，必须先定义字体的名称（如：myFirstFont），而后指向该字体文件。 @font-face{ font-family: [字体名称]; src: [字体路径，能够放多个]; font-weight: font-style: }

@font-face {
	font-family:myFirstFont;
	src:url(sation_light.woff);
}
div {font-family:myFirstFont;}
复制代码

获取特殊字体的网站：www.fontsquirrel.com/tools/webfo…

2.2.4背景

HTML中的背景样式：

1. background-color：图片背景色；
2. background-image：背景图片；
3. background-position：背景定位；
4. background-repeat：背景平铺方式，取值：no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向）；
5. background-attachment: scroll | fixed | inherit; 含义：设置背景图像是否固定或者随着页面的其他部分滚动；默认值为scroll；

H5中新增的背景样式： 1）background-size:值；背景图片的尺寸； 取值有四种状况： 第一种：宽高具体值；100px 100px
第二种：宽高百分比；100% 100% 第三种：cover 以合适的比例把图片进行缩放（不会变形），用来覆盖整个容器； 第四种：contain 背景图覆盖整个容器（若是一边碰到容器的边缘，则中止覆盖，会致使部分区域是没有背景图的） 2）background-clip：背景图片裁切； 取值为：content-box、padding-box、border-box。 3）background-origin：设置背景图的起始点； 取值为：content-box、padding-box、border-box。 4）filter 滤镜

2.3 CSS3渐变

有兼容问题，须要加浏览器前缀；

1. 线性渐变（linear-gradients）：向下/向上/向左/向右/对角方向 （1）水平渐变：background:linear-gradients(to direction,color1,color2, ...);
   线性渐变必须至少定义两种颜色; 例：background:linear-gradient(to left,red,yellow,green); 方向：无关紧要，默认从上到下，取值为： left、right。 （2）对角渐变：background:linear-gradients(to direction1 direction2,color1,color2, ...);
   方向：不可省略，取值：left、right、bottom、top。 例：background:linear-gradient(to bottom left,red,yellow,green); （3）角度渐变：background:linear-gradients(角度,color1,color2, ...);
   角度是指水平线和渐变线之间的夹角，逆时针方向计算。0deg将建立从下到上的渐变，90deg将建立从左到右的渐变。 例：background:linear-gradient(135deg,red,yellow); 使用的时候注意加各浏览器前缀

注意：chrome、safari、firefox等使用了旧的标准，0deg将建立从左到右的渐变，90deg将建立从下到上的渐变。 扩展属性：repeating-linear-gradient() 函数用于重复线性渐变 例如：background:repeating-linear-gradient(to right,red 10%,green 20%); background:repeating-linear-gradient(red 5%,yellow 40%,green 70%); www.cnblogs.com/xiaohuochai… 2. 径向渐变(radial-gradients)：由它们的中心定义，必须至少定义两种颜色结点。 语法：background:radial-gradients(center,shape,size,start-color, ...,last-color); 其中，默认的渐变中心是center。shape的取值为circle和ellipse(椭圆形)，默认值为ellipse。 渐变的大小size的取值有closest-side、farthest-side、closest-corner和farthest-corner(表示到最远的角落)，默认是farthest-corner。 3. 透明度(transparent)
渐变也支持使用透明度可用于建立减弱变淡的效果 使用rgba()函数来定义颜色结点。rgba()函数的最后一个参数的取值为0到1的值，0表示彻底透明，1表示彻底不透明。 例如：background:linear-gradient(to right,rgba(255, 0, 0,0.3),rgba(76, 255, 0,0.7));

面试题：常见的浏览器内核

谷歌的内核：webkit Firefox（火狐）的内核：Gecko ie的内核：Trident opera（欧朋）的内核：presto

transition: all 1s linear;
/*谷歌的内核*/
-webkit-transition:all 1s linear ;
/*火狐*/
-moz-transition: all 1s linear;
/*欧朋*/
-o-transition: all 1s linear;
/*IE*/
-ms-transition:all 1s linear;
复制代码

3 CSS3动画和变形

3.1 变形 2D

变形 transform:值; 1）translate(X|Y) 平移 translate(x,y)方法可拆分为translateX() translateY(); 2）scale(X|Y) 缩放；宽高各缩放n倍； scale(X|Y)方法可拆分为scale(X) scale(Y); 3）rotate() 旋转，单位deg 4）skew(X|Y) 倾斜 轴的问题： X轴右为正；Y轴向下为正；Z轴垂直于屏幕，向外为正；

3.2 3D动画

属性： 1）transform-style:flat|preserve-3d; 默认值为flat； 含义：用来实现3d变形；加在子元素身上（让谁有动画效果就加在谁身上）； 2）perspective:值;
含义：视距，实现3D动画必用的属性； perspective这个属性必须加在父元素身上，并且尽可能不要加在body上； 轴的问题： 从轴的正方向往负方向看，若是是顺时针，就是正的；逆时针就是负的；

3.3 过渡动画 transition

transition中的属性： 1）transition-property:none/all/某个属性名称; 默认值为all； 含义：哪些属性样式发生改变执行过渡动画效果； 2）transition-duration:time; time以秒或毫秒计（1s或1ms）默认值为0； 含义：过渡动画的持续时间； 3）transition-timing-function:值; 含义：动画运动的方式； transition-timing-function属性的值有不少，可是只能用一个： linear：线性过渡，匀速运动，默认值； ease：平滑过渡； ease-in：由慢到快； ease-out：由快到慢； ease-in-out：由慢到快再到慢； cubic-bezier：执行本身设定的贝塞尔曲线； 4）transition-delay:time; 默认值为0s不延迟当即执行动画，time以秒或毫秒计； 含义：设置延迟过渡的时间； transition属性的缩写：transition:property duration timing-function delay; 注意：顺序不能乱，还有使用transition必定要有事件的发生，例如点击、鼠标移入等； 5）transform-origin:x y z; 用来更改变形的起点；

3.4 帧动画 animation

animation属性详解： 1）animation-name:keyframename|none; 含义：设置动画运动轨迹的名称；默认值为none； 参数说明：keyframename指定要绑定到选择器的关键帧的名称；none指定没有动画； 2）animation-duration:time;
含义：设置动画的持续时间； 参数说明：time表示动画播放完成发费的时间，默认值为0，意味着没有动画； 3）animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 含义：用于设置动画的过渡方式；默认值ease; 4）animation-delay:time;
含义：设置动画的延迟时间； 参数：time以秒或毫秒计，默认值为0； 5）animation-iteration-count:infinite|数值; infinite为无限次数循环，默认值为1； 含义：设置动画的循环次数； 6）animation-direction:normal | reverse | alternate | alternate-reverse | initial | inherit; 含义：设置动画在循环中的运动方向； 参数：normal：正常方向；reverse：反方向运行； alternate：动画先正常运行再反方向运行，并持续交替运行（须要设置循环次数）； alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行（须要设置循环次数）； 7）animation-fill-mode:none | forwards | backwards | both | initial | inherit; 含义：动画完成后的状态； 参数说明：none为默认值，不设置动画以外的状态；forwards：设置对象状态为动画结束时的状态；backwards：设置对象状态为动画开始时的状态；both：设置对象状态为动画结束或开始的状态； 注意：帧动画运动完成后，元素会默认回到运动的起始位置，若是想让其停留在最后一帧的位置，设置animation-fill-mode这个属性的值为forwards； 8）animation-play-state:paused | running; 指定动画是否正在运行或已暂停； 参数：paused指暂停动画；running为默认值，指正在运行的动画； Animation属性缩写： animation:name duration timing-function delay iteration-count direction fill-mode play-state; 注意：第一个属性和第二个属性name和duration必须有；

3.5 自定义动画 @keyframes

建立动画：@keyframes 动画名称{}

//设置帧动画的运动轨迹
//第一种方式：
@keyframes [运动轨迹名称] {
	from{ //开始的样式 }
	to{ //结束的样式 }
}
//第二种方式：
@keyframes [运动轨迹名称] {
	0%{ //开始的样式 }
	50%{ }
	100%{ //结束的样式 }
}
复制代码

---

4 CSS3中的新盒子模型

1. box-sizing:border-box | padding-box | content-box（默认值）| inherit; box-sizing改变的至关于在css中设置的width/height；border-box表明整个盒子的宽高，当修改padding或者margin时，盒子的大小不变，只会让内容缩放；

2. columns：多列布局 1）columns属性 用法：columns: column-width | column-count; 参数说明：column-width为每列的宽度；column-count为列数； 2）column-width: length | auto;
   含义：设置每列的宽度； 参数说明：length为用长度值来定义列宽，不容许负值；auto根据列数自定分配宽度； 3）column-count: 总数 | auto；用来设置列数 参数说明：总数只能是正整数，不能为负数； 4）column-gap: length | normal;
   含义：设置列与列之间的间隙； 参数说明：length来定义列与列之间的间隙，不容许负值；normal与字体大小相同； 5）column-rule复合属性 column-rule是column-rule-width、column-rule-style和column-rule-color属性的简写； 含义：设置列与列之间的边框厚度、样式和颜色； 6）column-rule-width: length | thin |medium | thick; 含义：设置列与列之间的边框厚度 7）column-rule-style:none | hidden | dotted | solid | double | groove | ridge | inset | outset 含义：设置列与列之间的边框样式；

8）column-rule-color: color; 设置列与列之间的边框颜色； 注意：要定义边框颜色，边框宽度和样式都要定义；单独定义边框颜色没有效果； 9）column-span: none | all; 设置元素是否横跨全部列； 参数：none表示不跨列；all表示横跨全部列； 10）column-fill: auto | balance; 设置对象全部的高度是否统一； 参数说明：auto为默认值表示列高度自适应内容，balance表示全部列的高度以其中最高的一列统一； 目前主流浏览器都不支持column-fill属性； 11）column-break-before:auto | always | avoid; 设置对象以前是否断行； auto表示既不强迫也不由止在元素以前断行并产生新行； always：老是在元素以前断行并产生新列； avoid：避免在元素以前断行并产生新列； 12）column-break-after:auto | always | avoid; 设置对象以后是否断行； 13）column-break-inside:auto | avoid; 设置对象内部是否断行；

3. flex：弹性盒模型

---

5. 响应式布局

什么是响应式布局？针对不一样的屏幕尺寸设置不一样的样式； 响应式布局是解决移动端设备屏幕尺寸不一样的问题； 响应式布局的特色：页面的盒子的大小或位置会随着屏幕的大小而变化； 如何实现响应式布局开发？ 最经常使用的方案：rem等比缩放响应式布局；

5.0 meta标签

作移动端H5开发，首先加meta标签（必须加）

<meta name="viewport" content="width=device-width,initial-scale=1.0">
复制代码

meta标签的做用：让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。 此meta标签就是设置viewport视口的规则： 让布局视口成为理想视口： 1）width=device-width ：让HTML页面的宽度等于设备的宽度； 2）initial-scale=1.0 ：初始缩放比例为1:1； 3）user-scalable=no ：禁止用户手动缩放； 4）maximum-scale=1.0和minimum-scale=1.0 ：设置最大最小的缩放比例1:1（既不放大也不缩小=》部分安卓机只设置user-scalable是不起做用的，须要同这两个一块儿使用）；

三个视口viewport： 1）layout viewport：布局（页面）视口， layout viewport的宽度能够经过document.documentElement.clientWidth来获取；layout viewport的宽度是大于浏览器可视区域的宽度的，因此须要一个viewport来表明浏览器可视区域的大小，就叫visual viewport； 2）visual viewport ：视觉视口； visual viewport的宽度能够经过 window.innerWidth 来获取； 3）ideal viewport ：理想视口； ideal viewport并无一个固定的尺寸，不一样的设备拥有有不一样的ideal viewport；

5.1 流式布局

流式布局也叫百分比布局； 一、布局特色：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就致使若是屏幕太大或者过小都会致使元素没法正常显示】 二、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，能够根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽量的适应各类分辨率。每每配合 max-width/min-width 等属性控制尺寸流动范围以避免过大或者太小影响阅读。

5.2 媒体查询

媒体查询主要是解决pc端屏幕宽度不一样致使的样式的改变； media响应式布局

响应式布局的写法： @media [媒体设备] and ( media feature ){ css-code; } 媒体设备都有什么： 1）all 表明全部设备； ）screen 表明屏幕设备（pc+电脑）； ）print 表明打印机设备； media feature媒体取值范围：能够多个 max-width：定义输出设备中的页面最大可见区域宽度；表明的是上限； min-width：定义输出设备中的页面最小可见区域宽度；表明的是下限；

@media screen and (max-width:800px) and (min-width:600px){
	.box div:nth-child(2){
		background: purple;
	}
}
复制代码

媒体查询响应式布局的缺点：

1. 兼容各类设备工做量大，效率低下；
2. 代码累赘，会出现隐藏无用的元素，加载时间加长；

5.3 flex布局

参考文档：www.runoob.com/w3cnote/fle… Flex Layout Box Model弹性盒模型； 它可以更加高效方便控制元素对齐、排列，更重要的是可以自动计算布局内元素的尺寸，不管这个元素的尺寸是固定的仍是动态的。 flex的结构：

display: -webkit-flex; display:flex; //通常加在父级元素上 一旦父元素设置flex布局，子元素的float、clear和vertical-align属性将失效；

弹性盒模型的属性
这六个用在父级元素身上 1）flex-direction: row | row-reverse | column | column-reverse; 含义：定义子元素在主轴的排列方向； 参数：row为默认值，表示横向排列从左到右；row-reverse为从右到左；column为纵向排列从上到下；column-reverse为从下到上； 2）flex-wrap: nowrap | wrap | wrap-reverse; 含义：控制伸缩项目换行； 参数：nowrap为默认值，表示不换行；wrap为换行；wrap-reverse为倒序换行； 3）flex-flow为复合属性； flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 4）justify-content:flex-start | flex-end | center | space-between | space-around; 含义：子元素在主轴上的对齐方式；默认值为flex-start； space-between：伸缩项目两边碰 中间空间平均分； space-around：伸缩项目平均分 剩余空间两边碰； 5）align-items:flex-start | flex-end | center | baseline | stretch; 含义：子元素在交叉轴上的对齐方式； 6）align-content:flex-start | flex-end | center | stretch | space-between | space-around; 含义：控制容器内多行在交叉轴上的排列方式；默认值为stretch； 注意：设置align-content须要设置flex-wrap: wrap； 垂直居中对齐： display:flex; justify-content:center; align-items:center;

Flex子元素上的属性 用在子元素上的属性经常使用的只有flex属性；

1. order 含义：控制子元素出如今父容器的顺序；取值为数字，数值越小，排列越靠前，默认为0；
2. flex-grow: 0 | [数字]; 含义：控制子元素占伸缩容器的空间比例，默认为0； 取值不能够是负数；设置为同一数值，剩余空间平均分配；设置为不一样数值，谁大谁地多；
3. flex-shrink 含义：当伸缩容器不足以容纳伸缩项目时的空间分配；默认为1； 若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。 取值为0或数字；不能够是负数；
4. flex-basis: auto | 0 | [width]; 含义：伸缩容器先刨去子元素的内容分配剩余空间状况； 伸缩项目分配空间 = 伸缩容器的空间 - basis设置的空间 - 其余子元素的width；
5. 复合属性flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex:1;表示全部元素各占一份，平均分配；
6. align-self: flex-start | flex-end | strerch | center | baseline; 含义：子元素在交叉轴上的对齐方式； 若是伸缩项目设置有align-self且值不为auto，那么会覆盖伸缩容器为其设置的对齐方式；

5.4 rem布局

根据屏幕的宽度来设置HTML的font-size值； 什么是rem？ rem是一个单位，px是固定单位；rem是相对单位，相对于当前页面根元素HTML的字体设定的单位； 页面根元素HTML的字体大小设置为多少，至关于一个rem等于多少像素； rem的特色：

若是HTML的font-size不变，用rem和px是同样的，可是若是字体大小改变，也就是改变了rem和px之间的换算比例，那么以前全部用rem作单位的样式都会自动按照最新的比例进行缩放，实现了改动HTML的font-size，整个页面中的元素都跟着缩放了；

利用了当前屏幕和750的比等于屏幕的fontSize和750的fontSize的比例相同； 不一样的屏幕大小设置不一样的font-size值；

(function () {
	function computedFont() {
		let desW = 750; //设计稿尺寸
		let winW = document.documentElement.clientWidth;
		document.documentElement.style.fontSize = winW/desW*100+"px";  //100表明的是HTML的font-size的值；
	}
	computedFont();
	//resize : 当屏幕的窗口的大小发生改变时，执行这个方法；
	window.addEventListener("resize",computedFont);
})();
复制代码

这段代码一般放在body上面：在解析DOM以前，改变HTML的fontSize值；减小DOM的重绘；

6. Hybrid混合模式开发

app开发模式有3种：原生App，webApp，混合开发App。

1. webApp 优势：能够跨平台使用；维护和开发成本低；及时更新； 缺点：不能调用手机内置的硬件功能，用户体验差；
2. nativeApp：原生APP； 优势：1）性能高；2）能够调用手机内置的硬件功能；（拍照、定位、手电筒）；交互体验比较好； 缺点：1）不能跨平台；成本比较高；2）版本不统一； IOS系统： Object-C；苹果商店上传app须要7天审核； 安卓系统： Object-Java;
3. Hybird混合模式开发；介于webApp和原生App之间； webview : 是一个webkit内核的引擎；能够渲染页面，html、css和js经过webview这个控件做为桥梁；就能够调用原生的接口； 前端开发好项目以后，给IOS和安卓工程师，把项目嵌套在一个内核中webView；webView 就像一个浏览器，可以运行这里面前端代码；

什么是Hybird混合模式开发？

Hybrid混合开发的原理： 其核心是使用WebView控件来实现：Native调用前端页面JS中的方法，或者前端页面经过JS调用Native提供的接口；Native和前端JS互相调用皆经过Webview桥梁来实现。

Hybrid混合开发的优缺点 优势：

1. 一次编译多平台运行。iPhone，Android
2. 开发速度快，不须要了解各个平台的native开发语言也能够开发轻量级移动应用。
3. 内容更新不须要内容审查。
4. 各平台UI表现一致。

缺点：

1. 使用体验与native开发有差距。
2. 须要native api部分仍是须要原生技术支持。

7. 移动端事件

移动端click事件300ms延迟的缘由和解决办法？ 缘由：移动端中元素的click事件都会有300ms的延迟现象，移动端中，分为单击和双击，当触发点击操做，浏览器会等待300ms，若是300ms以内没有再次点击，那么会默认执行单击操做；若是300ms内点击了第二次，那么会执行双击的操做； 解决方法1：须要引入fastclick.js（解决300ms延迟的插件）

// 当页面DOM加载完毕，执行这个函数
window.addEventListener("load",function () {
	FastClick.attach(document.body);
});
复制代码

FastClick原理：在touchend以后，当即采用DOM自定义事件触发了onclick绑定的那个方法，而且把原有的方法阻止掉； 在移动端中：事件执行顺序是touchstart touchmove touchend click;正常状况下，会等到touchend执行完毕以后，等待200-400ms之间执行click；

目前项目中移动端的点击操做基本都是基于第三方类库； 解决方法2：zepto：提供了移动端经常使用的事件操做，不存在300ms延迟；

click300ms延迟会致使点透问题，什么是点透问题：

移动端没有keydown和keyup事件，用oninput事件代替，表明正在操做当前元素表单； 移动端不存在鼠标事件，取而代之的是更加人性化的触摸事件（touch）；

7.1 touch事件

一、touchstart：手指触摸屏幕触发（已有手指放屏幕上不会触发）。 二、touchmove：手指在屏幕滑动，连续触发。 三、touchend：手指离开屏幕时触发。 四、touchcancle：系统取消touch时触发。当有一些更高级别的事情发生（例如：接电话），会取消当前touch操做，会触发touchcancle事件； 注意：当touchstart、touchmove、touchend和click同时存在时，会根据鼠标移动判断是否须要发生touchmove；若是触发就再也不触发onclick事件； 若是触摸或点击超过300ms就不触发click事件了（只要触发touchmove事件，click就不触发了）；

大体上分为DOM0事件和DOM2事件两种 DMO0事件，就是传统的直接将事件做为属性设置的形式：

box.ontouchstart = function(){ }
复制代码

DOM2事件，则是用addEventListener的方式来绑定事件处理程序：

box.addEventListener("touchstart",function(){
 });
复制代码

7.2 移动端的事件对象

每一个touch对象包含的属性：

1. touches：表示当前跟踪的触摸操做的touch对象的数组。
2. clientX、clientY：触摸点在视口中的x、y坐标。
3. pageX、pageY：触摸点在页面中的x、y坐标。
4. screenX、screenY：触摸点在屏幕中的x、y坐标。
5. Identifier：标识触摸的惟一ID。
6. target：触摸的Dom节点。

在touchend事件中，事件对象没有在e.touches中，把事件信息放在了changedTouches中；

box.ontouchstart = function(e){
	console.log(e.touches[0].clientX);
}
box.ontouchmove = function(e){
	console.log(e.touches[0].clientX);
}
box.ontouchend = function(e){
	console.log(e.changedTouches[0].clientX);
}
复制代码

---

8. 字体图标

1. 在https://www.iconfont.cn/中将须要的图标加入购物车，须要登陆阿里巴巴图标库；
2. 点击购物车 --> 添加至项目 --> 点击文件夹图标输入文件夹名称；
3. 点击Font class
4. 方法一： 1）点击查看在线连接 --> 点击“暂无代码，点今生成” 2）会生成一个连接；例如：//at.alicdn.com/t/font_1349506_mdthe95t1c.css 3）在页面中引入link；

<link rel="stylesheet" href="//at.alicdn.com/t/font_1349506_mdthe95t1c.css">
复制代码

4. 方法二 1）点击“下载至本地”； 2）将下载下来的文件夹（修改文件夹名字为icon）放到项目目录下，并将文件夹中的iconfont.css引入页面中；

<link rel="stylesheet" href="icon/iconfont.css">
复制代码

5. 在阿里巴巴图标库个人项目页面，将鼠标滑到图标上，点击复制代码（复制的是图标的类名，例如：icon-shouye）；
6. 在页面中，html中给标签添加类名；

<div class="iconfont icon-shouye"></div>
复制代码

注意：类名中的iconfont和icon-shouye都不能省；

---

9 音视频标签

audio和video标签让咱们告别了flash时代；

9.1 视频标签：video

1. video标签属性： 1）src 视频地址； 2）controls 视频控制器； 3）width播放器的宽度； 4）height播放器的高度； 注意：width和height若是一块儿用，那么播放器会拉伸可是播放的内容不会拉伸始终在最中心的位置； 5）autoplay 自动播放，可是chrome不会自动播放； 6）loop自动从新播放； 7）poster视频刚加载的时候，没有播放以前显示的图片； 8）muted视频静音；

<video src="data/imooc.mp4" controls></video> 
复制代码

video标签支持的三种常见格式：mp4，webm，ogv； video标签中能够放几个标签，用来解决兼容问题;

<video controls="controls">
	<source src="data/1.mp4">
	<source src="data/1.webm">
	<source src="data/1.ogv">
</video> 
复制代码

9.2音频标签：audio

audio标签订义音频，好比音乐等；和video视频标签用法基本一致；

1. audio标签的经常使用属性： 1）src 音频地址； 2）controls 音频的控件，不加的话页面中什么都看不到； 3）autoplay 自动播放，可是chrome不会自动播放； 4）loop循环播放； 5）muted音频静音； 注意：audio标签行内样式没有width和height属性，必须在CSS中使用style标签得样式来控制；

<audio controls src=”imooc.mp3”></audio>
复制代码

audio支持的音频格式：mp三、wav和ogg；其中mp3格式兼容全部浏览器，ogg格式不支持safari浏览器；可使用<source>标签来解决兼容问题；

<audio controls="controls">
	<source src="data/1.mp3">
	<source src="data/1.wav">
	<source src="data/1.ogg">
</audio> 
复制代码

javaScript能够生成audio对象，new Audio()等同于html中写一个<audio></audio>标签；

//<button id="btn">播放</button>
var myAudio = new Audio();
myAudio.src = 'data/imooc.wav';
btn.onclick = function(){
	myAudio.play();
}
复制代码

9.3音视频 API事件

1）play()：音频播放事件； 必须放在事件中才能兼容全部浏览器； 2）pause()：音频暂停事件； 3）paused：true表示暂停状态，false表示播放状态；

btn1.onclick = function(){
	myAudio.play();
	console.log(myAudio.paused); //false
}
btn2.onclick = function(){
	myAudio.pause();
	console.log(myAudio.paused); //true
}
复制代码

4）duration：返回音频的总长度； 5）canplay()：当音频加载完毕会当即触发canplay事件；加载音视频是异步的；异步加载；

myAudio.addEventListener("canplay",function(){
	console.log(myAudio.duration);
})
复制代码

6）currentTime：设置或返回音频的长度；

myAudio.currentTime = '20';
复制代码

7）src：设置或返回当前音频的来源； 8）currentSrc：返回当前音频的URL地址，不能赋值； 9）volume：设置或返回当前音频的音量； volume的值为0到1，0表示静音，1表示满格；可使用input标签的range属性来代替volume控件

/*<video controls id="myAudio" src="imooc.mp4"></video> <input type="range" min=0 max=100 value=50 id="range" /> <div id="playNode">播放</div> <div id="stopNode">暂停</div> <div id="go">快进</div>*/
myAudio.volume = 0.5;
range.oninput = function(){
	myAudio.volume = this.value/100;
}
复制代码

10）controls：设置音频是否显示空间/设置控制器； 11）muted()：设置音频是否静音； muted和controls用法相同，可是这个属性不会出如今radio标签上 12）networkState()：返回音频当前网络状态； 13）ended()：经过监听事件当音频播放结束的执行函数，也能够直接查看其布尔值； ended的返回值为true或false，播放结束返回true，没有播放结束返回false，ended能够进行事件监听（addEventListener）

myAudio.addEventListener("ended",function(){
	console.log("音频播放结束");
})
复制代码

14）loop()：设置或返回音频是否应在结束时从新播放，true表明循环，false表明不循环；

myAudio.loop = true;
复制代码

15）playbackRate()：设置或返回音频播放的速度； playbackRate默认是1，设置播放速度：

myAudio.playbackRate = 15;
复制代码

16）readyState()：返回音频的当前就绪状态；

17）timeupdate()：能够监听音频目前的播放状态，若是播放就自动执行函数中的内容；

myAudio.addEventListener("timeupdate",function(){
	console.log("音频正在播放中。。。");
})
复制代码

18）seeked()：用户已移动/跳跃到音频中的新位置时； 19）seeking()：用户开始移动/跳跃到音频中的新位置时； 在audio中，seeked和seeking的触发频率是同样的；在video中，seeking的触发频率比seeked要高； 20）volumechange()：音频的音量发生改变时就会触发这个事件，使用时必须使用on，也可使用监听事件；

myAudio.addEventListener("volumechange",function(){
	console.log("音频的声音改变了");
})
复制代码

21）requestFullscreen()：全屏事件，必须使用audio标签设置全屏，使用new Audio对象不能使用这个全屏事件； requestFullscreen必须放到事件中使用，并且在哪一个浏览器中使用就要加哪一个浏览器的前缀 22）load()：从新加载视频资源； load就是强制让播放器从新加载一次，通常用于播放器的src发生改变的时候； 从新加载有两种方法：一种是load（）方法，一种是src；

---

10. 一些新的API

本地存储：localStorage/sessionStorage 获取地理位置：navigator.geolocation.getCurrentPosition 调取手机内部的GPS定位系统获取当前手机所在地的经纬度以及精准度等；

11. websocket

websocket:socket.io 客户端和服务端新的传输方式（即时通信IM系统基本上不少是基于它完成的）

面试题：

1.开发移动端时你遇到过什么兼容性问题？

juejin.im/entry/5a17a… segmentfault.com/a/119000000…

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
复制代码

两个图片之间会有缝隙； 由于img自己属于行内块元素，因为换行致使的； 解决办法：给img设置display:block，设置成块元素；

2.h5新增标签和css3新增属性

3.移动端事件

touchstart、touchmove、touchend

4.click事件的300ms延迟问题，及解决方法

5.点透问题

6.IOS10.0以上版本中form表单提交按钮不能发请求；

解决办法：本身写个ajax发送请求；