HTML 5 也被稱為 Web Applications 1.0。為了實現(xiàn)這個目標播玖，增加了幾個為 Web 頁面提供交互體驗的新元素：
details
datagrid
menu
command
這些元素都可以根據(jù)用戶的操作和選擇改變顯示的內(nèi)容氯檐，而不需要從服務器裝載新頁面。
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 元素提供一個網(wǎng)格控件慢洋。可以用它顯示樹陆盘、列表和表格普筹，用戶和腳本可以更新這些界面元素。與之相反隘马，傳統(tǒng)的表格主要用來顯示靜態(tài)數(shù)據(jù)太防。
datagrid 從它的內(nèi)容（一個 table、select 或其他 HTML 元素）獲得初始數(shù)據(jù)酸员。例如蜒车，代碼 9 中的 datagrid 包含一張成績表。在這個示例中幔嗦，datagrid 的數(shù)據(jù)來自一個 table酿愧。更簡單的一維 datagrid 可以從 select 元素獲得數(shù)據(jù)。如果使用其他 HTML 元素邀泉，那么每個子元素成為網(wǎng)格中的一行嬉挡。
<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>
這個元素與常規(guī)表格的區(qū)別在于，用戶可以選擇行汇恤、列和單元格庞钢；把行、列和單元格折疊起來因谎；編輯單元格基括；刪除行、列和單元格财岔；對網(wǎng)格排序风皿；以及在客戶機瀏覽器中直接進行其他數(shù)據(jù)操作饭冬。可以用 JavaScript 代碼監(jiān)視更新揪阶。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 在網(wǎng)格中動態(tài)地裝載數(shù)據(jù)。也就是說鲁僚，datagrid 可以不包含那些提供初始數(shù)據(jù)的子元素炊苫。可以用一個 DataGridDataProvider 對象設置它（代碼 11 DataGridDataProvider）冰沙。這樣就可以從數(shù)據(jù)庫侨艾、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數(shù)據(jù)。
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 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 中就出現(xiàn)了拓挥。在 HTML 4 中廢棄了它唠梨，但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中侥啤，menu 包含 command 元素当叭，每個 command 元素引發(fā)一個操作。例如盖灸，代碼 12 HTML 5 菜單 是一個彈出警告框的菜單蚁鳖。
<menu>
<command onclick="alert('first command')" label="Do 1st Command"/>
<command onclick="alert('second command')" label="Do 2nd Command"/>
<command onclick="alert('third command')" label="Do 3rd Command"/>
</menu>
還可以用 checked="checked" 屬性將命令轉換為復選框。通過指定 radiogroup 屬性赁炎，可以將復選框轉換為單選按鈕醉箕，這個屬性的值是互相排斥的按鈕的組名。
除了簡單的命令列表之外徙垫，還可以使用 menu 元素創(chuàng)建工具欄或彈出式上下文菜單讥裤，這需要將 type 屬性設置為 toolbar 或 popup。例如姻报，代碼 13. HTML 5 工具欄 顯示一個與 WordPress 等 blog 編輯器相似的工具欄己英。它使用 icon 屬性鏈接到按鈕的圖片。
<menu type="toolbar">
<command onclick="insertTag(buttons, 0);" label="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);" label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<command onclick="insertTag(buttons, 3);" label="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);" label="del" icon="del.gif"/>
<command onclick="insertTag(buttons, 5);" label="ins" icon="insert.gif"/>
<command onclick="insertImage(buttons);" label="img" icon="image.gif"/>
<command onclick="insertTag(buttons, 7);" label="ul" icon="bullet.gif"/>
<command onclick="insertTag(buttons, 8);" label="ol" icon="number.gif"/>
<command onclick="insertTag(buttons, 9);" label="li" icon="item.gif"/>
<command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
<command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>
label 屬性提供菜單的標題逗抑。例如剧辐，代碼14. HTML 5 Edit 菜單 顯示一個 Edit 菜單寒亥。
<menu type="popup" label="edit">
<command onclick="undo()" label="Undo"/>
<command onclick="redo()" label="Redo"/>
<command onclick="cut()" label="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()" label="Paste"/>
<command onclick="delete()" label="Clear"/>
</menu>
菜單可以嵌套在其他菜單中邮府，形成層次化的菜單結構。
