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.0CACHE:#需要缓存的资源文件css/style.cssImage/head.jpgNETWORK:#在线访问的资源文件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);