版权声明：本文为博主原创文章，如需转载请标明出去。 https://blog.csdn.net/sujin_/article/details/80293970
就我们现在所了解的HTML5，保留了大量原有的HTML元素，并且也为这些元素增加了一些通过属性，来增强这些元素的功能。如果喜欢博主的分享，可以关注我的专栏 HTML5和CSS3的前世今生
1.contentEditable属性
HTML5给大部分的元素增加了contentEditable属性，如果将该属性设为true，就会允许我们直接编辑元素的内容。比如文本框、文本域之类，可以变成可编辑状态。contentEditable属性具有Java可继承的特点：如果父元素是可编辑的，那么子元素也是可编辑的，除非指定contentEditable=false。下面示范div元素和table元素转换成可编辑状态。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> contentEditable属性 </title>
</head>
<body>
<!-- 直接指定contentEditable="true"表明该元素是可编辑的 -->
<div contentEditable="true" style="width:500px;border:1px solid black">
Java
<!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>IOS</td>
<td>Android</td>
</tr>
<tr>
<td>轻量级Java EE</td>
<td>经典Java EE</td>
</tr>
</table>
</div>
<hr/>
<!-- 这个表格默认是不可编辑的
双击之后该表格变为可编辑状态 -->
<table id="target"
ondblclick="this.contentEditable=true;"
style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>HTML 5</td>
<td>Ruby</td>
</tr>
<tr>
<td>C/C++</td>
<td>Python</td>
</tr>
</table>
</body>
</html>2.designMode属性
designMode属性相当于一个全局的contentEditable属性，如果将designMode的值设置为on，页面上所有的元素都会变成可编辑状态，示例如下：当鼠标双击时，所有元素都会进入了可编辑状态。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> designMode属性 </title>
</head>
<body ondblclick="document.designMode='on';">
<div>aaaa</div>
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java</td>
<td>Android</td>
</tr>
<tr>
<td>轻量级Java EE</td>
<td>经典Java EE</td>
</tr>
</table>
</body>
</html>3.hidden属性
HTML5的所有元素都有hidden属性，为true时显示，为false时隐藏。CSS中的display属性也可以设置，display：none。下面就示范了hidden属性的功能。当我们点击页面按钮时，div元素会在显示和隐藏之间切换。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> hidden属性 </title>
</head>
<body>
<div id="target" hidden="true" style="height:80px">
文字内容
</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">显示/隐藏</button>
</body>
</html>4.spellcheck属性
我们可以在input元素和textarea元素增加spellcheck属性，当属性为true时，就会对输入的文本内容执行检查，如果不通过就会对有错误的单词进行提示。当我们输入有误的话，会出现红色波浪线的提示。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> spellcheck属性 </title>
</head>
<body>
<!-- 指定执行拼写检查 -->
<textarea spellcheck rows="3" cols="40">
</textarea>
</body>
</html>5.contextmenu属性
contextmenu属性用于设置上下文菜单，当我们单击鼠标右键时，将会触发菜单。不过到目前为止，还没有浏览器支持该属性。
--------------如果大家喜欢我的博客，可以点击左上角的关注哦。