HTML 介紹

HTML：HyperText Markup Language，是一個用來建構網頁結構的一種標籤語法，以下是各版本的發佈年份。

年份	版本
1993	HTML
1995	HTML 2.0
1997	HTML 3.2
1997	HTML 4
1999	HTML 4.01
2000	XHTML
2014	HTML 5

撰寫HTML文件時，第一行可以宣告本文件所採用的版本，例如：

HTML 5

<!DOCTYPE html>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

其中XHTML強制每個標籤都要有結束，如果沒有外部封閉標籤的，需使用內部封閉的方式，例如：

外部封閉：內容1內容2

內部封閉：內容1 內容2

目前大部分的瀏覽器都支援HTML5，但若要IE8以前的瀏覽器支援，請加入下面的語法：

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

想要測試自己的瀏覽器是不是完全支援所有的HTML5標籤，可以到這個網站來測試看看，以下是為大家整理的HTML標籤：

基礎結構類標籤
標籤	說明	備註
<html></html>	建構整份網頁文件
<head></head>	網頁描述資料
<body></body>	網頁內容

基礎描述類標籤
標籤	說明	備註
<title></title>	網頁標題
<base>	連結參考	針對相對路徑的參考位置
<meta>	頁面描述資料	關鍵字、描述…等
<style></style>	CSS樣式	直接在網頁文件中撰寫CSS樣式
<script></script>	Javascript語法	直接在網頁文件中撰寫Javascript樣式
<noscript></noscript>	不支援語法時顯示訊息
<link>	連結外部檔案	例如：CSS樣式表、網頁圖示檔…等

內容結構類標籤
標籤	說明	備註
<h1></h1>～<h6></h6>	標題	數字越小權重越高
<p></p>	段落
<br>	跳行
<wbr>	文字過長則斷行	HTML 5新增
<hr>	水平線
<table></table>	表格
<th></th>	標題欄位
<tr></tr>	列
<td></td>	欄
<caption></caption>	表格標題
<colgroup></colgroup>	欄群組
<col>	欄群組屬性設定
<thead></thead>	表格標題群組
<tbody></tbody>	表格內容群組
<tfoot></tfoot>	表格頁尾群組
<ul></ul>	定義無順序清單
<ol></ol>	定義有順序清單
<li></li>	清單項目
<dl></dl>	定義描述清單
<dt></dt>	描述項目
<dd></dd>	項目說明
<div></div>	定義區塊型的區域
<span></span>	定義單行型的區域
<header></header>	定義網頁標題區域	HTML 5新增
<nav></nav>	定義網頁導覽區域	HTML 5新增
<main></main>	定義網頁主內容區塊	HTML 5新增
<section></section>	定義網頁章節區域	HTML 5新增
<article></article>	定義網頁內容區域	HTML 5新增
<aside></aside>	定義網頁邊欄區域	HTML 5新增
<footer></footer>	定義網頁頁尾區域	HTML 5新增
<details></details>	定義詳細訊息	HTML 5新增
<summary></summary>	定義詳細訊息總結	HTML 5新增
<iframe></iframe>	內嵌頁框
<menuitem></menuitem>	彈出式選單內容	HTML 5新增（僅Firefox支援）

內容描述類標籤
標籤	說明	備註
<b></b>	粗體字
<strong></strong>	粗體字	除了文字樣式上變粗之外，語意上也有加強的意思
<i></i>	斜體字
<em></em>	斜體字	除了文字樣式上變斜之外，語意上也有強調的意思
<small></small>	較小的字
<mark></mark>	突顯的字	HTML 5新增
<del></del>	刪除的字
<ins></ins>	加入的字
<sub></sub>	下標字
<sup></sup>	上標字
<q></q>	引用	用於較短的文字引用
<blockquote></blockquote>	引用	用於較長的文字引用，利用cite屬性說明出處
<abbr></abbr>	縮寫字說明	利用title屬性說明縮寫字
<address></address>	聯絡資訊
<cite></cite>	作品標題
<bdo></bdo>	文字方向	利用dir屬性決定方向（ltr：由左向右、rtl：由右向左）
<dfn></dfn>	術語
<kbd></kbd>	鍵盤輸入	表達需要使用者用鍵盤按下某按鍵
<samp></samp>	電腦回饋內容
<code></code>	程式碼
<pre></pre>	預先格式化	內容會按照在HTML中的排版來顯示
<var></var>	變數
<ruby></ruby>	文字音標	HTML 5新增
<rt></rt>	文字音標內容	HTML 5新增
<rp></rp>	不支援文字音標時顯示	HTML 5新增
<time></time>	定義日期時間	HTML 5新增
<bdo></bdo>	反向文字	HTML 5新增
<bdo></bdo>	對話框	HTML 5新增
<figure></figure>	圖片說明	HTML 5新增
<figcaption></figcaption>	圖片說明內容	HTML 5新增

