html標籤

HTML文檔由嵌套的HTML元素組成。javascript

HTML<html>標籤php

<html>這個元素可告知瀏覽器自身是一個Html文檔。css

<html>與</html>標籤限定了文檔的開始點和結束點,他們之間是文檔的頭部和主體,頭部由<head>標籤訂義,主體由<body>定義。html

1.HTML標題html5

標題是經過<h1>-<h6>等標籤進行定義的,<h1>定義最大的標題,<h6>定義最小的標題。java

例<h1>標題2</h1>web

   <h2>標題2</h2>canvas

註釋:瀏覽器會自動的在標題的先後添加空行。瀏覽器

         默認狀況下,HTML會自動的在塊級元素先後添加一個額外的空行,好比段落、標題元素先後。ruby

HTML水平線

<hr/>標籤在HTML頁面中建立水平線,hr元素可用於分割內容。

使用水平線(<hr/>)來分割文章中的小節是一個辦法(但並非惟一的辦法)。

HTML註釋

<!-- 註釋 -->

註釋不會在瀏覽器中顯示,註釋能提升代碼的可讀性

註釋:開始括號以後(左邊的括號)須要緊跟一個歎號,結束括號以前(右邊的括號)不須要。

 

2.HTML段落

<p>瀏覽器會自動在段落的先後添加空行。

<p>this is</p>

HTML折行

在不產生一個新段落的狀況下進行換行(新行),用<br/>標籤,沒有結束標籤。

當顯示頁面時,瀏覽器會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。須要注意的是,HTML中的全部連續空格(換行)也被顯示爲一個空格。

3.HTML超連接(連接)<a>

超連接可使一個字,一個詞,也能夠是一組圖像,能夠點擊這些內容跳轉到新的文檔或者當前文檔中的某個部分。

有兩種使用<a>標籤的方式:

(1).經過使用href屬性--建立執行另外一個文檔的連接

<a href="http://www.baidu.com/">This is a link</a>

在href屬性中指定連接的目標,開始標籤和結束標籤之間的文字被做爲超連接來顯示。

HTML連接target屬性

使用Target屬性,能夠定義被連接的文檔在何處

<a href="http://www.baidu.com.cn/" >百度!</a>

若是把連接的 target 屬性設置爲 "_blank",該連接會在新窗口中打開。target="_blank"

(2).經過使用name屬性--建立文檔內的書籤

name屬性規定錨的名稱,可使用name屬性建立HTML頁面中的書籤,書籤不會以任何特殊方式顯示,對讀者是不可見的。當使用命名錨時,能夠建立直接跳至該命名錨(好比頁面中某個小節)的連接。

<a name="label">錨</a>

錨能夠是任意你喜歡的名字,可使用id屬性來代替name屬性,命名錨一樣有效。

<a href="#C1">查看Chapter 1<a/>

<h2><a name="C1">Chapter 1</a></h2>

4.HTML圖像<img>

<img src=1.jpg width="104" height="142"/>

圖像的名稱和尺寸是以屬性的形式提供的。

空的HTML元素

沒有內容的HTML元素被稱爲空元素。空元素是在開始標籤中關閉的。<br>就是沒有關閉的標籤的空元素(<br/>標籤訂義換行)。

HTML標籤對大小寫不敏感,<P>等同於<p>,但推薦使用小寫

 

折行<br/>

居中排列的標題:<h1 align="center">This is heading 1</h1>

水平線<hr/>

 

 

1

<a href="http://www.w3school.com.cn">W3School</a>

<a> 標籤訂義超連接,用於從一張頁面連接到另外一張頁面

<a> 元素最重要的屬性是 href 屬性,它指示連接的目標。

在全部瀏覽器中,連接的默認外觀是:

 未被訪問的連接帶有下劃線並且是藍色的

 已被訪問的連接帶有下劃線並且是紫色的

 活動連接帶有下劃線並且是紅色的

CSS 僞類提示:您可能已經注意到了,W3School 站點內的連接外觀與默認的連接外觀很是不一樣。您可使用  向文本超連接添加複雜而多樣的樣式。

