HTML標籤

時間 2019-11-20

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

主體結構標籤

<html></html> 此元素可告知瀏覽器其自身是一個 HTML 文檔。javascript

<head></head> 用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。css

<body></doby> 定義文檔的主體html

HEAD頭部標籤

<title></title> 定義文檔標題java

<base /> 標籤爲頁面上的全部連接規定默認地址或默認目標數組

alert('OK')</script>

格式排版標籤

<br/> 換行標籤，完成文字的緊湊顯示。可使用連續多個<br/>標籤來換行

<hr/> 水平分割線標籤，用於段落與段落之間的分割

<p></p>段落標籤,裏面能夠加入文字,列表,表格等，能夠<p></p>或<p />使用

<pre></pre>按原文顯示標籤，能夠把原文件中的空格,回車,換行,tab鍵表現出來

<hn></hn> 標題字標籤，n爲1-6，定義六級標題，並且會自動換行插入一個空行

<div></div> 沒有任何語義的標籤

文本標籤

<em></em> 表示強調，一般爲斜體字

<strong></strong> 表示強調(語氣更強)，一般爲粗體字

<del></del> 標籤訂義文檔中已刪除的文本。

<ins></ins> 標籤訂義已經被插入文檔中的文本

<sub></sub> 文字下標字體標籤

<sup></sup> 文字上標字體標籤

<mark></mark> H5新增 標籤訂義帶有記號的文本請在須要突出顯示文本時使用,如搜索引擎搜索頁面

<ruby></ruby> H5新增 標籤訂義 ruby 註釋（中文註音或字符）在東亞使用，顯示的是東亞字符的發音。

<rt></rt> H5新增 標籤訂義字符（中文註音或字符）的解釋或發音

瞭解標籤

<cite> 用於引證、舉例、(標籤訂義做品（好比書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)一般爲斜體字

<dfn> 定義一個定義項目

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

<samp> 定義樣式文本標籤並不常用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以強調的極少狀況下，才使用這個標籤。

<kbd> 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它常常用在與計算機相關的文檔或手冊中。

<abbr> 定義縮寫配合title屬性 (IE6以上)

<bdo> 來覆蓋默認的文本方向 dir屬性值: lrt rtl

<var> 定義變量。您能夠將此標籤與 <pre> 及 <code> 標籤配合使用。

<small> 標籤訂義小型文本（和旁註）

<b> 粗體字標籤根據 HTML 5 的規範，<b> 標籤應該作爲最後的選擇，只有在沒有其餘標記比較合適時才使用它。

<i> 斜體字標籤標籤被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等等。

<u> 下劃線字體標籤標籤訂義與常規文本風格不一樣的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。請儘可能避免使用 <u> 爲文本加下劃線，用戶會把它混淆爲一個超連接。

<q> 簽訂義一個短的引用。瀏覽器常常會在這種引用的周圍插入引號。(小段文字)

<blockquote> 標籤訂義摘自另外一個源的塊引用。瀏覽器一般會對 <blockquote> 元素進行縮進。(大段文字) (塊狀元素)

<address> 定義地址一般爲斜體 (注意非通信地址) 塊狀元素

<font> H5已刪除字體標籤，能夠經過標籤的屬性指定文字的大小、顏色及字體等信息

<tt> H5已刪除打字機文字

<big> H5已刪除大型字體標籤

<strike> H5已刪除添加刪除線

<acronym> H5已刪除首字母縮寫請使用<abbr>代替

<bdi> H5新增標籤容許您設置一段文本，使其脫離其父元素的文本方向設置。(經測試,各大瀏覽器都不起做用)

<mark> H5新增標籤訂義帶有記號的文本請在須要突出顯示文本時使用,如搜索引擎搜索頁面

<meter> H5新增定義預約義範圍的度量

<progress> H5新增標籤標示任務的進度（進程）

<time> H5新增定義時間和日期

<wbr> H5新增規定在文本中的何處適合添加換行符。Word Break Opportunity

超連接

<a href='要跳轉的地址'>超連接文字</a>

a標籤的屬性

href -- 表明一個url連接源(就是連接到什麼地方)

url除了是網頁外,還能夠是其它的文件(如文本文件,pdf文件等)。

url還能夠是指向HTML文件中的一個位置。

