html元素

DOCTYPE宣告(文章型宣告)之後,接著定義HTML(XHTML)文件構造的元素。html為最頂層的元素(HTML document root element),包含所有的html文件內容。

語法:
<html 屬性 = "屬性值">標籤內容</html>
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
head元素、body元素(必須1組)
屬性:
version屬性*2)、xmlns屬性、通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" >
<head>~</head>
<body>~</body>
</html>
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。 *2)version在DOCTYPE宣告(文章型宣告),因此此屬性無使用的必要。

head元素

head元素(document head)記述有關文件的樣式、文字碼、標題、、關鍵字、簡要文、相關文件、樣式表、文稿程式等資訊。

語法:
<head 屬性 = "屬性值">標籤內容</head>
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1*1)
內含元素:
base、isindex(限T,F )、link、meta、object、script、style、title元素
屬性:
profile屬性*2)通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<head >
<title>IT綜合情報網</titile>
<meta name = "author" content = "易理圖"/>
<meta name = "keywords" content = "IT,web,html,css,用語,辭典"/>
</head>
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。 *2)直接指定profile(定義meta資訊,author, description, keyword 等)的URI。目前很少被使用。

body元素

body元素(document head)記述文体內容(document body)。

語法:
<body屬性 = "屬性值">標籤內容</body>
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
block、script、inline、text元素*2)
屬性:
alinkbackgroundbgcolor、bgproperties、bottommargin、leftmargin、link、marginheight、marginwidth、rightmargin、text、topmargin、vlink屬性*3)通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<body bgcolor = "#FFFFFF" >
<div>
<h1>IT綜合情報網</h1>
<p style = "text-indent:1em;" >網羅國內外IT資訊的網站</p>
</div>
</body>
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。 *2)HTML4.01 strict, XHTML1.0 strict, XHTML1.1的版本,text、inline元素不可以直接在body元素底下,必須包含於block元素內。 *3)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。
屬性 適用元素 屬性值 說明
alink body RGB值
Color Name
設定當滑鼠點選文件內有連結地方後的顏色。W3C非推薦元素,建議使用CSS的虛擬類別選擇器:active取代。
link body RGB值
Color Name
設定當文件內有連結地方尚未被點選時的顏色。W3C非推薦元素,建議使用CSS的虛擬類別選擇器:link取代。
vlink body RGB值
Color Name
設定已經訪問過文件內有連結地方之後的顏色。W3C非推薦元素,建議使用CSS的虛擬類別選擇器:visited取代。
background body URI 設定文件的背景畫像所在位置URI。W3C非推薦元素,建議使用CSS的background-image屬性取代。
bgcolor body RGB值
Color Name
設定文件的背景顏色。W3C非推薦元素,建議使用CSS的background-color屬性取代。background屬性和bgcolor屬性兩者都有設定時,首先先顯示背景顏色,再顯示背景圖像。
text body RGB值
Color Name
設定文件全體的文字顏色。W3C非推薦元素,建議使用CSS的color屬性取代。
bgproperties body 1(fixed)、0 IE獨自功能,設定背景畫像是否固定。"1":固定,"0":不固定。建議使用CSS的background-attachment屬性取代。
topmmargin
bottommargin
leftmmargin
rightmmargin
body 整數(pixels) IE獨自功能,設定網頁上、下、左、右的邊界。建議使用CSS的margin屬性取代。
marginheight
marginwidth
body 整數(pixels) Netscape Navigator 獨自功能,設定網頁上下、左右的邊界。建議使用CSS的margin屬性取代。
例)margin-lef和margin-right都設定為"auto"時,網頁會自動置中。

title元素

title元素(document head)記述文件的標題(document title)。此標題會顯示於window視窗的標題列上,也會出現在搜尋引擎搜尋結果的超連結標題上。因此很重要,不允許省略。

語法:
<title 屬性 = "屬性值">標籤內容</title>
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
text元素
屬性:
通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<head >
<title>IT綜合情報網</titile>
</head>
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。