a:link {color: #FF0000}/* 未訪問的連接 */

a:visited {color: #00FF00} /* 已訪問的連接 */

a:hover {color: #FF00FF} /* 鼠標移動到連接上 */

a:active {color: #0000FF} /* 選定的連接 */

提示: CSS 定義中,a:hover 必須被置於 a:link 和 a:visited 以後,纔是有效的。

提示: CSS 定義中,a:active 必須被置於 a:hover 以後,纔是有效的。

提示:僞類名稱對大小寫不敏感。

2.

<abbr> 標籤指示簡稱或縮寫,好比 "WWW" 或 "NATO"。

<abbr>HTML5 中不支持 <acronym> 標籤。請使用  標籤代替。

3.

<address> 標籤定義文檔或文章的做者/擁有者的聯繫信息。

若是 <address> 元素位於 <body> 元素內,則它表示文檔聯繫信息。

若是 <address> 元素位於 <article> 元素內,則它表示文章的聯繫信息。

<address> 元素中的文本一般呈現爲斜體。大多數瀏覽器會在 address 元素先後添加折行。

4.

object 元素HTML5 中不支持 <applet> 標籤。請使用  標籤代替。

HTML 4.01 中不同意使用 <applet> 元素。

<applet> 標籤訂義嵌入的 applet。

5.

<area> 標籤訂義圖像映射中的區域(注:圖像映射指得是帶有可點擊區域的圖像)。

area 元素老是嵌套在 <map> 標籤中。

<img>map註釋: 標籤中的 usemap 屬性與  元素 name 屬性相關聯,建立圖像與映射之間的聯繫。

6.

<article> 標籤規定獨立的自包含內容。

一篇文章應有其自身的意義,應該有可能獨立於站點的其他部分對其進行分發。

<article> 元素的潛在來源:

 論壇帖子

 報紙文章

 博客條目

 用戶評論

7.

<aside> 標籤訂義其所處內容以外的內容。

aside 的內容應該與附近的內容相關。

8.

<audio> 標籤定義聲音,好比音樂或其餘音頻流

<audio src="someaudio.wav"> 您的瀏覽器不支持 audio 標籤。</audio>

9.

<b> 標籤規定粗體文本。

<p>這是普通文本 - <b>這是粗體文本</b></p>

10.

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

一般狀況下,瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標籤能夠改變這一點。瀏覽器隨後將再也不使用當前文檔的 URL,而使用指定的基本 URL 來解析全部的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。

<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>

11.

<basefont> 標籤訂義基準字體。該標籤能夠爲文檔中的全部文本定義默認字體顏色、字體大小和字體系列。

<head> <basefont color="red" size="5" /> </head> <body> <h1>This is a header</h1> <p>This is a paragraph</p> </body>

12.

bdi 指的是 bidi 隔離。

<bdi> 標籤容許您設置一段文本,使其脫離其父元素的文本方向設置

在發佈用戶評論或其餘您沒法徹底控制的內容時,該標籤頗有用。

13.

bdo 元素可覆蓋默認的文本方向。

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

14.

<big> 標籤呈現大號字體效果。

使用 <big> 標籤能夠很容易地放大字體。這簡直不能再簡單了:瀏覽器顯示包含在 <big> 標籤和其相應的 </big> 標籤之間的文字時,其字體比周圍的文字要大一號。可是,若是文字已是最大號字體,這個 <big> 標籤將不起任何做用。

更妙的是,能夠嵌套 <big> 標籤來放大文本。每個 <big> 標籤均可以使字體大一號,直到上 7 號文本,正如字體模型所定義的那樣。

可是使用 <big> 標籤的時候仍是要當心,由於瀏覽器老是很寬大地試圖去理解各類標籤,對於那些不支持 <big> 標籤的瀏覽器來講,它常常將其認爲是粗體字標籤。

15.

<blockquote> 標籤訂義塊引用。

<blockquote> 與 </blockquote> 之間的全部文本都會從常規文本中分離出來,常常會在左、右兩邊進行縮進(增長外邊距),並且有時會使用斜體。也就是說,塊引用擁有它們本身的空間。

16.

body 元素定義文檔的主體。

body 元素包含文檔的全部內容(好比文本、超連接、圖像、表格和列表等等。)

<html> <head>  <title>文檔的標題</title> </head> <body>  文檔的內容... ... </body> </html>

17.

<br> 可插入一個簡單的換行符。

<br> 標籤是空標籤(意味着它沒有結束標籤,所以這是錯誤的:<br></br>)。在 XHTML 中,把結束標籤放在開始標籤中,也就是 <br />。

<p> 標籤請注意,<br> 標籤只是簡單地開始新的一行,而當瀏覽器遇到 時,一般會在相鄰的段落之間插入一些垂直的間距。

18.

<button> 標籤訂義一個按鈕。

button 元素內部,您能夠放置內容,好比文本或圖像。這是該元素與使用 input 元素建立的按鈕之間的不一樣之處。

<button> 控件 與 <input type="button"> 相比,提供了更爲強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的全部內容都是按鈕的內容,其中包括任何可接受的正文內容,好比文本或多媒體內容。例如,咱們能夠在按鈕中包括一個圖像和相關的文本,用它們在按鈕中建立一個吸引人的標記圖像。

惟一禁止使用的元素是圖像映射,由於它對鼠標和鍵盤敏感的動做會干擾表單按鈕的行爲。

請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button",而其餘瀏覽器中(包括 W3C 規範)的默認值是 "submit"

 

全部主流瀏覽器都支持 <button> 標籤。

input 元素重要事項:若是在 HTML 表單中使用 button 元素,不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本,而其餘瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 來建立按鈕。

 

<button type="button">Click Me!</button>

 

19.

<canvas> 標籤訂義圖形,好比圖表和其餘圖像。

<canvas> 標籤只是圖形容器,您必須使用腳原本繪製圖形。

實例

如何經過 canvas 元素來顯示一個紅色的矩形:

<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>

 

20.

定義和用法

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>

 

21.

定義和用法

對其所包括的文本進行水平居中。       ??????????????標籤呢?

 

22.

定義和用法

<cite> 標籤一般表示它所包含的文本對某個參考文獻的引用,好比書籍或者雜誌的標題。

按照慣例,引用的文本將以斜體顯示。

<cite> 標籤把指向其餘文檔的引用分離出來,尤爲是分離那些傳統媒體中的文檔,如書籍、雜誌、期刊,等等。若是引用的這些文檔有聯機版本,還應該把引用包括在一個 <a> 標籤中,從而把一個超連接指向該聯機版本。

<cite> 標籤還有一個隱藏的功能:它可使你或者其餘人從文檔中自動摘錄參考書目。咱們能夠很容易地想象一個瀏覽器,它可以自動整理引用表格,並把它們做爲腳註或者獨立的文檔來顯示。<cite> 標籤的語義已經遠遠超過了改變它所包含的文本外觀的做用;它使瀏覽器可以以各類實用的方式來向用戶表達文檔的內容。

 

23.

HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 標籤

定義和用法

如下元素都是短語元素。雖然這些標籤訂義的文本大多會呈現出特殊的樣式,但實際上,這些標籤都擁有確切的語義。

咱們並不反對使用它們,可是若是您只是爲了達到某種視覺效果而使用這些標籤的話,咱們建議您使用樣式表,那麼作會達到更加豐富的效果。

<em>

把文本定義爲強調的內容。

<strong>

把文本定義爲語氣更強的強調的內容。

<dfn>

定義一個定義項目。

<code>

定義計算機代碼文本。

<samp>

定義樣本文本。

<kbd>

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

<var>

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

<cite>

定義引用。可以使用該標籤對參考文獻的引用進行定義,好比書籍或雜誌的標題。

 

 

 

 

 

 

 

 

 

 

 

24.

定義和用法

<col> 標籤爲表格中一個或多個定義屬性值。

如需對所有列應用樣式,<col> 標籤頗有用,這樣就不須要對各個單元和各行重複應用樣式了。

您只能在 table 或 colgroup 元素中使用 <col> 標籤。

25.

定義和用法

<colgroup> 標籤用於對錶格中的進行組合,以便對其進行格式化。

如需對所有列應用樣式,<colgroup> 標籤頗有用,這樣就不須要對各個單元和各行重複應用樣式了。

<colgroup> 標籤只能在 table 元素中使用。

實例

兩個 colgroup 元素爲表格中的三列規定了不一樣的對齊方式和樣式(注意第一個 colgroup 元素橫跨兩列):

<table width="100%" border="1">  <colgroup span="2" align="left"></colgroup>  <colgroup align="right" style="color:#0000FF;"></colgroup>  <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>

 

26.

定義和用法

command 元素表示用戶可以調用的命令。

<command> 標籤能夠定義命令按鈕,好比單選按鈕、複選框或按鈕。

只有當 command 元素位於 menu 元素內時,該元素纔是可見的。不然不會顯示這個元素,可是能夠用它規定鍵盤快捷鍵。

實例

標記一個按鈕:

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

 

27.

實例

下面是一個 input 元素,datalist 中描述了其可能的值:

<input id="myCar" list="cars" /> <datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"> </datalist>

 

定義和用法

<datalist> 標籤訂義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。

datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表。

請使用 input 元素的 list 屬性來綁定 datalist。

 

28.

定義和用法

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

實例

<dl>   <dt>計算機</dt>   <dd>用來計算的儀器 ... ...</dd>   <dt>顯示器</dt>   <dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>

29.

<del>定義和用法

定義文檔中已被刪除的文本。

實例

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

 

 

30.

定義和用法

<details> 標籤用於描述文檔或文檔某個部分的細節。

實例

關於文檔的細節:

<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>

 

 

31.

定義和用法

<dialog> 標籤訂義對話框或窗口。

實例

使用 <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>

 

32.

定義和用法

<dir> 標籤訂義目錄列表。

 

不同意使用 dir 元素!

實例

目錄列表:

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

 

33.

定義和用法

<div> 可定義文檔中的分區或節(division/section)。

<div> 標籤能夠把文檔分割爲獨立的、不一樣的部分。它能夠用做嚴格的組織工具,而且不使用任何格式與其關聯。

若是用 id 或 class 來標記 <div>,那麼該標籤的做用會變得更加有效。

用法

<div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上,換行是 <div> 固有的惟一格式表現。能夠經過 <div> 的 class 或 id 應用額外的樣式。

沒必要爲每個 <div> 都加上類或 id,雖然這樣作也有必定的好處。

能夠對同一個 <div> 元素應用 class 或 id 屬性,可是更常見的狀況是隻應用其中一種。這二者的主要差別是,class 用於元素組(相似的元素,或者能夠理解爲某一類元素) id 用於標識單獨的惟一的元素。

實例

文檔中的一個部分會顯示爲綠色:

<div style="color:#00FF00">  <h3>This is a header</h3>  <p>This is a paragraph.</p> </div>

 

34.

定義和用法

<dl> 標籤訂義了定義列表(definition list)。

<dt><dd><dl> 標籤用於結合  (定義列表中的項目)和  (描述列表中的項目)。

<dl>   <dt>計算機</dt>   <dd>用來計算的儀器 ... ...</dd>   <dt>顯示器</dt>   <dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>

35

定義和用法

<dt> 標籤訂義了定義列表中的項目(即術語部分)。

36

定義和用法

<embed> 標籤訂義嵌入的內容,好比插件。

37

定義和用法

figure<figcaption> 標籤訂義  元素的標題(caption)。

"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

 

定義和用法

<figure> 標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。

figure 元素的內容應該與主內容相關,但若是被刪除,則不該對文檔流產生影響。

 

<figure>  <figcaption>黃浦江上的的盧浦大橋</figcaption>  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

 

38

定義和用法

<font> 規定文本的字體、字體尺寸、字體顏色。

實例

規定文本字體、大小和顏色:

<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>

 

39

定義和用法

<footer> 標籤訂義文檔或節的頁腳。

<footer> 元素應當含有其包含元素的信息。

頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。

能夠在一個文檔中使用多個 <footer> 元素。

實例

文檔中的頁腳部分:

<footer>  <p>Posted by: W3School</p>  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer>

 

40

定義和用法

<form> 標籤用於爲用戶輸入建立 HTML 表單。

input 元素表單可以包含 ,好比文本字段、複選框、單選框、提交按鈕等等。

menustextareafieldsetlegendlabel 元素表單還能夠包含 、、、 和 。

表單用於向服務器傳輸數據。

例子

<form action="form_action.asp" method="get">  <p>First name: <input type="text" name="fname" /></p>  <p>Last name: <input type="text" name="lname" /></p>  <input type="submit" value="Submit" /> </form>

 

41

定義和用法

<frame> 標籤訂義 frameset 中的一個特定的窗口(框架)。

frameset 中的每一個框架均可以設置不一樣的屬性,好比 border、scrolling、noresize 等等。

實例

簡單的三框架頁面:

<html> <frameset cols="25%,50%,25%">  <frame src="frame_a.htm" />  <frame src="frame_b.htm" />  <frame src="frame_c.htm" /> </frameset> </html>

 

42

定義和用法

frameset 元素可定義一個框架集。它被用來組織多個窗口(框架)。每一個框架存有獨立的文檔。在其最簡單的應用中,frameset 元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。

 

<html> <frameset cols="25%,50%,25%">  <frame src="frame_a.htm" />  <frame src="frame_b.htm" />  <frame src="frame_c.htm" /> </frameset> </html>

 

43

定義和用法

<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。

因爲 h 元素擁有確切的語義,所以請您慎重地選擇恰當的標籤層級來構建文檔的結構。所以,請不要利用標題標籤來改變同一行中的字體大小。相反,咱們應當使用層疊樣式表定義來達到漂亮的顯示效果。

實例

六個不一樣的 HTML 標題:

<h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6>

 

44

定義和用法

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

文檔的頭部描述了文檔的各類屬性和信息,包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。

<base><link><meta><script><style><title>下面這些標籤可用在 head 部分, , , , , 以 。

<title> 定義文檔的標題,它是 head 部分中惟一必需的元素。

實例

一個簡單的 HTML 文檔,帶有最基本的必需的元素:

<html> <head>  <title>文檔的標題</title> </head> <body>  文檔的內容... ... </body> </html>

 

45

定義和用法

<hr> 標籤在 HTML 頁面中建立一條水平線。

水平分隔線(horizontal rule)能夠在視覺上將文檔分隔成各個部分。

實例

被水平線分隔的標題和段落:

<h1>This is header 1</h1> <hr /> <p>This is some text</p>

 

46

實例

<html> <head>  這裏是文檔的頭部 ... ...  ... </head> <body>  這裏是文檔的主體 ... ...  ... </body> </html>

親自試一試

定義和用法

此元素可告知瀏覽器其自身是一個 HTML 文檔。

<head> 標籤<body> 標籤<html> 與 </html> 標籤限定了文檔的開始點和結束點,在它們之間是文檔的頭部和主體。正如您所瞭解的那樣,文檔的頭部由定義,而主體由 定義。

 

47

定義和用法

<i> 標籤顯示斜體文本效果。

<em><i> 標籤和基於內容的樣式標籤  相似。它告訴瀏覽器將包含其中的文本以斜體字(italic)或者傾斜(oblique)字體顯示。若是這種斜體字對該瀏覽器不可用的話,可使用高亮、反白或加下劃線等樣式。

提示:<i> 標籤必定要和結束標籤 </i> 結合起來使用。

 

48

定義和用法

iframe 元素會建立包含另一個文檔的內聯框架(即行內框架)

 

49

定義和用法

img 元素向網頁中嵌入一幅圖像。

請注意,從技術上講,<img> 標籤並不會在網頁中插入圖像,而是從網頁上連接圖像。<img> 標籤建立的是被引用圖像的佔位空間。

src 屬性alt 屬性<img> 標籤有兩個必需的屬性: 和 。

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />

以上代碼的效果:

 

上海鮮花港 - 鬱金香

 

50

定義和用法

<input> 標籤用於蒐集用戶信息。

根據不一樣的 type 屬性值,輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等

實例

一個簡單的 HTML 表單,包含兩個文本輸入框和一個提交按鈕:

<form action="form_action.asp" method="get">  First name: <input type="text" name="fname" />  Last name: <input type="text" name="lname" />  <input type="submit" value="Submit" /> </form>

 

51

定義和用法

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

實例

帶有已刪除部分和新插入部分的文本:

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

 

52

定義和用法

<keygen> 標籤規定用於表單的密鑰對生成器字段。

當提交表單時,私鑰存儲在本地,公鑰發送到服務器。

實例

帶有 keygen 字段的表單:

<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>

 

53

定義和用法

<label> 標籤爲 input 元素定義標註(標記)

label 元素不會向用戶呈現任何特殊效果。不過,它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本,就會觸發此控件。就是說,當用戶選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

實例

帶有兩個輸入字段和相關標記的簡單 HTML 表單:

<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>

 

54

定義和用法

fieldset 元素legend 元素爲 定義標題(caption)

實例

組合表單中的相關元素:

<form>  <fieldset>    <legend>health information</legend>    height: <input type="text" />    weight: <input type="text" />  </fieldset> </form>

 

55

定義和用法

<li> 標籤訂義列表項目。

<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中

<ol>   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol> <ul>   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ul>

 

56

定義和用法

<link> 標籤訂義文檔與外部資源的關係。

<link> 標籤最多見的用途是連接樣式表。

 

<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>

 

57

實例

<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>

親自試一試

定義和用法

<main> 標籤規定文檔的主要內容。

<main> 元素中的內容對於文檔來講應當是惟一的。它不該包含在文檔中重複出現的內容,好比側欄、導航欄、版權信息、站點標誌或搜索表單。

註釋:在一個文檔中,不能出現一個以上的 <main> 元素。<main> 元素不能是如下元素的後代:<article>、<aside>、<footer>、<header> 或 <nav>。

 

58

 <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>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部主流瀏覽器都支持 <map> 標籤。

定義和用法

定義一個客戶端圖像映射。圖像映射(image-map)指帶有可點擊區域的一幅圖像。

 

 

59

實例

突出顯示部分文本:

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

瀏覽器支持

 

IE

Firefox

Chrome

Safari

Opera

 

 

 

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <mark> 標籤。

定義和用法

<mark> 標籤訂義帶有記號的文本。請在須要突出顯示文本時使用 <m> 標籤。

 

 

60

實例

帶有兩個菜單按鈕 "File" 和 "Edit") 的工具欄,每一個按鈕都包含帶有一系列選項的下拉列表:

<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>

親自試一試

定義和用法

<menu> 標籤訂義命令的列表或菜單。

<menu> 標籤用於上下文菜單、工具欄以及用於列出表單控件和命令。

 

61

實例

包含不一樣 <menuitem> 元素的上下文菜單:

<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>

親自試一試

 

定義和用法

<menuitem> 標籤訂義用戶能夠從彈出菜單調用的命令/菜單項目。

 

62

定義和用法

<meta> 元素可提供有關頁面的元信息(meta-information),好比針對搜索引擎和更新頻度的描述和關鍵詞。

<meta> 標籤位於文檔的頭部,不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

HTML XHTML 之間的差別

HTML 中,<meta> 標籤沒有結束標籤。

XHTML 中,<meta> 標籤必須被正確地關閉。

提示和註釋:

註釋:<meta> 標籤永遠位於 head 元素內部。

註釋:元數據老是以名稱/值的形式被成對傳遞的。

 

 

63

定義和用法

<meter> 標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge(尺度)。

例子:磁盤用量、查詢結果的相關性,等等。

註釋:<meter> 標籤不該用於指示進度(在進度條中)。若是標記進度條,請使用 <progress> 標籤。

 

64

實例

<nav> <a href="index.asp">Home</a> <a href="html5_meter.asp">Previous</a> <a href="html5_noscript.asp">Next</a> </nav>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <nav> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <nav> 標籤。

定義和用法

<nav> 標籤訂義導航連接的部分。

 

65.

定義和用法

noframes 元素可爲那些不支持框架的瀏覽器顯示文本。noframes 元素位於 frameset 元素內部。

實例

<frameset cols = "25%, 25%,*">  <noframes>  <body>Your browser does not handle frames!</body>  </noframes>  <frame src ="venus.htm" />  <frame src   ="sun.htm" />  <frame src ="mercur.htm"   /> </frameset>

 

66

實例

HTML 代碼添加一個對象:

<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>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

幾乎全部主流瀏覽器都擁有部分對 <object> 標籤的支持。

定義和用法

定義一個嵌入的對象。請使用此元素向您的 XHTML 頁面添加多媒體。此元素容許您規定插入 HTML 文檔中的對象的數據和參數,以及可用來顯示和操做數據的代碼。

<object> 標籤用於包含對象,好比圖像、音頻、視頻、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不過因爲漏洞以及缺少瀏覽器支持,這一點並未實現。

瀏覽器的對象支持有賴於對象類型。不幸的是,主流瀏覽器都使用不一樣的代碼來加載相同的對象類型。

而幸運的是,object 對象提供瞭解決方案。若是未顯示 object 元素,就會執行位於 <object> 和 </object> 之間的代碼。經過這種方式,咱們可以嵌套多個 object 元素(每一個對應一個瀏覽器)。

 

67

定義和用法

<ol> 標籤訂義有序列表。

68

實例

經過 <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>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部主流瀏覽器都支持 <optgroup> 標籤。

定義和用法

<optgroup> 標籤訂義選項組。

optgroup 元素用於組合選項。當您使用一個長的選項列表時,對相關的選項進行組合會使處理更加容易。

 

69

實例

建立帶有 4 個選項的選擇列表:

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option> </select>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <option> 標籤。

定義和用法

option 元素定義下拉列表中的一個選項(一個條目)。

瀏覽器將 <option> 標籤中的內容做爲 <select> 標籤的菜單或是滾動列表中的一個元素顯示。

option 元素位於 select 元素內部。

 

70

實例

執行計算而後在 <output> 元素中顯示結果:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0   <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">   =<output name="x" for="a b"></output> </form>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

Firefox, Chrome, Safari 以及 Opera 支持 <output> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <output> 標籤。

定義和用法

<output> 標籤訂義不一樣類型的輸出,好比腳本的輸出。

 

71

實例

如下代碼標記了一個段落:

<p>This is some text in a very short paragraph</p>

親自試一試

(在頁面下部,您能夠找到更多實例。)

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部主流瀏覽器都支持 <p> 標籤。

定義和用法

<p> 標籤訂義段落。

p 元素會自動在其先後建立一些空白。瀏覽器會自動添加這些空間,您也能夠在樣式表中規定。

 

72

實例

HTML 代碼添加一個對象:

<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>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <param> 標籤。

定義和用法

<object><applet> 標籤param 元素容許您爲插入 XHTML 文檔的對象規定 run-time 設置,也就是說,此標籤可爲包含它的  或者 提供參數。

 

73

定義和用法

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體。

<pre> 標籤的一個常見應用就是用來表示計算機的源代碼。

<p><address> 標籤能夠致使段落斷開的標籤(例如標題、 和 )毫不能包含在 <pre> 所定義的塊裏。儘管有些瀏覽器會把段落結束標籤解釋爲簡單地換行,可是這種行爲在全部瀏覽器上並不都是同樣的。

物理樣式和基於內容的樣式變化連接圖像水平分隔線pre 元素中容許的文本能夠包括,還有、和。當把其餘標籤(好比 <a> 標籤)放到 <pre> 塊中時,就像放在 HTML/XHTML 文檔的其餘部分中同樣便可。請看下面的例子:

<pre> <html> <head>  <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body>  <script type="text/javascript">    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");    document.write("xmlDoc is loaded, ready for use");  </script> </body> </html> </pre>

符號實體在上面的代碼中,<pre> 標籤中的特殊符號被轉換爲,好比 "<" 表明 "<",">" 表明 ">"。另外,請注意藍色的代碼,咱們在 <pre> 標籤中使用了連接,也就是 <a> 標籤。上面這段代碼的顯示效果以下:

loadXMLDoc<html> <head>  <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body>  <script type="text/javascript">    xmlDoc=("books.xml");    document.write("xmlDoc is loaded, ready for use");  </script> </body> </html>

提示和註釋

提示:製表符(tab)在 <pre> 標籤訂義的塊當中能夠起到應有的做用,每一個製表符佔據 8 個字符的位置。可是咱們不推薦使用它,由於在不一樣的瀏覽器中,Tab 的實現各不相同。在用 <pre> 標籤格式化的文檔段中使用空格,能夠確保文本正確的水平位置。

符號實體提示:若是您但願使用 <pre> 標籤來定義計算機源代碼,好比 HTML 源代碼,請使用來表示特殊字符,好比 "<" 表明 "<",">" 表明 ">","&" 表明 "&"。

<code> 標籤提示: W3School 中,很是多頁面中的源代碼實例都是經過 <pre> 標籤訂義的,您能夠參考這些頁面,學習如何使用該標籤。咱們甚至把 <pre> 標籤與 結合起來使用,以得到更加精確的語義。

 

74

實例

正在進行的下載:

<progress value="22" max="100"></progress>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 標籤。

註釋:Internet Explorer 9 以及更早的版本不支持 <progress> 標籤。

定義和用法

<progress> 標籤標示任務的進度(進程)。

 

75

實例

標記短的引用:

<q>Here is a short quotation here is a short quotation</q>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <q> 標籤。

定義和用法

<q> 標籤訂義短的引用。

瀏覽器常常在引用的內容周圍添加引號。

<q> <blockquote> 的區別

<blockquote><q> 標籤在本質上與  是同樣的。不一樣之處在於它們的顯示和應用。<q> 標籤用於簡短的行內引用。若是須要從周圍內容分離出來比較長的部分(一般顯示爲縮進的塊),請使用 <blockquote> 標籤。

 

76

實例

一個 ruby 註釋:

<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rp> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <rp> 標籤。

定義和用法

<rp> 標籤在 ruby 註釋中使用,以定義不支持 ruby 元素的瀏覽器所顯示的內容。

ruby 註釋是中文註音或字符。

在東亞使用,顯示的是東亞字符的發音。

<ruby> 以及 <rt> 標籤一同使用:

ruby 元素由一個或多個字符(須要一個解釋/發音)和一個提供該信息的 rt 元素組成,還包括可選的 rp 元素,定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

 

77

定義和用法

<rt> 標籤訂義字符(中文註音或字符)的解釋或發音。

ruby 註釋是中文註音或字符。

在東亞使用,顯示的是東亞字符的發音。

<ruby> 以及 <rt> 標籤一同使用:

ruby 元素由一個或多個字符(須要一個解釋/發音)和一個提供該信息的 rt 元素組成,還包括可選的 rp 元素,定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

 

78

定義和用法

<ruby> 標籤訂義 ruby 註釋(中文註音或字符)。

在東亞使用,顯示的是東亞字符的發音。

<ruby> 以及 <rt> 標籤一同使用:

ruby 元素由一個或多個字符(須要一個解釋/發音)和一個提供該信息的 rt 元素組成,還包括可選的 rp 元素,定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

 

79

例子

能夠像這樣標記刪除線文本:

HTML 5 中,<s>仍然支持</s>已經不支持這個標籤了。

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <s> 標籤。

定義和用法

<s> 標籤可定義加刪除線文本定義。

<strike> 標籤<s> 標籤是 的縮寫版本,Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已經再也不同意使用它了,意思就是再也不使用了;它遲早有一天將會消失。

 

80

實例

HTML 頁面中插入一段 JavaScript:

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

親自試一試

(在本頁底部能夠找到更多實例)

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

6.0

9.0

4.0

5.0

11.1

全部瀏覽器都支持 <script> 標籤。

定義和用法

<script> 標籤用於定義客戶端腳本,好比 JavaScript。

script 元素既能夠包含腳本語句,也能夠經過 src 屬性指向外部腳本文件。

必需的 type 屬性規定腳本的 MIME 類型。

JavaScript 的常見應用時圖像操做、表單驗證以及動態內容更新。

 

81

實例

文檔中的區段,解釋了 PRC:

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

親自試一試

瀏覽器支持

表格中的數字指示了支持此元素的首個瀏覽器版本。

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

6.0

9.0

4.0

5.0

11.1

全部瀏覽器都支持 <section> 標籤。

定義和用法

<section> 標籤訂義文檔中的節(section、區段)。好比章節、頁眉、頁腳或文檔中的其餘部分。

 

82

實例

建立帶有 4 個選項的選擇列表:

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option> </select>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部主流瀏覽器都支持 <select> 標籤。

定義和用法

select 元素可建立單選或多選菜單。

<option><select&> 元素中的  標籤用於定義列表中的可用選項。

 

83

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <small> 標籤。

定義和用法

<small> 標籤呈現小號字體效果。

<small> 標籤和它所對應的 <big> 標籤同樣,但它是縮小字體而不是放大。若是被包圍的字體已是字體模型所支持的最小字號,那麼 <small> 標籤將不起任何做用。

<big> 標籤相似,<small> 標籤也能夠嵌套,從而連續地把文字縮小。每一個 <small> 標籤都把文本的字體變小一號,直到達到下限的一號字。

 

84

實例

擁有兩份源文件的音頻播放器。瀏覽器應該選擇它所支持的文件(若是有的話):

<audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <source> 標籤。

定義和用法

<source> 標籤爲媒介元素(好比 <video> 和 <audio>)定義媒介資源。

<source> 標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

 

85

定義和用法

<span> 標籤被用來組合文檔中的行內元素。

 

86

定義和用法

<strike> 標籤可定義加刪除線文本定義。

87

定義和用法

<style> 標籤用於爲 HTML 文檔定義樣式信息。

style 中,您能夠規定在瀏覽器中如何呈現 HTML 文檔。

type 屬性是必需的,定義 style 元素的內容。惟一可能的值是 "text/css"。

style 元素位於 head 部分中。

 

88

定義和用法

<sub> 標籤可定義下標文本。

包含在 <sub> 標籤和其結束標籤 </sub> 中的內容將會以當前文本流中字符高度的一半來顯示,可是與當前文本流中文字的字體和字號都是同樣的。

<sup> 標籤提示:不管是 <sub> 標籤仍是和它對應的 ,在數學等式、科學符號和化學公式中都很是有用。

 

89

<details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

只有 Chrome 以及 Safari 6 支持 <summary> 標籤。

定義和用法

<summary> 標籤包含 details 元素的標題,"details" 元素用於描述有關文檔或文檔片斷的詳細信息。

 

90

定義和用法

<sup> 標籤可定義上標文本。

包含在 <sup> 標籤和其結束標籤 </sup> 中的內容將會以當前文本流中字符高度的一半來顯示,可是與當前文本流中文字的字體和字號都是同樣的。

提示:這個標籤在向文檔添加腳註以及表示方程式中的指數值時很是有用。若是和 <a> 標籤結合起來使用,就能夠建立出很好的超連接腳註。

 

91

定義和用法

<table> 標籤訂義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行th 元素定義表頭td 元素定義表格 單元

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

實例

一個簡單的 HTML 表格,包含兩行兩列:

<table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr> </table>

 

92

實例

帶有 thead、tbody 以及 tfoot 元素的 HTML 表格:

<table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody> </table>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

<tbody> 標籤僅獲得全部主流瀏覽器的部分支持。

定義和用法

<tbody> 標籤表格主體(正文)。該標籤用於組合 HTML 表格的主體內容。

theadtfoottbody 元素應該與  和  元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組, tfoot 元素用於對 HTML 表格中的表注(頁腳)內容進行分組。

註釋:若是您使用 thead、tfoot 以及 tbody 元素,您就必須使用所有的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

提示:在默認狀況下這些元素不會影響到表格的佈局。不過,您可使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時,您也許但願擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

 

93

實例

一個簡單的 HTML 表格,包含兩行兩列:

<table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr> </table>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <td> 標籤。

定義和用法

<td> 標籤訂義 HTML 表格中的標準單元格。

HTML 表格有兩類單元格:

 表頭單元 - 包含頭部信息(由 th 元素建立)

 標準單元 - 包含數據(由 td 元素建立)

td 元素中的文本通常顯示爲正常字體且左對齊。

 

94

實例

<textarea rows="3" cols="20"> 在w3school,你能夠找到你所須要的全部的網站建設教程。 </textarea>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <textarea> 標籤。

定義和用法

<textarea> 標籤訂義多行的文本輸入控件。

文本區中可容納無限數量的文本,其中的文本的默認字體是等寬字體(一般是 Courier)。

能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸,不過更好的辦法是使用 CSS 的 height 和 width 屬性。

註釋:在文本輸入區內的文本行間,用 "%OD%OA" (回車/換行)進行分隔。

有關 wrap 屬性的詳提示:能夠經過 <textarea> 標籤的 wrap 屬性設置文本輸入區內的換行模式。

 

細信息

 

 

 

95

實例

帶有 thead、tbody 以及 tfoot 元素的 HTML 表格:

<table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody> </table>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

<tfoot> 標籤僅獲得全部主流瀏覽器的部分支持。

定義和用法

<tfoot> 標籤訂義表格的頁腳(腳註或表注)。該標籤用於組合 HTML 表格中的表注內容。

theadtbodytfoot 元素應該與  和  元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組,而 tbody 元素用於對 HTML 表格中的主體內容進行分組。

註釋:若是您使用 thead、tfoot 以及 tbody 元素,您就必須使用所有的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

提示:在默認狀況下這些元素不會影響到表格的佈局。不過,您可使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時,您也許但願擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

 

96

 

定義和用法

定義表格內的表頭單元格。

HTML 表單中有兩種類型的單元格:

 表頭單元格 - 包含表頭信息(由 th 元素建立)

 標準單元格 - 包含數據(由 td 元素建立)

th 元素內部的文本一般會呈現爲居中的粗體文本,而 td 元素內的文本一般是左對齊的普通文本。

實例

普通的 HTML 表格,包含兩行兩列:

<table border="1">  <tr>    <th>Company</th>    <th>Address</th>  </tr>  <tr>    <td>Apple, Inc.</td>    <td>1 Infinite Loop Cupertino, CA 95014</td>  </tr> </table>

 

97

定義和用法

<thead> 標籤訂義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。

tbodytfootthead 元素應該與  和  元素結合起來使用。

tbody 元素用於對 HTML 表格中的主體內容進行分組,而 tfoot 元素用於對 HTML 表格中的表注(頁腳)內容進行分組。

註釋:若是您使用 thead、tfoot 以及 tbody 元素,您就必須使用所有的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

提示:在默認狀況下這些元素不會影響到表格的佈局。不過,您可使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時,您也許但願擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

實例

帶有 thead、tbody 以及 tfoot 元素的 HTML 表格:

<table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody> </table>

 

98

實例

如何定義時間和日期:

<p>咱們在天天早上 <time>9:00</time> 開始營業。</p> <p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p>

 

定義和用法

<time> 標籤訂義公曆的時間(24 小時制)或日期,時間和時區偏移是可選的。

該元素可以以機器可讀的方式對日期和時間進行編碼,這樣,舉例說,用戶代理可以把生日提醒或排定的事件添加到用戶日程表中,搜索引擎也可以生成更智能的搜索結果

 

99

定義和用法

<title> 元素可定義文檔的標題。

瀏覽器會以特殊的方式來使用標題,而且一般把它放置在瀏覽器窗口的標題欄或狀態欄上。一樣,當把文檔加入用戶的連接列表或者收藏夾或書籤列表時,標題將成爲該文檔連接的默認名稱。

 

實例

一個簡單的 HTML 文檔,帶有儘量少的必需的標籤:

<html>  <head>    <title>XHTML Tag Reference</title>  </head>  <body>    The content of the document......  </body> </html>

 

100

實例

一個簡單的 HTML 文檔,帶有儘量少的必需的標籤:

<html>  <head>    <title>XHTML Tag Reference</title>  </head>  <body>    The content of the document......  </body> </html>

 

實例

一個簡單的 HTML 表格,包含兩行兩列:

<table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr> </table>

 

101

 

定義和用法

<track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。

用於規定字幕文件或其餘包含文本的文件,當媒介播放時,這些文件是可見的。

實例

播放帶有字幕的視頻:

<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="subs_chi.srt" srclang="zh" label="Chinese">  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>

 

102

定義和用法

<tt> 標籤呈現相似打字機或者等寬的文本效果

<code><kbd><tt> 標籤與  和  標籤同樣,<tt> 標籤和必需的 </tt> 結束標籤告訴瀏覽器,要把其中包含的文本顯示爲等寬字體。對於那些已經使用了等寬字體的瀏覽器來講,這個標籤在文本的顯示上就沒有什麼特殊效果了。

 

103

定義和用法

<u> 標籤可定義下劃線文本。

實例

使用 <u> 標籤爲文本添加下劃線:

<p>若是文本不是超連接,就不要<u>對其使用下劃線</u></p>

 

104

 

定義和用法

<ul> 標籤訂義無序列表

 

105

實例

一段簡單的 HTML5 視頻:

<video src="movie.ogg" controls="controls"> 您的瀏覽器不支持 video 標籤。 </video>

瀏覽器支持

 

IE

Firefox

Chrome

Safari

Opera

 

 

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 標籤。

註釋:Internet Explorer 8 以及更早的版本不支持 <video> 標籤。

定義和用法

<video> 標籤訂義視頻,好比電影片斷或其餘視頻流。

106

實例

一段帶有 Word Break Opportunity 的文本:

<p> 若是想學習 AJAX,那麼您必須熟悉 XML<wbr>Http<wbr>Request 對象。 </p>

親自試一試

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

全部瀏覽器都支持 <wbr> 標籤,除了 Internet Explorer。

定義和用法

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

提示:若是單詞太長,或者您擔憂瀏覽器會在錯誤的位置換行,那麼您可使用 <wbr> 元素來添加 Word Break Opportunity(單詞換行時機)。

相關文章
相關標籤/搜索