AD
 > 汽车 > 正文

HTML 5.1 — 14夏季连衣裙 项新增特性及应用案例

[2019-09-10 19:28:46] 来源: 编辑: 点击量:
评论 点击收藏
导读:     OSC 合作翻译   原文:What’s New In HTML 5.1 — 14 Added Features and How To Use Them   链接:http://www.rankred.com/whats-new-in-html-5-1-added-featur

  

  OSC 合作翻译

  原文:What’s New In HTML 5.1 — 14 Added Features and How To Use Them

  链接:http://www.rankred.com/whats-new-in-html-5-1-added-features/

  译者:xufuji456, leoxu, Tocy

  HTML5 属于万维网同盟 (W3C), 这个组织为整个Internet界供给了标准,如斯形成的协定可在环球通畅。在 2016 年 11 月, W3C 对长期行使的 HTML 5 尺度进行了更新,它是2年内的第一次小更新。很多最入手下手提出的 HTML 5.1 死守赋性都因为打点上的缺点和不敷涉猎器厂商的支持而去掉了。

  当然有一些元素与从命选拔被带进了 HTML 5.1 里面, 但它仍旧是一个小的更新。此中的一些新的元素蕴含了组合标签, 那会这样的元素包括有 dialog, details, summary 以及picture, 如许就为斥地者供给了更多表达创意和形式的空间。

  W3C 以及劈头劈脸下手发展 HTML 5.2 草案,有望于 2017 岁暮颁发。而咱们在这里所要呈现的是在版本 5.1 中被引入的新的屈从特点和从命汲引。你不紧要动 Java 便可以独霸上这些屈服赋性。并不是所有的涉猎器都支持这些遵命本色,因此你最佳是在将它们使用于生打造环境之前先查抄一下浏览器的支持情况。

  防范Internet垂钓袭击

  大多半使用 target =_ blank 的人都不知道一个风趣的事实——新掀开夏季连衣裙的标签可以更动 window.opener.location 到一些Internet钓鱼页面。它会在开放页面上代表你实验一些歹意 Java 代码。由于用户信赖掀开的页面已安全,所以他们不会有所狐疑。

  为了完全消弭这个问题,HTML 5.1 也曾经由间断中止阅读器高低文的方式尺度化了的 rel=”noopener”属性的用法。 rel =“noopener”可以在 a 和 area 标签中使用。

  锐敏处置图片标题

  figcaption 标签表示与 figure 元素关联的标题或图例,通常作为比喻图片、图表、插图等视觉元素的容器。在晚期的 HTML 版本中,figcaption 只能用作第一个或最后一个 figure 的子标签。HTML5.1 已放宽此制约,而今您可以在 figure 容器中的任何职位使用 figcaption。

  

  拼写检查

  spellcheck 是一个取值可以为空字符串、true 与 false 的列举属性。如果指定其状态为 true,就闪现元素将会蒙受对其的拼写与语法搜检。

  

  element.forceSpellCheck() 将自愿用户代办署理在文本元素上呈报查看进去的拼写与语法谬误,纵然用户向来没将输出聚焦在该元素上。

  空选项

  新版的 HTML 准予你设立一个空的 option 元素。它可所以 optgroup, datalist 能够 select 元素的子元素。你将会缔造这项功能在规划对用户朋侪的表全面时能有所正手。

  赞成 Frame 的全屏

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

  

  嵌入 header 和 footer

  HTML5.1 准予你在另一个 header 嵌入 header 与 footer。你可以向头部元素增加一个 header 或 footer ,假设它们在段落模式里涵概它们本人。如果你想增长详细论说诸如 section 和 article 标签到语义段落元素,这个个性将变得尤其有效。

  不才面的代码中,article 标签包括一个 header 标签,它有个自身包罗 header 标签的 aside 标签。

  

  图片零宽度

  HTML 新版本容许你增多零宽度的图片。当图片不需要向用户展示时,可以使用此特点。若是一个 img 元素另有另外用场而不光仅是展示一个图片,比如,作为一个供职的一一小块用来较量争论页面视图个数,在 width 与 height 属性中使用 0 数值。关于 0 宽度的图片,引荐使用空属性。

  校验表单

  

  新的 reportValidity() 方法允许你校验一个表单与重置毕竟,而且在浏览器恰当身分向用户报告不合错误。用户署理可以呈报一个以上的限度划定规矩,若是单一元素同时碰着多个问题。对付这种情况,“暗码”输出为必填形式但不有填,将会标识为过错。

  

  涉猎器的凹凸文菜单

  

  在 HTML 5.1 中, 你可使用 menu 标记来定义菜单,内里包含了一个笼统多个 menuitem 元素, 从此独霸 contextmenu 属性将其绑定上任何元素上。 menu 元素的 id 取值理当与咱们想要为其增多凹凸文菜单的元素的 contextmenu 属性取值保持一致。

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

