专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
程序员的那些事  ·  突发!高通拟收购英特尔;大连思科再裁员,补偿 ... ·  2 天前  
程序员小灰  ·  刷新三观,深圳某公司重新定义八小时工作制 ·  5 天前  
程序员小灰  ·  程序员的AI时代,如何用AI来增加副业收入 ·  1 周前  
51好读  ›  专栏  ›  OSC开源社区

HTML 5.1 — 14 项新增特性及使用案例

OSC开源社区  · 公众号  · 程序员  · 2017-01-20 08:47

正文


OSC 协作翻译

原文:What’s New In HTML 5.1 — 14 Added Features and How To Use Them

链接:http://www.rankred.com/whats-new-in-html-5-1-added-features/

译者:xufuji456, leoxu, Tocy


HTML5 属于万维网联盟 (W3C), 这个组织为整个网络界提供了标准,如此形成的协议可在全世界通行。在 2016 年 11 月, W3C 对长期行使的 HTML 5 标准进行了更新,它是2年内的第一次小更新。许多最开始提出的 HTML 5.1 功能特性都因为设计上的缺陷和缺乏浏览器厂商的支持而去掉了。


尽管有一些元素和功能提升被带进了 HTML 5.1 里面, 但它仍然是一个小的更新。其中的一些新的元素包含了组合标签, 现在这样的元素包括有

,
, 以及, 这样就为开发者提供了更多表达创意和内容的空间。


W3C 以及开始着手发展 HTML 5.2 草案,有望于 2017 年底发布。而我们在这里所要呈现的是在版本 5.1 中被引入的新的功能特性和功能提升。你不需要动 JavaScript 就可以利用上这些功能特性。并非所有的浏览器都支持这些功能特性,因此你最好是在将它们应用于生产环境之前先检查一下浏览器的支持情况。


防止网络钓鱼攻击


大多数使用 target ='_ blank' 的人都不知道一个有趣的事实——新打开的标签可以更改 window.opener.location 到一些网络钓鱼页面。它会在开放页面上代表你执行一些恶意 JavaScript 代码。因为用户相信打开的页面已安全,所以他们不会有所怀疑。

为了完全消除这个问题,HTML 5.1 已经通过隔离浏览器上下文的方式标准化了的 rel=”noopener”属性的用法。 rel =“noopener”可以在 标签中使用。


灵活处理图片标题


 标签表示与
元素关联的标题或图例,通常作为例如图片、图表、插图等视觉元素的容器。在早期的 HTML 版本中,
 只能用作第一个或最后一个 
 的子标签。HTML5.1 已放宽此限制,现在您可以在 
 容器中的任何位置使用 



拼写检查


spellcheck 是一个取值可以为空字符串、true 和 false 的枚举属性。如果指定其状态为 true,就表示元素将会接受对其的拼写和语法检查。


element.forceSpellCheck() 将强制用户代理在文本元素上报告检查出来的拼写和语法错误,即使用户从来没将输入聚焦在该元素上。


空选项


新版的 HTML 允许你创建一个空的   或者 


支持 Frame 的全屏


为 Frame 开发的布尔变量 allowfullscreen 属性允许您通过使用 requestFullscreen() 方法控制内容是否可以全屏显示。 例如,我们使用嵌入 YouTube 的播放器的 iframe 做示例。 需要设置 allowfullscreen 属性才能让播放器全屏显示视频。



嵌入 header 和 footer


HTML5.1 允许你在另一个 header 嵌入 header 和 footer。你可以向头部元素添加一个 header 或 footer ,假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如 

 和 
 标签到语义段落元素,这个特性将变得非常有用。


在下面的代码中,

 标签包含一个 
 标签,它有个自身包含 
 标签的 



图片零宽度


HTML 新版本允许你添加零宽度的图片。当图片不需要向用户展示时,可以使用此特性。假如一个 img 元素还有其他用途而不仅仅是展示一个图片,例如,作为一个服务的一部分用来计算页面视图个数,在 width 和 height 属性中使用 0 数值。对于 0 宽度的图片,推荐使用空属性。



校验表单



新的 reportValidity() 方法允许你校验一个表单和重置结果,并且在浏览器适合位置向用户报告错误。用户代理可以报告一个以上的限制规则,假如单一元素同时遇到多个问题。对于这种情况,“密码”输入为必填内容但没有填,将会标识为错误。



浏览器的上下文菜单

    



在 HTML 5.1 中, 你可以使用 

 标记来定义菜单,里面包含了一个或者多个  元素, 然后利用 contextmenu 属性将其绑定到任何元素上。  元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。


每一个  都可以有如下三个表单项中的一个:

  • radio – 从一个分组中获取选项;

  • checkbox – 选择或者取消选择一个选项;

  • command – 在点击时执行一个动作。



在脚本和样式上使用加密随机数


加密随机数(cryptographic nonce )是一个随机生成的数字,只能被使用一次, 而且针对每一次页面请求,它都得被生成出来。这个 nonce 属性可以被使用在