HTML 常用標簽演示

本頁演示的所有標簽均為瀏覽器默認效果。

【基礎】

<div>?定義文檔中的節（塊元素，無任何屬性）

<span>?定義文檔中的節（內聯元素，無任何屬性）

---

<h1>?to?<h6>?定義標題（通常使用粗體顯示。注意：單個頁面內最好只使用1個H1標簽）

H1 標題

H2 標題

H3 標題

H4 標題

H5 標題

H6 標題

---

<p>?定義段落

---

<hr>?定義水平線（本頁中的分割線均為 <hr> 標簽）

---

<header>?定義 section 或頁面的頭部

<footer>?定義 section 或頁面的尾部

<article>?定義文章

<section>?定義文檔中的節

<aside>?定義文檔內容相關的內容

<nav>?定義導航

header 頭部footer 尾部article 內容section 內容aside 內容nav 內容

---

<details>?定義細節內容

<summary>?定義 details 的標題

HTML 5

---

【列表】

<ul>?定義無序列表（通常列表前會有項目符號）

• <li>?定義列表的項目
• 張三
• 李四

---

<ol>?定義有序列表。（通常列表前會有數字符號）

<li>?定義列表的項目

張三

李四

---

<dl>?定義定義列表

<dt>?定義定義列表中的項目

<dd>?定義定義列表中項目的描述

張三的家譜

張三的家譜于1900年開始統計，進行了..

---

【表格】

<table>?定義表格

<caption>?定義表格標題

<thead>?定義表格中的表頭內容

<tfoot>?定義表格中的表注內容（腳注）

<tbody>?定義表格中的主體內容

<tr>?定義表格中的行

<th>?定義表格中的表頭單元格（通常使用粗體顯示）

<td>?定義表格中的單元

table 結構標準順序如下：

<table><caption></caption><thead><tr><th></th></tr></thead><tfoot><tr><td></td></tr></tfoot><tbody><tr><td></td></tr></tbody> </table>

※ 雖然 tfoot 放在了 tbody 之前，瀏覽器依然會將 tfoot 顯示在 tbody 之后，而且這樣做能讓瀏覽器在獲得所有表格內的數據前顯示表注。

表格標題表頭 ID表頭 姓名表頭 日期

表注 這是編號	表注 這是假名	表注 這是添加日期
1	張三	2009-09-09
2	李四	2010-10-10

---

自帶邊框樣式表頭 ID表頭 姓名表頭 日期

表注 這是編號	表注 這是假名	表注 這是添加日期
1	張三	2009-09-09
2	李四	2010-10-10

---

【表單】

<form>?定義表單

---

<fieldset>?定義圍繞表單中元素的邊框（通常四周會有縮進，并顯示圍繞的邊框）

<legend>?定義 fieldset 元素的標題

標題

內容

---

<select>?定義選擇列表（下拉列表、多選列表）

<optgroup>?定義選擇列表中相關選項的組合

<option>?定義選擇列表中的選項

? ? ? ? ? 張三 ? ? ? 張三的兒子 ? ? ? 張三的孫女 ? ? ? ? ? ? ? 李四 ? ? ? 李四的女兒 ? ? ? 李四的孫子 ? ? ?

---

滾動列表形式

? ? ? ? ? 張三 ? ? ? 張三的兒子 ? ? ? 張三的孫女 ? ? ? ? ? ? ? 李四 ? ? ? 李四的女兒 ? ? ? 李四的孫子 ? ? ?

---

多選列表

? ? ? ? ? 張三 ? ? ? 張三的兒子 ? ? ? 張三的孫女 ? ? ? ? ? ? ? 李四 ? ? ? 李四的女兒 ? ? ? 李四的孫子 ? ? ?

---

<input>?定義輸入控件（如果瀏覽器不支持 HTML5 新的類型，那么會使用文本域替代）

文本域?type="text"?

密碼域?type="password"?

復選框?type="checkbox"?A?B?C

單選按鈕?type="radio"?組A:①?②　　組B:Ⅰ?Ⅱ

文件域?type="file"?

圖像域?type="image"?（可用做提交按鈕）

隱藏域?type="hidden"?（當然是看不見的了）

普通按鈕?type="button"?

重置按鈕?type="reset"?

提交按鈕?type="submit"?

