總結HTML中不經常使用的標籤

參考鏈接:HTML參考手冊

過時的標籤
過時的標籤列表
全部瀏覽器均兼容的標籤
全部瀏覽器均兼容的標籤

1.<abbr></abbr>標記一個縮寫

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

2.<address></address>

  • 定義文檔或者文章的作者/擁有者的聯繫信息
  • 如果address元素位於body元素內,則它表示文檔聯繫信息
  • 如果address元素位於article元素內,則它表示文章的聯繫信息
  • address元素中的文本通常呈現爲斜體,大多數瀏覽器會在address元素前後添加折行
  • 提示:address標籤不應該用於描述通訊地址,除非它是聯繫信息的一部分
  • 提示:address元素通常聯通其他信息被包含在footer元素中
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

3.<map></map>定義一個客戶端圖像映射,圖像映射(image-map)指帶有可點擊區域的一幅圖像

  • 註釋:area元素永遠嵌套在map元素內部,area元素可定義圖像映射中的區域
  • 註釋:img中的usemap屬性可引用map中的id或name屬性(取決於瀏覽器),所以我們應同時向map中添加id和name屬性
  • 參數:id(必須) unique_name 爲map標籤定義唯一的名稱
  • 參數:name(可選) mapname 爲image-map規定的名稱
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

4.<area coords="" href="" nohref="" shape="" target=""/>定義圖像映射中的區域,area元素總是嵌套在map標籤中

  • alt(必須): text 定義此區域的替換文本
  • coords(可選): 座標值 定義可點擊區域的座標
  • href(可選): URL 定義此區域的目標URL
  • nohref(可選): nohref 從圖像映射排除某個區域
  • shape(可選):定義區域的形狀,default、rect、circ、poly
  • target(可選):規定在何處打開href屬性指定的目標URL,_blank/_parent/_self/_top
同3.

5.<article></article規定獨立的自包含內容,一篇文章應有其自身的意義,應該有可能獨立於站點的其餘部分進行分發

  • article元素的潛在來源:論壇帖子、報紙文章、博客條目、用戶評論
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9(簡稱 IE9)於 2011 年 3 月 14 日發佈.....</p>
</article>

6.<aside></aside>定義其所出內容之外的內容,aside的內容應該與附近的內容相關(IE9+及其他)

  • 被包含在article元素中作爲主要內容的附屬信息部分,其中的內容可以是與當前文章有關的相關資料、名次解釋等
  • 在article元素之外使用作爲頁面或站點全局的附屬信息部分。最典型的是側邊欄,其中的內容可以使友情鏈接,博客中的其它文章列表、廣告單元等
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

7.<base />爲頁面上的所有鏈接規定默認地址或默認目標,通常情況下,瀏覽器會從當前文檔的URL中提取相應的元素來填寫相對URL中的空白,使用base標籤可以改變這一點,瀏覽器隨後將不再使用當前文檔的URL,而使用指定的基本URL來解析所有的相對URL,這裏包括a/img/link/form標籤中的URL。

  • <base href="url,規定頁面中所有相對鏈接的基準URL" />標籤必須位於head元素內部
  • <base target="可選,_blank/_parent/_self(默認)/_top/framename" />在何處打開頁面中的所有鏈接
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>

8.<basefont color="rgb/#xxx/colorname" size="number" face="font_family" />只有IE支持basefont標籤,應該避免使用該標籤

<head>
<basefont color="red" size="5" />
</head>

<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>

9.<bdi></bdi>指的是bidi隔離,bdi標籤允許您設置一段文本,使其脫離其父元素的文本方向設置,在發佈用戶評論或其他您無法完全控制的內容時,該標籤很有用。只有Firefox和Chrome支持bdi標籤

  • 屬性dir:ltr/rtl/auto,可選,默認值auto,規定bdi元素內的文本的文本方向
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

10.<bdo dir="ltr/rtl(right to left)"></bdo>bdo元素可覆蓋默認的文本方向

<bdo dir="rtl">Here is some text</bdo>

