HTML5新增了哪几个全局属性
时间：2022-02-11 17:22
属性：1、contenteditable属性；2、contextmenu属性；3、“data-*”属性；4、draggable属性；5、dropzone属性；6、hidden属性；7、spellcheck属性；8、translate属性。 本教程操作环境：windows10系统、HTML5版、Dell G3电脑。 HTML5新增了哪几个全局属性 在html中，全局属性是可与所有 HTML 元素一起使用的属性。 在html5中，共有八个新增的全局属性，下面我们就分别来看一下。 1、contenteditable属性 contenteditable 属性指定元素内容是否可编辑。 注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。 语法为： 示例如下： 输出结果： 2、contextmenu属性 目前只有 Firefox 浏览器支持 contextmenu 属性。 contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。/p> contextmenu 属性的值是需要打开的 <menu> 元素的 id。 语法： 示例如下： 3、“data-*”属性 所有主流浏览器都支持 data-* 属性。 data-* 属性用于存储私有页面后应用的自定义数据。 data-* 属性可以在所有的 HTML 元素中嵌入数据。 自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。 data-* 属性由以下两部分组成： 属性名不要包含大写字母，在 data- 后必须至少有一个字符。该属性可以是任何字符串 注意： 自定义属性前缀 "data-" 会被客户端忽略。 语法为： 示例如下： 4、draggable属性 draggable 属性规定元素是否可拖动。 提示： 链接和图像默认是可拖动的。 语法为： 示例如下： 输出结果： 5、dropzone属性 没有主流浏览器支持 dropzone 属性。 dropzone 属性规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接。 语法为： 示例如下： 6、hidden属性 hidden 属性规定对元素进行隐藏。 隐藏的元素不会被显示。 如果使用该属性，则会隐藏元素。 可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。 语法为： 示例如下： 输出结果： 7、spellcheck属性 spellcheck 属性规定是否对元素内容进行拼写检查。 可对以下文本进行拼写检查： 类型为 text 的 input 元素中的值（非密码）textarea 元素中的值可编辑元素中的值 语法 示例如下： 输出结果： 8、translate属性 目前没有主流浏览器支持 translate 属性。 translate 属性规定元素内容是否要翻译。 测试：使用 Google 翻译工具，查看以下单词 "ice cream" 会变成什么： 这边我们使用 translate="no": ice cream. 这边我们使用 class="notranslate": ice cream. 提示： 使用 class="notranslate" 替代。 语法 示例如下： 推荐教程：《html视频教程》 以上就是HTML5新增了哪几个全局属性的详细内容，更多请关注gxlsystem.com其它相关文章！
<element contenteditable="true|false">
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
</body>
</html>
<element contextmenu="menu_id">
<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>
<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注意：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>
<element data-*="somevalue">
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
</body><element draggable="true|false|auto">
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
<element dropzone="copy|move|link">
<div dropzone="copy"></div>
<element hidden>
<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>
<element spellcheck="true|false">
<body>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>
</body>
<element translate="yes|no">
<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>
