UestcMao

HTML5.1和HTML5.2

HTML5.1和HTML5.2

2014年，Html5正式规范被提出，至此距离HTML4.01已经过去了10多个年头了。HTML5的出现让web进入了新的时代，它不仅废除了一些存在问题的旧标签，还引入了许多新的标签和API，新的标签增强了语意，虽然通过 div 和 css你也可以构建整个页面，但是div本身没有任何的语意，这对之后的阅读不友好，使用语义化标记，可以提高代码的可读性，让浏览器更好地优化网页(尤其在移动终端), 以及让搜索引擎爬虫更好地理解网页。例如header、footer、article和session等。其他的标签如video则是为了在移动设备上更好的支持多媒体。另外的如localstore和Geolocation API之类的为开发者提供了便利。

之后的两年里，W3C推出了关于HTML的两次更新，这被人称为HTML5.1。之后W3C开始着手发展HTML5.2草案，也许我们能在2017年看到HTML5.2的标准被推出。

整体上HTML5.1并没有什么特别大的更新，而且各大浏览器厂商也没有多少支持。( ͡° ͜ʖ ͡°) 这里调了几点谈一谈更新处。

    <picture>
            <source media="(max-width: 25em)" srcset="example.jpg 1x,
                    example.jpg 2x,
                    example.jpg 3x
            ">
            <source media="(max-width: 60em)" srcset="example.jpg 1x,
                    example.jpg 2x,
                    example.jpg 3x
            ">
           <img src="example.jpg">
    </picture>

srcset这个属性也可以直接用于img,对于响应式图片，然而我选择object-position,object-fit (¬､¬)
2. details和summary 这两个标签允许我们向一段内容添加扩展信息。可以通过单击元素来显示或隐藏一个附加信息块。 默认情况下是隐藏附加信息的。

<section>
  <h3>Error Message</h3>
  <details>
  <summary>This file hasn't been download due to network error.</summary>
  <dl>
    <dt>File name:</dt><dd>Passcode.txt</dd>
    <dt>File size:</dt><dd>8 KB</dd>
    <dt>Error code:</dt><dd>342a</dd>
  </dl>
  </details>
</section>

这里summary是会显示在details内容的最上面，即使你在summary前面加入其他内容，最终也会显示summary之下。当然你写多个sunmmary也只会显示一个。
3. menuitam menu标记来定义菜单，里面包含了一个或者多个menuitem元素, 然后利用 contextmenu 属性将其绑定到任何元素上。感觉挺鸡肋的一个标签 ๑乛◡乛๑ ，感觉没什么用，还要绑定到其他元素上，还没有chrome插件的那个自定义右键菜单实用。现在只有firefox支持，chrome和opera要使用这个得开启实验性功能。

 <h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 <menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem>
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>


4. onrejectionhandled和onunhandledrejection 这两个是web api里面的用来追踪Promise的rejection

window.addEventListener("rejectionhandled", function(event) {
		console.log("rejectionhandled"+event);
	});
	window.addEventListener("unhandledrejection", function(event) {
		console.log("unhandledrejection"+event);
	});
	var promise = new Promise(function(resolve, reject) {
 		if (false){
 			resolve("success");
 		} else {
 			reject("fail");
 		}
	});
	setTimeout(function(){
		promise.catch(function(argument) {
		console.log("handle");
	})//延迟执行，不然前面的监听捕获不到
	},1000);


5. history.scrollRestoration history.scrollRestoration有两个值 auto和manual，默认为auto，就和现在的机制一样，将history.scrollRestoration 设置成manual后，浏览器将不再记录滚动的位置。
6. a和area中增加rel=noopener 通过链接打开新的页面,新的页面存在一个opener属性保留了对父页面的引用，子页面可以通过opener来将父页面跳走

    window.opener.location = 'example.html';
如果`a`中打开方式不为`_blank`则没有问题 <br/>
7. 还有一些比如`frame`支持全屏、`links`添加rev、`script`和`style`增加nonce之类的就不一一介绍了。

在2016年底，w3c工作组开始HTML5.2草案的工作。

现在HTML5.2草案中主要包括以下内容

Share this:
© 2016 uestcmao. All rights reserved.