HTML5常用標簽大全

TML前端開發最終取決于掌握標簽的多少

HTML大概有七八百個標簽

樓主這里給大家總結了下HTML常用標簽

標簽描述

定義注釋。

<!DOCTYPE> 定義文檔類型,所有H5都是這玩意打頭。

<a>定義錨。

<abbr>定義縮寫。

<acronym>定義只取首字母的縮寫。

<address>定義文檔作者或擁有者的聯系信息。

<applet>不贊成使用。定義嵌入的 applet。

<area>定義圖像映射內部的區域。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<audio>定義聲音內容。

<b>定義粗體字。

<base>定義頁面中所有鏈接的默認地址或默認目標。

<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<bdo>定義文字方向。

<big>定義大號文本。

<blockquote>定義長的引用。

<body>定義文檔的主體。

<br>定義簡單的折行。

<button>定義按鈕 (push button)。

<canvas>定義圖形。

<caption>定義表格標題。

<center>不贊成使用。定義居中文本。

<cite>定義引用(citation)。

<code>定義計算機代碼文本。

<col>定義表格中一個或多個列的屬性值。

<colgroup>定義表格中供格式化的列組。

<command>定義命令按鈕。

<datalist>定義下拉列表。

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

<del>定義被刪除文本。

<details>定義元素的細節。

<dir>不贊成使用。定義目錄列表。

<div>定義文檔中的節。

<dfn>定義定義項目。

<dialog>定義對話框或窗口。

<dl>定義定義列表。

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

<em>定義強調文本。

<fieldset>定義圍繞表單中元素的邊框。

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

<figure>定義媒介內容的分組，以及它們的標題。

<font>不贊成使用。定義文字的字體、尺寸和顏色。

<footer>定義 section 或 page 的頁腳。

<form>定義供用戶輸入的 HTML 表單。

<frame>定義框架集的窗口或框架。

<frameset>定義框架集。

<h1> to <h6>定義 HTML 標題。

<head>定義關于文檔的信息。

<header>定義 section 或 page 的頁眉。

<hr>定義水平線。

<html>定義 HTML 文檔。

<i>定義斜體字。

<img>定義圖像。

<input>定義輸入控件。

<ins>定義被插入文本。

<isindex>不贊成使用。定義與文檔相關的可搜索索引。

<kbd>定義鍵盤文本。

<keygen>定義生成密鑰。

<label>定義 input 元素的標注。

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

<li>定義列表的項目。

<map>定義圖像映射。

<mark>定義有記號的文本。

<menu>定義命令的列表或菜單。

<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。

<meter>定義預定義范圍內的度量。

<nav>定義導航鏈接。

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

<ol>定義有序列表。

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

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

<output>定義輸出的一些類型。

<p>定義段落。

<param>定義對象的參數。

<pre>定義預格式文本。

<progress>定義任何類型的任務的進度。

<q>定義短的引用。

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

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

<ruby>定義 ruby 注釋。

<s>不贊成使用。定義加刪除線的文本。

<samp>定義計算機代碼樣本。

<section>定義 section。

<select>定義選擇列表（下拉列表）。

<small>定義小號文本。

<source>定義媒介源。

<span>定義文檔中的節。

<strike>不贊成使用。定義加刪除線文本。

<strong>定義強調文本。

<sub>定義下標文本。

<summary>為 <details> 元素定義可見的標題。

<sup>定義上標文本。

<table>定義表格。

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

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

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

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

<th>定義表格中的表頭單元格。

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

<time>定義日期/時間。

<title>定義文檔的標題。

<tr>定義表格中的行。

<track>定義用在媒體播放器中的文本軌道。

<tt>定義打字機文本。

<u>不贊成使用。定義下劃線文本。

<ul>定義無序列表。

<var>定義文本的變量部分。

<video>定義視頻。

<wbr>定義可能的換行符。

<xmp>不贊成使用。定義預格式文本。

標簽描述

<!DOCTYPE> 定義文檔類型。

<html>定義 HTML 文檔。

<title>定義文檔的標題。

