HTML5 基础篇（一）

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）发生冲突