本文介绍了HTML5的一些基本新特性，包括canvas标签用于在网页上绘制图形，简化后的文档声明和字符编码，以及footer和header标签提升SEO效果。此外，讲解了HTML5的离线存储功能，允许资源缓存到本地，以及web存储的localStorage和sessionStorage，它们在数据存储上的区别和使用方法。还提到了HTML5表单的新特性，如type=url和pattern属性的使用。
1，html新增的标签：
canvas 标签，画布，通过他可以在html上画出 各种形状，图片..
html5代码做了简化：
1，文档声明：<!DOCTYPE html>
2，字符编码：<meta charset='utf-8'/>
3，默认css作为样式表，默认javascrip作为脚本语言，所以定义的时候，不需要声明了
<script>
（1）画一个矩形
1，定义一个画布
2，开始绘画：通过javascript画出来的
（2）绘制线条
（3）画圆 已知条件：
圆心半径 顺时针 逆时针 圆周率
2，footer header
代替了php文件中公共的头部和尾部的加载
更利于seo优化，不重复抓取头部和尾部的信息
3，html5的离线存储：
相当于将服务器端的资料，同步(下载到本地),
这样当你离线后，会自动的从本地打开资源
之前，这一步是通过cookie来实现的，一个浏览器 300，每个cookie 不能大于4K，
html5 可以缓存5MB的资料
如何实现，在客户端的离线存储
1，设置apache 配置
（1）开启apache的cache-manifest功能
AddType text/cache-manifest cache.manifest
（2）在清单中告诉服务器，哪些资源需要缓存（缓存到客户端）
（3）将cache manifest和html文件关联起来
（2）web存储
浏览器（客户端）访问服务器端的时候，携带的数据，之前这些数据保存在cookie中，但是cookie保存的数据大小有限
html5的web存储
html5的web存储分为：
localStorage：
sessionStorage：
他们的区别在于：localStorage存储在客户端，大小没有限制，时间也没有限制
sessionStorage: 在当前访问的页面，一旦关闭这个页面，下次在访问的时候就会释放变量
唯一的区别就在于，sessionStorage保存的是当前访问的页面
1，localStorage.key() 获得的是 元素的下标，下标从0开始
localStorage.getItem() 通过下标获得对应的值
localStorage.length 获得元素的个数
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //获得有多少键
localStorage.key() //获得存储的键对应的内容
html5表单新特性：
type=url 需要输入的必须是带有htpp://协议的url地址
表单 form属性，每个input输入框增加form属性，它的值是 form表单的id属性值，这样的话，提交的时候，会把所有的form属性 = 表单的id的值的表单们
pattern属性：限制的是表单符合正则表达式，但是避免和系统内置的正则（type=url type=email）发生冲突
扫一扫
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
