html5，css3 学习心得
8月1日至8月10日
学习HTML5，CSS3
下面总结一下。
html5：
HTML5主要新增了一些如下的新特性
1.用于绘画的canvas元素
主要通过JavaScript来绘制图形
基本实现步骤如下：
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");取得2d绘图上下文，下面可以通过js方法绘制所需要的图形
大多数的2d上下文操作结果取决于两个属性：fillStyle填充颜色、strokeStyle描边颜色
基本绘制图形的方法：
rect（x,y,width,height）绘制矩形
arc（x,y,radius,startAngle,endAngle,counterclockwise）绘制弧线
lineTo（x,y）从上一点开始绘制一条直线，到点（x,y）
moveTo(x,y) 游标移动到（x,y）
调用fill（）、stroke（）对绘制路径进行填充或描边。
2.用于媒体播放的video 和audio元素
方法有play（）、pause()、load（）
3.对本地离线存储的更好的支持
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
4.新增了一些语义元素，如：header、footer、nav、section、article等
5.新的表单控件，如 time、date、email、url、search、calendar
CSS3新增特性如下：
背景：
background-size
background-origin
边框：
border-radius
box-shadow
border-image
文本效果：
text-shadow
word-wrap
2D/3D 转换：
transform
2D
translate()
rotate()
scale()
skew()
matrix()
3D
rotateX()
rotateY()
过渡：
transition
动画：
@keyframes 规则
多列布局：
”column-count
column-gap
column-rule
用户界面：
resize
box-sizing
outline-offset
通过学习css3受益颇深，很多以前看起来不懂得代码，都豁然开朗。不管是字体规则还是动画规则，css3新增了很多美腻的属性呐。
下面是一个小小的demo。用于手机浏览。电脑暂时不能正确浏览。
设计用了一天：收集图片，ps，调整大小，用ppt制成小样
整体框架实现用了一天：按照制成的小样把整个东西实现出来
动画效果，调试，解决bug用了一天：添加动画效果，背景音乐。
主要用到的，是这次学习到的html5，css3的音频，动画规则，字体规则。
1.audio标签引入背景音乐，添加autoplay属性自动播放。
2.音乐图标旋转效果:
定义旋转动画
@keyframes rotateMusic{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}定义旋转类元素
.rotateMusicIcon{
-webkit-animation:rotateMusic 3.5s;
-o-animation:rotateMusic 3.5s;
-moz-animation:rotateMusic 3.5s;
animation:rotateMusic 3.5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}为每个音乐图标添加类rotateMusicIcon，即可实现旋转效果。
js判断，当图标被点击时，背景音乐是播放状态还是暂停状态
播放状态，则暂停播放，myAudio.pause();
此时移除rotateMusicIcon，图标不再旋转。$(".music").removeClass('rotateMusicIcon');
暂停状态，则播放，myAudio.play();
此时添加rotateMusicIcon，图标选择，$(".music").addClass('rotateMusicIcon');
3.整屏滚动效果用到了插件fullpage,这也是我经常用的插件。
4.下面再特别地谈到一个bug。只是一个十分微小的错误，但是却折腾了我一天。记录下来，希望以后不要再犯这种愚蠢的错误。
正如三提到的音乐图标有点击事件，写完点击事件，却发现事件不生效。
不断地检查，也没发现点击事件哪里出错了。改了类名调试，意外地发现怎么改了类名就可以？
最后通过chrome的调试查看，查看元素，发现音乐图标与logo图标重合。查看代码，发现logo的 z-index：999
也就是说图标位于logo下面，自然点击不到。点击事件是存在的，只是图标没有办法被点击到。
改了 图标的 z-index ，让音乐图标位于logo什么，一切正常。
由于logo与图标重合部分，logo是透明的，所以导致没有发现音乐图标被logo覆盖，正是这个小小的错误。还以为自己遇到了什么未解之谜。怎么那么奇特。
再次警戒自己，要细心。
http://119.29.93.216:8080/earlRecruit/index.html
下面再谈一下git，服务器
这是这几天接触到的东西，让人十分尴尬，不会用，看到的各种教程也是让人一脸懵逼，很谢谢我的队友，给予我的各种帮助。不仅帮助我，成功搭建了我自己的服务器，还教会我如何使用git，队友万岁。
当然这只是入门级别，他们丢给我很多教程。看来我要慢慢消化了，光是折腾服务器的，我就一脸懵逼。两三天没配置好。不知道去哪里买，问他们，不知道买哪个，问他们，不知道什么配置好，问他们，不能登录，问他们，不会配置，问他们。真的很谢谢我的队友，给了我这么多耐心，帮助我这个小白。
暑假还剩下20天，说实在的，现在还只是学到皮毛。最近因为git，服务器等等，深受打击，让我很头疼很懊恼。一直在麻烦队友，也让我倍感惭愧。
好好鞭笞自己，接下来的时间好好学习js等。