论H5的一些新特性

兼容

• h5的兼容写法

• document.cleateElement创建对应的标签,但是创建出来的标签是行内元素,需要手动转成块级元素
• 使用兼容框架 htmlshiv

<!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

getcomputedstyle用法

• obj.style
  • 使用方法是obj.style.attr
  • style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
  • 用内嵌式和外链式书写的样式无法获取到
• currentStyle
  • currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。
• style和.getComputedStyle的区别
  • 1,只读与可写
    • getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写
  • 2,获取的对象范围
    • getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会许多属性都显示出来）
    • element.style只能获取元素style属性中的CSS样式(即行内)。
• window.getComputedStyle(window可以省略)
  • getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

---

让任何盒子处于容器的中间

body:hover div.demo {
    /*先定位移动50%*/
    left: 50%;
    top: 50%;
    /*再返回-50%=自己的一半*/
    transform: translate(-50%,-50%);
}

伪元素内部不支持再书写标签(::before, ::after),写了会当作文本解析

定义步骤动画

@keyframes autoPlay{  
  from{}
  to{}
}

animation: autoPaly all 1s 2s linear steps(5) forwards

弹性布局(display:flex)

• 开启弹性布局
  • 在父盒子上开启:display:flex
• 主轴排列方式 justify-content
• 副轴排列方式

  • align-items (副轴上的 内容排布方式 一行的时候 使用)

    • center 中心
    • flex-end 底部
    • flex-start 开始位置

  • align-content (副轴上的 内容排布方式 多行的时候 才会生效)

    • flex-start： 各行向弹性盒容器的起始位置堆叠。
    • flex-end： 各行向弹性盒容器的结束位置堆叠。
    • center： 各行向弹性盒容器的中间位置堆叠。
    • space-between： 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。
    • space-around： 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。
    • stretch： 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。

justify-content: space-around;    //主轴居中 align-content: center;    

• flex-direction 更换主轴
• flex-wrap 开启换行

---

盒模型

• box-sizing:border-box(设置的宽高就是整体宽高)
• box-sizing:content-box(设置的宽高就是内容宽高)

---

background属性

• <' background-origin '>： 指定对象的背景图像显示的原点。

  • padding-box 背景图像相对于内边距框来定位。
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

• background-clip 属性规定背景的绘制区域。

  • border-box 背景被裁剪到边框盒。
  • padding-box 背景被裁剪到内边距框。
  • content-box 背景被裁剪到内容框。

---

H5新API

请求全屏

- (兼容性差) ele.requestFullScreen();

文件读取

reader对象

onchange事件

• onchange 内容发生改变的时候 调用

拖拽事件

• 在拖动目标上触发事件 (源元素):

  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发(拖动一直触发)
  • ondragend - 用户完成元素拖动后触发

• 释放目标时触发的事件:

  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

本地存储

• sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• 语法
  • setItem (设置保存(键值对的形式))
  • getItem (获取(根据key))
  • removeItem (删除(根据key))
  • clear (全部删除)

web storage和cookie的区别

• Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
• Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
• 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
• 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

---

sessionStorage 、localStorage 和 cookie 之间的区别

• 共同点：都是保存在浏览器端，且同源的。
• 区别：
  • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
  • 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
  • 存储大小限制也不同
    • cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
    • sessionStorage和localStorage
    • 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  • 数据有效期不同，
    • sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
    • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
    • cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  • 作用域不同
    • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
    • localStorage 在所有同源窗口中都是共享的；
    • cookie也是在所有同源窗口中都是共享的。
• Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
• Web Storage 的 api 接口使用更方便。

---

地图定位

getCurrentPosition(获取当前的位置信息)

播放器的制作

(一些API,更多API查资料)

• 创建video标签<video></video>
  -视频播放元素
  video.src
• 视频路径
  video.src="movies/movie04.ogg";
• 播放
  video.play();
• 暂停
  video.pause();
• 全屏
  video.requestFullscreen
• 视频当前播放时间 video.currentTime
• 视频总时间 video.duration

---

移动web

• 移动页面适配方案

  • 定高&宽度自适应
    • 宽度使用百分比进行设置
    • 高度直接写死
    • 总高度使用内容撑开
  • 响应式
  • rem

• 添加视口属性 meta:vp

• touch事件(只支持移动端)

  • 移动开始touchstart

    document.body.addEventListener('touchstart',function (event){}
    

  • 移动中touchmove

    document.body.addEventListener('touchmove',function (event){}
    

  • 移动结束touchend

    document.body.addEventListener('touchend',function (event){}
    

• 移动端的onclick事件

  • 移动端click事件的延迟调用300毫秒,而新版本的谷歌去掉了click的延迟时间,所以我们在移动端一般不使用click事件,使用封装的tap事件

• zepto库的使用

  • 简介:
    • 语法跟jq一致
    • 分为多个模块
      • 需要按需求导入指定的模块
      • 目的是降低传输量
    • 相比于jq
      • 一个文件所有功能,传输量较大
      • 移动端 可以使用zepto

• 响应式布局

  • 1,会根据设备(屏幕尺寸)的改变而改变布局效果
  • 2,获取屏幕的尺寸 修改元素的显示即可
  • 3,流行开来是依托于 CSS3中的 媒体查询技术

@media screen and (max-width:375px){
    css代码
}

---

• 栅格系统

  • 框架中:栅格实现的底层原理还是使用的浮动

• 栅格系统的容器类:

  • 1,使用栅格一定要添加容器类和.row

  • 2,框架中 容器类给我们清除了浮动,设置了一些左右padding 所以我们使用时需要注意

  • 3,.contain 和 .container-fluid 的区别

    • .contain 在屏幕够大的时候固定宽度1170px ,左右有padding挤压

    • .container-fluid 宽度100%,自适应屏幕宽度

• 注意点:

  • 1,使用bootstrap前端框架的时候 如果发现设置了每个元素没有生效的时候,要善于 审查元素 (框架会默认给我们添加很多属性)

• 修改bootstrap框架的默认定制

  • 1.修改栅格系统的一行显示量 默认是12 可随意修改

---

• rem和em
  • 什么是em?
    • em 就是 根据文字的大小来的
      • 16px 1em =16
      • 20px 1em =20
    • em 来实现布局 在国外较为流行
    • 国内主要还是用px
      • em 如果不设置当前元素的字体大小 会使用继承来的大小
      • 如果设置了 用自己的字体大小
      • 如果要使用em 建议 页面中的 字体尺寸 不要 设置太多
  • 什么是rem?
    • rem 也是根据字体的大小来进行的 设置
      • 修改元素内部的字体大小 不会影响元素的尺寸
      • rem的字体大小不是使用元素自身,使用的是html根节点的字体大小,所以我们设置元素自身的字体大小不会影响rem的计算结果

---

• Less(考拉)语法

  • @import 关键字的使用

  • 在一个项目开发中,我们会写很多css文件,但是过多的文件会影响浏览器的请求效率,

  • 所以我们在开发中使用less编译器,可将多个less合并到一个index.css文件中.(通过@import关键字)