html元素DOCTYPE宣告(文章型宣告)之後,接著定義HTML(XHTML)文件構造的元素。html為最頂層的元素(HTML document root element),包含所有的html文件內容。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" >
<head>~</head>
<body>~</body>
</html>
head元素head元素(document head)記述有關文件的樣式、文字碼、標題、、關鍵字、簡要文、相關文件、樣式表、文稿程式等資訊。
<head >
<title>IT綜合情報網</titile>
<meta name = "author" content = "易理圖"/>
<meta name = "keywords" content = "IT,web,html,css,用語,辭典"/>
</head>
body元素body元素(document head)記述文体內容(document body)。
<body bgcolor = "#FFFFFF" >
<div>
<h1>IT綜合情報網</h1>
<p style = "text-indent:1em;" >網羅國內外IT資訊的網站</p>
</div>
</body>
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| 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視窗的標題列上,也會出現在搜尋引擎搜尋結果的超連結標題上。因此很重要,不允許省略。
<head >
<title>IT綜合情報網</titile>
</head>
meta元素meta元素(generic metainformation)記述文件的製作者、製作年月日、說明、關鍵語(keyword)等的附加資訊。
<!--指定文件的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)
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| 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元素的子元素。
<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 >
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| charset | a、link | 文字碼 | 指定連結對象的文字碼。閱覽網頁者可以正確取得資訊,不會產生亂碼。 例)UTF-8→萬國碼,Big5→繁體中文。 |
| href | a、area、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 | a、area、base、form、link | _blank _self _parent _top 任意Frame名 |
設定顯示連結對象的方法。方法有: _blank→開新視窗 _self→現有視窗 _top→從Frame內連結情形,解除Frame至視窗的頂端 _parent→從Frame內連結情形,解除Frame顯示全體 |
| type | a、link | MIME Type | 設定連結對象的MIME Type,UA端才能正確解析檔案的種類。 |