2.1：ol 分组元素
在上一章节中，我们介绍了HTML 5中的交互元素，实际上，交互元素是HTML 5新增元素的一部分，在HTML 5中，新增的元素或元素属性还有许多，其中分组元素的使用备用关注，因为它使用范围比较广。
在HTML 5中，对原有的分组内容元素<ul>、<ol>、<dl>进行了改良，有的元素增加了许多新的属性，同时，有的元素废除了一些不合理的原有特征。
下面对ol元素进行详细介绍。
1. 定义
<ol>元素用于页面中有序列表的创建，与HTHML 4相比，在HTML 5中新增加了两个属性，一个为“start”，另外一个为“reversed”，前者用于自定义列表开始的编号，后者用于设置列表是否进行反向排序。
2. 示例
为了进一步了解新增加属性在HTML 5中的使用，下面通过一个完整的示例进行说明。
功能描述
在页面中，通过<ol>元素创建一个“各类销售量排行”列表，并添加三个选项作为列表的内容，另外，增加一个文本框与“确定”按钮，点击按钮后，将以文本框中的值为列表项开始的编号。
代码编写与效果演示
源码分析
在上述JavaScript代码，先获取<ol>列表编号初始值与元素本身，并分别保存至变量“strNum”与“strDiv”中，再通过“setAttribute”方法，设置元素的“start”属性值为变量“strNum”，从而实现列表元素编号开始值的变化。
2.2： hidden属性
在HTML 5完成替换HTML 4的过程中，无论是新增或是改良的元素，都有一些共同的属性，我们称之为公共属性，为了进一步了解这些公共属性，下面选择几个常用的公共属，如hidden属性、spellcheck属性 、contenteditable属性。
hidden属性
1. 定义
在HTML 5中，绝大部分的元素都支持“hidden”属性，增加该属性时，则元素不在页面中显示，但还存在于页面中；反之，移除该属性时，则元素便显示出来。
2. 示例
下面我们通过一个完整的示例来介绍该属性在元素的使用方法。
功能描述
在页面中，在<nav>元素中设置两个相互排斥的单选按钮，一个用于显示<article>元素，另一个用于隐藏<article>元素，通过编写相应的JavaScript代码实现上述功能。
代码编写与效果演示
源码分析
上述的JavaScript代码中，先获取点击单选按钮时传回的变量“v”值，然后根然后根据该值将“hidden”属性增加或移除到<article>元素的中，从而实现隐藏或显示的效果。
2.3： spellcheck属性
1. 定义
spellcheck属性用于检测文本框或输入框中的拼音或语法是否正确，该属性的值为布尔值，即true或false，如果为true，则要检测对应输入框中的语法，反之，则不检测。
类型为 text 的 input 元素中的值（非密码）
textarea 元素中的值
可编辑元素中的值
2. 示例
下面我们通过一个完整的示例来介绍该属性在元素的使用方法。
功能描述
在页面中，分别创建两个<textarea>输入框元素，第一个元素将“spellcheck”属性设置为“true”，即需要语法检测；另外一个元素的“spellcheck”属性设置为“false”，即不要语法检测，并分别在两个输入框中录入文字，对比不同的检测效果。
代码编写与效果演示
源码分析
在HTML 5中，虽然各浏览器对“spellcheck”属性进行了很好的支持，但在chrome浏览器中，支持的元素是有差异的，即该在浏览器中，支持<textarea>输入框元素，而不支持<input>元素中的文本框。
2.4： contenteditable属性
1. 定义
在HTML 5中，有一个非常便捷的属性，它可以直接对显示在页面中的文字进行编辑，该属性就是公共属性“contenteditable”，该属性的取值为布尔型，即“true”或“false”。如果在元素中将该属性的值设置为“true”，那么，就可以对该元素显示的文本内容直接进行编辑了
2. 示例
下面我们通过一个完整的示例来介绍该属性在元素的使用方法。
功能描述
在页面中，分别创建两个<article>内容元素，第一个元素将“contenteditable”属性设置为“true”，用于直接内容的编辑；第二个<article>元素保存编辑后的内容，当用户编辑完成后，点击“保存”按钮，则将编辑后的内容显示在第二个<article>内容元素中
代码编写与效果演示
源码分析
在JavaScript代码中，为了获取编辑后的内容，先将修改完成的内容保存至变量“strArt”中，然后，将该内容赋值于另一个显示标记<article>中。
在HTML 5中，大部的显示文本内容的元素都支持“contenteditable”属性，因此，该属性的使用给页面中用户的交互体验带来极大的方便，目前，暂无相关的API对编辑后的内容进行直接保存，如果需要保存，只能借助于Ajax或jQuery中的异步操作，更新对应的后台数据。
来源：私塾在线
