H5新特性

Posted by Shen Chaoran on July 26, 2018

H5 新特性概述

  • 语义化标签:nav, header, footer, sider, article, figure
  • 支持多媒体的展示标准:audio, vidio, svg, canvas
  • 一些 DOM 操作:拖拽
  • Web APIs:navigator.geolocation
  • Web 存储:localStorage, sessionStorage
  • 缓存:manifest
  • 多线程:web worker
  • 服务器推技术:EventSource
  • 表单输入类型:email, url, number, range, date picker, search, color,免去了表单验证的操作
  • 表单元素:datalist, keygen, output
  • 表单属性:autocomplete, autofocus, form …

语义化的意义

  • 有利于搜索引擎的检索
  • 有利于开发和维护
  • 在没有 CSS 时同样能表现出好的内容结构
  • 有利于其他设备的解析,如屏幕阅读器、移动设备等

语义化标签

  • template html 模板
  • mark 高亮
  • i 表示因为某种原因和正常文本不同的文本,例如专业术语、外语短语或排版用的文字,通常表现为斜体
  • em 表示强调,视觉上是斜体的效果
  • strong 加粗,h4 中表示强调
  • b 加粗,没有表达任何特殊的重要性和相关性。通常用于关键字回顾
  • section 文档中的一个区域、章节
  • article 表示文档
  • sider
  • nav
  • header
  • footer
  • main 定义文档中主要或重要的内容
  • figure 图例
  • figurecaption 代表一个图例的说明
  • data 关联一个内容的机器可读的等价形式
  • time 时间,在 datatime 属性中可以添加机器可读的形式的值
  • ruby
  • rt
  • rp
  • bdi
  • wbr 代表建议换行 (Word Break Opportunity) ,当文本太长需要换行时将会在此处添加换行符
  • meter