剛剛學(xué)了HTML，在這里對(duì)HTML5的所有標(biāo)簽做一個(gè)梳理，以便鞏固和復(fù)習(xí)所學(xué)。
根據(jù)MDN的劃分，將標(biāo)簽分為：
- 根元素：
- 文檔元元素
- 腳本
- 章節(jié)
- 組織內(nèi)容
- 文字形式
- 編輯
- 嵌入內(nèi)容
- 表格
- 表單
- 交互元素
根元素
| Element | Description |
|---|---|
<html> |
代表HTML文檔的跟，其他所有元素必須是這個(gè)元素的子節(jié)點(diǎn)。 |
文檔元數(shù)據(jù)
| Element | Description |
|---|---|
<head> |
代表關(guān)于文檔元數(shù)據(jù)的一個(gè)集合，包括腳本或樣式表的鏈接或內(nèi)容。 |
<title> |
定義文檔的標(biāo)題，將顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁(yè)上。該元素只能包含文本，包含的標(biāo)簽不會(huì)被解釋。 |
<base> |
定義頁(yè)面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。 |
<link> |
用于鏈接外部的 CSS 到該文檔。 |
<meta> |
定義關(guān)于 HTML 文檔的元數(shù)據(jù)（其他HTML元素?zé)o法描述的內(nèi)容）。 |
<style> |
用于內(nèi)聯(lián) CSS，定義文檔的樣式信息。 |
腳本
| Element | Description |
|---|---|
<script> |
定義一個(gè)內(nèi)聯(lián)腳本或鏈接到外部腳本。腳本語(yǔ)言是JS。 |
<noscript> |
定義當(dāng)瀏覽器不支持腳本時(shí)顯示的替代文字。 |
<template> |
通過(guò) JavaScript 在運(yùn)行時(shí)實(shí)例化內(nèi)容的容器。 |
章節(jié)
| Element | Description |
|---|---|
<body> |
代表 HTML 文檔的主體內(nèi)容。在文檔中只能有一個(gè) <body> 元素。 |
<section> |
定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。 |
<nav> |
即navigation，定義導(dǎo)航鏈接的部分。 |
<article> |
定義可以獨(dú)立于內(nèi)容其余部分的完整獨(dú)立內(nèi)容塊。 |
<aside> |
定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理，例如頁(yè)面的側(cè)邊欄內(nèi)容。 |
<h1><h2><h3><h4><h5><h6> |
定義HTML標(biāo)題，<h1>是最大的標(biāo)題，<h6>是最小的標(biāo)題。 |
<header> |
定義頁(yè)面或章節(jié)的頭部。它經(jīng)常包含 logo、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。 |
<footer> |
定義頁(yè)面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。 |
<address> |
定義包含作者或擁有者聯(lián)系信息的一個(gè)章節(jié)。 |
<main> |
定義文檔中主要或重要的內(nèi)容。 |
組織內(nèi)容
| Element | Description |
|---|---|
<p> |
即paragrah，定義一個(gè)段落。 |
<hr> |
定義水平分割線。 |
<pre> |
代表其內(nèi)容已經(jīng)預(yù)先排版過(guò)，格式應(yīng)當(dāng)保留。 |
<blockquote> |
代表引用自其他來(lái)源的內(nèi)容。 |
<ol> |
定義一個(gè)有序列表。 |
<ul> |
定義一無(wú)序列表。 |
<li> |
定義列表中的一個(gè)列表項(xiàng)。 |
<dl> |
定義一個(gè)描述列表，類(lèi)似于本表。 |
<dt> |
定義描述列表中的項(xiàng)目，如本表的Element。 |
<dd> |
定義描述列表中的項(xiàng)目，如本表的Description。 |
<figure> |
規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。 |
<figcaption> |
定義<figure>元素的標(biāo)題。 |
<div> |
代表一個(gè)通用的容器，沒(méi)有特殊含義。使用時(shí)需要用Class做出說(shuō)明。 |
文字形式
| Element | Description |
|---|---|
<a> |
代表一個(gè)鏈接到其他資源的超鏈接。 |
<em> |
代表強(qiáng)調(diào)文字。 |
<strong> |
代表特別重要文字。 |
<small> |
代表注釋 ，如免責(zé)聲明、版權(quán)聲明等，對(duì)理解文檔不重要。 |
<s> |
代表不準(zhǔn)確或不相關(guān) 的內(nèi)容。 |
<cite> |
代表作品標(biāo)題。 |
<q> |
代表內(nèi)聯(lián)的引用。 |
<dfn> |
代表一個(gè)術(shù)語(yǔ)包含在其最近祖先內(nèi)容中的定義 。 |
<abbr> |
代表省略或縮寫(xiě) ，其完整內(nèi)容在title屬性中。 |
<data> |
關(guān)聯(lián)一個(gè)內(nèi)容的機(jī)器可讀的等價(jià)形式 （該元素只在 WHATWG 版本的 HTML 標(biāo)準(zhǔn)中，不在 W3C 版本的 HTML5 標(biāo)準(zhǔn)中）。 |
<time> |
定義日期或時(shí)間，或者兩者。機(jī)器可讀的等價(jià)形式通過(guò) datetime 屬性指定。 |
<code> |
定義計(jì)算機(jī)代碼文本。 |
<var> |
代表代碼中的變量。 |
<samp> |
代表程序或電腦的輸出。 |
<kbd> |
代表用戶(hù)輸入 ，一般從鍵盤(pán)輸出，但也可以代表其他輸入，如語(yǔ)音輸入。 |
<sub>,<sup> |
分別代表下標(biāo)和上標(biāo) 。 |
<i> |
定義斜體字，代表一段不同性質(zhì)的文字，如技術(shù)術(shù)語(yǔ)、外文短語(yǔ)等。 |
<b> |
定義文本粗體。 |
<u> |
代表一段需要下劃線呈現(xiàn)的文本注釋?zhuān)鐦?biāo)記出拼寫(xiě)錯(cuò)誤的文字等。 |
<mark> |
代表一段需要被高亮的引用文字。 |
<ruby> |
代表被ruby注釋標(biāo)記的文本，如中文漢字和它的拼音。 |
<rt> |
代表ruby 注釋?zhuān)缰形钠匆簟?/td> |
<rp> |
代表 ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。 |
<bdi> |
允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。 |
<bdo> |
指定子元素的文本方向 ，顯式地覆蓋默認(rèn)的文本方向。 |
<span> |
代表一段沒(méi)有特殊含義的文本，當(dāng)其他語(yǔ)義元素都不適合文本時(shí)候可以使用該元素。使用時(shí)需要用class進(jìn)行說(shuō)明。 |
<br> |
表示換行。 |
<wbr> |
代表建議換行 (Word Break Opportunity) ，當(dāng)文本太長(zhǎng)需要換行時(shí)將會(huì)在此處添加換行符。 |
編輯
| Element | Description |
|---|---|
<ins> |
定義被插入文本。 |
<del> |
定義被刪除文本。 |
嵌入內(nèi)容
| Element | Description |
|---|---|
<img> |
代表一張圖片。 |
<iframe> |
代表一個(gè)內(nèi)聯(lián)的框架。 |
<embed> |
代表一個(gè)嵌入 的外部資源，如應(yīng)用程序或交互內(nèi)容。 |
<object> |
代表一個(gè)外部資源 ，如圖片、HTML 子文檔、插件等。 |
<param> |
代表<object>元素所指定的插件的參數(shù) 。 |
<video> |
代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶(hù)界面。 |
<audio> |
代表一段聲音 ，或音頻流 。 |
<source> |
為<video>或<audio>這類(lèi)媒體元素指定媒體源 。 |
<track> |
為<video>或<audio>這類(lèi)媒體元素指定文本軌道（字幕） 。 |
<canvas> |
代表位圖區(qū)域 ，可以通過(guò)腳本在它上面實(shí)時(shí)呈現(xiàn)圖形，如圖表、游戲繪圖等。 |
<map> |
與<area>元素共同定義圖像映射 區(qū)域。 |
<area> |
與<map>元素共同定義圖像映射 區(qū)域。 |
<svg> |
定義一個(gè)嵌入式矢量圖 。 |
<math> |
定義一段數(shù)學(xué)公式 。 |
表格
| Element | Description |
|---|---|
<table> |
定義表格。 |
<caption> |
代表表格的標(biāo)題。 |
<colgroup> |
代表表格中一組單列或多列。 |
<col> |
即Column，代表表格中的列。 |
<tbody> |
代表表格中一塊具體數(shù)據(jù) （表格主體）。 |
<thead> |
代表表格中一塊列標(biāo)簽 （表頭）。 |
<tfoot> |
代表表格中一塊列摘要 （表尾）。 |
<tr> |
即table row，代表表格中的行。 |
<td> |
即table division，代表表格中的單元格。 |
<th> |
即table head，代表表格中的頭部單元格。 |
表單
| Element | Description |
|---|---|
<form> |
代表一個(gè)表單 ，由控件組成。 |
<fieldset> |
代表控件組。 |
<legend> |
代表<fieldset>控件組的標(biāo)題 。 |
<label> |
代表表單控件的標(biāo)題 。 |
<input> |
代表允許用戶(hù)編輯數(shù)據(jù)的數(shù)據(jù)區(qū)（文本框、單選框、復(fù)選框等）。 |
<button> |
代表按鈕 。 |
<select> |
代表下拉框 。 |
<datalist> |
代表提供給其他控件的一組預(yù)定義選項(xiàng) 。 |
<optgroup> |
代表一個(gè)選項(xiàng)分組。 |
<option> |
代表一個(gè) <select> 元素或 <datalist> 元素中的一個(gè)選項(xiàng)。 |
<textarea> |
代表多行文本框。 |
<keygen> |
代表一個(gè)密鑰對(duì)生成器控件。 |
<output> |
定義不同類(lèi)型的輸出，比如腳本的輸出。 |
<progress> |
代表進(jìn)度條。 |
<meter> |
代表滑動(dòng)條。 |
交互元素
| Element | Description |
|---|---|
<details> |
代表一個(gè)用戶(hù)可以(點(diǎn)擊)獲取額外信息或控件的小部件，用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。 |
<summary> |
代表<details>元素的綜述或標(biāo)題。 |
<menuitem> |
代表一個(gè)用戶(hù)可以點(diǎn)擊的菜單項(xiàng)。 |
<menu> |
代表菜單。 |
參考來(lái)源：
MDN
菜鳥(niǎo)教程
