欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

HTML5.1里的新对象

发布时间:2016-12-10  编辑:杨雨个人博客网站   点击:   

 HTML 5.1概览

  两年前HTML5尺度的宣布对付web开拓社区来说是一件大事。不只是由于它包括了一系列让人印象深刻的新特征, 还由于它是1999年宣布的HTML4.01尺度往后,对HTML的第一个大版本更新。你此刻依然可以看到一些网站炫耀他们在行使“当代”的HTML5尺度。

HTML5.1里的新工具

  荣幸的是我们不需为下一次HTML尺度的更新守候那么长时刻。2015年10月,W3C开始着手HTML5.1草案,其方针是修复一些HTML5遗留的题目。多次迭代后, 草案于2016年6月到达“候选提议(Candidate Recommendation)”阶段,2016年9月到达“发起提议(Proposed Recommendation)”,最终2016年11月宣布W3C 提议。存眷新尺度的人也许留意到了,这是一段曲折之路。许多开始提出的HTML5.1特征由于欠好的计划可能穷乏赏识器厂商支持而被废弃了。

  尽量HTML5.1如故在成长, W3C已经开始着手HTML5.2草案,该尺度估量2017年尾宣布。本文是对HTML5.1一些风趣的新特征和晋升的概览。赏识器对这些特征依然缺乏支持,可是至少我们会汇报你一些支持这些特征的赏识器,用来测试每个例子。

  上下文菜单行使menu和menuitems元素

  HTML5.1草案先容了两种差异的menu元素: context和toolbar。前者用来扩展当地上下文菜单,凡是被页面上的鼠标右击激活;后者用来界说一个平凡的菜单组件。在成长进程中,toolbar 被放弃了,可是context菜单生涯了下来。

  可以行使 <menu> 标签来界说一个包括一个或几个 <menuitem> 元素的菜单,然后把它绑定到任何行使contextmenu 属性的元素上。

  每个 <menuitem> 可所以以下三种范例之一:

  • checkbox – 应承选择可能打消选择一个选项(option);

  • command – 应承在单击鼠标时执行一个举措;

  • radio – 应承在一组选项中选择一个.

  这里有一个根基的行使例子,可以在Firefox49中运行, 可是Chrome54今朝不可。

  请看SitePoint (@SitePoint)在CodePenHTML5.1菜单例子

  在一个支持的赏识器上,这个上下文菜单的例子应该看起来这样:

A HTML 5.1 context menu

  上下文菜单中有自界说项。

  细节(Details)和总结(Summary)元素

  新的<details><summary>元素可以通过鼠标点击实现附加信息的展示和潜匿。这是行使JavaScript时辰常常在干的事,此刻可以行使<details>元素和<summary>元素代庖了。点击<summary>元素可以展示和潜匿details元素的别的部门.

  下面的例子可以在Firefox和Chrome中举办测试。

  请看SitePoint (@SitePoint)在CodePenHTML5.1 细节和总结 demo

  这个demo在支持的赏识器上应该是下面这样:

Details and summary elements

  更多的input范例 - month,week 和 datetime-local

  input扩展了三种范例: monthweekdatetime-local

  前两种范例让你可以选择周可能月。在Chrome中两者都渲染成下拉的日历,可以选择某周可能某月。当你用JavaScript得到它们的值,你将获得一个大抵这样的字符串: "2016-W43"(week input); "2016-10" (month input)。

  最初,HTML5.1草案先容了两种日期范例input — datetime和datetime-local。差异的是,datetime-local 行使用户时区, 而datetime应承你选择时区。成长进程中,datetime 被放弃了,此刻只有datetime-local存在。datetime-local input由两部门构成 — 日期,可以像week 和 month一样举办选择;时刻, 可以单独输入。

  下面是关于全部新范例input的例子,它在chrome中可以正常展示,可是firfox不可。

  请看SitePoint (@SitePoint)在CodePenHTML 5.1 week, month 和 datetime inputs

  这个demo在支持的赏识器上应该是下面这样:

