返回
无限互联
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-800-2181

学校地址:北京市石景山区领秀大厦B座3层

Web培训学院:你需要学的WEB技术

76 2016-10-26 09:19:14

学习笔记

    21世纪,2016年6月,HTML 5.1从工作草案变为了候选标准。正如你了解的那样,这是将提案变为标准的第二步,无限互联Web前端培训认为,Web的如此发展也将影响我们的日常生活。作为候选标准,W3C认为HTML 5.1已经通过了review并且能够满足工作组的技术需求了。

    无限互联Web培训了解到,几天前,HTML 5.1被提案进入第三阶段:标准(PR)。这意味着这个规范只需要进行微量的修改就可以进入W3C标准的最后一阶段了。

    随着HTML 5.1接近最后阶段,工作组开始关注于未来。于是工作组正式开始研究HTML 5.2工作草案,因此,W3C在社区中发布了HTML 5.2规范来让W3C成员、公众以及其他组织进行review。

    HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网。这是一场革命性的技术变革。HTML 5.1保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想HTML 5.1都带来了什么,可想而知HTML 5.2会更为惊艳。


Web培训学院:HTML5.2所需学习的Web技术

    无限互联Web培训将做一个关于HTML发展的简短的概述,包括HTML 5,HTML 5.1,和HTML 5.2中引入和废除的特性。

    以下是本文的重点:

    HTML 5引入的语义元素概述;

    关于HTML 5和HTML 5.1中新特性和未定案特性的变化;

    HTML 5.2的介绍以及对于接下来可能发生的事的猜想;

    1、HTML 5 新的语义元素

    HTML 5.1伟大的创新之一就是引入了新的语义元素。它们也许(很有可能)会成为你如今日常写码的一部分。就是因为有了标记性的结构和语义,才使我们的站点有了很大改善。

    无限互联Web培训将主要提到的元素有:

    main定义主要内容;

    nav定义主体模块或者导航链接的集合;

    article包含独立于页面其他部分的内容;

    header包含介绍部分或者是导航链接的集合;

    footer定义了整个页面或其中一部分的页脚(并且通常包含原创作者,版权信息,联系方式和站点地图);

    aside定义了所处内容的侧边栏,section定义了文档中特定的部分。

    将两个革命性的元素单独拿出来说,它们帮助我们解决了Flash等技术难题:

    audio用来在文档中嵌入音频内容

    video用来在文档中嵌入视频内容

    在上面提到的所有元素中,有争议的无非是main元素。在W3C规范的描述中它是页面中的主要内容,然而万维网超文本应用技术工作组(WHATWG)却定义main元素为其他元素主要内容的容器。由于这个区别,WHATWA没有限制一个文档中main元素出现的次数。按WHATWA的定义,如果你在一个页面中定义了多个article元素,你就可以给每个article标记main元素。

    现在让我们一起跟随无限互联Web培训来看一下HTML 5和HTML 5.1中的不同。

    2、HTML 5 和HTML 5.1的不同之处

    这部分将主要介绍HTML 5.1中一些尚未确定的元素、方法和属性。无限互联Web培训将就其概念和优点进行介绍,并且提供了一些其他资料,如果感兴趣可以进行扩展阅读。需要注意的是,这里提到的大部分新元素都在HTML5中被提出却因为某些原因没有通过提案,所以对你来说也许并不陌生。例如details和summary就是从HTML 5转移至HTML 5.1规范中的。

    就像其他规范一样,HTML 5.1也引入了一些被移除不久的特性。其中之一就是inert属性,它在2014年被提出。正如Github上这个discussion中所提到的,这个属性自从被归入dialog元素后就被遗弃了。

    开始使用新的元素吧~

    HTML 5.1引入的新元素

    个准备讲的就是picture元素。它的用处就是把source元素和sr cset属性结合到一起,更方便的是当网页展示在小屏幕(例如移动设备)上时,它可以提供内存和尺寸较小的图片。

    picture元素的另一个功能就是当页面加载在辨率屏幕上的时候就提供高密度的图片。由于这个元素的存在,你可以更好的给用户展示图片并且很好的避免过大的高密度图片与网站不相称。如果你想更多的了解,可以点击无限互联Web培训官网了解更多!

    接下来介绍dialog元素,当下有Chrome和Opera已经对其进行支持,微软Edge则仍在考虑中。这个元素可以用来作为对话框,确认框或者窗体。可以通过把form元素的method属性设置为dialog来把其合并到dialog元素中。这样这个form表单提交的时候,这个对话框就会关闭同时把提交按钮返回的值设置为retureValue。

    同时details和summary也是值得的新增元素。details展示给用户在这个组件上可以获取额外的信息或者控件。summary元素作为总结,标题,或是图例放在details的内容中,二者互相配合。目前有Chrome,Firefox(版本49+),Opera,Safari支持了details元素。无限互联Web培训认为这两个元素未来会在折叠/展开组件上起很大作用。

    HTML 5.1其他新增

    除了这些元素,HTML 5.1还添加了如下新增:

    input元素的type属性新增了month和week两个值。正如它们名字所表示的那样,它们定义控件将元素的值设置为代表一个月或者一周的字符串。

    forceSpellcheck()方法加入到HTMLElement接口中,并且允许开发者通过在元素上调用此函数强制用户执行拼写和语法检查,即使用户没有聚焦这个单词。其中一个用途就是inputElement.forceSpellcheck()。不幸的是还没有浏览器支持这个特性。

    allowfullscreen是iframe元素的一个布尔类型属性,它了当调用requestFullScreen()方法时,iframe是否接受全屏。当该属性未被时,默认元素不接受全屏模式。

    reportValidity()方法被调用时,强制用户进行form元素的约束校验。比如当一个必填元素没有被填写或者一个字段涉及到它的pattern属性时。如果约束的校验返回正确的结果时,这个函数会返回true,反之则返回false。目前有Chrome和Opera支持了这个方法。

    未定案的特性

    HTML 5.1规范中也描述了一些当前被认为"at risk"的特性。

    无限互联Web培训要提的个未定案的特性就是menu元素。它代表了菜单指令的集合,它原本是被设计用来创建工具栏和弹出菜单的。当下Chrome和Opeara只有在实验性网络平台(Experimental Web Platform features)打开后才能支持,并且只支持context menu,不支持button menu。Firefox的近期版本也是同样,目前的其他浏览器没有可以支持的。

    接下来要介绍的特性是menuitem元素,定义了用户可以从弹出菜单中调用的命令。在变种包含了context menu,同时menu可能关联了一个menu button。当下Chrome和Opeara只有在实验性网络平台(Experimental Web Platform features)打开后才能支持,并且只支持type="command"。在Firefox中也只有当关闭tag后才能支持带有contextmenu属性的menu。IE和Edge都没有支持该元素。

    另一个未定案的特性则是keygen。这个元素会在控件的表单提交的时候生成一对密钥,私有密钥会存储在本地的keystore中,公有密钥则会被打包发送到服务器。 In addition to these elements, the following features are also considered at risk: 除了上面提到的这些元素,下面这些特性也同样没有确定:

    input元素的type的datatime和datatime-local两个值。前者用来定义一个特定地区的日期和时间,候着则是代表本地日期和时间,没有时区偏移量信息。

    context属性为div了一个context menu,并且当用户右键点击div时会显示菜单。所有的浏览器中,只有Firefox支持了这个属性。

    inputmode属性。它了当用户在表格控件中输入内容时,输入机制会提供更多的帮助。

    好了,现在你已经知道了HTML 5.1做了哪些改变,可以进一步了解工作组现在在研究的规范内容了。

    3、HTML 5.2会带来什么

    HTML 5.2规范的制定工作才刚刚开始,所以此时此刻还没办法猜测出很多东西。

    重要的特性之一就是script type="module"和对于模块如何分解、获取和评估,这也是制定HTML 5.2将要讨论的一部分。这个特性加入了对于加载JavaScript模块的支持,以及分解、获取、解析、评估模块所必须的依赖。关于这个话题想了解更多的话,可以阅读WHATWG的为Web平台添加JavaScript模块这篇文章。

    另一个开发中的特性就是关于meta name="theme-color"的定义。它的值可以是包括HEX和RGB在内的任何你在CSS中使用的颜色。一旦页面中如此使用了,只要浏览器和操作系统定制了用户界面,这个新的meta标签就会建议它们使用这个颜色。你可以看到Android端的Chrome浏览器已经像下图这样做出这样的行为。

    对于autocapitalize属性的标准化也在讨论中。当前Safari在IOS上对它的支持由于版本的不同有两种不同的实现。老版本(IOS 5之前)是作为布尔型属性,而新版本则支持不同的值。已经有提案发布建议以一种独特的方式让所有浏览器支持这个属性。

    最后无限互联Web培训想提一下这个关于大纲算法概念的discussion。轮廓算法是一种基于节段元素的结构而不是标题的level来提供Web页面大纲的机制。理论上,你可以在一个页面中所有的标题都使用h1,只要把标题放置于正确的节段元素中,就可以创建出结构化文档。然而实际上还没有任何实现了它,因此在网站中依赖这个算法是非常危险的。

    除了开发新的特性之外,工作组同样致力于使浏览器实现已存在的特性。其中之一就是input元素与一个datalist元素关联时的行为。

    如果你想了解关于Web培训课程的其他细节,可以关注这个无限互联Web前端培训官网:http://web.wuxianedu.com/

    4、总结

    无限互联Web培训把HTML近些年的重大改变完整的呈现给你了。以上内容也说明了开发者想要紧随Web的发展是多么的不容易。

关键词标签:Web培训,Web前端培训,Web培训学院,Web培训课程

请联系网站,了解详细的优惠课程信息~
优质、、便捷、省心


       

文中图片素材来源网络,如有侵权请联系删除
来源:无限互联
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图