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

HTML5 + CSS3 第 1 章 HTML5介绍 1 1.1 基本介绍 1 1.2 h5的学习网站 1 1.3 html5的体验案例-画布 1 1.4 使用h5开发一个播放器 3 1.5 html5的特点 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 div class=headerdiv class=nav/div /divdiv class=footer/div header/headernav/navfooter/footer =seo 3 . 语法更加松散 增加了强大的画布标签canvas 一些标签不再建议使用(比如: applet、font、basefont、center、dirs、strike、u等) 多设备跨平台 自适应网页设计,兼容性好 如果使用h5来编写网，那么div+css 的布局在标签显示上，要修改 div+css html5的块标签使用后 使用h5完成一个网页的布局 代码: 关于标签的说法 说明:html5的语法确实很松散. 画布的坐标系和像素的概念说明 像素是一个密度单位。 使用canvas来绘图 代码: 课堂练习: 一个综合案例-键盘控制小球的移动 思路 先得到这个画布，然后画出红色的小球 编写一个函数，可以处理按键的事件[asdw] 可以移动这个小球 小球撞墙小游戏 代码: 学习html5新增的属性和input 元素的属性 代码 ： input元素新的属性 ： !DOCTYPE html html head meta charset=utf-8 title input元素新增的属性 /title style type=text/css input{ line-height:28px; width:200px; margin-top: 3px; } /style script type=text/javascript /script /head body h1提交相关信息/h1 form action=xxx.php method=post 电子邮件：input type=email name=email requiredbr 输入网址：input type=url name=urlbr 出生日期：input type=date name=datebr 具体时间：input type=time name=timebr 出生月份：input type=month name=monthbr 选择星期：input type=week name=weekbr 电话号码：input type=number name=numbertestbr 调节亮度：input type=range min=0 max=255 name=rangebr 选择颜色：input type=color name=colorbr 请选地区：select optgroup label=北京 option西城区/option option东城区/option /optgroup optgroup label=成都 option青羊区/option option金牛区/option /optgroup /selectbr 选择车型：input type=text list=cars datalist id=cars option宝马/option option泰牛/option option大众