meta元素

meta元素(generic metainformation)記述文件的製作者、製作年月日、說明、關鍵語(keyword)等的附加資訊。

語法:
<meta 屬性 = "屬性值" / >
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
-
屬性:
content、http-equiv、name、scheme屬性*2)通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<!--指定文件的MIME Type和文字碼-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--提升在搜尋引擎搜尋的曝光率-->
<meta name="keywords" content="HTML,XHTML,reference" />
<!--出現在搜尋引擎搜尋結果的說明文上-->
<meta name="description" content="HTML 用語辭典" />
<!--允取登錄到搜尋引擎並連結到網頁-->
<meta name="ROBOTS" content="ALL">
*2)
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。 *2)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。
屬性 適用元素 屬性值 說明
content meta MIME Type
Text
必要屬性、半形的大小寫有區別。name屬性、http-equiv屬性指定內容的值。
name meta author
description
keywords
ROBOTS
等Text
設定網頁的作者、網頁內容說明、keyword等資訊。
例)<meta name="ROBOTS" content="ALL">
<meta name="ROBOTS" content="NOINDEX,FOLLOW">
搜尋引擎(ROBOTS):
ALL→允許網頁登錄和連結,NONE→不允許網頁登錄和連結
INDEX→只允許網頁登錄,NOINDEX→不允許網頁登錄
FOLLOW→只允許連結,NOFOLLOW→不允許連結
http-equiv meta Content-Type
refresh
pragma
Cache-Control
等Text
HTTP Head的附加資訊。
例)<meta http-equiv="Content-Type" content="text/html; charset=Big5"/>
搜尋引擎在收集網頁資訊、使用者在閱覽網頁時,可以避免產生亂碼。
scheme meta year-month-day
等Text
name、content屬性的屬性值的scheme。
例)<meta name="creation-date" content="05-09-26" scheme="year-month-day"/>
creation-date值"08-09-20"的scheme為year-month-day。

link元素

link元素(media-independent link)顯示目前瀏覽頁面的位置、定義和其他資源的關聯性(link)。Head元素的子元素。

語法:
<link 屬性 = "屬性值" / >
版本:
HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
內含元素:
-
屬性:
charset、href、hreflang、media、rel、rev、target、type屬性、通用屬性(dir、id (限XHTML1.0)、lang、xml:lang)
 
<head >
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
<link rel="prev" href="li.html" title="上一頁">
<link rel="next" href="map.html" title="下一頁">
</head >
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
屬性 適用元素 屬性值 說明
charset a、link 文字碼 指定連結對象的文字碼。閱覽網頁者可以正確取得資訊,不會產生亂碼。
例)UTF-8→萬國碼,Big5→繁體中文。
href aarea、link URI 設定和目前有相關的Resource的URI(Uniform Resource Identifier)。
例)href = "stylesheets/main.css"
hreflang a、link 語言碼 指定連結對象的語言碼。
例)zh-TW→繁體中文,zh→中文,ja→日文,en→英文
media link Media 設定媒體界面種類,來限定可使用的媒體界面。可複數指定,用","區隔。
例)media="screen,tv,projection"
rel a、link Link Type 設定連結對象和目前正閱覽的文件之間的關係。半形的大小寫沒有區別(case-insensitive),可複數指定,用半形空白區隔。
例)rel="prev help"
rev a、link Link Type rel的反向關係。唯有rev可以指定的LinkType為"made","made"表示文件的作者,一般指定作者的E-Mail。
例)<link rev="made" href="ezto@ezto.com.tw">
target aareabaseform、link _blank
_self
_parent
_top
任意Frame名
設定顯示連結對象的方法。方法有:
_blank→開新視窗
_self→現有視窗
_top→從Frame內連結情形,解除Frame至視窗的頂端
_parent→從Frame內連結情形,解除Frame顯示全體
type a、link MIME Type 設定連結對象的MIME Type,UA端才能正確解析檔案的種類。



Copyright(C)2009超技情報開發研究室 All rights reserved.