<body>定義文檔的主體。

<h1> to <h6>定義 HTML 標題。

<p>定義段落。

<br>定義簡單的折行。

<hr>定義水平線。

定義注釋。

格式

標簽描述

<acronym>定義只取首字母的縮寫。

<abbr>定義縮寫。

<address>定義文檔作者或擁有者的聯系信息。

<b>定義粗體文本。

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<bdo>定義文字方向。

<big>定義大號文本。

<blockquote>定義長的引用。

<center>不贊成使用。定義居中文本。

<cite>定義引用(citation)。

<code>定義計算機代碼文本。

<del>定義被刪除文本。

<dfn>定義定義項目。

<em>定義強調文本。

<font>不贊成使用。定義文本的字體、尺寸和顏色

<i>定義斜體文本。

<ins>定義被插入文本。

<kbd>定義鍵盤文本。

<mark>定義有記號的文本。

<meter>定義預定義范圍內的度量。

<pre>定義預格式文本。

<progress>定義任何類型的任務的進度。

<q>定義短的引用。

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

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

<ruby>定義 ruby 注釋。

<s>不贊成使用。定義加刪除線的文本。

<samp>定義計算機代碼樣本。

<small>定義小號文本。

<strike>不贊成使用。定義加刪除線文本。

<strong>定義語氣更為強烈的強調文本。

<sup>定義上標文本。

<sub>定義下標文本。

<time>定義日期/時間。

<tt>定義打字機文本。

<u>不贊成使用。定義下劃線文本。

<var>定義文本的變量部分。

<wbr>定義可能的換行符。

表單

標簽描述

<form>定義供用戶輸入的 HTML 表單。

<input>定義輸入控件。

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

<button>定義按鈕。

<select>定義選擇列表（下拉列表）。

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

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

<label>定義 input 元素的標注。

<fieldset>定義圍繞表單中元素的邊框。

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

<isindex>不贊成使用。定義與文檔相關的可搜索索引。

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

<output>定義輸出的一些類型。

框架

標簽描述

<frame>定義框架集的窗口或框架。

<frameset>定義框架集。

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

圖像

標簽描述

<img>定義圖像。

<map>定義圖像映射。

<area>定義圖像地圖內部的區域。

<canvas>定義圖形。

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

<figure>定義媒介內容的分組，以及它們的標題。

音頻/視頻

標簽描述

<audio>定義聲音內容。

<source>定義媒介源。

<track>定義用在媒體播放器中的文本軌道。

<video>定義視頻。

鏈接

標簽描述

<a>定義錨。

<nav>定義導航鏈接。

列表

標簽描述

<ul>定義無序列表。

<ol>定義有序列表。

<li>定義列表的項目。

<dir>不贊成使用。定義目錄列表。

<dl>定義定義列表。

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

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

<menu>定義命令的菜單/列表。

<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。

<command>定義命令按鈕。

表格

標簽描述

<table>定義表格

<caption>定義表格標題。

<th>定義表格中的表頭單元格。

<tr>定義表格中的行。

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

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

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

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

<col>定義表格中一個或多個列的屬性值。

<colgroup>定義表格中供格式化的列組。

樣式/節

標簽描述

<div>定義文檔中的節。

<span>定義文檔中的節。

<header>定義 section 或 page 的頁眉。

<footer>定義 section 或 page 的頁腳。

<section>定義 section。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<details>定義元素的細節。

<dialog>定義對話框或窗口。

<summary>為 <details> 元素定義可見的標題。

元信息

標簽描述

<head>定義關于文檔的信息。

<base>定義頁面中所有鏈接的默認地址或默認目標。

<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。

編程

標簽描述

<applet>不贊成使用。定義嵌入的 applet。

<param>定義對象的參數。

屬性描述

accesskey規定激活元素的快捷鍵。

class規定元素的一個或多個類名（引用樣式表中的類）。

contenteditable規定元素內容是否可編輯。

contextmenu規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

data-*用于存儲頁面或應用程序的私有定制數據。

dir規定元素中內容的文本方向。

