H5+C3（移动端）

1.什么是html5？

      html产生于1990年，1997年出来html4，现在我们用html5，说白了就是一个不断升级的html

2.html5新增了很多标签新增了很多js的api

     header、footer、nav......

3.面试都可能会问到的，语义化

      语义化好处：1>有利于seo，爬虫抓取

                            2>方便团队开发维护，可读性强

                            3>方便其它设备解析（移动设备）

      html新增标签的缺点：ie9以下的浏览器不兼容

4.新增常用的标签：

      header：头部

      footer：底部

      section：区块

      nav：导航

          ************强调：以上元素都是“块元素”

   注意：1>面试问题：html5在低浏览器如何兼容（ie8）？

                               html5shiv.js

              2>只要做移动端的项目，必须要加入meta

                  强制让文档与设备的宽度保持1：1         ，   对页面设置不能进行缩放

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

5.1>新增input type属性值

    <input type="email">           pc：会验证邮箱格式       

                                                移动端：会验证邮箱格式 

    <input type="tel">                 pc:什么效果也没有

                                                移动端：纯数字键盘

           ***面试：问 在移动端，要纯数字的键盘，type是哪个值      答：tel

    <input type="url">                 pc:会验证完整的网址 http、com

    <input type="number">         pc:会验证必须输入数

                                                 移动端：会验证必须输入数

    <input type="search">           pc:和普通的text差不多，只是增加了一个清空按钮

                                                  移动端：和普通的text差不多，点击搜索后会清空输入内容

    <input type="range">              pc:自由滑块

   <input type="time">                 pc:显示选择小时和分钟

   <input type="date">                pc:显示选择年月日

   <input type="datetime"/>        pc：好像没什么效果

                                                  移动端：好像没什么效果

   <input type="month">              pc：显示选择年月

   <input type="week">                pc:显示选择年周

 2> 新增常用属性

       1.1placeholder                

           ********面试：placeholder怎么改变字体颜色？

.text::-webkit-input-placeholder{
			color:red;
		}

      1.2autofocus      加载时自动获取焦点

      1.3multiple          多文件上传

      1.4required          必填项 

      1.5 autocapitalize = 'off '

       ************面试：在ios中，输入框首字母大写如何取消？                                   

 6.真机测试

      连接和安装：

            1>电脑和手机要连接同一个wifi

            2>手机要插上数据线，usb要连接在电脑上

            3>windows机器和安卓手机要下载软件

                  在电脑和手机下载 安装手机助手 【或者360手机助手】

      真机测试：

              1>右击新建项目 5+App        

              2>运行到手机或模拟器

                          但是没有设备该怎么办？

                               在手机中找【开发人员选项】=》打开开发权限=》usb调试

              3>运行后在手机自动安装一个app hbuilder

7.视频video      音频audio

     1>video    属性：

 width      height          autoplay（自动播放）        preload（提前加载）            controls（控件）

 loop（循环播放）   muted（静音）   poster（下载视频时显示的图像，或在播放前显示的图像）

     2>js原生的api

         myVideo.play() 

         myVideo.pause()

8.本地存储   （重要）

   sessionStorage

   localStorage        使用多

        ***********区别：

                 1>sessionStorage关闭页面就消失

                 2>localStorage 除非手动清空，否则就算关闭页面也不会清空

                     本地存储类型都是 string 

     增加： sessionStorage |  localaStorage.setItem(key,value)

                 sessionStorage  |  localStorage.setItem.key = value

                 sessionStorage |  localStirage.setItem['key'] = value

    获取： sessionStorage |  localaStorage.getItem(key)

                 sessionStorage |  localaStorage.setItem.key

                sessionStorage |  localaStorage.setItem['key']

     删除：

         全部删除： sessionStorage |  localaStorage.clear()

         指定删除： sessionStorage |  localaStorage.removeItem(key)

9.css文件

        reset.css      与       normalize.css（可以解决跨浏览器的一致性）

10.  1.1css预处理器：用专门的语言，进行web页面的样式设计，再通过编译转换成正常的css文件

       专门的语言：less sass  stylus   =》写css样式

       最终浏览器运行的是css文件，所有文件都会编译成css文件

                    ****编译方式：node  ，工具编译 ，编译工具（插件）

      1.2工具编译：koala         文件名称：英文

      1.3编译工具： EasyLESS        Live Sass Compiler

      1.4less语法：

             1>变量

@bgColor：blue；
header{background-color:@bgColor;}

             2>运算 ： + - * /

font-size：50px-20；

           3>自定义函数

.fn(@fs:18px){
    font-size:@fs;
    color:red; 
 }
header{ 
   .fn(24px);
 }

          4>嵌套样式

