HTML5.1 新增的14项特性学习

1.防止网络钓鱼攻击

使用target=_’blank’时， 新打开的标签可以更改window.opener.location到一些钓鱼网站，它会在开放页面上代表你执行一些Javascript代码。为了解决这个问题，HTML5.1通过隔离浏览器上下文的方式标准化了的rel=”noopener”属性方法。rel=”noopener”可以在和标签中使用。

<a href="#" target="_blank" rel="noopener">
    链接不会出现问题
</a>

2.灵活处理图片标题

figcaption标签表示与figure元素关联的标题或图例，通常作为例如图片、图表、插图等视觉元素的容器。HTML5.1解除以前figcaption对figure的限制，现在可以在figure容器中的任何位置中使用figcaption。

<artical>
    <h1>第一个标题</h1>
    <figure>
        <img src="" alt=""/>
        <figcaption>这是一段文字</figcaption>
    </figure>
    <p>倒数段落</p>
</artical>

3.拼写检查

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

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

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

4.空选项

新版的HTML5.1允许你创建一个空的元素。它可以是、或者元素的子元素。其对在设计对用户友好的表单方面有益。

5.支持Frame的全屏

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

<article>
    <header>
        <p><img src="" alt=""/><b>BBBBBBBB</b></p>
        <p><a href=""></a>12:12 <a href="">2222</a></p>
    </header>
    <main>
        <p>check video</p>
        <iframe title="video" src="" allowfullscreen></iframe>
    </main>
</article>

6.嵌入header和footer

HTML5.1允许你在另一个header嵌入header和footer。你可以向头部元素添加一个header或footer，假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如section和article标签到语义段落元素，这个特性将变得十分有用。

<article>
    <header>
        <h2>H2</h2>
        <aside>
            <header>
                <h3>H3</h3>
                <p><a href="">html</a></p>
            </header>
            <p>Ppppppp</p>
        </aside>
    </header>
    <p><ins>这是一些内容</ins></p>
</article>

7.图片零宽度

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

<img src="" width="0" height="0" alt=""/>

8.校验表单

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

<h2>Form</h2>
<p>Enter</p>
<form>
    <label>
        must: <input type="password" name="password" required/>
    </label>
    <button type="submit">Submit</button>
</form>
<script>
    document.querySelector('form').reportValidity()
</script>

9.浏览器的上下文菜单

HTML5.1中，可以使用menu>标记来定义菜单，里面包含了一个或者多个元素，然后利用contextmenu属性将其绑定到任何元素上。

元素的id取值应该与我们想要 为其添加上下文菜单的元素的contextmenu属性取值保持一致。

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

• radio -从一个分组中获取选项
• checkbox -选择或者取消选择一个选项
• 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('WARNING')">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>

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

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

<script nonce="d3ne7uWP43Bhr0e">
    The Javascript Code.
</script>

11.反序链接关系

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

    <link href="Lesson2.html" rel="next" rev="prev"/>

    <link href="Lesson1.html" rel="prev" rev="next"/>
    <link href="Lesson3.html" rel="next" rev="prev"/>

12.显示/隐藏信息

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

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

<section>
    <h3>Erroe Message</h3>
    <details>
        <summary>This file hasn't been download due to network error.</summary>
        <dl>
            <dt>File name:</dt><dd>Passcode.text</dd>
            <dt>File size:</dt><dd>8 KB</dd>
            <dt>Erroe code:</dt><dd>342a</dd>
        </dl>
    </details>
</section>

13.更多的输入类型

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

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

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

<section>
    <h2>
        Week，Month and Datatime-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="acction_page.php">
        Joining(data and time):
        <input type="datetime-local" name="bdaytime"/>
        <input type="submit" value="Send"/>
    </form>
</section>

14.响应式图像

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

srcset图像属性

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

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

<img src="low-res.jpg" srcset="
   clicks/low-res.jpg 1x,
   clicks/medium-res.jpg 2x,
   clicks/high-res.jpg 3x"
        >

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

<img src="low-res.jpg" srcset="
   clicks/low-res.jpg 500w,
   clicks/medium-res.jpg 1000w,
   clicks/high-res.jpg 1600w"
        >

sizes图像属性

可以针对分配给图像显示的空间大小来对宽度做出调整，然后 使用srcset属性来挑选合适的图片来显示。

<img src="" sizes="(max-width:25em) 60vw,100vw"
        srcset="low-res.jpg 500w,
        medium-res.jpg 1000w,
        high-res.jpg 1600w"
/>

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

picture元素

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

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

<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="clicks/medium-res.jpg"/>
</picture>

学习整理自：

原文地址：http://www.rankred.com/whats-new-in-html-5-1-added-features/

—《What’s New In HTML 5.1 — 14 Added Features and How To Use Them》