draggable規定元素是否可拖動。

dropzone規定在拖動被拖動數據時是否進行復制、移動或鏈接。

hidden規定元素仍未或不再相關。

id規定元素的唯一 id。

lang規定元素內容的語言。

spellcheck規定是否對元素進行拼寫和語法檢查。

style規定元素的行內 CSS 樣式。

tabindex規定元素的 tab 鍵次序。

title規定有關元素的額外信息。

translate規定是否應該翻譯元素內容。

體效果

<h1></h1> 標題字(最大)

<h6></h6> 標題字(最小)

<strong></strong> 粗體字(突出強調)

<b></b> 粗體字(bold:粗體)

<i></i> 斜體字(italic:斜體)

<u></u> 底線,文本添加下劃線：(underline:下劃線)

<strike></strike>或<s></s> 橫線,相當于加刪除線文本 <del></del> HTML5

等寬文字標簽:對于等寬文字設置多數情況用在英文文字顯示中

<tt></tt> 打字體,類似打字機或者等寬的文本效果。

<code></code> 等寬文字設置內容(定義計算機代碼文本)

<samp></samp> 等寬文字設置內容(定義樣本文本)

<kbd> 定義鍵盤文本。

<sup></sup> 文字上標字體標簽(super)

<sub></sub> 文字下標字體標簽(subscipt)

<address></address> 設置地址文字(可定義一個地址,比如電子郵件地址。您應當使用它來定義地址、簽名或者文檔的作者身份。)

<font></font> 編輯網頁文字樣式

<font face="" size="" color=""></font>

face屬性可以用于設置文字的名稱,可以是宋體、隸書、楷體等;

size屬性用于設置字號的大小(單位:字號),從 1 到 7 的數字,或h1-h6。瀏覽器默認值是3。

color用于設置字體的顏色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手冊上沒有

<ruby></ruby>和<rt></rt> 設置文字標注標記

實例:

<ruby>當代最可愛的人<rt>志愿軍</rt></ruby>

、Html的基本結構：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

網頁的文本、圖片等信息；

</body>

</html>

二、Head部分：用于表示網頁的元數據即描述網頁的基本信息

其常用標簽及屬性有：

1、title標簽：瀏覽器標簽頁顯示的標題

2、meta標簽：其常用屬性

①charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼：<meta charset="UTF-8">

常見的字符集編碼格式：

a.GB-2312:國標碼，簡體中文

b.GBK：擴展的國標碼

c.UTF-8：萬國碼 Unicode 常用

②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執行，可選屬性值：Content-Type(文檔類型) refresh(網頁定時刷新) set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設置哪一部分，具體的設置內容，放到content屬性中）

③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看

常用且需要掌握的屬性值：author（作者） keywords（網頁關鍵字） description（網頁描述）這兩個屬性設置，網頁必不可少。

3、link標簽：鏈接網頁圖標（title前的小logo），其常用屬性有：

①rel屬性：聲明鏈接文件的類型，此處選icon

②type屬性：可以省略

③href屬性：表示圖片的路徑地址

三、body部分：網頁的文本、圖片等信息

標簽的分類：

塊級標簽：顯示為塊，前后隔一行（自動換行）

行級標簽：按行從左往右逐一顯示。

1、常見的塊級標簽：

①<h1></h1>......<h6><h6>：標題標簽，自動加粗，h1最大，h6最小。

②<hr/>：水平線標簽，添加一條水平線。

③<p></p>:段落標簽，

④<br/>:換行標簽，

⑤<blockquote/></blockquote>:引用標簽，cite屬性，表明引用的來源，一般引用網址

瀏覽器默認首行縮進。

⑥<pre></pre>:預格式標簽，用于重載代碼。瀏覽器默認顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、

空格等元素能在瀏覽器中顯示。

【補充】html 文件中空格的表示：

2、基于布局的塊級標簽

列表：無序列表、有序列表、定義列表

①有序列表：<ol></ol> 列表項：<li></li>

②無序列表：<ul></ul> 列表項：<li></li>

