HTML 5.1 learning 14 new features and application examples

This article mainly introduces to you the 14 new features and application examples of HTML 5.1. The introduction in the article is very detailed and has certain reference value for everyone. Friends in need can take a look below.

Preface

As we all know, HTML5 belongs to the World Wide Web Consortium (W3C). This organization provides standards for the entire Internet community, and the protocols formed in this way 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 also started working on 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 production.

14. Prevent Phishing Attacks

Most people who use target ='_ blank' don't know an interesting fact - newly opened tabs can be changed 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 usage of the rel="noopener" attribute by isolating the browser context. rel="noopener" can be used in and tags.

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

13. Flexible processing of picture titles

tag indicates that it is associated with the

element A title or legend, often used 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.

<article>
  <h1 id="The-nbsp-Headline-nbsp-of-nbsp-todays-nbsp-news-nbsp">The Headline of todays news </h1>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="petrolimage.jpeg"  class="lazy"   alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

12. Spellcheck

spellcheck is a value that can be an empty string, true or false Enumeration properties. 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.

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

11. Empty option

The new version of HTML allows you to create an empty element. It can be a child element of an ,

10. Full screen support for Frame

The Boolean variable allowfullscreen attribute 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. The allowfullscreen attribute needs to be set to allow the player to display the video in full screen.

<article>
  <header>
  <p><img  src="/static/imghwm/default1.png"  data-src="/usericons/16235"  class="lazy"   alt="HTML 5.1 learning 14 new features and application examples" > <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

9. Embed header and footer

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

and

to semantic paragraph elements.

In the following code, the

tag contains a

tag, which has an

tag that itself contains a

tag.

<article>
  <header>
    <h2 id="Lesson-nbsp-How-nbsp-to-nbsp-cook-nbsp-chicken">Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2 id="About-nbsp-the-nbsp-author-nbsp-Tom-nbsp-Hank">About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>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. </ins></p>
</article>

8. Zero-width images

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.

<img src="/static/imghwm/default1.png"  data-src="theimagefile.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="">

7. Verification form

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

<h2 id="Form-nbsp-validation">Form validation</h2>
<p>Enter details</p>
<form>
  <label>
    Mandatory input <input type="password" name="password" required />
  </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector(&#39;form&#39;).reportValidity()
</script>

6. 浏览器的上下文菜单

在 HTML 5.1 中, 你可以使用

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

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

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

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

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

<h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert(&#39;WARNING&#39;)">Checkbox 2</menuitem> 
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

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

加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在 <script> 和 <style> 元素中。</script>

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

<script nonce=&#39;d3ne7uWP43Bhr0e&#39;>
  The JavaScript Code 
</script>

4、反序链接关系

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

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

//Document with URL "chapter1.html"
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//Document with URL "chapter2.html"
 
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

3. 显示/隐藏信息

新的

和 

元素允许您向一段内容添加扩展信息。您可以通过单击元素来显示或隐藏一个附加信息块。 默认情况下是隐藏附加信息的。

在代码中，您应该将

标记放在

标记内，如下所示。

标签之后，你可以添加要隐藏的其他内容。

<section>
  <h3 id="Error-nbsp-Message">Error Message</h3>
  <details>
  <summary>This file hasn&#39;t been download due to network error.</summary>
  <dl>
    <dt>File name:</dt><dd>Passcode.txt</dd>
    <dt>File size:</dt><dd>8 KB</dd>
    <dt>Error code:</dt><dd>342a</dd>
  </dl>
  </details>
</section>

2. 更多的输入项类型

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

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

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

<section>
  <h2> 
    Week, Month and Datetime-local 
  </h2>
  <form action="action_page.php">
    Choose a week:
    <input type="week" name="year_week">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Birthday (month and year):
    <input type="month" name="bdaymonth">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Joining (date and time):
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="Send">
  </form>
</section>

1. 响应式图像

W3C 引入了一些功能特性，无需使用 CSS 就可以实现响应式图像。它们是 …

srcset 图像属性

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

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

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   srcset="
  clicks/low-res.jpg 1x, 
  clicks/medium-res.jpg 2x, 
  clicks/high-res.jpg 3x"
>

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

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   srcset="
  clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

sizes 图像属性

大多数时候创作者们都喜欢针对不同的屏幕尺寸显示不同的图片。这个可以用 sizes 属性做到。它让你可以针对分配给图像显示的空间大小来对宽度做出调整, 然后使用 srcset 属性来挑选合适的图片来显示。例如…

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   sizes="(max-width: 25em) 60vw, 100vw" 
  srcset="clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

在这里， sizes 属性定义了在视窗大于 25 em 时图像宽度为视窗宽度的 100%，或者在小于等于 25em 时为视图宽度的 60%。

picture 元素

picture 元素让你可以针对不同的屏幕尺寸声明图片。这个可以通过用 元素封装 ，并且描述多个 子元素来实现。

标记单独使用并不会显示任何东西。你已经被假定会声明默认的图像来源作为  src 属性的取值，而可选的图像来源则会放在 scrset 属性之中，如下所示：

<picture>
  <source media="(max-width: 25em)" srcset="
    clicks/small/low-res.jpg 1x,
    clicks/small/medium-res.jpg 2x, 
    clicks/small/high-res.jpg 3x
  ">
  <source media="(max-width: 60em)" srcset="
    clicks/large/low-res.jpg 1x,
    clicks/large/medium-res.jpg 2x, 
    clicks/large/high-res.jpg 3x
  ">
 
  <img  src="/static/imghwm/default1.png"  data-src="clicks/default/medium-res.jpg"  class="lazy"   alt="HTML 5.1 learning 14 new features and application examples" >
</picture>

更多HTML 5.1学习之新增的14项特性与应用示例相关文章请关注PHP中文网！