11.<big></big>呈現大號字體效果大號字體效果

  • 瀏覽器顯示包含在big標籤之間的文字時,其字體比周圍的文字要大一號,但是,如果文字已經是最大號字體,這個big標籤將不起任何作用
  • 可以嵌套big標籤來放大文本,每一個big標籤都可以使字體大一號,直到上限7號文本,自如字體模型所定義的那樣<big><big><big>1</big>2</big>3</big>123
  • 但是使用big標籤的時候還是要小心,因爲瀏覽器總是很寬大地去試圖理解各種標籤,對於那些不支持big標籤的瀏覽器來說,它經常被認爲是粗體字標籤。
<big><big><big>1</big>2</big>3</big>

12.<blockquote></blockquote定義塊引用

  • blockquote標籤之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。即塊引用擁有它們自己的空間
  • 提示:請使用<q></q>來標記短的引用
<blockquote>
Here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

13.<q></q>定義短的引用,瀏覽器經常在引用的內容周圍添加引號

  • q標籤用於簡短的行內引用,如果需要從周圍內容分離出來比較長的部分(通常顯示爲縮進的塊),請使用blockquote標籤
<q>Here is a short quotation here is a short quotation</q>

14.<caption align="不贊成使用,請使用樣式取而代之left、right、top、bottom"></caption>

  • caption元素定義表格標題,必須緊隨table標籤之後
  • 只能對每個表格定義一個標題,通常這個標題會被居中於表格之上。
<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

15.<center></center>對其所包裹的文本進行水平居中

  • 提示:請使用CSS樣式來居中文本

16.<cite></cite>通常表示它所包含的文本對某個參考文獻的引用,比如書籍或者雜誌的標題

  • 按照慣例,引用的文本將以斜體顯示
  • <cite> 標籤把指向其他文檔的引用分離出來,尤其是分離那些傳統媒體中的文檔,如書籍、雜誌、期刊,等等。如果引用的這些文檔有聯機版本,還應該把引用包括在一個 <a> 標籤中,從而把一個超鏈接指向該聯機版本
  • <cite> 標籤還有一個隱藏的功能:它可以使你或者其他人從文檔中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器,它能夠自動整理引用表格,並把它們作爲腳註或者獨立的文檔來顯示。
  • <cite> 標籤的語義已經遠遠超過了改變它所包含的文本外觀的作用;它使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

17.HTML<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>標籤,這些都是短語元素

  • 這些標籤定義的文本大多會呈現出特殊的樣式,但實際上,這些標籤都擁有確切的語義
  • 我們並不反對使用它們,但是如果您只是爲了達到某種視覺效果而使用這些標籤的話,我們建議您使用樣式表,那麼做會達到更加豐富的效果
em 把文本定義爲強調的內容
strong 把文本定義爲更強的強調的內容
dfn 定義一個定義項目
code 定義計算機代碼文本
samp 定義樣本文本
kbd 定義鍵盤文本
var 定義變量,可以將此標籤與pre和code標籤配合使用
cite 定義引用


