h5开发(2)-html5新增常用特性与API

836 阅读4分钟

参考: HTML5新增的标签与属性

新增语义化标签

  • <header> 标记定义一个页面或一个区域的头部
  • <nav> 标记定义导航链接
  • <section> 标记定义一个区域
  • <aside> 标记定义页面内容部分的侧边栏
  • <article> 标记定义一篇文章
  • <hgroup> 标记定义文件中一个区块的相关信息
  • <figure> 标记定义一组媒体内容以及它们的标题
  • <figcaption>标记定义 figure 元素的标题。
  • <dialog> 标记定义一个对话框(会话框)类似微信
  • <footer> 标记定义一个页面或一个区域的底部

语义化

什么是HTML语义化?

  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化?

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

写HTML代码时应注意什么?

  • 尽可能少的使用无语义的标签div和span;
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  • 不要使用纯样式标签,如:b、font、u等,改用css设置。
  • 需要强调的文本,可以包含在strong或者em标签中(替换b/i);
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来

Input新增的type

  • email
  • url
  • number
  • range
  • Date picker:
    Date —— 选取日、月、年
    Month —— 选取月、年
    Week —— 选取周和年
    Time —— 选取时间(小时和分钟)
    Datetime —— 选取时间、日、月、年(UTC 时间)
    Datetime-local —— 选取时间、日、月、年(本地时间)

表单属性

  • autocomplete:自动完成,适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range, color。用法:<form autocomplete="on“></form>或者单独在input中用off
  • autofocus:自动地获得焦点,适用于所有 <input> 标签的类型用法:<input autofocus="autofocus" />
  • multiple:可选择多个值,适用于<input>中type为email和file用法:<input type="file" multiple="multiple" />
  • placeholder:适用于<input>中type为:text, search, url, telephone, email, password
  • required:规定不能为空,适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file用法:<input type="text" required="required" />

Web Storage

  使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速.
  这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在,web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后,数据会被删除。

不管是 localStorage,还是sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

其他

其他还有web worker、web socket、canvas、video、audio等,等实际接触到了再补充