专栏首页京程一灯10个HTML 5.1的新功能

10个HTML 5.1的新功能

作者:Bibi 原文: http://www.w3cplus.com/html5/10-new-features-of-html-5-1.html

在几个星期前,W3C在2016年11月发布了新的 HTML 5.1 recommendation,HTML规范得到了重大改进,在最近的博客中,W3C将新的主版本称为黄金标准,因为HTML 5.1为我们提供了新的方法,我们可以使用HTML来创建更灵活的网络体验。

注意:目前并非所有浏览器都支持所有这些功能,所以在使用它们之前,请不要忘记检查浏览器是否支持。

1.为响应设计定义多个图像资源

在HTML 5.1中,你可以使用<picture>标签和srcset属性来使响应式图像选择成为可能。<picture>标签表示图像容器,其允许开发者声明不同的图像资源以便适应UA的视口大小,屏幕像素密度,屏幕类型和在响应设计中使用的其他参数。

2.显示或隐藏额外信息

使用<details>和<summary>标签,可以向内容项添加扩展信息。 默认情况下不显示额外信息,但如果用户感兴趣,他们可以选择查看。 在你写代码的时候,应该将<summary>标签放在<details>中。 你可以在<summary>标签之后添加要隐藏的额外信息。

3.将功能添加到浏览器的上下文菜单

使用<menuitem>元素及其type =“context”属性,可以将自定义功能添加到浏览器的上下文菜单中。你需要将<menuitem>指定为<menu>标签的子元素。<menu>元素的id需要与我们要添加上下文菜单的元素(即上面示例中的<button>元素)的contextmenu属性的值相同。

注意:浏览器对这个功能的支持还不是很好。 Chrome 54并不支持,而Firefox 50仅允许一个额外的上下文菜单。

4.嵌入页眉和页脚

在HTML 5.1中,如果每个级别都包含在分段内容里,则允许嵌套页眉和页脚。

如果要向语义分段元素(例如<article>和<section>)添加精细的标题话,这个功能会非常有用。 下面的代码示例在标题中创建一个侧边栏,<aside>标签也是一个分段元素,并在其中添加了关于作者的额外信息。 标题中的侧边栏也有自己的标题,以及一个副标题和作者的联系方式。

5.对样式和脚本使用加密随机数

使用HTML 5.1,通过在<script>和<style>元素中使用nonce属性。你可以将加密随机数添加到样式和脚本中。加密随机数是随机生成的数字并且一个只能使用一次,而且是在每次页面请求的时候重新生成。网站的内容安全策略可以使用随机数来决定是否应在网页上应用特定的脚本或样式。在Google 开发者的网页基础中,你可以进一步了解如何正确使用随机数和CSP。

6.创建反向链路关系

你可以再次将rev属性添加到你的链接。它之前在HTML 4中被定义,但HTML5不支持。 HTML 5.1允许开发人员再次为<link>和<a>元素使用此属性。rev属性与rel相反,它指定当前文档和链接文档在相反方向上的关系(当前文档与链接文档的关系)。

rev属性已包含在HTML 5.1规范中,主要用于支持RDFa,后者是一种广泛使用的结构化数据标记格式,并扩展了HTML语言。

7.使用零宽度图像

HTML 5.1允许开发人员创建width属性值为0的 零宽度图像 。 如果你想要包含不想向用户显示的图像(例如跟踪图像文件)则此功能很有用。建议将零宽度图像与空alt属性一起使用。

8.分离浏览器上下文以防止网络钓鱼攻击

在你的网站上使用相同的源链接最终可能会让你陷入麻烦。 该漏洞被称为target =“_ blank”漏洞,这是一个让讨厌的网络钓鱼攻击。你可以(安全地)测试下这个漏洞是如何在这个机智的Github演示页上进行攻击的,你可以在Github上查看该代码。

HTML 5.1已经标准化了rel =“noopener”属性的用法,它消除了分隔浏览器上下文的问题,你可以在<a>和<area>元素中使用rel =“noopener”。

9.创建一个空选项

HTML 5.1允许开发人员创建一个空的<option>元素。<option>标签可以是<select>,<optgroup>或<datalist>元素的子元素。 如果你不想建议用户应该选择哪个选项,以及在想要设计用户友好的表单时,使用空的<option>可能很有用。

10.更灵活地处理图形标题

<figcaption>标签表示<figure>元素的题注或说明,其是用于视觉(例如插图,照片和图表)的容器。以前,<figcaption>标记只能用作<figure>元素的第一个或最后一个子元素。HTML 5.1已放松此规则,现在<figcaption>可以出现在其<figure>容器中的任何位置。


快扫描二维码,与志佳老师来聊聊吧~~

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:Bibi

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Adobe 宣布放弃 Flash,视频播放将进入 HTML5 时代

    今天,Adobe 宣布,计划终结 Flash,在2020年会停止开发和分发这款浏览器插件,并建议内容创作者将 Flash 内容移植到 HTML5、WebGL 以...

    疯狂的技术宅
  • WebAR 如何改变增强现实的未来

    增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其...

    疯狂的技术宅
  • HTML 5.2中有些什么新变化?

    不到一个月前,HTML 5.2成为W3C官方的推荐标准(REC)。 当一个规范进入REC阶段时,就意味着它已经得到了W3C成员和负责人的正式认可,并且W3C正式...

    疯狂的技术宅
  • Metasploit与Nmap组合拳对内网进行Ms17-010(永恒之蓝)攻击

    使用Nmap探测内网192.168.119.1的C段下那些主机开放了445端口已经存在ms17-010漏洞

    漏洞知识库
  • Storm上的实时统计利器-easycount

    背景 Storm是TRC(腾讯实时计算)平台的核心组件。与Hadoop不同,storm之上没有像hive,pig之类的解放应用开发人员效率的工具。开发原生的st...

    腾讯大数据
  • iOS开发——Instruments工具调试

    随着项目的进行,APP的优化必须要尽早的展开了,所以最近自己在学习很多APP的调试技巧,今天我们就来说说Xcode为我们准备的自带的调试工具。

    Originalee
  • 使用 .NET Core 3.0 的 AssemblyLoadContext 实现插件热加载

    因为 .NET Core 不像 .NET Framework 一样支持动态创建与卸载 AppDomain,所以一直都没有好的方法实现插件热加载,好消息是,.NE...

    梁规晓
  • 学习前端 第1周第2天

    Joel
  • 世界顶级公司的前端面试都问些什么[每日前端夜话(0x0D)]

    在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师。在这篇文章中,我想分享一些技巧,帮助大家做好准备。

    疯狂的技术宅
  • 2017年IT预测:多云将面临令人担忧的安全问题

    随着越来越多的企业的业务迁移到云计算,公共云采用和安全问题预计将会增长。 虽然云计算应用日益增长,但其未来发展还面临一些挑战,一些企业表示,他们面临转型到云计...

    静一

扫码关注云+社区

领取腾讯云代金券