HTML元素的分類

HTML元素的分類

EC前端 - HTML教程

塊元素

div：無語義，經常使用於佈局

aside：表示article元素的內容以外的與article元素的內容相關內容

figure：表示一段獨立的流內容；使用<figcaption>元素爲其添加標題

例：

<figure>
  <figcaption>PRC</figcaption>
  <p>the people......</p>
</figure>

dialog：該標籤訂義對話

例：

<dialog>
  <dt>老師</dt>
  <dd>2+2等於？</dd>
  <dt>學生</dt>
  <dd>4</dd>
</dialog>

行元素

span：無語義，多用於佈局

mark：呈現突出顯示的<mark>...</mark>

time：表示日期會時間；

meter：表示度量衡，用於已知最大與最小值得度量；

progress：表示運行中的進程；

行元素——塊元素的區別：

行元素：不能設置寬高，內容撐開寬度，自左向右排列；

塊元素：默認佔用一整行，而且老是重新的一行開始，默認是自適應寬度；

第三類元素

結構元素

section：定義文檔的衣蛾區段，如章節、頁眉等，能夠與h1...h6配合使用；

article：表示文檔中的一塊獨立的內容，如博客或報紙的一篇文章；

header：表示頁面中一個內容區塊或整個頁面的標題；

nav：表示導航連接的部分；

footer：表示整個頁面或頁面中一個內容區塊的腳註。

多媒體元素：

video和audio：分別用來插入視頻和聲音；

交互性元素

details：表示用戶要的並可獲得的細節信息，可與summary配合使用；

例：

<details>
  <summary>HTML5</summary>
  <code>this document teachers you have to learn about HTML5.</code> 
</details>

datagrid：表示可選數據的列表，一般用於顯示樹列表；

menu：表示菜單列表，一般用於列出表單控件；

例：

<menu>
  <li><input type="checkbox"/>Red</li>
  <li><input type="checkbox"/>Blue</li>
</menu>

command：表示命令按鈕，如單選、複選、普通按鈕。

input元素類型

email：用於應包含E-mail地址的輸入域；

url：用於應包含URL地址的輸入域；

number：用於應包含數值的輸入域；

range：用於應包含必定範圍內數字值得輸入域；

search：用於搜索域，如站點搜索；

HTML5的多個供選取日期和時間的新輸入類型

date：——選取年、月、日；

month：——選取月、年；

week：——選取周、年；

time：——選取時間（小時和分鐘）；

datetime：——選取時間、日、月、年；

datetime-local：選取時間、日、月、年（本地時間）；