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。