header{
    width:50px;
    height:50px;
    div{
         color:red;
         &:hover{
             font-size:12px;
             }
      }
  }

    1.5 sass语法：（用的多）

          1>变量       $bgColor:red;

          2>基于Ruby语言

                mac 系统不建议下载

               window下载安装

         3>使用时 用的是scss

               sass:

header
     color:red

               scss:

header{
     color:red;
  }

       4>支持运算符 + - * /         ，支持&：hover    ，   支持自定义函数

@function fn($fz:24px){
       @return $fz;
 }
header{
    font-size:fn();
}

11.   移动端   弹性盒布局

      1.1  由  容器（父元素）  +   项目（子元素）   组成

      1.2  用法：

父元素{
     display：flex；
    }
子元素{
   很多flex属性 
   }

父元素的属性：        

          flex-direction：决定主轴排列方向    默认横向排列（row） 

                                  纵向排列（column）=》header   section    footer

          flex-wrap：默认项目不换行  no-wrap         

                            项目换行：wrap

          flex-flow：是direction和wrap的集合        （很少使用）

                           flex-flow：column wrap；  

          justify-content：center/space-between（左右顶头）/space-around（左右不顶头）

                                    子元素水平居中

          align-items：center/flex-start（靠上）/flex-end（靠下）

子元素/项目的属性：

          fllex-grow：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大 

                             所占份数

          flex-shrink：定义项目的缩小比例，默认是1，即如果空间不足，该项目缩小

          flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）  （使用不多 ）

                             作用域与width：150px；差不多

          flex：flex-grow,flex-shrink,flex-basis         （后两个属性可不写 ）  

                   默认：0，1，auto(不扩大，不缩小，)

12.布局单位

      vm，vh

     px：固定单位

     em，rem：相对单位

              em：相对于父元素的font-size

              rem：相对于根（html）的font-size

                **********默认font-size为16px

               *******移动端用的最多的单位是rem，为什么？  相对于根元素，好计算

13.自适应布局

        ui设计图给多大？  宽度：750

        前端做项目调试的时候，是拿iphone6才做基准的

        js文件：flexible.js    引入 + rem

14.字体图标icon的使用

       1.1添加，下载至本地

        1.2 5个字体图标文件放入fonts文件夹，iconfont.css放入css文件夹

        1.3 引入后，修改iconfont.css中url的路径 

        1.4 <i class="iconfont icon-shouye"></i>

              <i class="iconfont">&#xe608;</i>

15.transform   

        位移（translate  相当于 top left）======>动画用

        缩放（scale）----以中心点

               *************面试题：谷歌浏览器默认字体大小16px，如何显示小于16px的字体呢？

                                  缩放：font-size：16px；

                                             -webkit-transform：scale（.5);            //8px

        旋转（ rotate(angle) ）------以中心点

       倾斜（ skew(angle,angle) ）  

       3D：1>如果要用3D，必须给父元素加入一个perspective||transform：preserve-3d 属性

                   值越大，离我们越远；值越小，离我们越近

               2>perspective-orign：规定中心位置

               3>transform-orign：如果定义3d，让子元素都是3d空间

16.  1.1animation:animation-name animation-duration animation-timing-function(速度曲线)                                        animation-delay  animation-iteration-count animation-direction(是否反向播放)

              *****1>注意要用c3中的动画，必须要定义关键帧

                     2>animation-delay:允许负数，-2s动画马上开始，但跳过2s进入动画(很多都是负数)

                     3>动画库：script引入，固定的类前缀  animate__animated

                                        使用：移动端页面切换

@keyframe xxx{
    0%{   }
    100%{  }
}

       1.2 transition：属性名称 时间 速度曲线 延迟      div{    }         div:hover{    }

               属性名称： width  ||  all（所有）

      1.3区别：使用区别：transition===>交互驱动   

                                       animation====>自己动，一般刷新页面就执行

           补充：滤镜：filter:grayscale（ 0||100%  ）

       ***********面试题：一个盒子不给宽和高，如何水平垂直居中？

                                    1>弹性盒

                                     2>position+transform

                                     3>网格布局  

display:grid;
justify-content:center;
align-items:center;

17.   1.1响应式布局（媒体查询）@media

             一个url（一套代码）可以响应多端（电脑、ipad、手机）

            经典网页：Bootstrap

            优点：1>存在兼容性

                    2>体积可能大一点

 为什么大网站用响应式布局呢？简单的网站、用户不是特别庞大、展示站、官网

      1.2@media

          语法格式：

@media only screen and (max-width:400px){
              代码体
      }
