HTML5新增了哪些全局属性

这篇文章主要介绍了HTML5新增了哪些全局属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

属性：1、contenteditable属性；2、contextmenu属性；3、“data-*”属性；4、draggable属性；5、dropzone属性；6、hidden属性；7、spellcheck属性；8、translate属性。

本教程操作环境：windows10系统、HTML5版、Dell G3电脑。

在html中，全局属性是可与所有 HTML 元素一起使用的属性。

在html5中，共有八个新增的全局属性，下面我们就分别来看一下。

1、contenteditable属性

contenteditable 属性指定元素内容是否可编辑。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

语法为：

示例如下：

   这是一个段落。是可编辑的。尝试修改文本。

输出结果：

2、contextmenu属性

目前只有 Firefox 浏览器支持 contextmenu 属性。

contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。/p>

contextmenu 属性的值是需要打开的

本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。
      

注意：目前的主流浏览器都不支持 contextmenu 属性。

3、“data-*”属性

所有主流浏览器都支持 data-* 属性。

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。该属性可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

语法为：

示例如下：

物种
点击一个物种，看看它是什么类型：
  Owl  Salmon  
  Tarantula  

4、draggable属性

draggable 属性规定元素是否可拖动。

提示： 链接和图像默认是可拖动的。

语法为：

示例如下：

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}function allowDrop(ev){
ev.preventDefault();
}function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}function drop(ev){var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}