連結類標籤
標籤	說明	備註
<a></a>	超連結

圖形類標籤
標籤	說明	備註
<img>	圖片
<map></map>	影像連結地圖
<area></area>	影像連結區域
<svg></svg>	網頁向量圖檔	HTML 5新增

表單類標籤
標籤	說明	備註
<form></form>	表單範圍
<input>	表單輸入項目
<fieldset></fieldset>	表單欄位群組
<legend></legend>	表單欄位群組名稱
<select></select>	表單選單
<optgroup></optgroup>	表單選單選項群組
<option></option>	表單選單選項
<textarea></textarea>	表單文字區域
<button></button>	表單按鈕
<datalist></datalist>	表單資料清單
<keygen>	表單金鑰產生欄位	HTML 5新增
<output></output>	表單計算結果欄位
<meter></meter>	量度圖形	HTML 5新增
<progress></progress>	進度圖形	HTML 5新增

多媒體類標籤
標籤	說明	備註
<canvas></canvas>	畫布區域	HTML 5新增
<audio></audio>	聲音內容	HTML 5新增
<video></video>	視訊內容	HTML 5新增
<source>	內容來源	HTML 5新增
<track>	內容字幕指定	HTML 5新增
<embed>	外部程式內容嵌入	HTML 5新增
<object></object>	外部程式內容嵌入	HTML 5新增

Richardevics表示:

2024-10-2218:55:43

rybelsus generic rybelsus generic Semaglutide pharmacy price

回覆
Ремонт Apple iMac в Москве表示:

2024-10-2217:57:44

Профессиональный сервисный центр по ремонту моноблоков iMac в Москве. Мы предлагаем: imac ремонт цена Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом

回覆
Travismut表示:

2024-10-2217:19:55

Plavix 75 mg price: Plavix generic price – п»їplavix generic

回覆
Clarkwer表示:

2024-10-2215:16:18

Наш магазин НашаМебель приглашает широкий прибор кухонь кои помогут сделать устроенность и еще благоустроенность в вашем логове https://www.notahye4kuhnishki.ru/.

回覆
Clarkwer表示:

2024-10-2215:00:59

Отечественный этношоп НашаМебель зовет широкий сортимент кухонь которые помогут сделать устроенность а также уют на вашем доме https://notahye4kuhnishki.ru/.

回覆
Sergioger表示:

2024-10-2214:35:02

Cost of Plavix without insurance plavix medication or Plavix generic price https://www.google.bg/url?sa=t&url=https://clopidogrel.pro buy clopidogrel online generic plavix Plavix generic price and Cost of Plavix without insurance plavix best price

回覆
Lewisslund表示:

2024-10-2214:31:10

you are truly a just right webmaster. The web site loading velocity is amazing. It sort of feels that youre doing any unique trick. Also The contents are masterwork. youve performed a excellent process on this matter вход поперло казино

回覆
Michaeljuilk表示:

2024-10-2214:25:18

buy minocycline 100 mg otc order stromectol or ivermectin cost in usa https://images.google.cm/url?sa=t&url=https://stromectol1st.shop stromectol pills ivermectin for humans ivermectin canada and ivermectin 3 mg tablet dosage ivermectin tablets uk

回覆
Charleszed表示:

2024-10-2214:23:54

paxlovid for sale: paxlovid 1st – paxlovid pill

回覆
GeorgeDiank表示:

2024-10-2212:31:28

