文檔類型,會使浏覽器使用相應的方式加載網頁並顯示,忽略DTDs,將使網頁進入一種混亂模式(quirks mode)。
示例:
XHTML過渡定義類型,此類型可以使用HTML4中的標簽
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML嚴格定義類型,此文檔只可以使用XHTML1中定義的標簽
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML1.1版定義類型
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
XHTML框架定義類型。(可以使用框架)
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
示例:<abbr title=”Pmited”>Ltd.</abbr>
說明:簡稱和縮寫是對一個慣用詞組的縮寫表示,一般使用詞組中每個單詞的首字母,比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一種提取首字母的縮寫.有時候縮寫經常會在最後加一個。
示例:<acronym title=”Cascading Style Sheets”>CSS</acronym>
area標簽是單獨出現的,<area />
area標簽必須使用在map標簽中,而且必須配合img標簽使用。
屬性:
Common ― 一般屬性
accesskey ― 鏈接的快捷鍵訪問方式
alt ― 圖像的提示文字
coords ― 定義可點擊區域圖形的坐標
href ― HTML鏈接源的URL
nohref ― 圖像點擊排除的區域,當不使用href時應使用nohref
shape ― 可點擊區域的形狀
tabindex ― 使用”Tab”鍵的遍歷順序
target ― 鏈接目標
area是cPent-side image map area的意思,區域
area標簽示例:
<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>
base標簽是單獨出現的,<base />
base標簽只能放置在head標簽內
當使用相對路徑定義鏈接時,可以使用base標簽定義基URL解析所有文檔中定義的相對路徑的URL
屬性:
href ― 基URL
target ― 鏈接目標
base是document base URI的意思
base標簽示例
<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>
使用上面示例代碼的html頁面中的相對鏈接,將直接指向基URL http://www.renniaofei.com/,並且使用彈出窗口。
base標簽在框架中的使用
base標簽通常可以使用在框架鏈接中,例如
<frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>
鏈接頁Pst.htm
l<head> <base target=”mainTarget”> </head> < a href=”http://www.renniaofei.com/category/design/”>design</a> < a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>
通過上面示例可以避免在每個鏈接中寫入target=”mainTarget”
blockquote標簽是成對出現的,以<blockquote>開始,以</blockquote>結束
屬性:
Common ― 一般屬性
cite ― 被引用內容的URI
示例:
<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標准網頁設計要區分內容與表現,學習標准網頁設計。</p> </blockquote>
button標簽是成對出現的,以<button>開始,</button>結束
可以定義比input內容更豐富的按鈕。
屬性:
Common ― 一般屬性
accesskey ― 快捷鍵訪問方式
disabled ― 禁止使用
name ― 標簽名稱
tabindex ― 使用”Tab”鍵的遍歷順序
type ― 按鈕類型
button ― 普通按鈕
reset ― 重置表單按鈕
submit ― 提交按鈕
value ― 通過表單傳遞到服務器端的數據
button是push button的意思,按鈕
button標簽示例:
<button type=”submit”>提交</button>
一個使用文字的普通的提交按鈕
<button type=”reset”> 從<strong>任鳥飛</strong>提交表單 </button>
改變按鈕內加重文字的button標簽
<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>
說明:使用圖片的button標簽,注意有alt的提示文字。
caption標簽是成對出現的,以<caption>開始。</caption>結束
屬性:
Common ― 一般屬性
caption:標題
示例:
<table width=”80%”> <caption> 域名數量介紹 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的數量</th> <th>.cn域名的數量</th> < th>.net域名的數量</th> </tr> <tr> < td>2003年</td> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>
說明:
caption標簽可以為表格提供一個描述,和圖像的說明alt比較類似.默認情況下,浏覽器顯示表格標題在表格的上方。
CSS裡的caption-side屬性用來控制表格標題顯示的位置。
cite標簽是成對出現的,以<cite>開始,以</cite>結束
屬性:
Common ― 一般屬性
cite ― 引用內容的URI
cite是citation的縮寫
示例:
<cite cite=”http://www.renniaofei.com/”>一步步的教我學會HTML與XHTML</cite>
col標簽是單獨出現的,<col />
屬性:
Common ― 一般屬性
span ― 定義一個col跨越的列數,默認值為1
colgroup標簽是成對出現的,以<colgroup>開始,以</colgroup>結束
屬性:
Common ― 一般屬性
span ― 定義一個colgroup跨越的列數,默認值為1
dd標簽是成對出現的,,以<dd>開始,</dd>結束
屬性:
Common ― 一般屬性
dd是definition description的縮寫
del標簽是成對出現的,以<del>開始,</del>結束
del通常應連同ins標簽一同使用,表示被刪除與被插入的文本
通過del與ins定義文檔可以幫助了解文檔內容的修改過程,利於多人編輯系統
使用del定義的文本通常帶有刪除線
屬性:
Common ― 一般屬性
cite ― 引用網址,定義為何刪除的引用網址
datetime ― 刪除的時間與日期
title ― 定義刪除的目的或提示
del是deleted text的縮寫,刪除文本
del標簽示例:
<p>任鳥飛網頁設計網址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ,原先 <del>http://www.renniaofei.com/</del> 網址已經刪除。 </p>
不符合標准網頁設計的理念,不贊成使用.
dir標簽是成對出現的,以<dir>開始,</dir>結束
屬性:
Common ― 一般屬性
dir是directory Psts的縮寫,目錄列表
dfn標簽是成對出現的,以<dfn>開始,以</dfn>結束
屬性:
Common ― 一般屬性
dfn是defining instance的縮寫
示例: <dfn>任鳥飛</dfn>網頁設計網!
dl標簽是成對出現的,以<dl>開始,</dl>結束
自定義列表的開始使用<dl>標簽,列表中每個元素的標題使用<dt>(definition term)定義,後面跟隨<dd>(definition description)用於描述列表中元素的內容.
屬性:
Common ― 一般屬性
dl是definition Psts的英文縮寫
示例:
<dl> <dt>www</dt> <dd>World Wide Web的縮寫.</dd> <dt>renniaofei</dt> < dd>任鳥飛</dd> <dd>www的:).</dd> < dt>com</dt> <dt>com.cn</dt> < dt>cn</dt> <dd>這都是域名的後綴.</dd> </dl>
說明:
不一定每個dt標簽要對應一個dd,可以一對多或多對一(就像上面的例子)
dt標簽是成對出現的,以<dt>開始,</dt>結束
屬性:
Common ― 一般屬性
dt是definition term的縮寫
em標簽是成對出現的,以<em>開始,以</em>結束
屬性:
Common ― 一般屬性
em是emphasis的縮寫
示例: 強調一下,<em>不要</em>和我開玩笑!
ins標簽是成對出現的,以<ins>開始,</ins>結束
ins通常應連同del標簽一同使用,表示被插入與被刪除的文本
通過ins與del定義文檔可以幫助了解文檔內容的修改過程,利於多人編輯系統
使用ins定義的文本通常帶有下劃線
屬性:
Common ― 一般屬性
cite ― 引用網址,定義為何插入的引用網址
datetime ― 插入的時間與日期
title ― 定義插入的目的或提示
ins是inserted text的縮寫,插入文本
ins標簽示例:
<p>任鳥飛網頁設計網址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ,原先 <del>http://www.renniaofei.com/</del> 網址已經刪除。 </p>
kbd標簽是成對出現的,以<kbd>開始,以</kbd>結束
屬性:
Common ― 一般屬性
示例: To exit, type <kbd>QUIT</kbd>.
map標簽是成對出現的,以<map>開始,</map>結束
map標簽必須配合area標簽使用
map標簽中name與id屬性指定的值必須與定義圖像點擊區中圖像(img)的usemap屬性指定的值一致
屬性
Common ― 一般屬性
id ― 定義map的名稱。
name ― 定義map的名稱。
map是cPent-side image map的意思
map標簽示例:
<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>
不符合標准網頁設計的理念,不贊成使用。
menu標簽是成對出現的,以<menu>開始,</menu>結束
屬性
Common ― 一般屬性
menu:菜單
noframes標簽是成對出現的,以<noframes>開始,</noframes>結束
由於frameset內不能包含body標簽,因此noframes內部必須包含body標簽
示例
<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> < p>任鳥飛網頁設計網使用了框架技術,但是您的浏覽器不支持框架,請升級您的浏覽器以便正常訪問。</p> < /body> </noframes> </frameset>
noscript標簽是成對出現的,以<noscript>開始,以</noscript>結束
示例
<noscript>此頁面無法加載js腳本代碼。</noscript>
表示一個行引用
q標簽是成對出現的,以<q>開始,以</q>結束。
屬性:
Common ― 一般屬性
cite ― 引用內容的URI
q是quoted text的縮寫
示例:
<cite>古人</cite>雲:<q>良言一句三冬暖,惡語傷人六月寒。</q>
不符合標准網頁設計的理念,不贊成使用。
s標簽是成對出現的,以<s>開始,以</s>結束
屬性:
Common ― 一般屬性
s是strikethrough的縮寫
sub標簽是成對出現的,以<sub>開始。以</sub>結束
屬性:
Common ― 一般屬性
sub是subscript的縮寫
sup標簽是成對出現的,以<sup>開始,以</sup>結束
屬性:
Common ― 一般屬性
sup是superscript的縮寫
浏覽器顯示表格時,通常是完全下載表格後,再全部顯示,所以當表格很長時,可以使用tbody分段顯示。
表格的表腳tfoot,可以使用單獨的樣式定義表腳,並且在打印時可以在分頁的下部打印表腳。
th標簽是成對出現的,以<th>開始,</th>結束
屬性:
Common ― 一般屬性
abbr ― 代表表頭的簡寫
axis ― 對單元格在概念上分類
colspan ― 一行跨越多列
headers ― 連接表格的數據與表頭
rowspan ― 一列跨越多行
scope ― 定義行或列的表頭
aPgn ― 代表水平對齊方式(left(左對齊) | center(居中對齊) | right(右對齊) | justify)(此屬性應該使用CSS實現)
vaPgn ― 代表垂直對齊方式(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | basePne(基線對齊))(此屬性應該使用CSS實現)
th是table header cell的縮寫
示例:
<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的數量</th> <th>.cn域名的數量</th> < th>.net域名的數量</th> </tr> <tr> < th>2003年</th> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>
表格的頭部thead,可以使用單獨的樣式定義表頭,並且在打印時可以在分頁的上部打印表頭
l標簽是成對出現的,以<l>開始,以</l>結束
屬性:
Common ― 一般屬性
l是Pne of text的縮寫
示例: <l>一行實實在在的文字!</l>
code標簽是成對出現的,以<code>開始,以</code>結束,常用於顯示源代碼。
如果一個頁面的表單項太多,我們最好把它們分組顯示,就像使用p標簽分開段落一樣,可以使用fieldset與legend標簽對表單內容分組。
fieldset標簽是成對出現的,以<fieldset>開始,以</fieldset>結束
一個表單可以有多個<fieldset>,每對<fieldset>為一組,每組內容的描述可以使用legend標簽說明
示例:
<fieldset> <legend>我最喜愛的:</legend> <label for=”computer”>計算機</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>購物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>