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制作的区别

1. 做手机端的页面，主要的就是注意宽度问题，我们一般不设置宽度，因为默认的块元素的宽度都是100%，所以我们如果想限制间距的话，优先给父元素添加固定的内边距
2. WAP手机界面常用的Banner图，我们是可以在页面里直接放img标签的，通过给img高度或宽度设置100%，这一个元素的宽度和高度就等比例的进行缩放了
3. box-sizing：border-box。如果给一个元素设置了width：100%，padding：20px，那么这个元素的宽度就超出了100%，手机界面会出现横向滚动条或者页面换行。如果加上box-sizing：border-box这个样式属性后，这个宽度100%计算的实际上就包含了padding和border的宽，就是改变了盒模型的计算方式，
4. img设置宽度100%的问题，有些上面的按钮之类的配合定位或者margin-top为负值。例如两个图片存在叠加部分，如果不设置负值从效果上看就和截断了一样。
5. 单位问题，一般都说响应式要用em字体而非px，但是针对手机端，通常情况下使用px处理
6. 手机端弹框的做法，在div上设置黑色透明的背景即可。但是会带来新的问题，拖动上面下方页面会随之移动，解决办法：弹窗出现的时候判断，touchmove的时候把事件屏蔽掉
7. 点击事件穿透，剞劂办法采用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:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>||
<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]

属性

（1）变化的属性：transition-property

transition-property : none | all | [<IDENT>][',']* ;

​ 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 : <time> [,time]*;

​ 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 : <time> [,time]* ;

​ 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将暂停的动画重新播放，重新播放不是从动画的开始播放，而是从暂停的位置继续播放。此外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。

学习问题处理方式

• 寻求问题根源
• 查看参考文档
• 参考示例
• 常见问题通过搜索引擎搜索
• 问题反馈