0

0

HTML 5.1 — 14 项新增特性及使用示例代码详解(图)

黄舟

黄舟

发布时间:2017-03-09 16:03:25

|

2179人浏览过

|

来源于php中文网

原创

  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

@@##@@
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 允许你创建一个空的   或者 

  10. 支持 Frame 的全屏

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

  9. 嵌入 header 和 footer

  HTML5.1 允许你在另一个 header 嵌入 header 和 footer。你可以向头部元素添加一个 header 或 footer ,假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如 

 和 
 标签到语义段落元素,这个特性将变得非常有用。

  在下面的代码中,

 标签包含一个 
 标签,它有个自身包含 
 标签的 

Lesson: How to cook chicken

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.

  8. 图片零宽度

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

@@##@@

  7. 校验表单

HTML 5.1 — 14 项新增特性及使用示例代码详解(图)

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

Form validation

Enter details

  6. 浏览器的上下文菜单

HTML 5.1 — 14 项新增特性及使用示例代码详解(图)

  在 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

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

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

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

  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 5.1 — 14 项新增特性及使用示例代码详解(图)

  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 属性。它可以让你把屏幕宽度转换成图片所需要的空间,然后使用 srcset 属性选择合适图片。例如:

@@##@@

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

  图片元素

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

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


  
  
 
  @@##@@

HTML 5.1 — 14 项新增特性及使用示例代码详解(图)HTML 5.1 — 14 项新增特性及使用示例代码详解(图)HTML 5.1 — 14 项新增特性及使用示例代码详解(图)HTML 5.1 — 14 项新增特性及使用示例代码详解(图)HTML 5.1 — 14 项新增特性及使用示例代码详解(图)HTML 5.1 — 14 项新增特性及使用示例代码详解(图)

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.9万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 3.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号