HTML 5 也被稱為 Web Applications 1.0。為了實現這個目標,增加了幾個為 Web 頁面提供交互體驗的新元素: details datagrid menu command 這些元素都可以根據用戶的操作和選擇改變顯示的內容,而不需要從服務器裝載新頁面。 details details 元素表示在默認情況下可能不顯示的詳細信息。可選的 legend 元素可以提供詳細信息的摘要。 details 元素的用途之一是提供腳注和尾注。例如: The bill of a Craveri's Murrelet is about 10% thinner than the bill of a Xantus's Murrelet. details legend [Sibley, 2000] /legend p Sibley, David Allen, The Sibley Guide to Birds, (New York: Chanticleer Press, 2000) p. 247 /p /details 沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。 每個 details 元素可以有一個 open 屬性。如果設置了這個屬性,那么詳細信息在最初就顯示出來。如果沒有設置這個屬性,那么會隱藏它們,直到用戶要求顯示它們。無論是哪種情況,用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。 datagrid datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格,用戶和腳本可以更新這些界面元素。與之相反,傳統的表格主要用來顯示靜態數據。 datagrid 從它的內容(一個 table、select 或其他 HTML 元素)獲得初始數據。例如,代碼 9 中的 datagrid 包含一張成績表。在這個示例中,datagrid 的數據來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數據。如果使用其他 HTML 元素,那么每個子元素成為網格中的一行。 datagrid table tr td Jones /td td Allison /td td A- /td td B /td td A /td /tr tr td Smith /td td Johnny /td td A /td td C /td td A /td /tr tr td Willis /td td Sydney /td td C- /td td D /td td F /td /tr tr td Wilson /td td Frank /td td B- /td td B /td td A /td /tr /table /datagrid 這個元素與常規表格的區別在于,用戶可以選擇行、列和單元格;把行、列和單元格折疊起來;編輯單元格;刪除行、列和單元格;對網格排序;以及在客戶機瀏覽器中直接進行其他數據操作。可以用 JavaScript 代碼監視更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持這個元素(代碼 10 HTMLDataGridElement)。 interface HTMLDataGridElement : HTMLElement { attribute DataGridDataProvider data; readonly attribute DataGridSelection selection; attribute boolean multiple; attribute boolean disabled; void updateEverything(); void updateRowsChanged(in RowSpecification row, in unsigned long count); void updateRowsInserted(in RowSpecification row, in unsigned long count); void updateRowsRemoved(in RowSpecification row, in unsigned long count); void updateRowChanged(in RowSpecification row); void updateColumnChanged(in unsigned long column); void updateCellChanged(in RowSpecification row, in unsigned long column); }; 還可以使用 DOM 在網格中動態地裝載數據。也就是說,datagrid 可以不包含那些提供初始數據的子元素。可以用一個 DataGridDataProvider 對象設置它(代碼 11 DataGridDataProvider)。這樣就可以從數據庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數據。 interface DataGridDataProvider { void initialize(in HTMLDataGridElement datagrid); unsigned long getRowCount(in RowSpecification row); unsigned long getChildAtPosition(in RowSpecification parentRow, in unsigned long position); unsigned long getColumnCount(); DOMString getCaptionText(in unsigned long column); void getCaptionClasses(in unsigned long column, in DOMTokenList html' target='_blank'>classes); DOMString getRowImage(in RowSpecification row); HTMLMenuElement getRowMenu(in RowSpecification row); void getRowClasses(in RowSpecification row, in DOMTokenList classes); DOMString getCellData(in RowSpecification row, in unsigned long column); void getCellClasses(in RowSpecification row, in unsigned long column, in DOMTokenList classes); void toggleColumnSortState(in unsigned long column); void setCellCheckedState(in RowSpecification row, in unsigned long column, in long state); void cycleCell(in RowSpecification row, in unsigned long column); void editCell(in RowSpecification row, in unsigned long column, in DOMString data); }; menu 和 command menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它,但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中,menu 包含 command 元素,每個 command 元素引發一個操作。例如,代碼 12 HTML 5 菜單 是一個彈出警告框的菜單。 menu command quot;alert('first command') label= Do 1st Command / command quot;alert('second command') label= Do 2nd Command /