HTML5和css3

H5和CSS3新增内容 HTML5新增标签及属性 CSS3新增样式 Web API 选用标签的标准 如果要支持比较老的浏览器（通常是桌面版网页）则不使用新标签 手机平板等网页开发可以使用新标签 不管什么情况下，都应该优先根据语义来选用标签 根据搜索引擎优化的要求和建议选用标签 布局 流式布局 定位 浮动/清除 Flex 布局框架（如Bootstrap栅格） CSS单位与计算 px % rem/em vw/vh mm/cm calc() CSS半透明/透明 大部分标签元素默认是背景透明的，但也有不透明的（如iframe、button、图片等） transparent RGBA HSLA opacity 动画 transition：transition能过渡大部分样式（http://dwz.cn/3NvjUN）而且支持多样式同时过渡，注意标签元素上有多个样式类时，与过渡样式相关的最后2个样式会形成过渡效果。 animation：注意使用animation-play-state:paused可以使动画就地暂停，animation-play-state: ‘’可以使动画在暂停的状态继续进行 jQuery动画：jQuery动画与CSS3动画不同，jQuery动画是js驱动的，jQuery动画与CSS3动画是互补关系（而非谁取代谁）。jQuery内置了一些动画，如（fadeIn/slideUp等），也支持通过animate()方法自定义动画。而且提供了强大的动画控制API，如动画延迟、链式动画（上一个动画结束后开始下一下动画）、控制动画停止、关闭动画效果、动画频率调整、还可以指定回调函数参与每一个动画的每一步等。jQuery中的动画返回Deferred对象，因此支持Promise异步编程。jQuery默认不能过渡颜色，使用jQuery.Color插件可以解决问题。 触发动画：CSS一般在页面加载时会自动进行transition和animation，可以在浏览器的查看器（动画窗格）中观察到标签元素上的动画帧并对动画进行控制及设置不同的速度进行预览。使用:hover、:active伪类可以配合鼠标指针触发动画效果。通过js添加删除标签元素的样式类时也会触发相应的动画。jQuery动画的触发和控制由jQuery动画API控制。 动画结束事件/回调：CSS3动画支持DOM事件：animationstart（动画开始时）、animationend（动画结束时）、animationiteration（动画重复执行时），可以像普通click事件一样使用它们。jQuery动画通过回调函数获取执行完成通知，形如：$(..).animate({css}<, duration><, easing><, callbakc>)，因为jQuery动画返回Deferred对象，所以也可以使用.then(success,fail)或.done(function)等方法得到通知。 同时进行多个动画：在关键帧定义中可以定义多个样式，animation-name也可以指定多个关键帧动画名称。transition-property也可以指定多个样式。jQuery的animate方法中也可以指定多个样式。还可以在同一个标签元素上调多次animate方法（分开调用，而不是链式调用） 顺序进行多个动画：可以通过animation-delay、transition-delay延迟，安排出顺序执行效果。还可以通过监听动画事件在动画结束后再触发下一个动画。jQuery中animate()的链式调用本身就是顺序执行的。 requestAnimationFrame：会与浏览器呈现页面同步配合执行，因此比使用setInterval要更加流畅。requestAnimationFrame是H5新增的方法，与setInterval相比，没有提供频率的控制方法，因为它的频率与页面呈现频率是同步的，通常60次/s，相当于16.66667ms一次。 矩阵与图形变换 贝塞尔曲线与时间函数 媒体查询与响应式页面 媒体查询@media赋予CSS探测设备类型和设备属性（如屏幕宽高等）的能力，之前媒体查询主要用来控制页面打印效果（即针对页面上打印部分定义打印专用样式）；在移动互联网时代媒体查询对于页面适配各种大小的屏幕至关重要，可以说媒体查询是响应式页面的核心技术。Bootstrap就是以媒体查询技术为基础的响应式UI框架。 浏览器兼容性和Web App页面 浏览器兼容性问题涉及的面比较广，从HTML标签、CSS样式到JS都存在兼容性问题。兼容性问题给Web开发造成了额外的成本支出，在兼容性上要求越高，付出的代价越大。 浏览器的兼容性主要通过测试解决，最为困难的是桌面网页兼容IE6/7/8/等老浏览器（可以使用IE Tester测试）！解决浏览器兼容性没有什么难度，繁锁而已，如果要兼容老浏览器，则应放弃使用新功能或者对老浏览器显示友好的提示信息（使开发测试时间增长、成本增加）。 直接使用框架可以有效地避免兼容性问题，如各种UI框架和jQuery框架都会考虑兼容性。另外使用重置样式表也可以抹平各浏览器的差异。 在开发Web App时需要注意，移动设备，无论是iOS还是Android都使用Webkit内核，尤其是iOS，需要使用以下样式： -webkit-appearance: none; 禁用浏览器特定外观（如按扭等表单元素） -webkit-tap-highlight-color: rgba(0,0,0,0); 将触摸时的高亮颜色设为完全透明 -webkit-touch-callout: none; 禁用页面上的上下文菜单（上面有复制、粘贴等功能） -webkit-text-size-adjust: none; 禁用页面自动调整文字大小 -webkit-user-select: none; 禁止用户选择页面上的文字 回弹滚动 overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch; 另：有一些样式还需要使用-webkit前缀，如： CSS滤镜要写成-webkit-filter 或者要兼容特别老的iOS或Android系统时CSS3样式要加-webkit前缀 另：如果需要对某些标签进行深度控制，则需要使用-webkit伪类，如： input[type=range]::-webkit-slider-runnable-track{ } input[type=range]::-webkit-slider-thumb{ } 可以控制滑动条的样式 progress::-webkit-progress-bar { } progress::-webkit-progress-value { } 可以控制进度条的样式 另：使用meta标签可以要求浏览器支持或关闭某些行为 禁用手机号探测 禁用email探测 固定到手机桌面（桌面书签） 关闭iOS键盘首字母自动大写，自动修正 LESS/SASS/SCSS Less 是 CSS 预处理语言，在CSS中引入了变量、函数、混入等编程机制，从而使CSS获得更高的灵活性和可扩展性。Less可以使用js直接在页面上转换成CSS，也可以使用命令行工具Lessc完成从less文件到css文件的转换，还有相应的自动化构建插件。注意Less中使用calc()或滤镜等函数时需要使用 ~””或e(””)进行转义，否则会被误识别为less函数，而less中并没有这些函数。 Sass （Sass3时提供了兼容CSS的语法，被称为SCSS）是对 CSS 的扩展，除支持变量、函数、混入外还支持条件判断和循环语句，Sass让 CSS 语言更强大、更优雅。 值得一提的是，Less是基于Node.js和js的，而Sass/SCSS是基于Ruby的（也需要Node.js），Sass/SCSS不能直接在页面上通过js转换成CSS。