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;