H5泛指: html css js 三个方向的提升 语义化标签 表单类型 过渡 转换 背景 盒子阴影 盒子边框圆角 本地存储 历史管理 拖拽事件 多媒体
属性选择器
[attr=value] 选中属性名称为attr且值完全等于value的元素
[attr=^value] 选中属性名称为attr且值以value开头的元素
[attr$=value] 选中属性名称为attr且值以value结尾的元素
[attr*=value] 选中属性名称为attr且值包含value的元素

伪类选择器
:first-child 选中第一个元素
:last-child 选中最后一个元素
:nth-child(N)选中第 N 个元素
:nth-last-child(N) 选中倒数第 N 个元素

伪类选择器
:before
:after

.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
//兼容低版本ie
.clearfix{zoom:1}
:before和:after主要用来清除浮动元素
另一种清除浮动的方法是 clear=both 用到这个属性最好是写行内样式 用法就是 在要清除浮动的元素最后添加一个空标签 在这个空标签中写一个行内样式 style="clear:both"
 
边框圆角
border-radius: 1px 1px 1px 1px 1px 1px 1px 1px 
前四个是X轴的半径  后四个是Y轴的半径
 设置正圆 border-radius： 50%；// 这样就是圆形
设置半圆： 
width: 100px;
height: 50px;
border:1px solid black;
background-color: blue;
border-radius: 100px 100px 0 0;
宽度是高度的一半
创建非对称圆角： 
border-radius： 1px 1px 1px 1px / 3px 3px 3px 2px; 
 
语义化标签
头部 <header></header>
导航<nav><nav>
主体<section></section>
侧边栏<aside></aside>
内容区域<article></article>
底部区域 <footer></footer>
遇到没见过的标签不要惊讶: 和div类似只是名字不同而已 (应该是语义化标签)
以上标签在 IE9一下会有兼容问题(会解析成行内元素)
解决办法: 使用 html5shiv.js 来处理不兼容的标签 下载地址 https://github.com/aFarkas/html5shiv
使用方法:(记住 必须在头部引入)
// 只有在IE低版本浏览器才不兼容，只有在IE低版本浏览器才需要去加载这个插件
// 条件注释 
<!--[if lt IE 9]>
     <script src="html5shiv.min.js"></script>
 <![endif]-->
<!--[if lte IE 8]>任何东西都可以 内容、标签都可以<![endif]-->
<!--10. 当满足条件的时候 注释内的内容才会去执行-->
<!--11. lte 小于等于 gte 大于等于 lt 小于 gt 大于-->
navigator.userAgent 可以查看当前使用的浏览器
 
表单元素类型
语法: <input type="value">
值描述
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
colorNew 定义拾色器。
dateNew 定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
monthNew 定义 month 和 year 控件（不带时区）。
numberNew 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
rangeNew 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
searchNew 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
telNew 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew 定义用于输入时间的控件（不带时区）。
urlNew 定义用于输入 URL 的字段。
weekNew 定义 week 和 year 控件（不带时区）。
 
 表单属性:
当你有name属性 浏览器会记录你之前的提交 当你再次输入的时候,会自动给你弹出提示(自动填充功能)
表单元素的属性-->
　　autocomplete 设置是否使用自动填充功能 off on 针对当前表单元素
　　required 必须属性 加上必填项 不加不去校验

表单的属性
　　autocomplete 设置是否使用自动填充功能 off on 针对当前整个表单
　　novalidate 是否去进行整个表单的校验
普通表单和密码表单的属性:
　　name: 设置当前控件的名称
　　value：设置当前控件的默认值
　　placeholder： 占位符[虚隐文字]【当前控件的一个提示信息】
　　id: 设置当前控件唯一标识的属性【身份证】
　　readonly： 设置当前控件为只读模式【当前控件只能看一看，不能输入】
　　disabled： 设置当前控件不能输入
　　maxlength： 设置当前控件最多能输入多少个字符
　　autofocus: 自动获取焦点
提交表单:<input type="submit" name="btn">
　　属性: action： 用来指定当前表单控件中的数据要交给哪个后台文件去处理
    　　method： 用来指定一种数据提交方式  method： get | post
　　   get: 这种方式提交数据的时候，会将数据在地址栏中显示【安全性差】
　　   post: 这种方式提交数据的时候，数据会以后台的形式提交给文件【安全】
单选控件: <input type="radio">
　　属性: checked： 设置当前控件默认选中
注意：
　　默认单选控件不能实现单选效果
　　只要给单选空件设置相同的name值即可。\
　多选控件: <input type="checkbox" checked>
　　多选控件中设置默认选中项的属性与单选控件一样
 