@media only screen and (min-width:400px) and (max-width:){
              代码体
      }

        only:可以排除不支持媒体查询的浏览器

        screen:设备类型

        max-width | min-width

        max-height | min-height

      1.3响应式图片（html新增的标签）

<picture>
     <source srcset='路径' media='(min-width:800px)'>
     <img srcset='路径'>
</picture>

      1.4响应式案例：

             大屏幕:>=1200px

             中等屏幕：>=992px    

             平板:>=768px

             手机：<768px

15.响应式和自适应

         响应式：“一个url”可以响应多端（电脑、iPad、手机）

                 PC：https://www.bootcss.com/

                 移动端:https://www.bootcss.com/

         自适应：可以在移动设备上适应（ipad、手机）

                 PC:https://www.taobao.com/

                 移动端：https://main.m.taobao.com/

      ***我们要一个项目：PC+移动:

             1> 响应式(@media)

             2>两个页面（pc、移动）

                      pc=====>www.xuexiluxian.cn

                      移动======>m.xuexiluxian.cn

console.log(navigator.userAgent.toLowerCase().match(/ipad/i) == "ipad");

16.iScroll插件

      1>.引入iscroll.js文件

      2>加入 id=“wrapper”

               注意：给滚动元素的父元素添加

      3>实例化 

            new I Scroll('#wrapper');

        ******注意事项：section的高度>=ul的高度    就不起效

17.问：在移动端使用click事件有300ms延迟的问题

    解决方式：1> 添加meta  属性  user-scalable=no ====>禁止双击缩放

                      2>添加 fastclick.js

                               引入文件

if ('addEventListener' in document) {

        document.addEventListener('DOMContentLoaded', function() {

            FastClick.attach(document.body);

        }, false);

    }

18.移动端事件 （touch）

         touchstart：开始触摸事件

         touchmove：手指滑动事件

         touchend：触摸结束事件

    面试题：移动端touch事件有穿透（点透）的问题，该怎么解决？

                  解决方式：1>阻止默认行为  e.preventDefault（）

                                     2>fastclick.js

 19.zepto.js

    Zepto 是一个轻量级的、针对现代高级浏览器的 JavaScript 工具库，它兼容 jQuery 的 API 。

    用法：引入zepto.js文件，用事件，再引入事件的js文件

    如：移动端触摸事件  tap ，再引入touch.js文件

    当元素被划过时触发：swipe, swipeLeft, swipeRight, swipeUp, swipeDown

 20.懒加载

          一共有100张图片，用户可能就看10张图片。

          优势：提升性能

          实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。

                            基于这个问题，我们可以利用标签的自定义属性（data-xxx），来保存图片的路                              径，当我们需要加载图片的时候，将data-xxx赋值给src就可以实现按需进入按                                需加载。

          插件（lazyload）：

                         网址：https://github.com/jieyou/lazyload

1>引入lazyload.js文件
2>js父元素添加append  img， 然后改img src属性  <img data-original="xxx" src="loading.jpg"/>
3>("$yyy").lazyload();

                         ajax+触底加载+懒加载

21.上拉加载，下拉刷新

       网址：https://www.jq22.com/jquery-info6960 

22.页面目录结构

      多页面：多个html文件

      单页面：1个html文件

23.px自动转rem

    工具---->设置------>编译器配置------->px转rem大小

24.问题一：移动端，input键盘的右下角显示搜索2个字

                  解决：

              <form action="">
				   <input type="search" placeholder="搜索课程名称或关键词">
			  </form>

      问题二：如果我们在移动端点击了搜索，form表单有action就自动提交表单

                      解决：οnsubmit="return false"

	<form action="" id="goSearch" onsubmit="return false">
           <input type="search" placeholder="搜索课程名称或关键词">
    </form>

      问题三：如何收起键盘？

                    解决：document.activeElement.blur();

      问题四：元素被触摸时产生的半透明遮罩怎么去掉？(a、button、input、textarea）

                     解决： -webkit-tab-highlight-color:rgba(0,0,0,0);

     问题五：ios如何关闭首字母大写？

                     解决：autocapitaize='off'

            <input type="search" autocapitaize='off'>

     问题六： 禁止ios&安卓长按保存（下载）图片

                    解决：

img{
     -webkit-touch-callout: none;
 }

    问题七：禁止ios&安卓长按选中文字

                   解决： 

ul li,a,p,span{
	-webkit-user-select: none;
}

    问题八：url传值，如果有空格、汉字、特殊字符、就会转码

                  解决：

                        encodeURI  ==>  加码

                        decodeURI   ==>  解码 

25.pc+移动端 上线流程

      1>测试     右键，激活代码助手

      2>添加或者修改一些

             性能、广度

      3>

。