③定義列表（實現圖文混排）:<dl></dl>

列表標題：<dt>一般只有一項</dt>

列表描述項：<dd>可以有很多項</dd>

3、組合標簽：<figure></figure>用于顯示圖片及圖片標題

他有兩個子標簽：<img />圖片

<figcaption></figcaption>圖片的標題

例如：<figure>

<figcaption>探險家伊澤瑞爾</figcaption>

</figure>

4、分區標簽：<div></div>

5、常見的行級標簽

<1>span（文本）:無實際意義，用于包裹某部分文字，修改特定樣式，例如：

這是<span style="color: red;font-size: 36px;">span</span>中的文字

img（圖片）：其常用屬性：①src:表示引用圖片的地址。

路徑地址的寫法：相對路徑：以當前文件為最準，去尋找圖片地址

a、與文件處于同一層的圖片，直接寫圖片名

b、圖片在當前文件下一層：文件名/圖片名

c、圖片在當前文件上一層：../圖片名

絕對路徑:file:///盤符：/文件夾/圖片名，但是嚴禁使用

圖片網址：網絡上的圖片鏈接，但是一般不用

②height和width：圖片的高度和寬度。可以用CSS樣式代替

③title：圖片標。當鼠標指上之后顯示的文字

④alt:當圖片無法顯示的時候，顯示的文字

<2>em（傾斜強調）

<3>strong（加粗強調）

<4>b（加粗）

<5>i（傾斜）

Strong、em、b、i的區別

1、Strong、em都表示強調，Strong為粗體，em為斜體，而Strong的強調程度逗比em高

2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調的語義。H5要求標簽盡可能實現語義化。

<6>q（短引用）

<7>small/big（縮小/放大字體）：small和big分別是縮小和擴大字體，都可以多層嵌套直至上限或下限

<8>a（超鏈接）

1、href:超鏈接的路徑，可以是網絡鏈接，也可以是本地文件。

2、target:跳轉頁面打開的位置。_self自身頁面，_blank新頁面。

3、title:鼠標指在超鏈接上顯示的名稱。

4、Rel（被鏈接是當前的前/后一篇）:指定被鏈接文檔與當前文檔的關系,搜索引擎會利用該屬性獲取更多的有關鏈接的信息：

rel="prev"被鏈接文檔是當前文檔的前一篇文檔，

rel="next"被鏈接文檔是當前文檔的后一篇文檔,

rel="icon"被鏈接文檔是當前文檔的圖標

rel="stylesheet"被鏈接文檔是當前文檔的樣式表

5、Rev（當前是被鏈接的前/后一篇）

錨鏈接：

①本頁面錨鏈接:a、設置錨點：<a name="top"></a>

b、跳轉錨點：#name名

①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點

b、跳轉錨點：頁面地址.html#name名

<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>

功能性鏈接： mailto用于給指定郵箱發送郵件

file：///e:/aaa.png打開本地文件

tencent://message/?uin=1315618220 給指定QQ發送息

<9>s標簽，有誤文本：刪除線

<s>這是S標簽中的文字</s><br />

<10>cite標簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用

<cite>這是cite中的文本</cite><br />

<11>code:計算機代碼，不保留代碼格式

<pre>

</pre>

<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左

kbd:表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體

請輸入“<kbd>Esc</kbd>”推遲系統<br />

<13>sup:上標文本，sub:下標文本

x<sub>6</sub><br />

? ? 空格

? ? 空格 <br />

<14>u:下劃線

<u>這是下劃線</u><br />

mark:高亮或標記文本，瀏覽器顯示為黃色背景

6、表格：表格的行：tr，每行中的列：td，表格的表頭：th

表格的常用屬性：

表格行列屬性：[tr和td的屬性]：

1、width/heigh：單元格的寬高

2、bgcolor:單元格的背景顏色

3、align:left center right 單元格中的文字水平對齊方式

4、valign:top center bottom 單元格中的文字垂直對其方式

5、nowrap:單元格中文字不換行

【注意】當表格屬性與行列屬性沖突時，行列屬性優先級高

