html5+css3学习笔记
html5
1、html5建立规则
独立于设备 开发进程透明 基于html css js 优秀的错误处理 更多标记 减少外部插件使用
2、html5新特性
绘画canvas元素 媒介回放的video和audio 离线存储 新的内容元素 nav header footer artical section 新表单控件 calendar time email url search
3、兼容性
最新版的safari chrome firfox opera支持某些html5属性 ie9将支持某些html5特性
4、视频
视频格式 ogg mpeg4 webm
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
control 属性供添加播放、暂停和音量控件。
之间插入的内容是供不支持 video 元素的浏览器显示的
5、视频/DOM
play() pause()
js支持 不知道如何让jq支持
6、音频 与视频相似 只不过使用的是audio标签
7、拖放 --有点看不懂以后再详细研究
8、svg 可缩放矢量图片 就是放大缩小不变形 在svg文件中用特定的类型标签制作出相关形状
9、canvas VS svg
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
10、地理定位
html5 geolocation API来获得用户地理位置
使用getCurrentPosition()方法来获取位置
如果自持地理定位运行showPosition函数，如果不支持显示友好提示信息，showPosition显示用户的经纬度。
11、web存储
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
只有ie不支持
如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面
13、web worker--是运行在后台的js，不影响页面的性能
14、服务器发送事件--接受来自服务器端的更新
15、html5表单
使用火狐测试的时候发现number和date没啥特别变化，不像w3c的测试文档中的那样。
我对datalist的理解就是起提示作用的，焦点定位在输入框之后自动出现下拉菜单提示。
keygon--keygen 元素的作用是提供一种验证用户的可靠方法。
output元素用于不同类型的输出，比如计算或脚本输出，w3c上的案例是输出两个数的和，不论是在上面还是本地都无结果输出。
css3
css3被划分为模块，主要的模块有
选择器
框模型
背景和边框
文本效果
2D/3D转换
动画
多列布局
用户界面
1、边框
创建圆角边框，添加阴影，使用图片来绘制边框
主要属性：
border-radius
box-shadow
border-image
border-radius用来设置圆角半径，例border-radius:5px;
box-shadow用来设置阴影，box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内部阴影还是外部阴影
box-shadow:2px 2px 3px 2px #000 inset;
border-image可以使用图片来创建边框
2、背景
主要属性：background-size background-origin
css3之前背景图片的大小是根据图片实际大小来决定的，在css3中，background-size用来设置背景图片的大小，像素或者百分比都可以。
例：background-size:10px 20px;宽度10px，高度20px。
css3之前背景图片如果设置为左上对齐，那么图片是从边框开始的。在css3中，background-origin可以设置背景图片从border-box，padding-box，content-box开始出现。
3,、文本效果
主要属性：text-shadow word-wrap
text-shadow与box-shadow原理一样
word-break:break-all 强制切断长单词
word-wrap 控制换行，单词过长空间不足会自动换到下一行
word-spacing 字符间距
white-space 处理空格
4、字体
@font-face可以自己定义字体，让用户下载服务器字体到本地缓存。
使用方法：先定义字体名称，然后连接到该文件
@font-face{font-family:myfont;src:url('Sansation.ttf'),url('Sansation.eot');}
div{font-family:myfont;}5、2D/3D转换
2D
通过css3转换，可以实现对元素的移动、缩放、转动、拉长和拉伸。
transform:translate() | rotate() | scale() | skew() | matrix()
translate(50px,100px)方法把元素从左侧移动50像素，从顶端移动100像素。
rotate(30deg)把元素顺时针旋转30度
scale(2,4)把元素宽度扩大为原来的2倍，把高度扩大为原始的4倍。
skew(30deg,20deg)围绕x轴把元素翻转30度，围绕y轴把元素翻转20度。
matrix(a,b,c,d,e,f)把所有2D转换方法组合在一起，需要6个参数。a,d代表缩放比例，e，f代表位移，详细参照http://www.zhangxinxu.com/wordpress/?p=2427
3D
rotateX() x轴方向旋转
rotateY() y轴方向旋转
6、css3过渡
transition:transform 2s;
7、动画
@keyframes name
{
from{}
to{}
}
{animation:name 2s}
8、多列
column-count 分列
column-gap 间距
column-rule 个人理解为间距样式
9、用户界面
resize
box-sizing
outline-offset