您现在的位置是：网站首页> 编程资料编程资料

HTML 5.1学习之新增的14项特性与应用示例HTML 5.1来了 9月份正式发布 更新内容预览

2023-10-09 286人已围观

简介 这篇文章主要给大家介绍了HTML 5.1新增的14项特性与应用示例，文中介绍的非常详细，对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。

前言

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

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

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

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

14. 防止网络钓鱼攻击

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

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

 The link won't make trouble anymore

13. 灵活处理图片标题

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

The Headline of todays news 
Petrol price drops
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.

12. 拼写检查

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

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

11. 空选项

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

6. 浏览器的上下文菜单

在 HTML 5.1 中, 你可以使用

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

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

  1. radio – 从一个分组中获取选项；
  2. checkbox – 选择或者取消选择一个选项；
  3. command – 在点击时执行一个动作。
 Right click to get the context menu demo. 
Checkbox 1 Checkbox 2Radio button aRadio button bDisabled menu item

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

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

4、反序链接关系

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

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

//Document with URL "chapter1.html"  //Document with URL "chapter2.html"

3. 显示/隐藏信息

新的

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

在代码中，您应该将

标记放在
标记内，如下所示。 标签之后，你可以添加要隐藏的其他内容。

Error Message
This file hasn't been download due to network error.
File name:
Passcode.txt
File size:
8 KB
Error code:
342a

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):

1. 响应式图像

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

srcset 图像属性

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

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

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

sizes 图像属性

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

提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：HTML table鼠标拖拽排序功能结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码HTML5实现的超流畅拖拽效果(相对以前的html版本)html5 拖拽上传图片实例演示突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述html5指南-3.如何实现html元素拖拽功能HTML5实现的拖拽效果

                                                                
下一篇：html是什么文件 html文件如何打开 Win10怎么打开html文件？Win10打开html文件的方法ubuntu命令行打开html文件的方法HTML利用超链接打开链接文件的方法介绍

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网