专栏首页云前端HTML 5.2 简介

HTML 5.2 简介

前言

前两天看了电影《无问西东》,里面的台词很好:“如果提前了解了你所要面对的人生,不知你是否还会有勇气前来?”,大到人生,小到工作,都一样,如果你提前了解了你要面对的工作内容,你是否还有勇气选择。

特别是程序员,因为程序员是很容易落伍的职业,一种技术可能仅仅一两年内具有领先性,如果想安身立命,就必须不断跟进新的技术,学习新的技能,这就意味着你要比其他职业的更勤奋更努力。

比如W3C发布的HTML规范5.2更新版就需要我们去了解并尝试使用,跟上步伐,善于学习,对于任何职业而言,都是前进所必需的动力,对于程序员,这种要求就更高了,要不想落后就赶快搬来小板凳一起学习吧。

W3C于2017年12月14日发布了Html规范5.2更新版本,并官方建议用户使用,以下是亲测有效的例子,但是本文没有全部归纳总结,因为还有一些小编也没有搞明白,以后一一验证了再续吧。

新功能

<dialog>元素

dialog标签是用来定义一个对话框、确认框或窗口的:

<dialog id="dialog">
   <h2>dialog标题</h2>
   <p>dialog内容</p>
</dialog>

在默认情况下对话框是隐藏的

只有当我们设置了open属性后对话框才会显示

这样对话框的现实隐藏就可以通过设置open属性来实现了,通过调用 show() 与 close() 方法来控制open(show方法和close方法用于dialog元素的打开和关闭对话窗口)。当点击打开

这样的对话框好用是好用,但是浏览器兼容性问题也不容忽视啊,Chrome 浏览器已经支持 元素,Firefox 也即将支持:

<main>元素

早在2013年<main>元素就被正式添加到 W3C HTML 规范中。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C 规范是这么描述 <main> 的:

文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。

使用 <main> 元素值得注意的是,不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

main {display:block;}

有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。

<script type="text/javascript">document.createElement('main');</script>

但是它在每个页面中只能使用一次,因此在 HTML 5.2 之前,<main> 元素在 DOM 中必须唯一才能令页面有效。使用 HTML 5.2,我们只要保证同一时刻只有一个 <main> 元素可见,就能在我们的标签中使用多个 <main>元素。与此同时其它的 <main> 元素必须使用 hidden 属性进行隐藏。

<main>...</main>  
<main hidden>...</main>  

<body>元素中写样式

标准做法会把<style>放在<head>区,这样做的好处是保证网页主体加载时,样式已提交加载生效了。但是随着组件化开发的流行,开发者认为把样式放在元素周边的位置会更加方便。

在 HTML 5.2 中,可以在 HTML 文档 <body> 内的任何地方定义内联 <style>样式块。这意味着样式定义可以离它们被使用的地方更近。

虽然这样写起来方便了,但由于性能问题,样式还是优先考虑放在<head>区,如规范:

样式元素最好用于文档的 head 中。在文档的 body 中使用样式可能导致重复定义样式,触发重布局、导致重绘,因此需要小心使用。

<legend> 元素为 <fieldset>元素定义标题

<fieldset>
   <legend> 统计 </legend>
   名称:<input type="text" />
   <br>
   数量:<input type="number" />
   <br>
</fieldset>

之前legend标签中只能写纯文本,html5.2版本后可以添加标题元素了(h1~h6),legendfieldset边框居中对齐

当我们想用 fieldset 对表单中不同部分进行分组时,这个特性非常有用。在这种情况下使用标题元素是有意义的,因为这能让那些依赖于文档大纲的用户可以轻松导航至表单的对应部分。

弃用功能

<p>中不再能包含行内块、浮动的块这样块类型的子元素

在 HTML 5.2 中,<p> 元素中唯一合法的子元素只能是文字内容。这也意味着以下类型的元素不再能嵌套于段落标签 <p> 内:

行内块(Inline blocks) 行内表格(Inline tables) 浮动块与固定位置块

总结

以上是亲测有效的,但是总结的不全面,想了解更多,大家可以去官方文档查看。

这是我年前最后一次分享,提前祝大家新年快乐。最近明显感觉时间不够用了(可能因为快要过年了吧),之前太矫情浪费了好多时间,2018希望自己能在有限时间里做自己认为重要的事情,下面的台词写的很好,共勉:

愿你在迷茫时,坚信你的珍贵。爱你所爱,行你所行,听从你心,无问西东。

摘抄文献

  1. https://www.w3.org/TR/2017/REC-html52-20171214/changes.html#changes (HTML5.2规范的变更日志)
  2. https://bitsofco.de/whats-new-in-html-5-2/ (@lsvih翻译)
  3. http://www.runoob.com/jsref/dom-obj-dialog.html (dialog对象)
  4. https://caniuse.com/ (检测浏览器对JS、HTML5、CSS、SVG或者其他Web前端相关特性支持程度的列表)
  5. navigator.appVersion (查看查看版本号,操作系统和应用程序版本号)

本文分享自微信公众号 - 云前端(fewelife),作者:陶妮儿

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 照方抓药 - 重构 React 组件的实用清单

    本文尝试将相关的概念做一个总结,列出一张可用、实用的方法论清单,让我们每次新建组件、修改组件时有章可循,真诚是让一切变好的基础,但实用的套路也是必不可少的。

    江米小枣
  • [译] 对 Vue-Router 进行单元测试

    原文:https://medium.com/js-dojo/unit-testing-vue-router-1d091241312

    江米小枣
  • 重拾CSS规范之z-index

    z-index 会为当前的盒创建层叠上下文,也会指定该盒在父级层叠上下文中的层叠等级。

    江米小枣
  • 《Drools7.0.0.Final规则引擎教程》第4章 4.2 activation-group& dialect& date-effective

    activation-group 该属性将若干个规则划分成一个组,统一命名。在执行的时候,具有相同activation-group 属性的规则中只要有一个被执行...

    用户1161110
  • Pytest框架之fixture(三)

    在单元测试的组件中,主要分为测试用例,测试固件,测试套件,测试执行以及测试报告,看过我书的同学对这些应该很清晰。测试固件也是不难理解,也就是在测试用例执行前...

    无涯WuYa
  • 回到基础:理解 JavaScript DOM[每日前端夜话0x45]

    原文:https://medium.freecodecamp.org/an-introduction-to-the-javascript-dom-512463d...

    疯狂的技术宅
  • 浏览器中的JavaScript:文档对象模型与 DOM 操作[每日前端夜话0x5F]

    翻译:疯狂的技术宅 原文:https://www.valentinog.com/blog/dom/

    疯狂的技术宅
  • Pytest框架之fixture(三)

    在单元测试的组件中,主要分为测试用例,测试固件,测试套件,测试执行以及测试报告,看过我书的同学对这些应该很清晰。测试固件也是不难理解,也就是在测试用例执行前...

    Criss@陈磊
  • 深度学习: greedy layer-wise pre-training (逐层贪婪预训练)

    每次只训练网络中的一层,即我们首先训练一个只含一个隐藏层的网络,仅当这层网络训练结束之后才开始训练一个有两个隐藏层的网络,以此类推。

    JNingWei
  • NPM报错终极大法

    lilugirl

扫码关注云+社区

领取腾讯云代金券