HTML5基础

来源：互联网发布：软件构件图编辑：程序博客网时间：2024/05/16 05:39

HTML5
背景：
html标准在1999年12月发布的html4.01后，后继的html5和其他标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做web hypertext Application Technology Working Group（web超文本应用技术工作组（WHATWG），致力于web表单和应用程序，而w3c（world wide web consortiun万维网联盟）专注于xhtml2.0）在2006年，双方决定合作创建新版本html。

新增功能：
canvas标签
header和footer标签
video和audio标签
离线存储功能

canvas标签详解：
CanvasRenderingContext2D对象是指向2d渲染环境的引用，通过这个对象提供的方法，可以在画布上画各种图形
绘制一条线：
绘制当前路径边框 stroke()
绘制一个三角形：
填充当前路径 fill();
cxt.beginPath();
cxt.moveTo(30,90);
cxt.lineTo(30,190);
cxt.lineTo(70,190);
cxt.closePath();
cxt.fill();
绘制一个矩形：
画填充矩形 fillRect(x, y, weight, height) ；
画出矩形边框 strokeRect(x, y, width, height)
绘制一个圆：
画圆形边框和填充圆形arc()
cxt.beginPath();
cxt.arc(270,40,20,0,360,true);
//闭合园
cxt.closePath();
cxt.stroke();
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(370,40,20,0,360,true);
//闭合园
cxt.closePath();
cxt.fill();
添加一个图像：
画图片 drawImage(Image,x,y,width,height);
绘制一个字符串：
画字符串 fillText(str, x, y)
设置字体，字体颜色，大小 cxt.fillStyle=“” cxt.font=“大小字体”
header和footer标签详解：
代替php中的include作用，极大的提高了seo的效率
video标签详解：
<video src="" controls="" width="" height="" preload="" autoplay=""/>
服务器离线缓存详解：
apache配置：
在htconfig里面进行配置，AddType text/cache-manifest cache.manifest
在同级目录下编写cache.manifest文件：
CACHE MANIFEST
test.html
php.jpg
在html文件中的html标签添加属性：
<html manifest="cache.manifest">
html5表单新增：
form外input提交：
给form标签定义一个id 然后在想要实现外部提交的input标签添加form属性属性值为form的id
required属性：
必填
autofocus属性:
光标初始位置
pattern属性:
定义正则
placeholder属性：
占位符，可以带默认值并且不提交
email、url、date、time、number、range、color、searche、month、week属性值标签
web storage：
localStorage：
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
sessionStorage：
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
定义方法：
localStorage.name='';
localStorage['age']='';
localStorage.setItem('gender','female');
删除：
localStorage.removeItem('name');
localStorage.clear();
查询：
localStorage.name;
localStorage['age'];
localStorage.getItem('gender');
长度：
localStorage.length;
键值：
localStorage.key(2);