HTML 5.1 - Detailed explanation of 14 new features and usage sample codes (picture)-H5 Tutorial-php.cn

HTML5 belongs to the World Wide Web Consortium (W3C), an organization that provides standards for the entire Internet community, and the resulting protocols can be used around the world. In November 2016, the W3C updated the long-standing HTML 5 standard, its first minor update in 2 years. Many of the features originally proposed for HTML 5.1 were removed due to design flaws and lack of support from browser vendors.

Although there are some elements and feature improvements that have been brought into HTML 5.1, it is still a small update. Some of the new elements include combination tags, which now include , , and , giving developers more ways to express their creativity and content. Space.

The W3C has begun developing the HTML 5.2 draft, which is expected to be released by the end of 2017. What we are here to present are the new features and improvements introduced in version 5.1. You don't need to use JavaScript to take advantage of these features. Not all browsers support these features, so it's a good idea to check browser support before using them in a production environment.

14. Prevent phishing attacks Most people who use target ='_ blank' don't know an interesting fact - newly opened tabs can change window.opener.location to some phishing pages. It will execute some malicious JavaScript code on your behalf on the open page. Because users trust that the page they open is safe, they have no doubts.

To completely eliminate this problem, HTML 5.1 has standardized the use of the rel="noopener" attribute by isolating the browser context. rel="noopener" can be used in and tags. The link won't make trouble anymore Copy after login

13. Flexible handling of picture titles The tag represents the title or legend associated with the element, usually as a container for visual elements such as pictures, charts, illustrations, etc. In earlier versions of HTML, could only be used as a child tag of the first or last . HTML5.1 has relaxed this restriction so that you can now use anywhere within a container. The Headline of todays news A man fueling up his car at petrol station This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.

Copy after login

12. Spell check spellcheck is an enumeration property whose value can be an empty string, true, or false. Specifying its status as true means that the element will be checked for spelling and grammar.

element.forceSpellCheck() will force user agents to report checked spelling and grammatical errors on text elements, even if the user never focused input on that element. Name:

Copy after login

11. Empty option The new version of HTML allows you to create an empty element. It can be a child element of an , or element. You may find this feature helpful when designing user-friendly forms.

10. Support Frame’s full screen The allowfullscreen property, a Boolean variable developed for Frame, allows you to control whether content can be displayed in full screen by using the requestFullscreen() method. For example, let's use an iframe embedded in a YouTube player. You need to set the allowfullscreen attribute to allow the player to display the video in full screen. Fred Flintstone

12:44 — Private Post

Check out my new video!

Copy after login

9. Embed header and footer HTML5.1 allows you to embed header and footer inside another header. You can add a header or footer to the header element if they contain themselves within paragraph content. This feature becomes very useful if you want to add elaboration tags such as and to semantic paragraph elements.

In the code below, the tag contains a tag, which has an tag that itself contains a tag. Lesson: How to cook chicken About the author: Tom Hank Contact him!

Expert in nothing but Cooking. The cookbook sideshow.

Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it.

Copy after login

8. Zero-width image The new version of HTML allows you to add zero-width images. This feature can be used when the image does not need to be displayed to the user. If an img element is used for something other than displaying an image, for example, as part of a service that counts page views, use a value of 0 for the width and height attributes. For 0-width images, it is recommended to use empty attributes. Copy after login

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

Form validation Enter details

Mandatory input Submit document.querySelector('form').reportValidity() Copy after login 6. 浏览器的上下文菜单

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

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

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

checkbox – 选择或者取消选择一个选项；

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

Right click to get the context menu demo. Checkbox 1 Checkbox 2 Radio button a Radio button b Disabled menu item Copy after login 5. 在脚本和样式上使用加密随机数 加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在 和 元素中。

它一般被用在一个网站的内容安全策略之中，以决定一个特定的样式和脚本是否应该在页面上被实现。在下面所提供的代码中，这个 value 是硬编码的，不过在实际的使用场景中，这个值是随机生成的。

The JavaScript Code Copy after login 4、反序链接关系 rev 属性在 HTML4 里有定义，但是它并没出现在 HTML5 里。W3C 决定在 和 元素里重新包含 rev 属性。rev 属性标识当前和反向的链接文档的关系。它已经被包含来支持广泛使用数据结构标记格式，RDFa。

让我们用两个文档来举个例子，每个包含一课程，在它们之间的链接可以使用如下 rel 和 rev 的属性来定义。

//Document with URL "chapter1.html" //Document with URL "chapter2.html" Copy after login 3. 显示/隐藏信息 新的 和 元素允许您向一段内容添加扩展信息。您可以通过单击元素来显示或隐藏一个附加信息块。 默认情况下是隐藏附加信息的。

在代码中，您应该将 标记放在 标记内，如下所示。 标签之后，你可以添加要隐藏的其他内容。

Error Message This file hasn't been download due to network error. File name: Passcode.txt File size: 8 KB Error code: 342a Copy after login 2. 更多的输入项类型

HTML 输入项元素扩充了三个输入类型 – week, month 以及 datetime-local。

正如其名称所表明的，头两个元素可以让用户选择一个星期值和一个月份值。根据浏览器的支持情况不同，它们俩都会被渲染成一个下拉显示的日历，让你可以选择一年中一个特定的星期或者月份。

datatime-local 表示的是一个日期和时间的输入域, 不过没有时区设置。其数据可以采用跟 month 或者 week 输入项类似的方法来选定, 而时间可以单独输入。

Week, Month and Datetime-local Choose a week: Birthday (month and year): Joining (date and time): Copy after login 1. 响应式图像 W3C 引入了一些功能特性，无需使用 CSS 就可以实现响应式图像。它们是 …

srcset 图像属性

srcset 属性让你可以指定一个多个可选的图像来源，对应于不同的像素分辨率。它将允许浏览器根据用户设备的不同选择合适质量的实现来进行显示。例如，对于使用网络比较慢的移动设备的用户，显示一张低分辨率的图片会比较好。

你可以使用 srcset 属性并且带上它自有的 x 修饰符来描述每一个图片的像素比例, 如果用户的像素比例等于 3，就会显示 high-res 这张图片。

Copy after login 除了像素比例之外，你也可以选择使用 w 修饰符来指定不同尺寸大小的图片。在如下示例中，high-res 图片被定义成在宽度为 1600px 时显示。

Copy after login 图片属性的大小

大多数时间，开发者喜欢根据不同屏幕大小来显示不同图片。这样可以使用 sizes 属性。它可以让你把屏幕宽度转换成图片所需要的空间，然后使用 srcset 属性选择合适图片。例如：

Copy after login 在这个例子中，sizes 属性定义图片宽度为窗口宽度的 100% 时，大于 25em，或者 60% 的宽度时，小于等于 25em。

图片元素

图片元素允许你使用几个不同屏幕大小的源来定义图片。这样可以使用 元素里的 属性，和描述多个 子元素。

单独的 标签并不会显示任何东西。你可以定义默认图片源作为 src 属性的值，在 srcset 属性里使用可选的图片源，如下所示：

Copy after login