HTML 常用標(biāo)簽演示

本頁(yè)演示的所有標(biāo)簽均為瀏覽器默認(rèn)效果。

【基礎(chǔ)】

<div>?定義文檔中的節(jié)（塊元素，無(wú)任何屬性）

<span>?定義文檔中的節(jié)（內(nèi)聯(lián)元素，無(wú)任何屬性）

---

<h1>?to?<h6>?定義標(biāo)題（通常使用粗體顯示。注意：單個(gè)頁(yè)面內(nèi)最好只使用1個(gè)H1標(biāo)簽）

H1 標(biāo)題

H2 標(biāo)題

H3 標(biāo)題

H4 標(biāo)題

H5 標(biāo)題

H6 標(biāo)題

---

<p>?定義段落

---

<hr>?定義水平線（本頁(yè)中的分割線均為 <hr> 標(biāo)簽）

---

<header>?定義 section 或頁(yè)面的頭部

<footer>?定義 section 或頁(yè)面的尾部

<article>?定義文章

<section>?定義文檔中的節(jié)

<aside>?定義文檔內(nèi)容相關(guān)的內(nèi)容

<nav>?定義導(dǎo)航

header 頭部footer 尾部article 內(nèi)容section 內(nèi)容aside 內(nèi)容nav 內(nèi)容

---

<details>?定義細(xì)節(jié)內(nèi)容

<summary>?定義 details 的標(biāo)題

HTML 5

---

【列表】

<ul>?定義無(wú)序列表（通常列表前會(huì)有項(xiàng)目符號(hào)）

• <li>?定義列表的項(xiàng)目
• 張三
• 李四

---

<ol>?定義有序列表。（通常列表前會(huì)有數(shù)字符號(hào)）

<li>?定義列表的項(xiàng)目

張三

李四

---

<dl>?定義定義列表

<dt>?定義定義列表中的項(xiàng)目

<dd>?定義定義列表中項(xiàng)目的描述

張三的家譜

張三的家譜于1900年開(kāi)始統(tǒng)計(jì)，進(jìn)行了..

---

【表格】

<table>?定義表格

<caption>?定義表格標(biāo)題

<thead>?定義表格中的表頭內(nèi)容

<tfoot>?定義表格中的表注內(nèi)容（腳注）

<tbody>?定義表格中的主體內(nèi)容

<tr>?定義表格中的行

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

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

table 結(jié)構(gòu)標(biāo)準(zhǔn)順序如下：

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

※ 雖然 tfoot 放在了 tbody 之前，瀏覽器依然會(huì)將 tfoot 顯示在 tbody 之后，而且這樣做能讓瀏覽器在獲得所有表格內(nèi)的數(shù)據(jù)前顯示表注。

表格標(biāo)題表頭 ID表頭 姓名表頭 日期

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

---

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

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

---

【表單】

<form>?定義表單

---

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

<legend>?定義 fieldset 元素的標(biāo)題

標(biāo)題

內(nèi)容

---

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

<optgroup>?定義選擇列表中相關(guān)選項(xiàng)的組合

<option>?定義選擇列表中的選項(xiàng)

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

---

滾動(dòng)列表形式

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

---

多選列表

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

---

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

文本域?type="text"?

密碼域?type="password"?

復(fù)選框?type="checkbox"?A?B?C

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

文件域?type="file"?

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

隱藏域?type="hidden"?（當(dāng)然是看不見(jiàn)的了）

普通按鈕?type="button"?

重置按鈕?type="reset"?

提交按鈕?type="submit"?

email 域?type="email"?（若有輸入內(nèi)容，則會(huì)驗(yàn)證格式是否符合 email）

url 域?type="url"?（若有輸入內(nèi)容，則會(huì)驗(yàn)證格式是否符合 url）

數(shù)值域?type="number"?（若有設(shè)置最大值或最小值，則會(huì)驗(yàn)證數(shù)字是否在最大最小值之內(nèi)）

數(shù)值范圍域?type="range"?（通過(guò)拖動(dòng)滑塊來(lái)選擇數(shù)值）

日期域?type="date"?（會(huì)調(diào)用瀏覽器自帶的日期選擇器，可設(shè)置的類型：date, month, week, time, datetime, datetime-local）

　　　?type="month"?

　　　?type="week"?

　　　?type="time"?

　　　?type="datetime"?

　　　?type="datetime-local"?

色值域?type="color"?（會(huì)調(diào)用瀏覽器自帶的顏色選擇器）

搜索域?type="search"?（用于搜索，站內(nèi)搜索或 Google 搜索等，在輸入框內(nèi)容右側(cè)通常會(huì)出現(xiàn)清除按鈕）

---

<datalist>?定義 input 元素的選項(xiàng)列表

---

<keygen>?定義生成秘鑰

---

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

---

<label>?定義 input 元素的標(biāo)注點(diǎn)擊這里也可以選中

---

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

?

---

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

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

---

【格式】

<blockquote>?定義長(zhǎng)的引用（通常四周會(huì)有縮進(jìn)）

WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。

---

<pre>?定義預(yù)格式文本（通常會(huì)保留空格及換行符，并使用等寬字體顯示，很適合用來(lái)表示計(jì)算機(jī)代碼）

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

---

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

聯(lián)系小叉
前端開(kāi)發(fā)工程師

---

<a>?定義鏈接、錨點(diǎn)

<em>?定義強(qiáng)調(diào)文本（通常使用斜體顯示）

<strong>?定義更為強(qiáng)調(diào)的文本（通常使用粗體顯示）

<mark>?定義帶有標(biāo)記的文本（通常會(huì)高亮顯示）

<time>?定義時(shí)間（通常不會(huì)有任何視覺(jué)效果）

---

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

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

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

---

<i>?定義斜體文本

<b>?定義粗體文本

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

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

<sup>?定義^{上標(biāo)文本}、X²

<sub>?定義_{下標(biāo)文本}、H₂O

---

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

<cite>?定義引用。可使用該標(biāo)簽對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書(shū)籍或雜志的標(biāo)題。（通常使用斜體顯示）詳細(xì)描述

<q>?定義短的引用（通常會(huì)在兩邊加雙引號(hào)）

---

<bdo>?定義文本的方向

后面的文字會(huì)從右到左來(lái)顯示：你已經(jīng)具備了倒讀的能力

---

<abbr>?定義縮寫(xiě)

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

---

<progress>?定義進(jìn)度條?

<meter>?定義度計(jì)量??

---

【圖像】

<img>?定義圖像

<map>?定義可點(diǎn)擊區(qū)域

<area>?定義可點(diǎn)擊區(qū)域的內(nèi)部區(qū)域

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

---

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

<figcaption>?定義 figure 元素的標(biāo)題

小叉試驗(yàn)場(chǎng)

---

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

---

【音頻/視頻】

<audio>?定義聲音

<source>?定義媒體源

---

<audio>?定義視頻

<video>?定義字幕

---

【其他】

<noscript>?定義針對(duì)不支持客戶端腳本的用戶的替代內(nèi)容

當(dāng)前您的瀏覽器支持JavaScript腳本

---

<noframes>?定義針對(duì)不支持框架的用戶的替代內(nèi)容

---

<ruby>?定義 ruby 注釋

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/wangkang1/p/5619750.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。