1 万维网
- 创建者——蒂姆.伯纳斯.李
- 是web领域中最权威最有影响力的国际中立性技术标准机构
- 到目前为止经历了3次变革（HTML4.01、XHTML2.0，HTML5）
2 认识HTML5
- HTML5的牵头羊并不是w3c（是有各大浏览器厂商自发组织的WHATWG）
- Hyper Text Markup language5
- HTML5简称H5
3 HTML5发展历程
- HTML最初的版本是2.0（之所以没有1.0是因为最初的版本只有二十来个标签元素）
- HTML5是HTML最新的版本，同时也是一项新的web应用开发标准
- HTML5是第一个将web作为应用开发平台的HTML语言
- HTML5新引入了一些具有语义化的标签
- HTML5在原有的基础上使代码变得更加简洁
- 对于部分标签不支持IE低版本浏览器,开发人员留下了一个后门(hack)
<!--[if let IE 8]>
<script>
document.createElement("header");
document.createElement("nav");
</script>
<![endif]>
注意!
这些标签会被解析成行内元素(需要自动转换成块状元素)
4 HTML5新增标签
- 表单元素属性
- 表单事件
- 多媒体(音频/视频)
5 DOM拓展
5.1元素获取
- getElementsByClassName 通过类名来获取
2)querySelect(css选择器) 返回满足条件的第一个元素
3)querySelectAll(css选择器)返回满足条件的组成的数组
注意! 以上选择器只能在现代浏览器中使用
5.2 类名操作
- classList.add() 添加某个类
- classLIst.remove() 删除某个类
- classList.toggle() 切换类,自动切换
- classList.contains() 判断是否有某个类,真返回TRUE,假返回FALSE
5.3 自定义属性
- 自定义属性需要一data-开头(element.dataset属性获取该元素的自定义属性)
- dataset后面在继续打点调用某个具体的自定义属性
data-career 使用:元素.dataset.career
data-her-name 使用:元素.dataset.herName
6 新增API
6.1 元素拖拽
1)拖拽 draggable = "true" //表示元素可以拖拽(本尊是一个半透明的复制品)
2)任何元素都可以作为目标元素
3)拖拽可以设置相应的事件
4)拖拽元素中可以传入数据
6.2 地理位置
1)获取用户的地理位置
window.navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)
2)重复获取用户的地理信息
window.navigator.geolocation.watchPosition()
7 web存储
web存储就是在客户端进行存储(之前客户端的储存是通过cookie实现)
1 cookie的优点
- 兼容性 (JavaScript出现就已经有cookie)
- 存储的数据量大
- 不影响网速
2 cookie的缺点
- 兼容性不好
- 存储数据量小
7.1 存储分本地存储和会话存储
1 本地存储：localStorage
- 生命周期是永久 除非是手动删除
- 可以在多个窗口可以共享数据
2** 会话存储：seccionstorage**
- 关闭当前窗口就失效
- 不能在多个窗口共享数据
3 存取本地的数据
- 存:
localStorage.key = value;
localStorage.setitem(key,value);
- 取;
localStorage.key
localStorage.setitem(key);
- 删除:
localStorage.removeltem(key);
- 清除本地储存:
localStorage.clear();
- 通过索引获取键key:
localStorage.key(n);//n表示索引值
localStorage.length //表示存储的数目
8 网络状态
9 应用程序缓存
—10/8更