HTML5 使用小结

1.html5新增的常用元素

　　(a) <article.../>代表独立完整的一遍文章

　　(b)<section.../>对页面内容进行分块

　　(c)<nav.../>专门用于定义页面上的导航条

　　(d)<aside.../>定义附属信息

　　(e)<header.../>定义文章头部信息

　　(f)<footer.../>'脚注'

　　(g)<hgroup.../>含<h1.../>到<h6.../>

　　(h)<figure.../>图片区域

　　(t)<figcaption.../>图片区域的标题

　　(o)<mark>重点关注的内容

　　(p)<time>引入时间

　　HTML语义化标签的好处：

　　第一，语义化的标签更容易被搜索引擎识别，这样可以大大提升搜索引擎的识别读取，提升网站的排名。

　第二，方便自己，方便别人二次修改，因为什么地方是什么，放的什么东东，看标签结构就看得清清楚楚了。这也算是一种标准规范

2.HTML5语法的变化

（1）标签不再区分大小写

（2）元素可以省略结束标签

　　不允许写结束标记的标签有： area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

　　可以省略结束标记的标签有： li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

　　可以省略全部标记的标签有： html、head、body、colgroup、tbody。

　　“不允许写结束标记的标签”是指，不允许使用开始标记与结束标记将标签括起来的形式，只允许使用“<标签/>”的形式进行书写。

（3）允许省略属性值

　　checked,readonly,disabled, selected, defer, ismap,noherf,noshade,nowrap,mltiple,noresize

（4）允许属性值不使用引号

　　<img src=1.jpg> OK的

（5）DOCTYPE声明

　　<!DOCTYPE html>

（6）指定字符编码

　　在 HTML4 中，使用 meta 标签的形式指定文件中的字符编码，如下所示：

　　在 HTML5 中，可以使用对标签直接追加 charset 属性的方式来指定字符编码，如下所示：

　　　　两种方法都有效，可以继续使用前面那种方式（通过 content 属性来指定），但是不能同时混合使用两种方式，在以前的 HTML代码中可能会存在下面代码所示的标记方式，但在　　HTML5 　　中，这种字符编码方式将被认为是错误的，这一点请注意：

　　从 HTML5 开始，对于文件的字符编码推荐使用 UTF-8。

3.HTML5的表单元素

（1）可指定type属性,有 text , password, hidden, radio,checkbox, image, file, submit, reset,button

（2）form = "form_id"表单控制属性，所有表单控件都必须包含在<form.../>内部，没放进去可指定form

（3）formaction

　　解决页面中一个表单，包含两个以上的提交按钮，不同按钮提交到不同的action

（4）formmethod post/get

formtarget 改变表单target属性 autofocus: 聚焦

4.HTML5新特性（兼容性，实用性，互通性和通用访问性）

（1）新增的语义化标签

（2）嵌入音频，视频

（3）本地存储 (localStorage , sessionStorage)

　　HTML5 本地存储和cookies区别：

　　cookies 缺点：

　　　　（1）http请求头会带上data，在服务器端和客户端进行传递（不安全）

　　　　（2）大小不能超过4k，存储信息非常有限

　　　　（3）会造成主 domian 的污染

HTML5 数据存储在本地，不会传递到服务器，是一种关系型存储。

localStorage 是永久存储， 5M大小，需要手动清除。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。不是持久化的本地存储，仅是会话级别的存储。

　　常用API：

　 .getItem(key)

.setItem(key,value)

.removeItem(key)

　 .clear() 清除所有的key和value

在使用时应注意：判断浏览器是否支持，必要的异常处理，避免放入敏感信息， key的唯一性

限制：子域之间不能共享数据，过期的控制，超过大小应用算法淘汰旧的， server端获取时需要发post或get

使用场景：1.减少网络传输 2.弱网环境，高延迟，低带宽，放本地（eg. 记住用户的菜单选择）

（4）交互式文档

(5) Canvas 绘制图形

（6）控制SVG图形做动画