HTML5 基础篇（一）

来源：互联网发布：nginx防止ddos攻击编辑：程序博客网时间：2024/06/14 20:30

1，html新增的标签：

canvas 标签，画布，通过他可以在html上画出各种形状，图片..

html5代码做了简化：

1，文档声明：<!DOCTYPE html>

2，字符编码：<meta charset='utf-8'/>

3，默认css作为样式表，默认javascrip作为脚本语言，所以定义的时候，不需要声明了

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