视差滚动
/*视差滚动：是元素以不同的速度滚动 形成的视觉上的层次感 */
 background-attachment: fixed; 固定背景,当你滚动到这个位置才能完全显示,能实现视差效果
想要实现视差滚动效果需要 jquery.stellar.js 这个插件
使用插件的基本配置 
    <div class="sound_bg" data-stellar-background-ratio="0.3"></div>
 需要设置  背景的元素为 background-attachment:fixed 
需要设置  背景的滚动的速度  data-stellar-background-ratio="0.3" 
 初始化
$(function(){
    $.stellar({
        horizontalScrolling:false,//配置横向滚动没有视差效果
        responsive:true //当页面尺寸发生改变 重新初始化插件
    });
});

参数解释: 

名称 说明
horizontalScrolling 和 verticalScrolling 该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true
responsive 该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements 该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false
data-stellar-ratio="0.5"(一般设置在标签上) 定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio 该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置
js的提升
document.querySelector()[0] 根据选择器获取【单个节点对象】。返回一个节点对象（ID记得加 # 类名加 .）
document.querySelectorAll() 根据标签的name值获取【一组节点对象】。返回一个伪数组
 
添加class 节点.classList.add('要添加的类名')
移除class  节点.classList.remove('要删除的类名')
切换类名(有就删除没有就添加)  节点.classList.toggle('类名')
监测类名是否存在  节点.classList.contains('要检查的类名')
以上分别对应jQuery的 addClass(添加类) removeClass(删除类)  toggleClass(切换类) hasClass(判断是否包含类)
 
自定义属性
非标准的属性,就是自定义属性 标准属性有 name class id title......等等都是标准属性
一般以 data- 开始的属性都可以认为是自定义属性
自定义属性一般是用来存储数据的属性
操作自定义属性应注意
获取自定义属性 节点.dataset.属性名称  或者 节点.dataset['属性名称']
　　注意: 属性名称如 data-user-name 要写成 userName 
 
设置和添加自定义属性 节点.dataset.自定义属性名称 = 属性值
 
