韩顺平html5笔记,2016泰牛程序员韩顺平PHP大牛班HTML5CSS3完整笔记资料.doc

HTML5 + CSS3

第 1 章HTML5介绍1

1.1基本介绍1

1.2h5的学习网站1

1.3html5的体验案例-画布1

1.4使用h5开发一个播放器3

1.5html5的特点4

1.6如果使用h5来编写网，那么div+css 的布局在标签显示上，要修改5

1.7关于标签的说法7

1.8画布的坐标系和像素的概念说明8

1.9使用canvas来绘图8

1.10一个综合案例-键盘控制小球的移动11

1.11小球撞墙小游戏13

1.12学习html5新增的属性和input 元素的属性16

HTML5介绍

基本介绍

html5成为互联网的新的标准，取代html4,xhtml，主要在原来的基础增加了很多新的标签，废除了一些不好的标签，增加了很多新的属性，尤其是input 元素增加了很多好的属性 比如 type="email" type="color" type="date" type="week" type="month" 等等...

还有增加了一个强大的画布canvas

h5的学习网站

html5的体验案例-画布

画布的坐标系:

代码:

使用h5开发一个播放器

代码:

html5的特点

简单

标签语义化, 比如 在div+css

=>seo

3 . 语法更加松散

增加了强大的画布标签

一些标签不再建议使用(比如: applet、font、basefont、center、dirs、strike、u等)

多设备跨平台

自适应网页设计,兼容性好

如果使用h5来编写网，那么div+css 的布局在标签显示上，要修改

div+css

html5的块标签使用后

使用h5完成一个网页的布局

代码:

关于标签的说法

说明:html5的语法确实很松散.

画布的坐标系和像素的概念说明

像素是一个密度单位。

使用canvas来绘图

代码:

课堂练习:

一个综合案例-键盘控制小球的移动

思路

先得到这个画布，然后画出红色的小球

编写一个函数，可以处理按键的事件[asdw]

可以移动这个小球

小球撞墙小游戏

代码:

学习html5新增的属性和input 元素的属性

代码 ：

input元素新的属性 ：

input元素新增的属性

input{

line-height:28px;

width:200px;

margin-top: 3px;

}

提交相关信息

电子邮件：

输入网址：

出生日期：

具体时间：

出生月份：

选择星期：

电话号码：

调节亮度：

选择颜色：

请选地区：

西城区

东城区