H5 css3新增特性

259 阅读2分钟

www.cnblogs.com/ainyi/p/977…

H5 新特性

  1. 语义化标签:header、footer、section、nav、aside、article
  2. 增强型表单:input 的多个 type
  3. 新增表单元素:datalist、keygen、output
  4. 新增表单属性:placehoder、required、min 和 max
  5. 音频视频:audio、video
  6. canvas
  7. 地理定位
  8. 拖拽
  9. 本地存储:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除
  10. 新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  11. WebSocket:单个 TCP 连接上进行全双工通讯的协议

CSS3 新特性

  1. 选择器
  2. 背景和边框
  3. 文本效果
  4. 2D/3D 转换
  5. 动画、过渡
  6. 多列布局
  7. 用户界面

伪类和伪元素:

根本区别在于它们是否创造了新的元素(抽象)

  • 伪类:用于向某些选择器添加特殊的效果(没有创建新元素)

  • 伪元素:创建了 html 中不存在的元素,用于将特殊的效果添加到某些选择器

背景和边框

  • 背景:
    background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)
    background-origin:规定背景图片的定位区域
    对于 background-origin 属性,有如下属性
    背景图片可以放置于 content-box、padding-box 或 border-box 区域
  • 边框:
    border-radius:圆角
    box-shadow / text-shadow:阴影
    border-image:边框图片

zhuanlan.zhihu.com/p/275924248

H5新增特性

标签语义化、等等

增加多个表单输入类型、表单元素、表单属性

Canvas 绘图,Canvas 通过 JavaScript 来绘制 2D 图形

SVG 绘图,SVG 是指可伸缩的矢量图形,SVG 是一种使用 XML 描述 2D 图形的语言

地理定位,Geolocation 用于定位用户的位置

拖放 API,任何元素都能够拖放 drag

Web Worker,Web Worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能

新增Web Worker对象,可以在后台运行js脚本,也就是支持多线程,从而提高了页面加载效率

Web Stroage,本地存储用户的浏览数据

WebSocket,一种在单个 TCP 连接上进行全双工通讯的协议,浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据,当你获取 Web Socket 连接后,你就可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。