Функциональность российских решений для работы с МЧД Jira и Confluence ушли? Выбирайте российские аналоги управления проектами в нашем обзоре.Ищете аналоги зарубежных систем управления проектами? Читайте наш обзорПереводите управление персоналом в электронный вид? Читайте обзор российских систем КЭДО.Как правильно хранить электронные документы? Смотрите обзор решений для работы с электронными архивами.Смотрите обзоры и рейтинги систем цифровизации на нашем сайте. Все о системах цифровизации: рейтинги и обзоры https://best-ecm.ru/

回覆
Jamesses表示:

2024-10-2211:18:03

Познакомьтесь один-другой нашим профессиональным коллективом который образовывает чудесную этажерка воплощая ваши мечтания на реальность https://www.cehitae2kuhnishki.ru.

回覆
Jamesses表示:

2024-10-2211:04:02

Познакомьтесь всего нашим проф коллективом который строит уникальную мебель воплощая ваши мечтания на явь http://cehitae2kuhnishki.ru/.

回覆
humandesignbi表示:

2024-10-2210:18:34

. https://mari-tyrek.ru/39801.html

回覆
humandesignrj表示:

2024-10-2209:53:21

? https://mari-tyrek.ru/30764.html

回覆
Richardevics表示:

2024-10-2209:48:00

buy clopidogrel bisulfate п»їplavix generic Plavix 75 mg price

回覆
humandesignfc表示:

2024-10-2209:44:27

:- https://mari-tyrek.ru/79734.html

回覆
온라인카지노表示:

2024-10-2209:20:32

Saved as a favorite, I really like your blog!

回覆
Trenttat表示:

2024-10-2209:17:29

https://rybelsus.icu/# rybelsus.icu doctors for erectile dysfunction

回覆
EvgeniySherementev表示:

2024-10-2208:07:11

ЖК Космо ЖК Теплые кварталы ЖК АСТРО все это строит неблагонадежный застройщик Паритет Девелопмент. Он экономит на всем строит некачественное жилье отдел продаж нагло врет при продажах квартир. В городе Тюмени есть много порядочных застройщиков а этот я бы никому не рекомендовал. dontcheatpeople – телеграмм.

回覆
humandesignws表示:

2024-10-2207:46:15

:- https://mari-tyrek.ru/94602.html

回覆
humandesigngl表示:

2024-10-2207:40:58

:- https://mari-tyrek.ru/80918.html

回覆
Travismut表示:

2024-10-2207:33:47

ivermectin gel: stromectol 1st shop – minocycline 100 mg tablets for human

回覆
BrianAmese表示:

2024-10-2207:29:28

Выше инет-магазин Мебель-шмммммммебель приглашает широкий ассортимент мебели чтобы кухонь. У нас вы улучите шиздец необходимое чтобы учреждения приятного и еще высокофункционального экстерьера https://www.tyfapao6kuhnishki.ru/.

回覆
Ремонт ноутбуков в Москве表示:

2024-10-2207:24:16

Профессиональный сервисный центр по ремонту сотовых телефонов в Москве. Мы предлагаем: официальный ремонт ноутбука москва Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом

回覆
BrianAmese表示:

2024-10-2207:16:07

Выше интернет-магазин Мебель-шмммммммебель призывает широкий коллекция мебели для кухонь. У нас ваша милость откопаете все необходимое для существа приятного и многофункционального внутреннего убранства https://www.tyfapao6kuhnishki.ru/.

回覆
pileli sineklik表示:

2024-10-2207:10:59

plise sineklik | Pileli sinekliklerin modern evler için ne kadar uygun olduğunu anlattığınız bu yazı, bana seçim yaparken çok yardımcı oldu.

回覆
Bernardwem表示:

2024-10-2206:55:42

rybelsus.icu rybelsus generic or semaglutide http://rebounderzsterling.pfestore.com/cart.aspx?returnurl=http://rybelsus.icu rybelsus.icu order Rybelsus cheaper and more rybelsus.icu

回覆
humandesignnb表示:

2024-10-2206:49:17

_

回覆
humandesignxr表示:

2024-10-2206:30:08

. https://mari-tyrek.ru/22371.html

回覆
Arthurfrunc表示:

2024-10-2205:38:43

https://stromectol1st.shop/# minocycline 50 mg for sale indian pharmacy online

回覆