url還能夠是Email地址。

target -- 用來指出哪一個窗口或框架應該被此連接打開

target=_blank：將連接內容在新的瀏覽窗口中打開。

target=_self：將連接的內容，顯示在目前的窗口中。

target=_parent：將連接的內容，當成文件的上一個畫面。

target=_top：這個參數能夠解決新內容被舊框窗包圍的困擾，使用這參數，會將整個畫面從新顯示成連接的畫面內容。

title -- 表明連接的附加提示信息

download HTML5新添加屬性表示下載

錨點

用<a name=「」>定義，例如：<a name=「here1」>第一部分</a>，

使用<a href=「#here1」>跳轉到第一部分</a>超連接就能夠定位到網頁中的「第一部分」這個位置。

錨點的跳轉

使用# <a href="#錨點名">跳轉</a>

跳轉到指定頁面指定錨點 http://www.lampuser.com/index.html#section2

img 標籤

<img src="圖片地址" title="" alt="">

img屬性

alt -- 表明圖像的替代文字

src -- 表明一個圖像源(就是圖像的位置)

title 提示信息

border – 表明圖片邊框的寬度

height -- 表明一個圖像的高度

width -- 表明一個圖像的寬度

usemap 將圖像定義爲客戶器端圖像映射

常見圖片格式

GIF -- 最多支持256色,支持透明,支持多幀動畫顯示效果.

JPEG -- 支持多種顏色,能夠有很高的壓縮比,使用了有損壓縮,不支持透明,不支持動畫效果.

PNG -- 是一種新的圖片技術,能夠表現品質比較高的圖片,使用了無損壓縮,支持透明,不支持動畫.

圖像映射

<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>

<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a></map>

map標籤

<map> 標籤用於客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。

<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。

area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

area標籤

alt 規定區域的替代文本。若是使用 href 屬性，則該屬性是必需的。

href URL 規定區域的目標 URL。

coords 規定區域的座標。

shape 規定區域的形狀

rect 矩形

circle 圓形

poly 多邊形

target -- 用來指出哪一個窗口或框架應該被此連接打開

HTML列表標籤

<ul></ul> 表明HTML無序列表，裏面每一列表項使用<li>標籤訂義

<ol></ol> 表明HTML有序列表，裏面每一列表項使用<li>標籤訂義

屬性

start 規定有序列表的起始值。

type 規定在列表中使用的標記類型。(1 a A i I)

reversed H5新添加降序

<li></li> 表明HTML列表項目，每一個列表項使用一對<li></li>標記

<dl></dl> 定義了定義列表（definition list）

<dt></dt> 標籤訂義了定義列表中的項目（即術語部分）

<dd></dd> 在定義列表中定義條目的定義部分。

HTML列表標籤

<caption></caption> 定義表格標題

<tr></tr> 行

<th></th> 表頭單元格

<td></td> 單元格

給<td> 或者 <th> 設置屬性 rowspan 和 colspan

rowspan 合併行

colspan 合併列

表單相關標籤

<form></from> 定義一個 HTML 表單，用於用戶輸入。

屬性

action

method

get

post

enctype

multipart/form-data(有文件表單時候，必須使用這個)

application/x-www-form-urlencoded

target

表單相關標籤

<form></from> 定義一個 HTML 表單，用於用戶輸入。

屬性

action

method

get

post

enctype

multipart/form-data(有文件表單時候，必須使用這個)

application/x-www-form-urlencoded

target

<input> 定義一個輸入控件

屬性

name 必須有，不然數據沒法傳遞

type text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等

<button></button> 定義按鈕

屬性

type submit、reset、submit

name

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

屬性

disabled 禁用

name 必須有

multiple 多選,默認會顯示全部,名字要使用數組like[]

size 顯示幾個下拉

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

屬性

value 提交的值，若沒有，則提交內容

selected 定義選中項

disabled 選項禁用

<optgroup></optgroup> 把相關的選項組合在一塊兒

屬性

disabled 規定禁用該選項組。

label 爲選項組規定描述。

屬性

cols 可見寬度

rows 可見行數

readonly 文本區只讀

name 必須有

disabled 禁用

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

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

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

表單組成控件

文本輸入框

密碼框

單選按鈕

<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">男

複選框

