HTML 5.2 简介

2020-06-16 16:57:49 浏览数 (1)

前言

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

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

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

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

新功能

<dialog>元素

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

代码语言：javascript复制
<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 文件中将它设置为块级元素。

代码语言：javascript复制
main {display:block;}

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

代码语言：javascript复制
<script type="text/javascript">document.createElement('main');</script>

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

代码语言：javascript复制
<main>...</main>  
<main hidden>...</main>
<body>元素中写样式

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

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

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

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

<legend> 元素为 <fieldset>元素定义标题
代码语言：javascript复制
<fieldset>
   <legend> 统计 </legend>
   名称：<input type="text" />
   <br>
   数量：<input type="number" />
   <br>
</fieldset>

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

当我们想用 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 (查看查看版本号，操作系统和应用程序版本号)
jqueryui 网站 html5 https 网络安全

0 人点赞