1.新增标签：header footer nav section 都是：块元素
语义化 好处：
1 有利于seo 爬虫抓取
2 方便腿短开发和维护，可读性强
3 方便其他设备解析（移动设备）
坏处：
1 ie9以下浏览器不兼容
2. 面试的问html5：html5在低版本浏览器如何兼容（ie8）？
解决方式：用html5shiv.js
3.只要是移动端就要加meta标签：强制让文档与设备的宽度保持1:1关系
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
4.面试的问：在移动端我要纯数字的键盘type是哪个值？
<input type='tel'>
5.面试问：placeholder 怎么改变字体颜色(如何兼容不同浏览器)？
input::-webkit-input-placeholder {color: #999;}
6.面试问：ios中输入框首字母如何取消(属于兼容问题)？ autocapitalize='off'
7.你们的项目是如何做自适应布局的？
使用淘宝方案：rem（基于html的font-size大小计算）+flexible.js(动态改变html的font-size的大小)
ui给的设计图 宽度：750 用iphone6做基准
8.面试题：一个盒子不给宽度和高度，如何水平垂直居中
1.弹性盒
2.transform
3.网格布局
9.面试题：谷歌浏览器默认字体大小是16px，那么如何显示小于16px的字体呢?
用缩放：scale
.p{
font-size:20px;
-webkit-transform:scale(.5);
}
10.响应式图片布局
<picture>
<source srcset='images/1000.png'media="(min-width:1000px)"/> //大于1000px展示这个图片
<source srcset='images/700.png'media="(min-width:800px)"/> //大于800px展示这个图片
<img srcset="images/400.png"> // 默认
</picture>
11.响应式布局：
<style>
@media only screen and (max-width:992px){
}
</style>
12.移动端滚动使用iscroll.js文件，下载：juejin.cn/post/697212…
官放中文文档：caibaojian.com/iscroll-5/g…
new IScroll('#wrapper');
IScroll滚动条件：css设置要求：添加了id="wrapper",高度一定要比要滚动的ul子节点的高度小，不然无法滚动
13.问：在移动端使用click事件有300ms延迟的问题
解决方式：2个方式
1.禁止双击缩放===》在meta标签中加上这个 user-scalable=no
2.引用fastclick.js文件下载url:https://juejin.cn/post/6972124172734431263
写入代码：
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded',function(){
FastClick.attach(document.body);
},false);
}
###14.面试题：移动端touch事件有穿透(点透）的问题，该怎么解决?
解决方式：
1、阻止默认行为
e.preventDefault();
2、fastclick.js 引用fastclick.js文件下载url:https://juejin.cn/post/6972124172734431263
2.1引入js文件
2.2写入代码：
if ('addEventListener' in document){
document.addEventListener('DOMContentLoaded',function
FastClick.attach(document.body);
},false);
}
15.移动端插件zepto官网：www.zeptojs.com.cn/
16.问：移动端懒加载实现原理：
官网：https://www.lazyloadjs.cn/
优势：提升性能
实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。
基于这个问题，我们可以利用标签的自定义属性(data-xxx)，来保存图片的路径，当我们需要加载图片
的时候，将data-xxx赋值给src就可以实现按需进入按需加载。
例如自定义属性：data-xxx
<img alt=" data-src='图片路径2.jpg'>
17.下拉刷新,上拉加载，下载对应的demo 插件网站：www.jq22.com/jquery-info…
18.移动端:各种小问题面试要问
问题一：移动端，input的键盘的右下角显示搜索（2个字）
解决：搜索课程名称或者关键词
<input type="search" placeholder="搜索课程名称或关键词">
问题二：如果我们在移动端点击了搜索，form表单有action就自动提交表单
解决： onsubmit="return false"
例子： <form action="" id="onSearch" onsubmit="return false">
<input type="search" placeholder="搜索课程名称或关键词">
</form>
让input自动获取焦点：autofocus="autofocus"
设置光标的颜色 caret-color: #000;
问题三：点击空白处 如何收起键盘
解决：
window.addEventListener('touchstart', function () {
document.activeElement.blur();
})
问题四：元素被触摸时产生的半透明遮罩怎么去掉 （a、button、input、textarea）
解决：-webkit-tap-highlight-color:rgba(0,0,0,0);
问题五：如何关闭ios键盘的首字母自动大写
解决： <input autocapitalize="off">
问题六：禁止ios&安卓长按保存（下载）图片
解决：img{ -webkit-touch-callout:none; }
问题七：//禁止ios&安卓长按选中文字 解决：-webkit-user-select:none;
ul li,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-user-select: none;
}
问题八：url传值，如果有空格、汉字、特殊字符，就会转码
解决方式： encodeURI ==》加码 decodeURI ==》解码
问题九：去除input type=search 后面的x号
解决：input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
19.手机端 事件委托：
$('ul').on('tap', 'li', function () {
alert(1)
})
20.阶段三视频考核文案记录：
这次我们做的是一个教育类的官网，主要有PC端和移动端
先来说一下需求方面的情况：
作为前端人员来说，做PC端和移动端总要考虑的就是响应式，怎么做适配，自适应
有两种方案：
1：做一套PC端，在加上响应式后 这样可以完美兼容移动端
2：做一套PC端，一套移动端，移动端采用淘宝无限适配方案，我们就是采用这个方案二做的
那我们是如何在PC端和移动端之间做切换呢？比如打一个PC端的网址，正常进入PC端页面，然后拿一个移动设备直接在浏览器访问PC端的网址，会自动跳转到移动端的页面，我们在pc端做了终端的判断，
下面重点说一下移动端的：移动端无非就是正常的数据请求渲染到页面上，但是兼容问题是比较多的
比如说：所有的图片不支持长按选中后复制或下载保存图片，文字也不支持长按复制的，通过css就可以解决
值得说的功能呢，是搜索，当手指触摸到搜索块，键盘会弹出，右下角出现搜索按钮，日常的input type为search类型，是换行，不是搜索，所以在做的时候，需要给搜索框包裹一个from标签的小细节。
触摸其他地方，键盘要收起，这些兼容需要考虑的
里面涉及到懒加载也有做优化，包括触底加载更多数据，和数据筛选这些功能都有
好包括路径传值，需要用到解码和编码，因为传递汉字或特殊字符的时候获取不到真的值，有这些细节。
移动端总的来说要拿真机来测试，要不然很多东西拿pc端的模拟器来测试是不对的，显示可能会有问题。
这些基本就是我们做整个项目的完整过程，请求数据是后端给的接口文档。
请问你还有什么想问的没有？