7、表單（form）

【兩個重要屬性】：action-表單提交的服務器地址 method-表單提交數據的方法（get/post）

get/post區別:

1>get使用URL傳參：http://服務器地址?name1=value1&name2=value2

（?表示傳遞參數，?后面采用name=value的形式傳遞，多個參數之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，并且別人可以很容易url注入，來攻擊自己的數據庫。

② URL傳參數據量有限，只能傳遞少量數據。

2>post:使用http請求傳遞數據。URL地址看不到數據信息，安全且傳遞信息量沒有限制

綜上所述：大部分使用post傳參，但是get傳參比Post快

【input標簽及屬性】

①type：input輸入框的類型，可選值有：

②name：input輸入框的別名，必填，因為傳參的時候采用name=value的形式傳遞。

③value：input輸入框的默認值

④placeholder:提示內容，當輸入框有value時，提示內容消失。

【input特殊屬性值】

① checked="checked"默認選中

② disabled="disabled"設置控制不能使用，按鈕上不能點擊，輸入框上不能修改，而且如果

輸入框時disabled，則輸入框信息不傳遞到后臺

③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根據其他需要，使用隱藏域傳遞信息.

【input-type屬性詳解】

①text：文本輸入框

②password：密碼輸入框，內容不對外顯示

③radio：單選按鈕

checkbox:復選按鈕

a、單選按鈕，name和value屬性需同時存在，提交時，提交的是value中的屬性值

例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

b、radio憑借name屬性區分是否為同一組，name相同為同組，且只能選擇一個

c、checked="checked"默認選中，（radio只可以選一個，checkbox可以選多個）

④submit：提交按鈕，提交表單數據

⑤reset：重置按鈕，重置為默認狀態

⑥file：文件上傳按鈕

⑦image：圖片提交按鈕，功能同submit，可以提交數據

⑧button：普通按鈕，沒什么軟用

⑨其他常用屬性值：見下圖

【select標簽】下拉選擇標簽

寫法：

</select>

常用屬性

①name屬性：寫在select里，所有選項只有一個name

②multiple屬性：multiple="multiple"設置select為多選，一般不用

③option常用屬性：value=""屬性，當option沒有value屬性時，往后臺傳遞的是<option></option>中間的文字，

當有value屬性時，傳遞的是value的屬性值。

title=""屬性,鼠標之上后現實的文字

select="select"默認屬性值

④optgroup屬性：用于option屬性分組，用lable屬性表示分組名。

</optgroup>

【textarea】:文本域，其常用屬性：

①設置寬度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只讀模式，不允許修改編輯

③style="resize: none;"設置為寬度高度不允許修改

④style="overflow:;"設置文字超出區域時，如何處置，常用屬性值有：

hidden 超出區域的文字，隱藏無法顯示

scroll 無論文字多少，均顯示滾動

auto 自動，根據文字多少自動決定是否會顯示為滾動條

【fieldset 、legend】表單的邊框與標題

<fieldset> //邊框

<legend> //標題

</legend>

</fieldset>

如果想讓標題嵌入到邊框中，需將標題標簽寫到邊框標簽里面

一個表單可以有多組標題加邊框組合

【h5智能表單】

1、H5新增input的form屬性，用于指定特form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交

……

</form>

2、 input元素的新增屬性：

Autocomplete：自動完成功能，記錄用戶之前輸入的內容，并在用戶下次輸入時提示用戶輸入

》》》屬性值：on/off

》》》可以再form表單使用，對整個表單的所有控件進行自動完成的開關也可以在input上使用，

對特定輸入框進行修改

》》》絕大部分瀏覽器默認開啟

Autofocus：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點

Form：所屬表單，通過id確認屬于哪個表單

Required：必填,required="required",設置必填，否則停止提交

Pattern：使用正則表達式驗證input的模式

Placeholder：提示，當有value時取消提示。

在線咨詢

上一篇：WebStorm的入門使用介紹總結
下一篇：Excel窗體控件 Image控件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5常用標簽大全

您的項目需求