html5+css3简单的整理
关于html5常用元素
section--通用文档或应用部件（侧重对页面内容进行分块，通用容器使用div、分块使用section）
nav--导航
article--页面模块（文章、摘要、留言等，偏向于独立的）
aside--孤立模块（边栏广告、说明、引用、导航等.放在<body>就为整个页面添加“边栏”，在父元素就为父元素添加“边栏”）
hgroup--群组标题（h1-6集合使用时候，区分标题） header--页头标题
footer--页尾 address--地址或联系信息
pre--预格式化块 blockquote--块引用
figure--流内容说明（多与figcaption结合使用） figcaption--figure内容属性
em--强调标记
strong--加重标记 small--字体缩小
i、cite--斜体标记 cite--表示作品的标题
dfn--术语定义 abbr--缩略语
time--日期时间 code--程序代码
samp--范例 kbd--键盘字（计算机使用文档、使用说明等）
b--粗体标记 mark--标记或高亮
ruby--注解标记（rt、rp） bdo
q--短的引用文本、引用标记内容（浏览器自动添加引号）
编辑元素
ins--定义插入的文本 del（以下划线的形式显示该标签包含的文本）
表单元素
fieldset legend datalist optgroup keygen output progress meter
表格元素
caption colgroup col tfoot
互动元素
details summary command menu
html5 dir属性 rtl 文本从右向左显示 ltr 从左向右
form表单的input属性值
spellcheck 检测输入的单词是否正确
designMode 设置为 on 页面所有支持contentEditable都变成可编辑状态，默认为off
contentEditable="true" 是文本内容变的可编辑（div、p、table标签等）
a标签的target属性值 _self（自身） _blank（新窗口） _top（顶层框架） _parent（父框架）
可用于定位锚点 <a name="test"></a> <a href="当前页面名称(可写、可不写)#test">定位到锚点</a>
关于有序ol列表 可设置start属性起始值 type设置类型
img 的map属性值以及使用？
table的 colgroup 属性 通过设置col来设置相关属性值
iframe 框架（h5 新增 可以了解）
进度条的表示 meter(low 最小值、high 最大值、optimum有效范围内最佳值、max 默认1、min 默认 0)、progress (属性min、max、value)
base定义基准链接 属性href、target（_blank、_parent、_self、_top）
meta
http-equiv:
Expires 指定网页过期时间。网页过期必须重新从服务器上下载
Pragma 禁止浏览器从本地磁盘缓存中调阅页面内容（无法脱机访问该页面）
Refresh 指定浏览器多长时间后自动刷新指定页面
Set-Cookie 设置cookie,如果网页过期，那么客户端上的cookie也被删除
content-Type 设置页面的内容类型、所用的字符集
content-Type（text/html--用html的解析器解析做相应的处理、text/plain--纯文本的形式，浏览器不会处理）
draggable="true" 元素变的可拖动
form表单属性
id 文本类型通过设置form="id" 来指定属于哪个表单
enctype
application/x-www-form-urlencoded 默认
multipart/form-data 二进制流的形式处理（上传的时候使用该属性）
text-plain 表单action属性为mailto:url （主要用直接通过表单发送邮件）
formmenthod 修改表单提交的地址
autofocus自动获取input焦点（一个form设置一个）
select 设置multiple size 多选 optgroup(分组 label设置值)
input 属性 (<input name="color" type="color" placeholder="颜色选择器"/>)
color 颜色选择器
date 日期选择器
time 时间选择器
datetime utc 日期、时间选择器
datetime-local 本地日期、时间选择器
week 可以选择都几周
month 月份选择器
email e-mail 输入框
tel 手机号码输入框
urrl url 输入框
number 输入数字
range 拖放轴
search 搜索框(自带删除的图标)
required 必须输入
pattern 正则表达式的验证
min、max、step(步长主要用lange)
output 输出元素值（主要输出结果，不提交。与color、range一起使用）
表单验证
使用checkValidity()进行验证
调用setCustomValidity() 定制错误提示
关闭h5表单验证 <form/>添加 novalidate 或type="submit"、<input>、<button>添加formnovalidate="novalidate"
画布 canvas
音频(audio)、视频播放(video)属性 http://www.epooll.com/archives/422/
src 播放地址
autoplay 是否自动播放
controls 显示播放控制条
loop 是否循环播放
preload auto(预加载)、metadata(预加载音频、视频的元数据，字节、列表、持续时间等)、none。设置autoplay，该属性无效
poster 只对video有效(视频下载完成、开始播放前，显示该属性指定的图片)
width 只对video有效
height 只对video有效
js脚本的方法
play() 播放
pause() 暂停播放
load() 重新装载音频、视频文件
canPlayType(type) 判断该元素是否可播放type类型的文件（返回probably:支持、maybe:可能支持、空字符串:不支持）
CSS3
-ms- IE浏览器前缀 -moz- 火狐浏览器前缀
-o- opera浏览器前缀 -webkit- 谷歌浏览器前缀
伪元素选择器
:first-letter 对第一个字符串起作用
:first-line 对第一行内容起作用
:before 与内容相关属性使用，在指定对象内部前端插入内容
:after ~在尾部添加内容
内容相关属性
content 向指定元素之前、之后插入指定内容(字符串、url、attr、counter(name)、counter(name,list-name-type)、open-quote、close-quote等)
quotes 可以是以两个空格分隔的字符串（用于定义open-quote、close-quote）配合content插入
counter-increment 用于定义计算器。属性值是定义的计算器的名称
counter-reset 对指定的计数值复位
p{counter-increment:test;}p:before{counter:counter(test) '.';}添加编号以及引用
自定义编号
counter(test,list-name-type)
decimal 默认数字 disc 实心圆
circle 空心圆 square 实心方块
lower-roman 小写罗马数字 upper-roman 大写罗马数字
lower-alpha 小写英文字母 upper-alpha 大写英文字母
none 不适用项目符合 cjk-ideographic 浅白的表意数字
georgian 传统的乔治数字 lower-greek 基本的希腊小写字母
lower-latin 小写拉丁字母 upper-latin 大写拉丁字母
结构性（select选择器）
select:root 根元素(永远是html)
:first-child 当前父元素的第一个子节点 :last-child 最后一个字节点
:nth-child(n) 匹配第n个子元素节点的元素 :nth-last-child(n) 匹配倒数第n个子元素
:only-child 匹配父元素唯一子节点的元素
:first-of-type 与该元素同类型、同级的兄弟元素中第一个 :last-of-type 最后一个 :nth-of-type(n) 第n个 :nth-last-of-type(n) 倒数第n个
:only-of-type 唯一一个元素
:empty 匹配空元素、无节点
UI元素状态伪类选择器
:link 未被访问(通常只能是超链接) :visited 已被访问(通常只能是超链接)
:active 被激活 :hover 鼠标悬停
:focus 得到焦点的元素 :enabled 处于可用状态
:disabled 不可用状态 :default 页面打开处于选择状态
:read-only 只读状态 :read-write 只写状态
:checked 当前处于选择状态
::selection 当前被选中的状态
其他伪类选择器
select1:not(select2) 匹配符select1的选择器，但不符合select2选择器的元素
:target 匹配当前元素命名锚点目标的元素
text-shadow:color x-offset y-offset radius(需要添加多个阴影的时候，中间用逗号（，）分隔开)
color 阴影颜色
x-offset 指定阴影在横向上的偏移
y-offset 指定阴影在纵向上的偏移
radius 阴影模糊半径(越大越模糊)
font-size-adjust 可以调整字体的长度(只有火狐支持)
颜色 rgba(r,g,b,透明度) 三原色
文本属性
text-indent 文本缩进方式
text-overflow 文本溢出处理
clip 简单的隐藏处理
ellipsis 溢出以(...)标记
direction 文本流入的方向
ltr 从左到右(默认)
rtl 从右向左
white-space 文本内容对空格的处理方式
normal 默认，自动换行不处理
nowrapz 强制同一行内显示所有文本
word-wrap 英文的换行处理
normal 默认，不处理
break-word 允许在单词中间换行(火狐、opera不支持)
vertical-align 文本对齐方式
auto 自动对齐
baseline 内容与基线对齐(默认)
sub 内容与文本下标对齐
sup 上标
length 指定内容相对于基线的偏移距离（百分比、绝对距离）
特殊字体的引用 http://www.w3cplus.com/content/css3-font-face
@font-face{ font-family:'自定义字体名称'; src:url('路径') format('（ttf的类型是truetype）'); font-weight:是否加粗; font-style:italic(斜体); }
调用自定义字体
h2{
font-family:'自定义字体名称';
}
图片边框
border-image:url() 图片边框属性(百分比、数值、auto等) 图片覆盖方式(stretch 拉伸、repeat 平铺、round 取整平铺 --可以去两个值代表横向、纵向)
resize
none 不允许拖动来改变组件的大小
both 不能改变高度、宽度
horizontal 不能改宽度
vertical 不能改高度
inherit 默认值，继续父元素的resize值
z-index 属性在position的时候使用才有效
outline-offset 与边框之间的偏移量
display
inline-table 表格形式布
list-item 列表形式布局（list-style-type:square|disc）
box-shadow
hOffset 水平阴影偏移
vOffset 垂直阴影偏移
blurLength 阴影模糊程度
scaleLength 缩放程度
color 阴影颜色
css3内容分栏效果（每个浏览器都要设置，加前缀） 适用文章
columns: 每栏的宽度 多少栏;
columns-rule: 与border语法一样使用，栏目之间的分隔条
columns-gap: 栏目之间的间距
columns-fill:
auto 自适应
balance 统一成内容最多的那一栏高度
多栏布局
display:box;
box-orient horizonal 水平排列 vertical 垂直排列
box-ordinal-group 设置box子元素显示顺序
box-flex 设置box子元素自适应宽度的比例
table 相关属性
与caption属性一起使用的时候table的caption-side:top|bottom|left|right 标题显示的位置
empty-cells 单元可没内容的时候是否显示，默认是show,hide表示隐藏border-collapse:collapse才有效
border-collapse:separate|collapse|inherit 默认(边框不会被分开)|合并边框|继续父元素的值
table-layout:auto|fixed 默认|使用固定方式布局
CSS 3 动画效果 http://www.w3cplus.com/css3/css3-3d-transform.html 3D动画效果
transform 设置变形，支持一个或多个函数
translate(tx [,ty]) tx横向上移动的距离，ty纵向上移动的距离(可省略，默认0)
translateX(tx) 组件横向上移动tx距离
translateY(ty) 纵向上
scale(sx,sy) 横向上缩放比为sx，纵向上缩放比为sy(可省略，默认等于sx)
scaleX(sx) 相当于执行scaleX(sx,1)
scaleY(sy) 相当于执行scaleY(1,sy)
rotate(angle) 顺时针转过angle角度 （旋转角度的单位都是 deg）
skew(sx [,sy]) 沿X轴倾斜sx角度，沿Y轴倾斜sy角度(可省略，默认0)
skewX(sx) 沿X轴倾斜的角度
skewY(sy) 沿Y周倾斜的角度
matrix(n,n,n,n,x,y) n定义变形矩形，x对于X轴平移，Y对于Y轴进行平移
perspective(n) 3D 转换元素定义透视视图
transform-origin 设置变形的中心点(xCenter yCenter)
left 指定旋转中心位于组件的左边
right 右边(X轴的只对于xCenter有作用)
top、bottom 该值只对yCenter有作用
center 旋转中心点位于组件中间，两个值都设为center
长度值、百分比 值的顺序都X、Y
transition(color 3s ease 1s) 动画（可以同时设置多个属性，中间用逗号分隔开）
transition-property 对css进行平滑渐变处理
transition-duration 渐变持续时间
transition-timing-function 渐变的速度
ease 先慢然后加快，到最大速度再减下来 cubic-bezier(0.25,0.1,0.25,1.0)
linear 保持不变的速度 cubic-bezier(0,0,1.0,1.0)
ease-out 开始快，然后减速 cubic-bezier(0,0,0.58,1.0)
ease-in 开始慢，然后加速 cubic-bezier(0.42,0,1.0,1.0)
ease-in-out 与ease一样 cubic-bezier(0.42,0,0.58,1.0)
cubic-bezier(x1,y1,x2,y2) 贝济埃曲线控制动画速度
transition-delay 延迟时间。（指定经过多长时间才开始动画）
Animation 动画
animation-name 指定动画名称
animation-duration 持续时间
animation-timing-function 动画变化速度
animation-delay 延迟多久开始动画
animation-iteration-count 循环执行次数 (infinite无限循环
animation （综合属性的使用）
@-webkit-keyframes sdsdsdsdName{ 0%{ border:10px solid red; margin-top:50px; background:#0F0; } 40%{ margin-left:200px; background:#00F; } 80%{ margin-left:500px; background:#9FC; } 100%{ margin-left:0px; border:0; background:#FF0; } } .test{-webkit-animation-name: sdsdsdsdName; -webkit-animation-duration: 3s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function: linear;}
关于css3新特性
1、border-radius 设置制作圆角效果
2、box-shadow 制作盒子的阴影效果
box-shadow{ h-shadow:必需的。水平阴影的位置。允许负值, v-shadow:必需的。垂直阴影的位置。允许负值， blur:可选。模糊距离, spread:可选。阴影的大小, color:可选。阴影的颜色, inset:可选。从外层的阴影（开始时）改变阴影内侧阴影
} [inset x-offset y-offset blur-radius spread-radius color] 先后顺序
3、text-shadow可以实现文字阴影效果
text-shadow: h-shadow v-shadow blur color; h-shadow：必需。水平阴影的位置。允许负值。 v-shadow：必需。垂直阴影的位置。允许负值。 blur：可选。模糊的距离。 color：可选。阴影的颜色
4、RGBA可以制作透明通道色
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
主要用background、前景色color、边框色border-color、字体的阴影色text-shadow、改变边框阴影色
5、opacity可以实现元素的透明度
filter: alpha(opacity=60); // IE 5-7 opacity：从 0.0 （完全透明）到 1.0（完全不透明）
6、background-size可以改变背景图片大小
background-size：可以是百分比、数值大小、
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
7、Multiple Backgrounds用来实现多背景
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
8、columns用来制作多列排版
-moz-column-count: 2;
-webkit-column-count: 2;
主要用于新闻之类的布局，多列
9、border-image可以制作出图片边框效果 不常用
10、transition可以实现动画效果
11、@font-face实现自定义字体
::selection{background|color|text-shadow}改变你选择中元素的文本的高亮背景和前景色
图片的缩放在IE7以及IE6下解决（运用img时，常常会碰到图片底产无缘无故多出3px）
img{-ms-interpolation-mode: bicubic;vertical-align: top;}
