泰牛程序员 韩顺平 PHP 大牛班 HTML5 CSS3 完整笔记.doc
-
资源ID：2388644
资源大小：2.85MB
全文页数：45页
- 资源格式： DOC
下载积分：8金币
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
泰牛程序员 韩顺平 PHP 大牛班 HTML5 CSS3 完整笔记.doc
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，主要在原来的基础增加了很多新的标签，废除了一些不好的标签，增加了很多新的属性，尤其是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 <div class="header"><div class="nav"></div> </div><div class="footer"></div><header></header><nav></nav><footer></footer> =>seo3 . 语法更加松散增加了强大的画布标签<canvas>一些标签不再建议使用(比如: applet、font、basefont、center、dirs、strike、u等)多设备跨平台自适应网页设计,兼容性好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 input元素新的属性 ：l<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> input元素新增的属性 </title> <style type="text/css">inputline-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" required><br>输入网址：<input type="url" name="url"><br>出生日期：<input type="date" name="date"><br>具体时间：<input type="time" name="time"><br>出生月份：<input type="month" name="month"><br>选择星期：<input type="week" name="week"><br>电话号码：<input type="number" name="numbertest"><br>调节亮度：<input type="range" min="0" max="255" name="range"><br>选择颜色：<input type="color" name="color"><br>请选地区：<select><optgroup label="北京"><option>西城区</option><option>东城区</option></optgroup><optgroup label="成都"><option>青羊区</option><option>金牛区</option></optgroup></select><br>选择车型：<input type="text" list="cars"> <datalist id="cars"><option>宝马</option><option>泰牛</option><option>大众</option> </datalist><br><input type="submit" value="提交信息"> </form> </body></html>1.13 details,summary,mark标签代码:1.14 通用属性contenteditable, 和hidden1.15 多媒体的标签video和audio第 2 章 css32.1 css3新增的选择器2.2 css3新增的伪类选择器css2我们学习的伪类 :link :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 盒子打开的效果代码：