email 域?type="email"?（若有輸入內容，則會驗證格式是否符合 email）

url 域?type="url"?（若有輸入內容，則會驗證格式是否符合 url）

數值域?type="number"?（若有設置最大值或最小值，則會驗證數字是否在最大最小值之內）

數值范圍域?type="range"?（通過拖動滑塊來選擇數值）

日期域?type="date"?（會調用瀏覽器自帶的日期選擇器，可設置的類型：date, month, week, time, datetime, datetime-local）

　　　?type="month"?

　　　?type="week"?

　　　?type="time"?

　　　?type="datetime"?

　　　?type="datetime-local"?

色值域?type="color"?（會調用瀏覽器自帶的顏色選擇器）

搜索域?type="search"?（用于搜索，站內搜索或 Google 搜索等，在輸入框內容右側通常會出現清除按鈕）

---

<datalist>?定義 input 元素的選項列表

---

<keygen>?定義生成秘鑰

---

<output>?定義多行的文本輸入控件

---

<label>?定義 input 元素的標注點擊這里也可以選中

---

<textarea>?定義多行的文本輸入控件

?

---

<button>?定義按鈕（與 input 不同的是，button 內部可以放置更多的內容，比如文本或圖像）

普通按鈕?重置按鈕?提交按鈕

---

【格式】

<blockquote>?定義長的引用（通常四周會有縮進）

WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

---

<pre>?定義預格式文本（通常會保留空格及換行符，并使用等寬字體顯示，很適合用來表示計算機代碼）

for(var i=0; i<9; i++){i++; };

---

<address>定義文檔作者或擁有者的聯系信息（通常使用斜體顯示）

聯系小叉
前端開發工程師

---

<a>?定義鏈接、錨點

<em>?定義強調文本（通常使用斜體顯示）

<strong>?定義更為強調的文本（通常使用粗體顯示）

<mark>?定義帶有標記的文本（通常會高亮顯示）

<time>?定義時間（通常不會有任何視覺效果）

---

<del>?定義被刪除文本（通常帶有刪除線）

<ins>?定義新插入文本（通常帶有下劃線）

2015年1月1日是星期五星期四

---

<i>?定義斜體文本

<b>?定義粗體文本

<big>?定義大號文本（通常使用比正文更大的字號顯示）

<small>?定義小號文本（通常使用比正文更小的字號顯示）

<sup>?定義^上標文本、X²

<sub>?定義_下標文本、H₂O

---

<code>?定義計算機代碼文本。This HTML Code.（通常使用等寬字體顯示，但不會保留空格及換行符，需要保留空格及換行符，請使用<pre>）詳細描述

<cite>?定義引用。可使用該標簽對參考文獻的引用進行定義，比如書籍或雜志的標題。（通常使用斜體顯示）詳細描述

<q>?定義短的引用（通常會在兩邊加雙引號）

---

<bdo>?定義文本的方向

后面的文字會從右到左來顯示：你已經具備了倒讀的能力

---

<abbr>?定義縮寫

微軟推出的瀏覽器是?IE?瀏覽器。（鼠標移到“IE”上看效果）

---

<progress>?定義進度條?

<meter>?定義度計量??

---

【圖像】

<img>?定義圖像

<map>?定義可點擊區域

<area>?定義可點擊區域的內部區域

圖片左右兩邊的鏈接不一樣：

---

<figure>?定義文檔中的媒體內容（圖片、圖表、照片、代碼等）

<figcaption>?定義 figure 元素的標題

小叉試驗場

---

<canvas>?定義畫布（此處不做演示）

---

【音頻/視頻】

<audio>?定義聲音

<source>?定義媒體源

---

<audio>?定義視頻

<video>?定義字幕

---

【其他】

<noscript>?定義針對不支持客戶端腳本的用戶的替代內容

當前您的瀏覽器支持JavaScript腳本

---

<noframes>?定義針對不支持框架的用戶的替代內容

---

<ruby>?定義 ruby 注釋

<rt>?定義 ruby 注釋的解釋

<rp>?定義若瀏覽器不支持 ruby 元素顯示的內容

轉載于:https://www.cnblogs.com/wangkang1/p/5619750.html

總結

以上是生活随笔為你收集整理的HTML 常用标签演示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。