radio – 从一个分组中得到选项;

checkbox – 选择也许取消选择一个选项;

command – 在点击时实行一个行动。

  

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

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

  它一样平常被用在一个站点的形式平安策略之中,以决议一个特定的样式与剧本能否应当在页面上被实现。不才面所供给的代码中,这个 value 是硬编码的,不外在实际的使用场景中,这个值是随机天生的。

  

  反序链接关连

  rev 属性在 HTML4 里有定义,然则它并没出目下当今 HTML5 里。W3C 决意在 a 与 link 元素里重新包括 rev 属性。rev 属性标识今朝和反向的链接文档的干系。它曾经被搜聚来赞成遍及使用数据机关符号花样,RDFa。

  让咱们用两个文档来举个例子,每个搜聚一课程,在它们之间的链接可以使用下列 rel 和 rev 的属性来界说。

  

  显示/隐藏信息

  新的 details 与 summary 元素准许您向一段内容增加扩展静态。您可以颠末单击元素来显示或潜藏一个附加消息块。 默认情况下是暗藏附加新闻的。

  在代码中,您理应将 su妹妹ary 标志放在 details 标志内,以下所示。 summary 标签以后,你可以增进要埋伏的另外形式。

  

  更多的输入项类型

  

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

  正如其名称所表明的,头两个元素可让用户选择一个星期值和一个月份值。按照涉猎器的赞成情况不合,它们俩都会被夏季连衣裙渲染成一个下拉显示的日历,让你可以选择一年中一个特定的星期大要月份。

  datatime-local 透露表现的是一个日期和工夫的输入域, 无非没偶尔区设置装备摆设。其数据可以采用跟 month 大要 week 输入项相斥的门径来选定, 而时间可以独自输出。

  

  响应式图像

  W3C 引入了一些坚守共性,无需使用 CSS 就可以完成响应式图像。它们是 …

  srcset 图像属性

  srcset 属性让你可以指定一个多个可选的图象源头,对应于差异的像素甄别率。它将核准阅读器依据用户设施的分歧选择相宜品格的完成来进行显示。例如,对于使用Internet比照慢的挪动装备的用户,显示一张低判袂率的图片会相比好。

  你可以使用 srcset 属性而且带上它自有的 x 润饰符来刻划每一个图片的像素比例, 如果用户的像素比例即是 3,就会显示 high-res 这张图片。

  

  除了像素比例以外,你也能够选择使用 w 润色符来指定分歧尺寸大小的图片。在如下示例中,high-res 图片被界说成在宽度为 1600px 时显示。

  

  sizes 图象属性

  大大都时刻创作者们都恋爱针对不同的屏幕尺寸显示分歧的图片。这个可以用 sizes 属性做到。它让你可以针对分派给图象显示的空间大小来对宽度做出调解, 此后使用 srcset 属性来挑拣合乎的图片来显示。例如…

  

  在这里, sizes 属性界说了在视窗大于 25 em 时图象宽度为视窗宽度的 100%,笼统在小于等于 25em 时为视图宽度的 60%。

  picture 元素

  picture 元素让你可以针对差异的屏幕尺寸申明图片。这个可以经过用 picture 元素封装 img ,并且描画多个 source 子元素来完成。

  picture 符号零丁使用其实不会显示任何器材。你也曾被假定会申明默许的图像来源作为 src 属性的取值,而可选的图象本源则会放在 scrset 属性当中,以下所示:

 夏季连衣裙 

  引荐阅读

  2016 年度开源中国新增开源软件排行榜 TOP 100

  2016 年度最受欢送中国开源软件 TOP 20

  2016 年度码云热门工程排行榜 TOP 50

  2017 值得关注的十个开源项目

  2017 最值得存眷的十大 APP、Web 界面筹算趋势

  点击“阅读原文”查看更多减色内容

为您推荐