H5学习

• HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核;

• app(applicatin):应用;

• native app:原生的app

• sadsadsadad

• 单标签可以省略结尾标记; 比如input和br, /可以不写;

新增的标签

header,nav,footer,section,video,audio···

功能性标签:video,audio,canvas···

结构标签:header,nav,footer,section···

• 页眉;不兼容IE8—;
• 页脚;不兼容IE8—;
• 标题的组合; 不兼容IE9—;
• 区块;不兼容IE8—;
• 文章;不兼容IE8—;
• 侧边栏;不兼容IE8—;
  • 放到article之外,section之内,一般表达(推荐文章,热门评论,友情链接,广告位);
  • 放到article之内,一般表达跟此文章相关的东西(相关文章,相关人物介绍,引用连接等);
• 用于对元素进行组合,一般用于图片或者视频;

•  figure的子元素,用于对figure的内容进行说明,一般配合figure使用;

•  用来表现时间或者日期;

• 选项(数据)列表,与input元素配合使用,来定义input可能的值;一般配合input使用,里面放各种option选项;

• 描述;展开状态：open,
• 简介;和detail配合使用;

• 对话框;默认隐藏,需要现实的话加open;

• 地址;

•  标记;

•  进度条;

•  进度条;IE完全不兼容;

如果想让标签支持IE低版本,需要引入html5shiv.js,下载地址:https://en.wikipedia.org/wiki/HTML5_shiv

JS新增选择器

document.querySelectorAll('.box ul li input');//返回一组元素; 注意前面要加选择符

document.querySelector('input');//返回一个元素;其实就是queryselectorall加完下标0的结果;注意前面要加选择符

自定义属性规范

实例:index就是自定义属性;之前没有规范,随便写;
    <input type="button" index="1" />

规范:以data-开头;获取和设置可以用getAttribute和setAttribute;
    <input type="button" index="1" /> --->  <input type="button" data-index="1" /> 

好处：
    使用方便：
        obj.dataset.index = 1;//设置;
        alert(obj.dataset.index);//获取自定义属性;

    方便循环：用for in循环,obj.dataset

class操作

obj.classList.add(className);添加className;

obj.classList.remove(className);删除className;

obj.classList.contains(clasName);判断有没有className,有的话返回true,否则返回false;

obj.classList.toggle(clasName);判断有没有className,有的话删除,没有的话增加;

本地存储

cookie:缺点：
        容量小,大约4KB;
        需要放到服务器环境;
        有过期时间;

HTML5本地存储: localStORage;仅仅不兼容IE6;
    没有过期时间;
    容量大(5MB);

localStroage三个操作:F12-->RESOURCES--->LOCALSTORAGE
    存储:
        方法1.localStorage.a = 12;
        方法2. localStorage.setItem(name,value);
    获取:
        方法1.alert(localstorage.a);
        方法2.alert(localstorage.getItem(name));
    删除:
        方法1.datele localstorage.a;    
        方法2.localStorage.removeItem(name);

    删除多条localstorage：
        方法1.for(var name in localstroage){
            delete localstroage[name];
        }

        方法2.localstorage.clear();
    以上方法可以混合使用,但是不建议.

共同点:
    都不安全;不能跨域;不能夸浏览器;

sessionstroage

本地存储,和localstorage的区别就是关闭浏览器会消失,其他操作完全一样;

localstorage和sessionstorage和cookie的用法一样,能用cookie的地方都可以用localstorage和sessionstorage;