HTML 5保留了大部分原有的HTML元素，但为这些元素增加了一些通用属性，这些通用属性极大地增强了HTML元素的功能。　

contentEditable属性

　　HTML 5为大部分HTML元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素，如文本框、文本域之类的，而是可以把<table.../>、<div.../>等元素变成可编辑状态。
　　contentEditable属性具有“可继承”的特点：如果一个HTML元素的父元素是“可编辑”的，那么它默认也是可编辑的，除非显式指定contentEditable="false"
　　除此之外，HTML 5为允许设置contentEditable属性的元素提供了isContentEditable属性，当该元素处于可编辑状态时，该属性返回true；否则返回false。
　　当用户编辑完成后，用户编辑的内容就会直接显示在该页面中（不要刷新页面，一旦刷新页面就会重新加载，编辑的内容会丢失），开发者可以通过该元素的innerHTML属性来获取编辑后的内容。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <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>疯狂Java讲义</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>Java</td>
    <td>Ruby</td>
</tr>  
<tr>  
    <td>C/C++</td>
    <td>Python</td>
</tr>  
</table>  
</body>  
</html>

designMode属性

　　designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所有可支持contentEditable属性的元素都变成可编辑状态；designMode属性默认为off。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <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>

hidden属性

　　HTML 5为所有元素都提供了一个hidden属性，这个hidden属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <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>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。