<input type="checkbox" name="hobby" value="basketball"> 籃球<input type="checkbox" name="hobby" value="football"> 足球<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 <input type="checkbox" name="hobby" value="baseball"> 棒球

文件選擇框

規定類型的文本輸入框（HTML5新增）

<input type="email" name="email" placeholder="請輸入郵箱">

<input type="url" name="url" placeholder="請輸入網址">

<input type="number" name="num"><input type="number" name="num" min='10' max='100' step='10'>

<input type="search" name="kw" placeholder="搜索">

<input type="tel" name="tel_num" placeholder="請輸入電話號碼">

範圍選擇框(HTML5新增)

顏色選擇框(HTML5新增)

時間日期選擇框(HTML5新增)

下拉選項

<select name="major" multiple>

多行文本輸入

按鈕

<input type="submit" value="提交"><button>提交</button><button type="submit">提交</button>

<input type="reset" value="重置"><button type="reset">重置</button>

<input type="button" value="按鈕"><button type="button">按鈕</button>

表單中其餘標籤

field/legend

<form>

<legend>health information</legend>

height: <input type="text" />

weight: <input type="text" />

</fieldset></form>

datalist(新增)

<option value="Volvo"></datalist>

表單控件相關屬性

disabled 表示不可用用於全部的表單控件

enabled 表示可用用於全部的表單控件

readable 表示只讀用於可輸入的表單控件

autofocus 自動獲取焦點全部表單控件

autocomplete 值on/off 用於可輸入的控件是否自動填充內容

pattern 正則驗證可輸入的控件

required 必填

音頻/視頻 (HTML5新增）HTML標籤

<video></video> 定義視頻

| 屬性 | 值 | 描述

| -------- | ------------------ | ------------------------------------------------------

| autoplay | autoplay | 若是出現該屬性，則視頻在就緒後立刻播放。

| controls | controls | 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

| height | pixels | 設置視頻播放器的高度。

| loop | loop | 若是出現該屬性，則當媒介文件完成播放後再次開始播放。

| muted | muted | 若是出現該屬性，視頻的音頻輸出爲靜音。

| poster | URL | 規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

| preload | auto metadata none | 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。

| src | URL | 要播放的視頻的 URL。

| width | pixels | 設置視頻播放器的寬度。

<audio></audio> 定義音頻

| 屬性 | 值 | 描述

| -------- | ------------------ | ----------------------------------------------------------

| autoplay | autoplay | 若是出現該屬性，則音頻在就緒後立刻播放。

| controls | controls | 若是出現該屬性，則向用戶顯示音頻控件（好比播放/暫停按鈕）。

| loop | loop | 若是出現該屬性，則每當音頻結束時從新開始播放。

| muted | muted | 若是出現該屬性，則音頻輸出爲靜音。

| preload | auto metadata none | 規定當網頁加載時，音頻是否默認被加載以及如何被加載。

| src | URL* | 規定音頻文件的 URL。

<source></source>爲媒體元素（好比 <video> 和 <audio>）定義媒體資源

| 屬性 | 值 | 描述

| ----- | ------------- | ------------------------------------------

| media | media_query | 規定媒體資源的類型，供瀏覽器決定是否下載。

| src | URL | 規定媒體文件的 URL。

| type | MIME_type | 規定媒體資源的 MIME 類型。

佈局相關的標籤

<div></div> 定義文檔中的分區或節

<span></span> 這是一個行內元素，沒有任何意義

<header></header> HTML5新增 定義 section 或 page 的頁眉

<footer></footer> HTML5新增 定義 section 或 page 的頁腳

<main></main> HTML5新增 標籤規定文檔的主要內容。<main> 元素中的內容對於文檔來講應當是惟一的。它不該包含在文檔中重複出現的內容，好比側欄、導航欄、版權信息、站點標誌或搜索表單。IE都不識別

<nav></nav> HTML5新增 表示連接導航部分若是文檔中有「先後」按鈕，則應該把它放到元素中

<section></section> HTML5新增 定義文檔中的節一般不推薦那些沒有標題的內容使用section

<article></article> HTML5新增 定義文章論壇帖子報紙文章博客條目用戶評論

<aside></aside> HTML5新增 相關內容，相關輔助信息，如側邊欄

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。