html5开始

来源：互联网发布：win10开机速度优化编辑：程序博客网时间：2024/06/07 03:33

html5开始

1. <canvas>标签

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

<canvasid='myCanvas'width='500px'height='300px'style='border:1px solid #9F0'>你的浏览器不支持</canvas>

</body>

//开始画图

//1.得到画布

var canvas=document.getElementById('myCanvas');

//2.得到画壁

var ctx=canvas.getContext('2d');

//挥之颜色

/*ctx.fillStyle='#cccaaa';

//开始填充矩形

ctx.fillRect(10,10,170,50);

ctx.moveTo(10,10);

ctx.lineTo(150,150);

ctx.lineTo(200,30);

ctx.stroke();*/

//开始画圆

ctx.beginPath();

ctx.fillStyle='#C9F';

ctx.arc(50,50,20,0,Math.PI*1.5);

ctx.closePath();

ctx.fill();

</script>

</html>

2. 增加音频和视频 <video> <audio>标签

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

<videosrc='Surface.mp4'width='500px'height='300px'controls='controls'preloadloop='yes'/>

</body>

</html>

3. 绘制渐变

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

<canvasid='myCanvas'width='500px'height='300px'style='border:1px solid #9F0'>你的浏览器不支持</canvas>

</body>

//开始画图

//1.得到画布

var canvas=document.getElementById('myCanvas');

//2.得到画壁

var ctx=canvas.getContext('2d');

//grd作为fillStyle的值

var grd=ctx.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

ctx.fillStyle=grd;

ctx.fillRect(0,0,175,50);

</script>

</html>

4. 离线存储方式

（1）通过apache的配置来实现（http.conf文件中修改）

① AddType application/x-compress .Z

② AddType application/x-gzip .gz .tgz

③ AddType text/cache-manifestcache.manifest

（2） localStorage和 sessionStorage

3种设置本地存储的方法：

　　localStorage.t1 = ‘php’;

　　localStorage[‘t1’] = ‘cache’;

　　localStorage.setItem(‘t1’,’php’);

3种访问本地存储的方法：

　　localStorage.t1;

　　localStorage[‘t1’];

　　localStorage.getItem(‘t1’);

localStorage.getItem(localStorage.key(0))

sessionStorage与localStorage的区别

localStorage ：存储在客户端，大小和时间都没有限制

sessionStorage：在当前访问的页面，一旦关闭这个页面，下次在访问的时候就会释放变量的唯一区别就在于，sessionStorage保存的是当前访问的页面

localStorage的例子：

localStorage.html文件

<!DOCTYPEhtml>

<htmlmanifest='cache.manifest'>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

</body>

if(window.localStorage){

//alert(localStorage.key(0));

//alert(localStorage.length);

//alert(localStorage.name);

//alert(localStorage['age']);

//alert(localStorage.setItem('gender'));

for(vari=0;i<localStorage.length;i++){

document.write(localStorage.key(i));}

} else{

alert('no');

}

</script>

</html>

GetData.html文件

<!DOCTYPEhtml>

<htmlmanifest='cache.manifest'>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

</body>

if(window.localStorage){

//alert(localStorage.key(0));

//alert(localStorage.length);

//alert(localStorage.name);

//alert(localStorage['age']);

//alert(localStorage.setItem('gender'));

for(vari=0;i<localStorage.length;i++){

document.write(localStorage.key(i));}

} else{

alert('no');

}

</script>

</html>

sessionStorage的例子：

sessionStorage.html文件

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

</body>

if(window.sessionStorage){

//alert('yes');

sessionStorage.name='admin';

sessionStorage.age='23';

}else{

alert('no');

}

</script>

</html>

Session.html文件

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

</body>

if(window.sessionStorage){

//alert('yes');

alert(sessionStorage.name);

alert(sessionStorage.age);

}else{

alert('no');

}

</script>

</html>

html5新增表单属性

① required：必填

② placeholder 默认值，给用户提示的,不是提交到服务器的

③ autofocus 自动聚焦功能，提升用户友好

④ pattern 在html元素中填写正则表达式

eg：<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

</head>

<body>

<formaction="form.php"method="post"id='myForm'>

用户名:<inputtype="username"name="username"autofocusplaceholder='请输入用户名'/><br/>

密码:<inputtype="password"name="password" requiredpattern='\w{5}'/><br/>

邮箱:<inputtype="email"name="email"/><br/>

url地址：<inputtype="url"name="url"/><br/>

日期：<inputtype="date"name="date"/><br/>

时间：<inputtype="time"name="time"/><br/>

数值：<inputtype="number"name="number"/><br/>

颜色：<inputtype="color"name="color"/><br/>

range：<inputtype="range"name="range"/><br/>

</form>

<divclass="footer">

邮箱:<inputtype="email"name="email" form='myForm'/><br/>

</div>

</body>

</html>