获取节点对象  节点.getAttribute('属性名'); // 会返回标签的属性的值
设置节点对象  节点.setAttribute('属性名','值'); // 会修改或添加标签属性
删除节点对象  节点.removeAttribute('属性名'); // 会删除标签的属性
注意：自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。 不能直接通过元素点的方式直接获取或设置
案例: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        .tab{
            width: 400px;
            margin: 100px auto;
        }
        .nav{
            width: 100%;
            height: 50px;
        }
        .nav a{
            width: 25%;
            float: left;
            height: 100%;
            line-height: 50px;
            text-align: center;
            background: green;
            color: #fff;
            text-decoration: none;
        }
        .nav a.now{
            background: hotpink;
        }
        .content{
            width: 100%;
            height: 350px;
            overflow: hidden;
        }
        .content section{
            width: 100%;
            height: 100%;
            display: none;
        }
        .content section.active{
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <nav class="nav">
        <a href="javascript:;" data-content="china">国内新闻</a>
        <a href="javascript:;" data-content="other">国际新闻</a>
        <a href="javascript:;" data-content="sports">体育新闻</a>
        <a href="javascript:;" data-content="funny">娱乐新闻</a>
    </nav>
    <div class="content">
        <section id="sports">
            体育新闻123789
        </section>
        <section id="funny">
            娱乐新闻abc
        </section>
        <section id="other">
            国际新闻123456
        </section>
        <section id="china">
            国内新闻123
        </section>
    </div>
</div>
<script>
    (function(index){
        /*1. 当页面初始化的时候 根据索引去初始化默认显示的 页签和内容 */
        //index就是你想初始化的标签和内容的索引
        //console.log(index);
        /*1.1 选中索引所对应的页签*/
        var nav = document.querySelector('.nav');
        var aList = nav.querySelectorAll('a');
        /*需要初始化的A*/
        var initA = aList[index];
        /*加now类*/
        initA.classList.add('now');
        /*1.2 显示当前页签所对应的内容*/
        var initContentId = initA.dataset.content;
        var initContent = document.querySelector('#'+initContentId);
        initContent.classList.add('active');

        /*2. 点击页签对应的切换内容*/
        nav.onclick = function(e){
            /*获取当前点击的页签*/
            var currentA = e.target;
            /*判断是否已经选中*/
            if(currentA.classList.contains('now')) return;
            var oldA = document.querySelector('.nav a.now');
            /*2.1 选中索引所对应的页签 且 清除之前的选中*/
            currentA.classList.add('now');
            oldA.classList.remove('now');
            /*2.2 显示当前页签所对应的内容 且 隐藏之前的选中内容*/
            var currentContentId = currentA.dataset.content;
            var currentContent = document.querySelector('#'+currentContentId);
            currentContent.classList.add('active');

            var oldContentId = oldA.dataset.content;
            var oldContent = document.querySelector('#'+oldContentId);
            oldContent.classList.remove('active');
        }
    })(3);
</script>
</body>
</html>
View Code 
 
拖拽事件
语法:
<div class="box" draggable="true"></div>
draggable 开启拖拽事件
元素.addEventListener('事件名称',function(){//当前元素的拖拽事件});
拖拽元素
ondrag    应用于拖拽元素，整个拖拽过程都会调用
ondragstart应用于拖拽元素，当拖拽开始时调用
ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter应用于目标元素，当拖拽元素进入时调用
ondragover应用于目标元素，当停留在目标元素上时调用
ondrop应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave应用于目标元素，当鼠标离开目标元素时调用
var box = document.querySelector('.box');
var bigBox = document.querySelector('.bigBox');
/*绑定事件*/
/*当前元素的事件*/
box.addEventListener('drag',function(e){
    // e.preventDefault();
    //当前元素的拖拽事件
    console.log('drag');
});
box.addEventListener('dragstart',function(){
   //当前元素的拖拽开始事件
    console.log('dragstart');
});
box.addEventListener('dragend',function(){
    //当前元素的拖拽结束事件
    console.log('dragend');
});
box.addEventListener('dragleave',function(){
    //当前元素的拖拽离开本身事件
    console.log('dragleave');
});
/*目标元素的事件*/
bigBox.addEventListener('dragenter',function(e){
    // e.preventDefault();
    console.log('dragenter');//进入目标元素事件
});
bigBox.addEventListener('dragover',function(e){
    e.preventDefault();
    //console.log('dragover');//在目标元素上来回移动的事件
});
bigBox.addEventListener('drop',function(e){
    e.preventDefault();
    //不会触发的原因是：浏览器默认行为  禁止放下操作
　　 // 记得把上边俩个事件也要阻止浏览器默认行为 
    console.log('drop');//在目标元素上松开鼠标的事件
});
bigBox.addEventListener('dragleave',function(){
    console.log('dragleave');//离开目标元素的事件
});

 案例：

 
 
 
 
 
 
  
<!--1. 入口函数：-->
<!--1.1 页面加载完成  去写程序的一个入口-->
<!--1.2 jquery 入口函数  $(function(){})  只有html结构加载完毕触发 -->
<!--1.3 javascript 入口函数 window.onload = function(){} 需要所有的页面资源加载完毕-->
<!--2. 自调用函数 -->
<!-- (function(){})(); !function(){}();  -->

 

本地存储
在H5中，本地存储有两个，一个是永久存储localstorage，一个是会话存储sessionStorage
他们可以把一些数据存储在浏览器端
他们的应用场景大概是有，记住用户信息，记录阅读历史等等
他们和cookie的区别
区别 sessionStorage localstorage cookie
存储量 5M（具体看浏览器版本） 5M（具体看浏览器版本） 4KB
存放地点 浏览器 浏览器 浏览器
发送http请求时 不会带上 不会带上 会带上
生命周期 浏览器关闭后不存在 永久保留 过期日期
访问权限 同源网站 同源网站 同源网站
 
 
 
 
 
 
 
sessionStorage是会话存储，当关闭当前会话数据就会自动清除，一个会话就可以认为是发送一请求，服务器处理，响应到浏览器，关闭当前页面的一个完整的过程
localStorage是存储在浏览器物理空间中，如果你不手动的清除，理论上可以永久存储
 
语法：(两种语法完全一样) 【存储的数据只能是字符串】
存入：localStorage.setItem(key,value)
     sessionStorage.setItem(key,value)
获取：localStorage.getItem(key)
     sessionStorage.getItem(key) 
移除：localStorage.removeItem(key)
     sessionStorage.removeItem(key) 
清除: localStorage.clear()
     sessionStorage.clear()

 小知识： 在使用getItem是 最好在获取的时候 在后边加一个'[]' 这样就不会获取到null 

获取本地存储的字符串数据是 将其转换为数组，一开始的时候没有当前存储的历史数据 所以也没有对应的key，为了避免以后的错误，这里返回一个空值数组

      var iHistory = JSON.parse(localStorage.getItem('user_History') || '[]')