html5

html5

语言标签

header	header标记一般放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或区块的标题、简介等信息。
footer	footer标记一般放置在页面的底部，或者页面中某个区块元素的底部。
nav	nav标记表示页面的导航，可以通过导航连接到网站的其它页面，或当前页面的其它部分。
aside	aside包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。
article	article标记表示包含于一个文档、页面、或网站中的一段独立的内容。它能够独立的被发布或重新使用。
section	section表示一个主题性的内容分组，通常包含一个头部（header），可能还会有一个尾部（footer）
figure	figure表示页面中的插图，通常结合figcaption一起使用。
time	time表示一个日期、时间，或日期和时间值。

智能表单

HTML5为了方便排版，可以使Form中的表单元素脱离Form的嵌套

<form action="" method="post" id="register" >
</form>
<input  type="text" name="user" form="register" />
<select name="year" form="register" >
    <option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>

新增input表单元素类型

Type=”email”	限制用户输入必须为Email类型
Type=”url”	限制用户输入必须为URL类型
Type=”date”	限制用户输入必须为日期类型
Type=”time”	限制用户输入必须为时间类型
Type=”month”	限制用户输入必须为月类型
Type=”week”	限制用户输入必须为周类型
Type=”number”	限制用户输入必须为数字类型
Type=”range”	产生一个滑动条的表单
Type=”search”	产生一个搜索意义的表单
Type=”color”	生成一个颜色选择表单

新增表单元素属性

属性	值	说明
Required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
Autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
Pattern	正则表达式	输入的内容必须匹配到指定正则

API

Canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。

选择器API

querySelector方法获取满足第一个条件的DOM元素

querySelectorAll方法获取满足条件的所有DOM元素

    //querySelector只能获取第一个满足条件的元素,语法和jQuery相同
        var mydivs = document.querySelectorAll('[class="d1"]')    //类名
        var mydivs = document.querySelectorAll('#dl')             //id名
        var mydivs = document.querySelectorAll('div')           //标签

Web存储

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储

• sessionStorage - 针对一个 session(会话) 的数据存储

  不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);

• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

localStorage存储**

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 存储
localStorage.sitename = "菜鸟教程";        //设置建及值
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;  //读取值

sessionStorage存储

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

离线应用程序原理是建立一个URL列表清单，当应用和服务器建立联系时，浏览器将在本地缓存列表清单中的资源文件；当离线时，浏览器将调用缓存来支撑Web应用离线缓存机制的关键是Cache Manifest文件

缓存文件是一个文本文件，后缀名是manifest

CACHE MANIFEST
#version  0.0.0
CACHE:
#需要缓存的资源文件
css/style.css
Image/head.jpg
NETWORK:
#在线访问的资源文件
Index.jsp

FileReader对象

文件读取对象常用方法

readAsDataURL：读取图片文件

readAsText：读取文本文件

常用的事件

事件名	描述
onloadstart	当读取数据开始时触发
onprogress	当正在读取数据时触发
onerror	当读取数据失败时触发
onload	当数据读取成功时触发
onloadend	当数据读取结束时触发，不论是否成功

var  reader = new FileReader();
reader.onload = function(e){
    //通过e.target.result获取文件内容
}
reader.readAsDataURL(file);
//reader.readAsText(file);

使用FileReader实现前端图片预览
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">


var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('img');
fileInput.addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function () {
        previewImg.src = reader.result;
    }, false);
    reader.readAsDataURL(file);
}, false);