Week, month and datetime-local inputs

  相应式图片

  HTML5.1包罗几个在不行使CSS环境下实现相应式图片的新特征。每个特征都有本身单独的行使场景。

  srcset属性

  srcset图像属性应承列出多个可用于更换的图片数据源,这些数据源的像素密度差异。这使得赏识器可以针对用户装备选择吻合质量的图片(由装备的像素密度、缩放比例可能网速抉择)。譬喻,在低速手机收集和小屏幕手机的环境下,应该为用户提供低像素的图片。

  srcset属性接管一个用逗号脱离的URL列表,每个URL带有一个暗示最靠近所哀求图片像素比(一个CSS像素所代表的物理像素数目)的修饰x。下面是一个简朴的例子:

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

  在这个例子中,假如用户装备的像素比是1,图片low-res将会被展示;假如是2,图片high-res将会被展示;假如是3可能更大,图片ultra-high-res将会被展示。

  可能,你可以选择将图片展示成差异尺寸。这必要行使w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

  在这个例子中,图片low-res被界说成600px宽,图片high-res被界说成1000px宽,ultra-high-res是1400px宽。

  sizes属性

  你也许想按照用户屏幕尺寸来行使差异方法展示图片。譬喻,你也许想在宽屏幕上用两栏展示图片,窄一些的屏幕上用一栏。这点用sizes属性就可以实现。它应承你为图片分派屏幕的宽度,然后通过srcset属性选择吻合的图片。下面是一个例子:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

  当视口宽度大于40em时,sizes属性把图片的宽度界说为视口宽度的50%;当视口(viewport)宽度小于可能便是40em时,把图片宽度界说为视口宽度的100%。

  picture元素

  假如按照屏幕差异改变图片的尺寸照旧不能满意需求,你想按照屏幕差异展示差异的图片,那就必要行使picture元素。它应承你通过用<picture>指定多个差异<source>元素,来为差异尺寸的屏幕界说差异资源的图片。<source>元素作为URL加载图片的来历。

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

  假如你想知道更多关于相应式图片的对象,请戳How to Build Responsive Images with srcset.

  用form.reportValidity()验证表单

  HTML5界说的form.checkValidity()要领可以搜查表单是否切合事先界说好的验证器然后返回一个布尔值。新的reportValidity() 要领很相似 — 它也可以检讨一个表单并返回功效,可是它还能为用户陈诉错误。下面是一个例子(请在Firefox或Chrome中测试):

  请在CodePen上看SitePoint (@SitePoint)的例子HTML 5.1 report validity demo

  "First name"输入框被要求非空,假如不填写它将被标志有错误。假如切合预期,它将是这样:

Working form validation with a message

  frames的AllowfullscreenFrames的Allowfullscreen属性

  frames新的布尔属性allowfullscreen可以节制内容是否可以通过requestFullscreen()要领来全屏展示内容。

  行使element.forceSpellCheck()举办拼写搜查

  新的element.forceSpellCheck()要领应承你在text元素上触发拼写搜查。这也是本文所列出的全部特征中第一个还不被任何赏识器支持的特征。大概,这可以用来举办搜查还没有被用户直接编辑的元素。

  没有写进HTML5.1的特征

  一些特征在第一版的草案中被界说可是最终被删除了,大部门缘故起因是赏识器厂商缺乏乐趣。下面是个中一些风趣的要领:

  inert属性

  inert属性可以禁用全部子元素的用户交互,就像给全部子元素都加了disabled属性。

  dialog元素

  <dialog>元素提供一个原生的弹出框,它乃至有一个利便的表单荟萃 - 在<dialog>上行使method属性可以阻止表单提交随处事器上,而是封锁弹出框并把功效返回给弹出框的成立者。

  这个特征好像在firfox如故支持,以是可以看看下面这个例子(译者注:firfox V49.0.2不支持:

  请看SitePoint (@SitePoint)在CodePen的例子 HTML dialog element

  作者的更多文章

  增补

  这不是一个关于HTML5.1全部新特征的文章。有很多小的新特征、改变已经从现行尺度中删除,尚有一些从未行使的特征也被删除了。假如你想知道HTML5.1的全部改变,请戳[Changes](https://www.w3.org/TR/Html/changes.Html#changes。同时,让我们一路等候赏识器厂商尽快支持这些新特征!

  HTML5.1哪些方面最令你感动?通过评述汇报我们吧!

本文地址:http://itbyc.com/web/14936.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1