html5+css3html5定义很多简便东西和宽松语法： 文档头： <!doctype html> 文档编码： <meta charset=”utf-8″> 单标记：可以不加结尾斜杠是什么？html5是建立在html4的基础上 只是多了一些新的标签和属性 css3是建立在css2的基础上 只是多了一些新的样式 不用管兼容了。因为根本也就不兼容
一些误区：1.html5写起来跟html4完全不一样? html4怎么写，html5就怎么写2.移动端写起来跟pc端完全不同？ pc端怎么写，移动端就怎么写，只是尺寸不同。3.移动端写起来比pc端难？ 移动端比pc端简单4.h5只能写移动端？ 移动端 游戏 WEBApp 原生 java object-c web 混合
html5<header></header> 页眉<nav></nav> 列表导航<hgroup></hgroup> 标题组<footer></footer> 页脚<section></section> 区域 布局<article></article> 文章<aside></aside> 侧边栏<figure></figure> 一般用于图片或视频，组合<figcaption></figcaption> 对图片说明<time></time> 时间<datalist></datalist> 数据列表 配合input来用 <input type=”text” list=”data”> <datalist id=”data”> <option></option> </datalist> <details></details> 简单描述<summary>概要</summary> <p>具体详细描述</p> open 加上可以打开 <dialog></dialog> 对话 <address></address> 地址<mark></mark> 标记<keygen> form配合来用，提供了一个秘钥 <progress></progress> 标签 header secation footer nav video audio canvas以上标签兼容不好： 兼容IE9+ IE8 7 6想兼容：需要引入一个插件：html5shiv.js https://en.wikipedia.org/wiki/HTML5_Shiv条件语句：<!–[if lt IE 9]><script src=”//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js”></script><![endif]–> html5shiv.js 本质创建一个一对header、footer等…
表单： type类型： 会自动校验，不是全部的，不完全 * 手机上自动切换键盘 email: 邮箱 url 地址 tel 电话 number 数字 range 滑块 search 搜索 color 颜色 date 日期 datetime month week 新增属性： autofocus 自动聚焦 autocomplete 自动补全 off placeholder 文字提示 required 必填项 pattern 正则验证 novalidate 关闭校验(加到form身上) formaction 给submit加提交网址 \w+@[a-z0-9-]+(\.[a-z]{2,6}){1,2}
本地存储 cookie localStorage cookie localStorage 生存周期 有 没有 操作 难 简单 容量 4KB 5MB 提交 会 不会 localStorage.xxx = xxx; 设置 localStorage.xxx; 获取 delete localStorage.xxx; 删除 兼容到ie7 delete 是删除属性的var json={
name:’abc’,
age:30
};
delete json.name;
自定义 属性（新的设置方法）data-xxx=”xxx”;向后兼容obj.dataset.xxx;可以遍历性能低：oBtn.dataset.index–oBtn.index多选择了一个属性导致它的性能偏低例子：<script>document.addEventListener(‘DOMContentLoaded’,function(){ var oBtn = document.getElementsByTagName(‘input’)[0]; alert(oBtn.dataset.index); oBtn.dataset.a = “5”;设置一个自定义属性 遍历
for(var name in oBtn.dataset){
alert(name+’==’+oBtn.dataset[name]); }},false);</script><input type=”button” value=”abc” data-index=”a” />
js里面新增东西： 选择元素： 选择出来一组元素: document.querySelectorAll(‘#div1’); 选择出来一个元素 document.querySelector(‘#div1’); 属性操作: a). . b). [] c). attribute() 自定义属性： 用attribute绝对靠谱 现在的自定义属性，都是随便写的，为了向后兼容(html6,html100)，占用了呢？ data- 自定义属性 获取： obj.dataset.xxx data-index-show -> obj.dataset.indexShow 设置： this.dataset.indexOne=1; <input data-index-one=”1″> 选项卡： aBtn[i].index=i; aBtn[i].dataset.index=i; class: obj.classList 所有的class obj.add(sClass) 添加class obj.remove(sClass) 删除class obj.contains(sClass) 判断是否有class
obj.toggle(sClass) 切换class//先添加active，在删除，在添加…
oDiv.classList.toggle(‘active’);
app:应用 原生app（native app）： ios oc（object-c） android java 缺点：至少需要两个团队，耗费资金，开发周期长 优点：性能高(大型3D游戏)、必须可以使用麦克风、摄像头 hybrid app: 混合app 本质也还是一个网页，可以调用一些接口 web app: 本质html5网页，页面，外层包个壳子 优点：跨平台、团队不需要很多人 缺点：性能凑合、不能去调用底层东西
