本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章，第1.20節,作者： 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
https://yqfile.alicdn.com/94a6d86c7c0df3d4f696700edb9efe1817461a31.png" >
執行個體說明
在傳統的html标記語言中，可以通過< ul >、< ol >、< dl >元素實作分組效果。在全新的html 5中，對原有的分組内容元素< ul >、< ol >、< dl >進行了整體改良，有的元素增加了許多新的屬性，有的元素則廢除了一些不合理的原有特征。
（1）< ul >元素。
在html 5中，< ul >元素用于定義頁面中的無序清單，其用法與html 4相類似。差別是html 5不再支援“type”與“compact”這兩個屬性。因為< ul >元素通常與< li >元素組合使用，是以html 5也不支援< li >元素的“type”屬性，而是改用css樣式來定義清單的類型，例如，如下html頁面中的代碼：
在上述代碼中，通過< ul >元素建立了一個帶嵌套的清單“aa”，其中又分為“bb”和“cc”兩個清單項。在“bb”清單項中，又通過< ul >元素新增加了一個子清單，用于展示上級“bb”清單項的子項資訊，這個例子中的子項資訊包括“cc”和“dd”。
（2）< ol >元素。
在html 5中，< ol >元素用于在頁面中有序地建立清單。與html 4相比，在html 5中新增加了如下兩個屬性。
start：用于自定義清單項開始的編号。
reversed：用于設定清單是否進行反向排序。
在本執行個體中，通過< ol >元素建立一個“mtv排行榜”清單，并分别添加3個選項（大海、小芳、父親）作為清單的内容。另外，增加一個文本框“設定開始值”與一個“确定”按鈕。在文本框中輸入一個值并單擊“确定”按鈕後，将以文本框中的值為清單項開始的編号顯示mtv排行。
具體實作
使用dreamweaver建立一個名為“020.html”的檔案，具體代碼如下所示：
在上述javascript代碼中，先定義一個函數btn_click()，用于在單擊“确定”按鈕時調用。在該函數中先擷取輸入文本的值與< ol >清單元素，并分别儲存至變量“strnum”與“strdiv”中。然後通過setattribute方法将清單元素的“start”屬性設定為變量“strnum”的值，進而改變了清單項元素編号的開始值。例如，本執行個體在文本框中輸入數字“5”，那麼，清單項元素的編号起始值将從5開始。
執行後的效果如圖1-37所示，如果在文本框中輸入一個數字，如“5”，單擊“确定”按鈕後将以5開始進行排序，如圖1-38所示。