18.<col />爲表格中的一個或多個列定義屬性值

  • 如需對全部列應用樣式,col標籤很有用,這樣就不需要對各個單元和各行重複應用樣式了。
  • 只能在table或colgroup元素中使用col標籤
  • 提示:請爲 <col> 標籤添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等
  • 提示:如果您希望在 colgroup 內部爲每個列規定不同的屬性值時,請使用此元素。如果沒有 col 元素,列會從 colgroup 那裏繼承所有的屬性值
  • 註釋:col 元素是僅包含屬性的空元素。如需創建列,您就必須在 tr 元素內部規定 td 元素
  • <col align="只有IE和opera支持該屬性" />
  • <col char="規定與col相關的內容相對某個字符的對齊方式" />(幾乎沒有瀏覽器支持char屬性)
  • <col charoff="number,規定第一個對其字符的偏移量" />(幾乎沒有瀏覽器支持charoff屬性)
  • <col span="number, 規定col元素應該橫跨的列數" />(所有瀏覽器都支持span屬性)
  • <col valign="定義與col元素相關的內容的垂直對齊方式top/middle/bottom/baseline" />(所有瀏覽器都支持valign屬性,但是目前沒有主流瀏覽器支持baseline值)
  • <col width="規定col元素的寬度,pixels/%/relative_length" />(所有瀏覽器都支持width屬性,目前沒有主流瀏覽器支持relative_length:把可用像素分配到各部分
<table width="100%" border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

19.<colgroup></colgroup>所有主流瀏覽器都支持colgroup標籤,Firefox、Chrome、Safari僅支持colgroup元素的span和width屬性

同18,col修改爲colgroup

20.<command></command>表示用戶能夠調用的命令,沒有瀏覽器支持command標籤,僅僅IE9支持

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

2017/6/16 10:19 持續更新中…

21.<datalist></datalist>定義選項列表(IE和Safari不支持該標籤)

  • 與input元素配合使用該元素,定義input可能的值
  • datalist及其選項不會被顯示出來,它僅僅是合法的輸入值列表
  • 使用input元素的list屬性來綁定datalist
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

22.<del></del>定義文檔中已被刪除的文本(所有主流瀏覽器都支持del標籤)

  • 註釋:請與ins標籤配合使用,來描述文檔中的更新和修正
  • <del cite="URL,指向另外一個文檔的URL,此文檔可解釋文本被刪除的原因"></del>(沒有主流瀏覽器支持cite屬性,所以呢(;′⌒`))
  • <del datetime="YYYYMMDD,定義文本被刪除的日期和時間"></del>(沒有瀏覽器以任何方式使用datetime屬性,然後呢QAQ)
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

23.<ins></ins>定義已經被插入文檔中的文本(所有主流瀏覽器都支持ins標籤,但沒有主流瀏覽器能夠正確地顯示ins標籤的cite或datetime屬性)

a dozen is <del>20</del> <ins>12</ins> pieces

24.<details></details>用於描述文檔或文檔某個部分的細節(目前只有Chrome和Safari6支持detail標籤,無卵用)

  • HTML5中的新標籤
  • 與summary標籤配合使用可以爲details定義標題,標題是可見的,用戶點擊標題時,會顯示出details
  • <details open="open,定義details是否可見"></details>
<details open="open">
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

25.<summary></summary>包含details元素的標題(只有Chrome和Safari6支持summary標籤)

同24.

26.<dialog open="open,規定dialog元素是活動的,用戶可與之交互"></dialog>定義對話框或窗口(目前只有Chrome和Safari 6支持dialog標籤)

<table border="1">
<tr>
  <th>一月 <dialog open>這是打開的對話窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

27.<dir></dir>定義目錄列表,不贊成使用dir元素,說多了無卵用

<dir>
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</dir>

28.<embed></embed>定義嵌入的內容,比如插件

  • <embed height="px,設置嵌入內容的高度"></embed>
  • <embed width="px,設置嵌入內容的寬度"></embed>
  • <embed src="url,嵌入內容的URL"></embed>
  • <embed type="type,定義嵌入內容的MIME類型"></embed>請參閱IANA MIME類型,獲得完整的標準MIME類型列表
<embed src="helloworld.swf" type="application/x-shockwave-flash" />

29.<fieldset></fieldset>將表單內的相關元素分組,將表單內容的一部分打包,生成一組相關表單的字段

  • 當一組表單元素放到fieldset標籤內時,瀏覽器會以特殊方式來顯示它們,可能有特殊的邊界、3D效果、或者創建一個子表單來處理這些元素
  • fieldset標籤沒有必須或唯一的屬性
  • legend標籤爲fieldset元素定義標題
  • <fieldset disabled="disabled,規定應該禁用一組表單元素"></fieldset>被禁用的fieldset不可用,也不可點擊,可以對disabled屬性進行設置,使用戶在滿足某些條件時才能使用輸入字段
  • <fieldset form="form_id,規定fieldset所屬的一個或多個表單"></fieldset>form屬性的值必須是所屬表單的id,如需引用一個以上的表單,請使用空格分隔的列表
  • <fieldset name="fieldset的名稱"></fieldset>
<form>
  <fieldset disabled form="" name="">
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

30.<legend></legend>爲fieldset定義標題

  • <legend align="不贊成使用,爲fieldset中的標題定義對其方式"></legend>
同29.

31.<figure></figure>規定獨立的流內容(圖像、圖表、照片、代碼等)

  • IE8及更早的版本不支持figure標籤
  • figure元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響
  • 提示:請使用figcaption爲figure添加標題
<figure>
  <figcaption>黃浦江上的的盧浦大橋</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

32.<figcaption></figcaption>定義figure元素的標題,figcaption元素應該被置於figure元素的第一個或最後一個子元素的位置(IE8及更早版本不支持該標籤)

同31.

33.省略frame和frameset標籤。

34.<hr />在HTML頁面中創建一條水平線,水平分隔線可以在視覺上將文檔分隔成各部分

  • <hr align noshade size width />均不贊成使用,請使用樣式取代它
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

35.省略iframe標籤

36.<keygen />規定用於表單的密鑰對生成器字段,當提交表單時,密鑰存儲在本地,公鑰發送到服務器(所有主流瀏覽器都支持keygen標籤,除了IE和Safari)

  • <keygen autofoucus="使Keygen字段在頁面加載時獲得焦點" />
  • <keygen challenge="challenge,如果使用,則將Keygen的值設置爲在提交時詢問" />
  • <keygen disabled="disabled,禁用keygen字段" />
  • <keygen form="formname,定義該Keygen字段所屬的一個或多個表單" />
  • <keygen keytype="rsa,定義keytype,rsa生成RSA密鑰"
  • <keygen name="fieldname,定義Keygen元素的唯一名稱"name屬性用於在提交表單時蒐集字段的值
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

37.<label></label>爲input元素定義標註(所有主流瀏覽器都支持label標籤)

  • label標籤的for屬性應當與相關元素的id屬性相同
  • <label form="formid,規定label字段所屬的一個或多個表單"></label>
  • label 元素不會向用戶呈現任何特殊效果。不過,它爲鼠標用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控件。就是說,當用戶選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控件上
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

38.<main></main>規定文檔的主要內容(所有瀏覽器都支持main標籤,除了IE瀏覽器,那還說個屁)

  • <main> 元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重複出現的內容,比如側欄、導航欄、版權信息、站點標誌或搜索表單
  • 註釋:在一個文檔中,不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代:<article>、<aside>、<footer>、<header> 或 <nav>
<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的瀏覽器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 開發的一款免費的開源 web 瀏覽器,於 2008 年發佈。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微軟開發的一款免費的 web 瀏覽器,發佈於 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款來自 Mozilla 的免費開源 web 瀏覽器,發佈於 2004 年。</p>
  </article>
</main> 

39.<mark></mark>定義帶有記號的文本,請在需要突出顯示文本時使用m標籤,m標籤是個什麼鬼(IE8及更早版本不支持mark標籤)

<p>Do not forget to buy <mark>milk</mark> today.</p>

40.<menu />定義命令的列表或菜單(所有瀏覽器都不支持menu標籤)

  • HTML 4.0.1中已棄用menu元素,在HTML5中重新定義了menu元素
  • <menu type="popup/toolbar,規定要顯示哪種菜單類型" label="text,規定菜單的可見標籤" />
<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>

41.<menuitem></menuitem>定義用戶可以從彈出菜單調用的命令、菜單項目(只有Firefox 8以及更高版本支持該標籤)

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

2017/6/19 19:03持續更新中…

42.<meter></meter>定義已知範圍或分數值內的標量測量,例如磁盤用量、查詢結果的相關性…(Firefox,Chrome,Opera,Safari6支持該標籤)

  • meter標籤不應用於指示進度,如果標記進度條,請使用progress標籤
  • <meter form="form_id,規定meter元素所屬的一個或多個表單"></meter>(任何瀏覽器都不支持form屬性)
  • <meter min="" low="" high="" value=""></meter>high屬性規定的範圍是被視爲高值的度量值,high屬性必須小於max屬性值,且必須大於low和min屬性值(兼容性和標籤一致)
  • min:規定範圍的最小值,max:規定範圍的最大值,low:規定被視作低的值的範圍,optimum:規定度量的優化值,value:必須,規定度量的當前值
<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter>

43.<nav></nav>定義導航鏈接的部分(IE8及更早版本不支持nav標籤)

  • 提示:如果文檔中有‘前後’按鈕,則應該把它放到元素中
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

44.<noframes></noframes>忽略該標籤,請自查

45.<noscript></noscript>定義在腳本未被執行時的替代內容(兼容所有瀏覽器)

  • 用於識別script標籤但無法支持其中的腳本瀏覽器
  • 註釋:如果瀏覽器支持腳本,那麼它不會顯示出noscript元素的文本(貌似沒什麼用了)
<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>

  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

45.<object></object>詳細信息請轉至http://www.w3school.com.cn/tags/tag_object.asp

  • 註釋:param標籤定義用於對象的run-time設置
  • 註釋:不要對圖像使用object標籤,請使用img標籤代替
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

46.<ol></ol>有序列表

  • <ol compact="compact,HTML5中不支持,HTML 4.0.1中不贊成使用"></ol>規定列表呈現的效果比正常情況更小巧(任何主流瀏覽器都不支持 compact 屬性)
  • <ol reversed="reversed,規定列表順序爲降序"></ol>(目前只有Chrome和Safari 6支持reversed屬性)
  • <ol start="number,規定有序列表起始值"></ol>(儘管不贊成使用start屬性,不過所有瀏覽器都支持start屬性)
  • <ol type="1,a,A,i,I,規定有序列表的項目符號的類型"></ol>(儘管不贊成使用 type 屬性,不過所有瀏覽器都支持 type 屬性)
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

47.<optgroup></optgroup>定義選項組,當您使用一個長的選項列表時,對相關的選項進行組合會使處理更加容易

  • <optgroup label="text,爲選項組規定描述"></optgroup>
<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

48.<option></option>定義一個下拉列表中的一個選項

  • 瀏覽器將option標籤中的內容作爲select標籤的菜單或是滾動列表中的一個元素顯示
  • option元素位於select元素內部
  • 註釋:<option> 標籤可以在不帶有任何屬性的情況下使用,但是您通常需要使用 value 屬性,此屬性會指示出被送往服務器的內容
  • 註釋:請與select元素配合使用此標籤,否則這個標籤是沒有意義的
  • 提示:如果列表選項很多,可以使用optgroup標籤對相關選項進行組合
  • <option disabled="disabled,規定此選項應在首次加載時被禁用"></option>(Safari 2.0或更早版本不支持該屬性,IE8或更新的版本支持該屬性)
  • <option label="text,定義當使用optgroup時所使用的標註"></option>
  • <option selected="selected,規定選項(在首次顯示在列表中時)表現爲選中狀態"></option>
  • <option value="text,定義送往服務器的選項值"></option>規定在表單提交時被髮送到服務器的值
<select>
  <option value="volvo" disabled>Volvo XC90</option>
  <option value="saab" label="saab">Saab 95</option>
  <option value="mercedes" selected>Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>

2017/06/21 14:48持續更新中…

49.<select></select>可創建單選或多選菜單

  • 提示:select元素是一種表單控件,可用於在表單中接受用戶輸入
  • <select autofocus="autofocus,規定在頁面加載後下拉列表應該自動獲得焦點"></select>(IE9及更早版本不支持autofocus屬性)
  • <select disabled="disabled,規定禁用該下拉列表"></select>
  • <select form="form_id,規定文本區域所屬的一個或多個表單"></select>(IE瀏覽器不支持該屬性)
  • <select multiple="multiple,規定可選擇多個選項"></select>可以與size屬性配合使用,自定義可見選項的數目
  • <select size="number,規定下拉列表中可見選項的數目"></select>
  • <select required="required,規定文本區域是必填的"></select>(所有主流瀏覽器都不支持該屬性)
<select autofocus form="" multiple size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

50.<output></output>定義不同類型的輸出,比如腳本的輸出(IE8及更早的版本不支持該標籤)

  • <output for="element_id,定義輸出域相關的一個或多個元素"></output>
  • <output form="form_id,定義輸入字段所屬的一個或多個表單"></output>(所有主流瀏覽器都不支持form屬性)
  • <output name="name,定義對象的唯一名稱,表單提交時使用"></output>
<form action="demo_form.asp" id="numform"
 oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
 <input type="range" id="a" name="a" value="50">100
 +<input type="number" id="b" name="b" value="50">
 <br><br>
 <input type="submit">
</form>

<output form="numform" name="x" for="a b"></output> 

51.<param name="" value="">允許您爲插入XHTML文檔的對象規定run-time設置,即此標籤可爲包含它的object或者applet標籤提供參數(大部分主流瀏覽器都支持,但是object定義的文件格式不是所有的瀏覽器都支持)

  • <param name="name,定義參數的名稱(用在腳本中)">
  • <param type="MIME_type,HTML5不支持,定義MIME類型參數">
  • <param value="value,描述參數值" >
  • <param valuetype="data,ref,object,html5不支持,描述值的類型" >
<object data="horse.wav">
  <param name="autoplay" value="true">
</object>

52.<pre></pre>定義預格式化的文本,被包圍在pre元素中的文本通常會保留空格和換行符,而文本也會呈現爲等寬字體

  • <pre> 標籤的一個常見應用就是用來表示計算機的源代碼
  • 可以導致段落斷開的標籤(例如標題、<p><address> 標籤)絕不能包含在 <pre> 所定義的塊裏,儘管有些瀏覽器會把段落結束標籤解釋爲簡單地換行,但是這種行爲在所有瀏覽器上並不都是一樣的
  • pre 元素中允許的文本可以包括物理樣式和基於內容的樣式變化,還有鏈接、圖像和水平分隔線。當把其他標籤(比如 <a> 標籤)放到 <pre> 塊中時,就像放在 HTML/XHTML 文檔的其他部分中一樣即可
  • 提示:製表符(tab)在 pre 標籤定義的塊當中可以起到應有的作用,每個製表符佔據 8 個字符的位置。但是我們不推薦使用它,因爲在不同的瀏覽器中,Tab 的實現各不相同。在用 pre 標籤格式化的文檔段中使用空格,可以確保文本正確的水平位置
  • 提示:如果您希望使用 <pre> 標籤來定義計算機源代碼,比如 HTML 源代碼,請使用符號實體來表示特殊字符,比如 “<” 代表 “<”,”>” 代表 “>”,”&” 代表 “&”
  • 提示:在 W3School 中,非常多頁面中的源代碼實例都是通過 <pre> 標籤定義的,您可以參考這些頁面,學習如何使用該標籤。我們甚至把 <pre> 標籤與 <code> 標籤結合起來使用,以獲得更加精確的語義
<pre>
這是
預格式文本。
它保留了      空格
和換行。
</pre>

持續更新中…2017/6/21 15:27
持續更新中…2017/6/21 10:27

52.<progress></progress>標示任務的進度(進程),IE9以及更早版本不支持progress標籤

  • 提示:請結合progress標籤與JavaScript一同使用,來顯示任務的進度
  • 註釋:progress標籤不適合用來表示度量衡(例如,磁盤空間使用情況或查詢結果),如需表示度量衡,請使用meter標籤代替
  • <progress max="number,規定任務一共需要多少工作"></progress>
  • <progress value="number,規定已經完成多少任務"></progress>
<progress value="22" max="100"></progress> 

53.<ruby></ruby>定義ruby註釋(中文注音或字符),IE8及更早版本不支持ruby標籤

  • 在東亞使用,顯示的是東亞字符的發音
  • 與ruby和rt標籤一同使用:ruby元素由一個或多個字符(需要一個解釋/發音)和一個提供該信息的rt元素組成,還包括可選的rp元素,定義當瀏覽器不支持ruby元素時顯示的內容
  • 提示:支持ruby標籤的瀏覽器不會顯示rp標籤的內容
  • rt:顯示標示的注音文字
<ruby><rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

54.<rt></rt>定義字符的解釋或發音(同53)
55.<rp></rp>在ruby註釋中使用,定義不支持ruby元素的瀏覽器所顯示的內容(同53)

56.<s></s>定義加刪除線文本定義

  • s標籤是strike標籤的縮寫,但在HTML 4和XHTML中不再贊成使用,意思就是不再使用,早晚有一天會GG
  • 請使用del標籤替代它
在 HTML 5 中,<s>仍然支持</s>已經不支持這個標籤了

57.<section></section>定義文檔中的節(section、區段),比如章節、頁眉、頁腳或文檔中的其他部分

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

58.<small></small>呈現小號字體效果

  • <small> 標籤和它所對應的 <big> 標籤一樣,但它是縮小字體而不是放大。如果被包圍的字體已經是字體模型所支持的最小字號,那麼 <small> 標籤將不起任何作用。
  • <big> 標籤類似,<small> 標籤也可以嵌套,從而連續地把文字縮小。每個 <small> 標籤都把文本的字體變小一號,直到達到下限的一號字。
  • 123123123
<small>123</small>123<big>123</big>

59.<strike></strike>同56.

60.<sub></sub>定義下標文本

  • 包含在sub標籤和其結束標籤sub中的內容將會以當前文本流中字符高度的一半來顯示,但是與當前文本流中文字的字體和字號都是一樣的
  • 提示:無論是sub標籤還是和它對應的sup標籤,在數學等式、科學符號和化學公式中都非常有效
  • This text contains subscript
  • This text contains superscript
<p>
This text contains <sub>subscript</sub>
</p>

<p>
This text contains <sup>superscript</sup>
</p>

61.<sup></sup>同60

62.<time></time>定義公曆的時間(24小時制)或日期,時間和時區偏移是可選的

  • 該元素能夠以機器可讀的方式對日期和時間進行編碼,這樣,舉例說,用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中,搜索引擎也能夠生成更智能的搜索結果
  • 目前所有主流瀏覽器都不支持time標籤
<p>我們在每天早上 <time>9:00</time> 開始營業。</p>

<p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p>

持續更新中…2017/6/22 16:31
持續更新中…2017/6/23 10:39

63.<track>爲諸如video元素之類的媒介規定外部文本軌道,用於規定字幕文件或其他包含文本的文件,當媒介播放時,這些文件時可見的

  1. IE10、Chrome、Opera支持track標籤
  2. <track default >如果使用default屬性,則規定應該使用該軌道,加入用戶沒有選擇其他軌道的話
  3. <track kind="caption/chapters/descriptions/metadata/subtitles" >
  4. caption:該軌道定義將在播放器中顯示的簡短說明
  5. chapters:該軌道定義章節,用於導航媒介資源
  6. descriptions:該軌道定義描述,用於通過音頻描述媒介的內容,假如內容不可播放或不可見
  7. metadata:該軌道定義腳本使用的內容
  8. subtitles:該軌道定義字幕,用於在視頻中顯示字幕
<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subschi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subseng.srt" srclang="en" label="English">
</video>

64.<tt></tt>呈現類似打字機或者等寬的文本效果

  • <tt> 標籤與 <code><kbd> 標籤一樣,<tt> 標籤和必需的 </tt> 結束標籤告訴瀏覽器,要把其中包含的文本顯示爲等寬字體,對於那些已經使用了等寬字體的瀏覽器來說,這個標籤在文本的顯示上就沒有什麼特殊效果了
  • HTML5 不支持 <tt> 標籤,請用 CSS 代替
  • dir:rtl/ltr規定元素中內容的文本方向
  • id:id規定元素中內容的文本方向
  • title:text,規定元素的額外信息
<p><tt>Teletype text</tt></p>

65.<u></u>可定義下劃線文本

  • 註釋:請儘量避免爲文本加下劃線-用戶會把它混淆爲一個超鏈接
<p>如果文本不是超鏈接,就不要<u>對其使用下劃線</u></p>

66.<wbr></wbr>word break opportunity規定在文本中的何處適合添加換行符(所有瀏覽器都支持wbr標籤,除了IE瀏覽器)

  • 提示:如果單詞太長,或者您擔心瀏覽器會在錯誤的位置換行,那麼您可以使用 <wbr> 元素來添加 Word Break Opportunity(單詞換行時機)
  • 參考鏈接:http://www.monmonkey.com/rumenpian/html/wbr.html
<p>
如果想學習 AJAX,那麼您必須熟悉 XML<wbr>Http<wbr>Request 對象。
</p>

66666666…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章