1 html5-新标签

年龄稍大一点的码农可能见证了html的发展，亲历了头声明的变化，但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢，这一章我先来谈谈这个问题。

1 dialog标签——弹窗标签。

弹窗可能前端一路走来，见过很多。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。

这个标签支持的api:

show: 展示弹窗框，采用决定定位，

showModal: 展示弹窗，并带有遮罩，采用了一个特殊的#top-layer的标记层，会位于整个页面的最顶层，且水平，垂直居中。通过::backdrop伪元素控制其遮罩的透明度。

close: 关闭上述的弹窗。

事件：支持一个close事件，并且在close中可以拿到returnvalue,可用用来判断关闭事件传递的参数。比如你通过那个按钮关闭的弹窗。如果弹窗里面有表单，设置了method="dialog"表单的提交动作可以自动关闭弹窗。这时这个close中可以通过returnValue获取到点击按钮的值。

2 component---自定义标签

这个没错这就是html5原生支持的自定义组件，当然实现起来还是要借助js来完成。当然他里面也能做得到css和js的隔离（通过shadow）。也支持插槽，也有生命周期的概念。当然也有相应的框架和UI组件库。

  
    #shadow-root
      
      
This is in shadow DOM and styled red.
  
  
  

参考的地址：

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements

html lit框架

Lit

下面是一个简单的基于JS扩展的一个例子

  

    
i'm from browser
    
  
    
    
  
  

3 新增属性

1 hidden可直接隐藏该元素

2 contextmenu允许自定义右键 

右键点击这里显示自定义菜单。

  Hello

3 draggable和dropzone

draggable 允许被拖动

dropzone 拖拽到目标位置可以被复制 

拖动文件到这里以复制文件。

4 spellcheck 语法校验

5 translate 翻译

这段文字不应被翻译。

6 表单项自动获取焦点