设计目的为了在移动设备上支持多媒体。
文档声明
<!DOCTYPE html>
浏览器支持
ie8以下的浏览器不支持
解决方案：使用htmlshiv垫片包。
html5新标签
nav
nav标签定义导航链接部分
之前写法
<div class = 'nav'>
<a href ="#">1</a>
<a href ="#">2</a>
<a href ="#">3</a>
<a href ="#">4</a>
<a href ="#">5</a>
</div>
nav表示法
<nav>
<a href ="#">1</a>
<a href ="#">2</a>
<a href ="#">3</a>
<a href ="#">4</a>
<a href ="#">5</a>
</nav>
header
header标签，定义网页的头部区域。它是作为网页的头部介绍内容或者是导航链接栏的容器。在一个文档中，可以定义多个header标签。
注意：header标签不能放在footer、address或另一个header中
<header>
<div class = 'container'>
<a href = "#">logo</a>
<nav>
<a href ="#">首页</a>
<a href ="#">沸点</a>
<a href ="#">话题</a>
<a href ="#">小册</a>
<a href ="#">活动</a>
</nav>
</div>
</header>
main
定义文档的主要内容，一个文档中只能有一个。
以前写法
<div class = 'content'>
主要内容
</div>
<main>
主要内容
</main>
aside
定义article标签外的内容，aside的内容应该与附近的内容相关。
section
定义文档的某个区域，如章节、头部、顶部、其他区域
article
定义页面独立的内容，必须独立于文档的其余部分。
应用在
- 论坛帖子
- 博客文档
- 新闻故事
- 评论
figure
定义独立的流内容(图像、图标、照片、代码等)，应与主内容有关，同时元素的位置相对于主内容是独立的，如果被删除，则不对文档流产生影响。
footer
定义文档的脚部区域
其他语义化标签
mark
高亮文本
<p>
<mark>高亮文本</mark>
</p>
progress
显示进度
<progress max="100" value="70"></progress>
address
个人或某个组织的联系信息
智能表单
html5新增了新的表单元素
- datalist
- ke'gen
- output
datalist
该元素规定输入域的选项列表，规定了form或input应该拥有自动完成功能
注意：input中的list必须和datalist中的id关联。
<form action="">
<input type="text" list="word">
<input type="submit">
<datalist id='word'>
<option value="hello"></option>
<option value="hello 1"></option>
<option value="hello w"></option>
<option value="hello d"></option>
</datalist>
</form>
kegen(了解)
提供了一种验证用户的可靠方法，当提交表单时，会生成两个键，一个私钥，一个公钥，私钥存储与客户端，公钥则被发送给服务器。公钥可用于之后验证用户的客户端证书。
output
用于不同类型的输出，如计算或脚本输出。
新增表单属性
autocomplete
记录输入记录，自动完成
<form action="" autocomplete="on">
<input type="text">
<input type="submit">
</form>
novalidate
是否校验
新的input类型
color
<input type="color">
date
<input type="date">
<form action="">
<input type="email">
<input type="submit">
</form>
search
<form action="">
<input type="search">
<input type="submit">
</form>
新的input属性
autofocus
自动获得焦点
formaction
修改提交地址
<input type="submit" formaction="">
HTML5中的API
新的操作方法
获取元素的方法
获取单个
document.querySelector('选择器');
获取多个
document.querySelectorAll('选择器');
此处的选择器与css中的一致，就是说css中的所有选择器都可以。
类的操作
<div class="box"></div>
<script>
var oDiv = document.querySelector('.box');
console.log(oDiv.classList);
//添加
oDiv.classList.add('list');
//删除
oDiv.classList.remove('box');
//校验
oDiv.classList.contains('box');
//切换
oDiv.classList.toggle('box');
</script>
自定义属性
我们可以通过data-自定义属性，来给元素添加自定义的属性名。一旦添加完成之后，可以通过js来获取以及设置自定义属性，如data-test
获取自定义的属性名
oDiv.dataset.test
设置自定义属性
oDiv.dataset.自定义属性名 = 值
文件读取
读取文件，首先得上传文件
<input type = 'file'>
其次，通过FileReader读取文件。读取文件后，会将结果存储在result属性中，而不是直接返回。
FileReader常用的方法
FileReader提供的事件
网络状态监测
window.navigator.onLine;
地图定位
百度地图定位
可以用第三方平台，百度地图开放平台
本地存储
json
各大网站交换数据的标准格式
特点：
- 书写简单，一目了然
- 符合js语法
{
"key1":"value",
"key2":"value2"
}
规定
- 复杂类型的值只能是数组或对象，不能是函数、正则、日期
- 基本数据类型的值只有四种：字符串、数值、布尔值、null
- 字符串必须使用双引号表示，不能使用单引号
- key必须放在引号里
- 数组或对象最后一个成员后不能加逗号
var myData = {
"data":{
"name":"john",
"age":25,
"friends":["huahua","job"]
}
}
把JSON转换成JSON字符串
var jsonStr = JSON.stringify(myData);
把JSON字符串转换成JSON
JSON.parse(jsonStr);
localStorage
比cookie更好的本地存储方式
特点
- 永久存储
- 多窗口共享
- 容量大约20M
常用方法
sessionStorage
特点
- 生命周期为关闭当前窗口
- 可以在同一个窗口下访问
- 数据大小为5M左右
常用方法
与localStorage一样
