HTML5全部元素詳解：一個都不能少
阿新 • • 發佈：2019-02-18
The root element
<html>
<html> 元素是 HTML 文件的根元素。建議為 <html> 元素指定 lang 屬性，便於螢幕閱讀器識別。<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>Document metadata
<head>
<head> 元素表示文件元資料的集合，是 <html> 元素的第一個子元素。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
<title>
<title> 元素代表文件的名字或標題。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name>
<title>這是文件的標題</title>
</head>
<body>
</body>
</html><base>
<base> 元素為文件中的所有連結指定基地址。如果URL中含有協議名或"//"則會忽略 <base> 指定的基地址。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <base href="http://www.baidu.com/img/"> </head> <body> <!-- http://www.baidu.com/img/a.jpg --> <img src="a.jpg"> <!-- 如果帶協議頭，則忽略 base 指定的基URL --> <!-- http://www.baidu.com/img/b.jpg --> <img src="http://www.baidu.com/img/b.jpg"> <!-- 省略協議頭但保留"//"，仍然會忽略 base 指定的基URL --> <!-- 這也是谷歌前端編碼規範推薦使用的一種方式 --> <!-- http://www.baidu.com/img/c.jpg --> <img src="//www.baidu.com/img/c.jpg"> </body> </html>
<link>
<link> 元素為文件指定外部樣式表。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html><meta>
<meta> 元素提供文件的元資訊，如文件編碼、文件作者、文件描述等。<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 常用的幾個 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> </body> </html>
<style>
<link> 是引入外部樣式檔案，而 <style> 元素則是在文件中寫樣式。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
</body>
</html>Sections
<body>
瀏覽器視窗中顯示的所有內容都在 <body> 元素中，是 <html> 元素的第二個子元素。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>瀏覽器視窗中顯示的所有內容都在這裡</h1>
</body>
</html><article>
代表獨立的、完整的一篇”文章“，如一個貼子、一篇文章、一條回覆。可以包含 <header> 、 <footer> 、 <section> 等元素。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 一篇文章 -->
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time datetime="2009-10-09">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<!-- 一條評論 -->
<article>
<footer>
<p>Posted by: <span>George Washington</span></p>
<p><time datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<!-- 一條評論 -->
<article>
<footer>
<p>Posted by: <span>George Hammond</span></p>
<p><time datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
</body>
</html><section>
代表頁面或某一部分的一節或一個部分，每個 <section> 一般都有一個主題思想，但未必一定要有 <h> 元素。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h2>Apples</h2>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<!-- 此處表示文章的一個小主題 -->
<section>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
</body>
</html><nav>
任何具有導航性質的連結組都可以用 <nav> 元素，不管是主導航、還是側邊欄中的導航、還是麵包屑導航、還是頁面內的錨點導航。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<main>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
</footer>
</main>
</body>
</html><aside>
<aside> 元素用於突出的引用、廣告、側邊欄。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
...
<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun ...</q></p>
<!-- 突出的引用 -->
<aside>
<q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q>
</aside>
<p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p>
...
</body>
</html><h1> to <h6>
<h1>~<h6> 元素表示某一部分的標題。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>H1</h1>
<h1>H2</h1>
<h1>H3</h1>
<h1>H4</h1>
<h1>H5</h1>
<h1>H6</h1>
</body>
</html><header>
<header> 元素表示文件的頭部，或 <article> 的頭部，或 <section> 的頭部，或 <aside> 的頭部。 示例程式碼可參考上面幾部分。<footer>
與 <header> 相對，用法亦相同。<address>
<address> 代表聯絡資訊，不僅僅是”地址“。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<footer>
<address>
For more details, contact
<a href="mailto:[email protected]">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>
</body>
</html>Grouping content
<p>
<p> 元素代表一個段落。<hr>
<hr> 元素代表一條水平分隔線。<pre>
<pre> 元素用於定義預格式化的文字，被包圍在 <pre> 元素中的文字通常會保留空格和換行符，常用來表示程式的原始碼。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<pre>
<h1>hello world</h1>
echo "hello world";
print("hello world")
</pre>
</body>
</html><blockquote>
<blockquote> 元素用於定義引用塊。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 下面是引用內容 -->
<blockquote>
<p>Hello World</p>
</blockquote>
</body>
</html><ol>
<ol> 元素表示有序列表。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol>
<li>hello</li>
<li>world</li>
</ol>
</body>
</html><ul>
<ul> 元素表示無序列表。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>hello</li>
<li>world</li>
</ul>
</body>
</html><li>
<li> 元素表示有序列表 <ol> 和 無序列表 <ul> 的一項。<dl>
<dt>
<dd>
<dl> 元素、 <dt> 元素、 <dd> 元素表示自定義列表。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>PHP</dt>
<dd>這是一個神奇的語言 ... ...</dd>
<dt>Java</dt>
<dd>以伺服器語言來說，與PHP ... ...</dd>
</dl>
</body>
</html><figure>
<figcaption>
<figure> 元素表示獨立的流內容（影象、圖表、照片、程式碼等等）， <figcaption> 元素給 <figure> 元素新增標題。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<figure>
<figcaption>Ubuntu誕生那一年</figcaption>
<img src="ubuntu.jpg" width="350" height="234" />
</figure>
</body>
</html><div>
這是一個神奇的塊標籤，無任何語義。儘量使用 HTML5 新語義標籤代替部分 <div> 元素。<main>
<main> 元素代表文件的主要內容。 <main> 元素中的內容對於文件來說應當是唯一的。它不應包含在文件中重複出現的內容，比如側欄、導航欄、版權資訊、站點標誌或搜尋表單。在一個文件中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代：<article>、<aside>、<footer>、<header> 或 <nav>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<main>
<h1>程式語言</h1>
<p>Java、C#、Python、PHP、JavaScript</p>
<article>
<h1>Java</h1>
<p>Hello Sun</p>
</article>
<article>
<h1>C#</h1>
<p>Hello Microsoft</p>
</article>
<article>
<h1>PHP</h1>
<p>Hello Zend</p>
</article>
...
</main>
</body>
</html>Text-level semantics
<a>
<a> 元素用於定義超連結。<em>
<em> 元素把文字定義為強調的內容。<strong>
<strong> 元素把文字定義為語氣更強的強調的內容。<small>
<small> 元素呈現小號字型效果。<s>
<s> 元素定義加刪除線的文字。<cite>
<cite> 元素通常表示它所包含的文字對某個參考文獻的引用，比如書籍或者雜誌的標題。按照慣例，引用的文字將以斜體顯示。<q>
<q> 元素定義短的引用。<dfn>
<dfn> 元素定義一個定義專案。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p>
</body>
</html><abbr>
<abbr> 元素表示簡稱或縮寫。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.</p>
</body>
</html>The data element
這裡的 data 是指 data-* 屬性，這不是一個屬性嗎？但卻被寫在元素一欄裡，著實可疑...待日後明白了再說...<time>
<time> 元素能夠以機器可讀的方式對日期和時間進行編碼。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>上班時間 <time>8:30</time> Let's Go</p>
</body>
</html><code>
<code> 元素用於表示計算機原始碼或者其他機器可以閱讀的文字內容。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>又是<code>println("hello world")</code></p>
</body>
</html><var>
<var> 元素用於定義變數。可以將此標籤與 <pre> 及 <code> 標籤配合使用。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Then he turned to the blackboard and picked up the chalk. After a few moment's thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher looked pleased.</p>
</body>
</html><samp>
<samp> 元素用於定義樣本文字。 <samp> 元素表示一段使用者應該對其沒有什麼其他解釋的文字字元。要從正常的上下文抽取這些字元時，通常要用到這個元素。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>
</body>
</html><kbd>
<kbd> 元素定義鍵盤文字。它表示文字是從鍵盤上鍵入的。它經常用在與計算機相關的文件或手冊中。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
</body>
</html><sub> <sup>
<sub> 元素定義下標文字，<sup> 元素定義上標文字。<i>
<i> 元素定義斜體。<b>
<b> 元素定義粗體檔案。<u>
<u> 元素為文字新增下劃線。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>To make <u>George</u> eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
</body>
</html><mark>
<mark> 元素突出顯示文字。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html><ruby> <rb> <rtc> <rt> <rp>
一組讓人摸不著頭腦的元素，真是無語...<bdi> 和 <bdo>
<bdi> 元素允許您設定一段文字，使其脫離其父元素的文字方向設定。<bdo> 元素可覆蓋預設的文字方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Username <bdi dir="ltr">Steve</bdi>: 78 points</p>
<p>Username <bdi dir="rtl">Steve</bdi>: 78 points</p>
<p>Username <bdo dir="ltr">Steve</bdo>: 78 points</p>
<p>Username <bdo dir="rtl">Steve</bdo>: 78 points</p>
</body>
</html><span>
<span> 元素被用來組合文件中的行內元素。<br>
<br> 元素表示換行。<wbr>
Word Break Opportunity (<wbr>) 規定在文字中的何處適合新增換行符。下面這段程式碼，給 <p> 的字型設定的足夠大，然後縮小瀏覽器視窗，就會看到 <wbr> 元素的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>www.simply<wbr>orange<wbr>juice.com</p>
</body>
</html>Edits
<ins>
<ins> 元素定義已經被插入文件中的文字。<del>
<del> 元素定義文件中已被刪除的文字。 <ins> 與 <del> 常配合使用：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>I love <del>java</del><ins>javascript</ins></p>
</body>
</html>Embedded content
<img>
<img> 元素定義圖片。<iframe>
<iframe> 元素會建立包含另外一個文件的內聯框架（即行內框架）。<embed>
<embed> 元素定義嵌入的內容。<object>
<param>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<figure>
<object type="application/x-java-applet">
<param name="code" value="MyJavaClass">
<p>You do not have Java available, or it is disabled.</p>
</object>
<figcaption>My Java Clock</figcaption>
</figure>
</body>
</html><video>
<audio>
<source>
<video> 元素定義視訊。<audio> 元素定義音訊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html><track>
<track> 元素為諸如 video 元素之類的媒介規定外部文字軌道。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
</body>
</html><map>
<area>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets">
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus">
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury">
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun">
</map>
</body>
</html>Links
<a>
<area>
Tabular data
<table>
<caption>
<colgroup>
<col>
<tbody>
<thead>
<tfoot>
<tr>
<td>
<th>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<table>
<thead>
<colgroup span="2" align="left">
<col>
<col>
</colgroup>
<col align="right">
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
</thead>
<tfoot>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tbody>
</table>
</body>
</html>Forms
<form>
<label>
<input>
<button>
<select>
<datalist>
<optgroup>
<option>
<textarea>
<keygen>
<output>
<progress>
<meter>
<fieldset>
<legend>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<form>
<label>姓名</label>
<input type="text">
<keygen name="security">
<button>按鈕</button>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<textarea rows="3" cols="20"><textarea>
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
<progress value="22" max="100"></progress>
<meter value="3" min="0" max="10">十分之三</meter>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
</body>
</html>Scripting
<script>
<script> 元素用於定義客戶端指令碼。<noscript>
<noscript> 元素用來定義在指令碼未被執行時的替代內容。<template>
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Sex</th>
<th>Legs<th>
</tr>
</thead>
<tbody>
<template id="row">
<tr><td></td><td></td><td></td><td></td></tr>
</template>
</tbody>
</table>
<script>
var data = [
{ name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
];
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
cells[3].textContent = cat.legs;
template.parentNode.appendChild(clone);
}
</script>
</body>
</html><canvas>
<canvas> 元素定義圖形。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
</html>