移动端开发

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

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

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

功能变强大了，很多东西不需要自己导入JS插件就可以完成了，例如date日历；
在移动端根据设置的类型不一样，用户输入过程中调出来的虚拟键盘也不一样；例如：number类型的文本框调出来的是数字键盘；
新增加的类型提供了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{} 兄弟

常用的伪类选择器：

通配符选择器 A[name=""] 属性选择器
A[name!=""]不等于
A[name^=""]以什么开始
A[name$=""]以什么结尾
A[name*=""] 包含
状态伪类 1)正常状态（:link）：未访问状态； 2)放上状态（:hover）：鼠标悬浮状态； 3)激活状态（:active）：按住鼠标左键不松开时的链接样式，这个状态特别短暂 4)已访问状态（:visited）：按下鼠标左键并弹起，这时的样式效果。注意：（1）伪选择器常用于链接（a元素），:hover和:active也可以用于其他元素；（2）链接伪类的顺序：:link > :visited > :hover > :active 否则不生效； 5）获得焦点状态（:focus）：常用于文本框中，在文本框中点击一下就获得焦点了 eg：input:focus{background:yellow;}
UI元素状态伪类 :enabled、:disabled、:checked 例如：一个文本框，可输入的状态就是enabled，不可输入的状态就是disabled，单选框复选框中选中的状态就是checked；注意：input输入框可编辑的才有输入框，不可编辑的没有宽和高； input:enabled 可以设置宽高 input:disabled 没有宽高
伪元素
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用于设置在浏览器中选中文本后的背景色与前景色；
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 匹配没有子元素（包括文本节点）的每个元素；
否定选择器
语法：父元素: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中的背景样式：

background-color：图片背景色；
background-image：背景图片；
background-position：背景定位；
background-repeat：背景平铺方式，取值：no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向）；
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渐变

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

线性渐变（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中的新盒子模型

box-sizing:border-box | padding-box | content-box（默认值）| inherit; box-sizing改变的相当于在css中设置的width/height；border-box代表整个盒子的宽高，当修改padding或者margin时，盒子的大小不变，只会让内容缩放；
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; 设置对象内部是否断行；

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 流式布局

流式布局也叫百分比布局； 1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】 2、设计方法：使用%百分比定义宽度，高度大都是用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;
	}
}

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

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

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属性；

order 含义：控制子元素出现在父容器的顺序；取值为数字，数值越小，排列越靠前，默认为0；
flex-grow: 0 | [数字]; 含义：控制子元素占伸缩容器的空间比例，默认为0；取值不可以是负数；设置为同一数值，剩余空间平均分配；设置为不同数值，谁大谁地多；
flex-shrink 含义：当伸缩容器不足以容纳伸缩项目时的空间分配；默认为1；如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。取值为0或数字；不可以是负数；
flex-basis: auto | 0 | [width]; 含义：伸缩容器先刨去子元素的内容分配剩余空间情况；伸缩项目分配空间 = 伸缩容器的空间 - basis设置的空间 - 其他子元素的width；
复合属性flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex:1;表示所有元素各占一份，平均分配；
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。

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

什么是Hybird混合模式开发？

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

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

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

缺点：

使用体验与native开发有差距。
需要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事件

1、touchstart：手指触摸屏幕触发（已有手指放屏幕上不会触发）。 2、touchmove：手指在屏幕滑动，连续触发。 3、touchend：手指离开屏幕时触发。 4、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对象包含的属性：

touches：表示当前跟踪的触摸操作的touch对象的数组。
clientX、clientY：触摸点在视口中的x、y坐标。
pageX、pageY：触摸点在页面中的x、y坐标。
screenX、screenY：触摸点在屏幕中的x、y坐标。
Identifier：标识触摸的唯一ID。
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. 字体图标

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

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

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

<link rel="stylesheet" href="icon/iconfont.css">

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

<div class="iconfont icon-shouye"></div>

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

9 音视频标签

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

9.1 视频标签：video

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视频标签用法基本一致；

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

<audio controls src=”imooc.mp3”></audio>

audio支持的音频格式：mp3、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.cn/post/684490… segmentfault.com/a/119000000…

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">

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

移动端开发

移动端开发

1. HTML5

1.1 新增加的语义化标签

1.2 表单元素

1.3 表单验证

2. CSS3

2.1 选择器

2.2 样式属性

2.2.1基本属性

2.2.2文本

2.2.3字体图标

2.2.4背景

2.3 CSS3渐变

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

3 CSS3动画和变形

3.1 变形 2D

3.2 3D动画

3.3 过渡动画 transition

3.4 帧动画 animation

3.5 自定义动画 @keyframes

4 CSS3中的新盒子模型

5. 响应式布局

5.0 meta标签

5.1 流式布局

5.2 媒体查询

5.3 flex布局

5.4 rem布局

6. Hybrid混合模式开发

7. 移动端事件

7.1 touch事件

7.2 移动端的事件对象

8. 字体图标

9 音视频标签

9.1 视频标签：video

9.2音频标签：audio

9.3音视频 API事件

10. 一些新的API

11. websocket

面试题：

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

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

3.移动端事件

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

5.点透问题

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