Html5和CSS3开发指南学习
Html5和CSS3开发指南学习
1. 为什么学习HTML5
- 跨平台运行——PC/手机/Pad跨平台使用
- 硬件要求低
- flash之外的选择，尤其是手机端开发
2. HTML介绍
2-1 什么是HTML
HTML是一种用来描述网页的超文本标记语言，它不是程序语言，而是一组标记语言
2-2 HTML5特性
- 用于绘画的canvas标签
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好支持
- 新的特殊内容元素——article、footer、header、nav、section
- 新的表单控件——calendar、date、time、email、URL、search
- 主流浏览器的支持
3. 所需掌握技能
- HTML5
- CSS3
- JavaScript
- JQuery
4. WAP和WEB制作的区别
- 做手机端的页面，主要的就是注意宽度问题，我们一般不设置宽度，因为默认的块元素的宽度都是100%，所以我们如果想限制间距的话，优先给父元素添加固定的内边距
- WAP手机界面常用的Banner图，我们是可以在页面里直接放img标签的，通过给img高度或宽度设置100%，这一个元素的宽度和高度就等比例的进行缩放了
- box-sizing：border-box。如果给一个元素设置了width：100%，padding：20px，那么这个元素的宽度就超出了100%，手机界面会出现横向滚动条或者页面换行。如果加上box-sizing：border-box这个样式属性后，这个宽度100%计算的实际上就包含了padding和border的宽，就是改变了盒模型的计算方式，
- img设置宽度100%的问题，有些上面的按钮之类的配合定位或者margin-top为负值。例如两个图片存在叠加部分，如果不设置负值从效果上看就和截断了一样。
- 单位问题，一般都说响应式要用em字体而非px，但是针对手机端，通常情况下使用px处理
- 手机端弹框的做法，在div上设置黑色透明的背景即可。但是会带来新的问题，拖动上面下方页面会随之移动，解决办法：弹窗出现的时候判断，touchmove的时候把事件屏蔽掉
- 点击事件穿透，剞劂办法采用JavaScript的延时效果
5. CSS3动画效果学习
5-1 Transform
语法
transform： none | <transform-function> [<transform-function>]*
也就是
transform: rotate | scale | skew | translate | matrix
解释：none：表示不进行变换；****表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性进行操作。
注意；通常叠加效果使用“，”进行分隔，但是transform中使用多个属性时需要使用空格隔开
Transform字面意思是变形、改变的意思。在CSS3中transform主要包括以下几种
（1）旋转rotate
（2）扭曲skew
（3）缩放scale
（4）移动translate
（5）矩阵变形matrix
5-2 transition
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过度。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
语法
transition:[||||
||||
||||
||]
属性
（1）变化的属性：transition-property
transition-property : none | all | [][',']* ;
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；indent元素属性名，其对应的类型如下：
- 颜色：background-color，border-color，color，outline-color等CSS属性
- shadow：作用于color、x、y、和blur（模糊）属性
- length：真实的数字，如width、align、top、right等属性
（2）动画时间：transition-duration
transition-duration : transition-duration是动画执行的时间，单位为s（秒）或ms（毫秒），比如0.1秒可以写成“0.1s”或者“.1s”，它可以作用于任何元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的
（3）动画执行的方式：transition-timing-function
transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
transition-timing-function在延续时间段，变化的速率变化
- ease：逐渐慢下来；
- linear：匀速；
- ease-in：由慢到快；
- ease-out：由快到慢；
- ease-in-out：先慢到快再到慢。
（4）动画延迟：transition-delay
transition-delay : transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition动画效果，取值同transition-duration。
5-3 Animation
Animation字面上的意思是“动画”，但CSS3中Animation和HTML5中的Canvas绘制动画不同，Animation只应用在页面上已存在的DOM元素上，而且与Flash和JavaScript以及JQuery制作出来的动画不同，因为使用CSS3的Animation制作动画我们可以省去复杂的JavaScript、JQuery代码
在学习Animation之前我们需要去了解一个特殊的东西，那就是Keyframe，我们称其为“关键帧”
Keyframe
Keyframe具有自己的语法规则，他的命名是由“@keyframes”开头的，后面接着是这个“动画名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们CSS的样式写法。
对于一个“@keyframes”中的样式规则是由对个百分比构成的，我们可以在这个规则中创建多个百分比，我们分别将每一个百分比给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等，不过有一点需要注意的是，我们可以使用“fromt”“to“来代表一个动画是从哪里开始，到哪里结束，也就是说这个”form“就相当于”0%“而”to“相当于”100“，值得一说的是，其中”0%“不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分号，如果没有加上的话，则视为无效不起任何作用。因为keyframe的单位只接受百分比
keyframe可以指定任何顺序排列来决定Animation动画变化的关健位置。
语法
@keyframes animationname {
keyframes-selector {
css-styles;}}
属性
（1）animation-name
用来定义一个动画的名称，主要的属性值有两个：IDENT是Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致，将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。此外，这个属性可以同时附几个animation给一个元素，中间使用逗号隔开即可
（2）animation-duration
用来指定元素播放动画所持续的时间长短，取值time为数值，单位为s（秒），默认值为0。使用方式和transition中的transition-timing-function一样
（3）animation-timing-function
是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。属性值与transition中的transition-timing-function一样
- ease：逐渐慢下来；
- linear：匀速；
- ease-in：由慢到快；
- ease-out：由快到慢；
- ease-in-out：先慢到快再到慢。ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。
（4）animation-delay
是用来指定元素动画开始时间。取值time为数值，单位为s（秒），其默认值为0.这个属性和transition中的transition-delay使用方法一样
（5）animation-iteration-count
用来指定元素播放动画的循环次数，其可以取值number为数字，默认值为“1”；infinite为无限次数循环
（6）animation-direction
用来指定元素动画播放的方向，其只有两个值。默认职位normal，如果设置为normal时，动画的每次循环都是向前播放，另一个值是alternate，它的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
（7）animation-play-state
用来控制元素动画的播放状态。其主要有两个，running和paused中running为默认值。他们的作用类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停止，也可以通过running将暂停的动画重新播放，重新播放不是从动画的开始播放，而是从暂停的位置继续播放。此外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。
学习问题处理方式
- 寻求问题根源
- 查看参考文档
- 参考示例
- 常见问题通过搜索引擎搜索
- 问题反馈