泰牛程序员 韩顺平 PHP 大牛班 HTML5 CSS3 完整笔记.doc

《泰牛程序员 韩顺平 PHP 大牛班 HTML5 CSS3 完整笔记.doc》由会员分享，可在线阅读，更多相关《泰牛程序员 韩顺平 PHP 大牛班 HTML5 CSS3 完整笔记.doc（45页珍藏版）》请在三一办公上搜索。

1、HTML5 + CSS3第 1 章HTML5介绍11.1基本介绍11.2h5的学习网站11.3html5的体验案例-画布11.4使用h5开发一个播放器31.5html5的特点41.6如果使用h5来编写网，那么div+css 的布局在标签显示上，要修改51.7关于标签的说法71.8画布的坐标系和像素的概念说明81.9使用canvas来绘图81.10一个综合案例-键盘控制小球的移动111.11小球撞墙小游戏131.12学习html5新增的属性和input 元素的属性16第 1 章 HTML5介绍1.1 基本介绍html5成为互联网的新的标准，取代html4,xhtml，主要在原来的基础增加了很多新

2、的标签，废除了一些不好的标签，增加了很多新的属性，尤其是input 元素增加了很多好的属性 比如 type=email type=color type=date type=week type=month 等等.还有增加了一个强大的画布canvas1.2 h5的学习网站1.3 html5的体验案例-画布画布的坐标系:代码:1.4 使用h5开发一个播放器代码:1.5 html5的特点1. 简单2. 标签语义化, 比如 在div+css =seo3 . 语法更加松散增加了强大的画布标签一些标签不再建议使用(比如: applet、font、basefont、center、dirs、strike、u等)

3、多设备跨平台自适应网页设计,兼容性好1.6 如果使用h5来编写网，那么div+css 的布局在标签显示上，要修改div+csshtml5的块标签使用后使用h5完成一个网页的布局代码:1.7 关于标签的说法说明:html5的语法确实很松散.1.8 画布的坐标系和像素的概念说明像素是一个密度单位。1.9 使用canvas来绘图代码:课堂练习:1.10 一个综合案例-键盘控制小球的移动思路1. 先得到这个画布，然后画出红色的小球2. 编写一个函数，可以处理按键的事件asdw3. 可以移动这个小球1.11 小球撞墙小游戏代码: 1.12 学习html5新增的属性和input 元素的属性代码 ：l in

4、put元素新的属性 ：l input元素新增的属性 inputline-height:28px;width:200px;margin-top: 3px; 提交相关信息 电子邮件：输入网址：出生日期：具体时间：出生月份：选择星期：电话号码：调节亮度：选择颜色：请选地区：西城区东城区青羊区金牛区选择车型： 宝马泰牛大众 1.13 details,summary,mark标签代码:1.14 通用属性contenteditable, 和hidden1.15 多媒体的标签video和audio第 2 章 css32.1 css3新增的选择器2.2 css3新增的伪类选择器css2我们学习的伪类 :lin

5、k :hover :visited :activel css3的伪类选择器案例代码:l 新增的可以选择html元素状态的选择器disable 元素被禁用 enable元素可以输入 checked复选框某个被选中l css3的新增伪类选择器:before :after案例:代码:l 使用:after和:before完成一个实际应用思路:代码:2.3 表格显示形式案例:代码:2.4 border-radius使用这个属性，可以对html元素实现圆角的效果，非常好.代码:2.5 box-shadow属性代码:l 使用css3来绘制了一个手机2.6 使用css3的transform的属性来实现div在屏幕居中左右上下居中思路:1. 先使用div的绝对定位,把div 放到网页2. 使用css3的transform来进行2d的转换代码:2.7 2d旋转的效果transform transform-origin把一个div以它的左上角为原点，进行顺时针旋转.代码：l 过渡效果transition和转换效果(transform)混合使用代码:2.8 css3的斜切效果代码:做了一个小练习:代码:2.9 图片旋转的效果代码:2.10 3d的沿着x轴底部旋转代码:2.11 盒子打开的效果代码：