本文是創(chuàng)建HTML文件的初級讀物。HTML 是 WWW（World Wide Web )中使用的超文本標(biāo)記語言。本指南的目的是介紹如何使用HTML和創(chuàng)建 web 文件。本文中的鏈接指向一些附加的信息。你還可以到你本地的書店查看一下，那里可能會有很多有價值的關(guān)于 Web 和 HTML 的資料。
前 言
術(shù)語
WWW
World Wide Web
Web
World Wide Web
SGML
Standard Generalized Markup Language--標(biāo)準(zhǔn)通用標(biāo)記語言，描述標(biāo)記語言的一個標(biāo)準(zhǔn)
DTD
Document Type Definition--文本類型定義, 這是一個用SGML寫成的標(biāo)記語言的正式說明
HTML
HyperText Markup Language-- 超文本標(biāo)記語言, 它是一個SGML DTD
HTML 是一套獨立于平臺的格式定義( 用標(biāo)記說明 ) , 用來描述World Wide Web 文檔中的各個組成部分. HTML 是Tim Berners-Lee 在 CERN (在日內(nèi)瓦的歐洲粒子物理實驗室) 發(fā)明的.
本文不包括的內(nèi)容
本指南假設(shè)讀者具有以下基礎(chǔ):
知道如何使用 NCSA Mosaic 或者其它的 Web browser
對Web 服務(wù)器和客戶 browsers 有一般的理解
可以訪問 Web 服務(wù)器 (或者你只是想用本地方式創(chuàng)建個人使用的HTML 文檔)
HTML 版本
本指南參考最新的說明--HTML 2.0-- 加上一些已經(jīng)在 browsers 中廣泛實現(xiàn)的附加特性. 以及正在發(fā)展的一些新特性.
HTML 文檔
什么是 HTML 文檔
HTML 文檔是普通文本 ( ASCII) 文件, 它可以用任意編緝器(如UNIX 中的Emacs 或 vi, Macintosh 中的BBEdit, Windows中的Notepad)生成. 你也可以使用字處理軟件, 不過要記住存文件時要存成“帶回車的純文本”。
HTML 編輯器
現(xiàn)在有一些 WYSIWYG 編輯器 (如., 可用在多種平臺的 HotMetal, 或者可用在 Macintosh 機(jī)的 Adobe PageMill ). 在你學(xué)了一些 HTML 標(biāo)記的基本知識之后，你可能希望使用它們. 你會發(fā)現(xiàn)掌握足夠的 HTML 編碼知識對于判斷一個 WYSIWYG 編輯器是否適用是很有益處的
如果你還沒有選定使用哪種軟件, 可以參考本站軟件下載 HTML 編輯器的在線例表 (按應(yīng)用平臺分類) ，幫助你尋找應(yīng)用軟件.
把文件存放到服務(wù)器上
如果你在學(xué)�；蛘邌挝豢梢栽L問 Web 服務(wù)器, 和你的 WEB 管理員webmaster (維護(hù)服務(wù)器的人) 聯(lián)系，看看如何把你的文件存放到 Web 上. 否則，如果在學(xué)�；騿挝徊荒茉L問, 可以看看你的社區(qū)是否有 免費(fèi)網(wǎng)絡(luò)FreeNet, 一種提供免費(fèi) Internet 訪問服務(wù)的基于社區(qū)的網(wǎng)絡(luò). 如果也沒有免費(fèi)網(wǎng)絡(luò), 你可以當(dāng)?shù)氐?Internet 服務(wù)提供者聯(lián)系，他們可以把你的文檔存放到服務(wù)器上，不過要收取費(fèi)用. (你可以在當(dāng)?shù)氐膱蠹埳险业綇V告with your Chamber of Commerce for the names of companies.)
標(biāo)記說明
一個元素 element 是一個文檔結(jié)構(gòu)的基本組成部分. 元素的例子有頭 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你可以這樣理解: 你用 HTML 標(biāo)記為瀏覽器標(biāo)出文件的各個元素 . 元素中可以包含普通文本，其他元素，或二者都有.
在 HTML 文檔中使用tags表示各種元素. HTML 標(biāo)記由一個左尖括號 (<), 一個標(biāo)記名, 和一個右尖括號 (>) 組成. 標(biāo)記通常成對出現(xiàn) (如, <H1> 和 </H1>) 以指出標(biāo)記作用的范圍. 結(jié)束標(biāo)記和起始標(biāo)記相似，只是在括號中的標(biāo)記名中以斜杠 (/) 領(lǐng)頭. HTML 標(biāo)記在下文中列出.
有些元素可能含有一個屬性 attribute, 它是包含在起始標(biāo)記中的附加信息說明. 例如, 通過在圖象文件的 HTML 代碼中包含適當(dāng)?shù)膶傩�，你可以指明一幅圖象的位置 (頂端, 中間, 或底部) . 具有可選屬性的標(biāo)記 如下.
注意: HTML 不區(qū)分大小寫. <title> 等價于 <TITLE> 或 <TiTlE>. 有幾個例外的情況列在下文中的轉(zhuǎn)義序列中.
并非所有的 World Wide Web 瀏覽器都支持所有的標(biāo)記. 如果一個瀏覽器不支持某個標(biāo)記, 它通常只是忽略之.
最小的 HTML 文檔
每個 HTML 文檔應(yīng)該包含一些標(biāo)準(zhǔn) HTML 標(biāo)記. 每個文檔都包含頭 head 和正文 body text 兩部分. 頭中含有標(biāo)題 title, 正文中含有實際構(gòu)成段落，列表和其他元素的文本. 瀏覽器需要具體的信息是因為它們都是根據(jù) HTML 和 SGML 說明編程的.
下面的源文檔舉例說明必須的元素:
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
必須的元素有 <html>, <head>, <title>, 和 <body> 標(biāo)記 (和它們相應(yīng)的結(jié)束標(biāo)記). 由于在每個文件中你都要包括這些標(biāo)記, 你可以創(chuàng)建一個含有這些標(biāo)記的模板文件. ( 有些瀏覽器會自動正確地規(guī)格化你的 HTML 文件，哪怕你沒有包含這些標(biāo)記. 但是有些瀏覽器不會這樣! 因此你要確保包含這些標(biāo)記.)
[page]
一個教學(xué)工具
要看到你的瀏覽器當(dāng)前窗口所顯示信息的原始文件, 可以選擇瀏覽器菜單中的 View Source (或者等價操作) 選項. 文件的內(nèi)容和所有的 HTML 標(biāo)記將顯示在一個新窗口中.
這是學(xué)習(xí)使用 HTML 和掌握技巧和構(gòu)造的一個非常好的方式. 當(dāng)然, 你看的 HTML 不一定在技術(shù)上是正確的. 當(dāng)你熟悉了 HTML 并且看了很多這方面的參考資料，你將能夠區(qū)分 "好的" 和 "不好的" HTML.
記住你可以保存 HTML 編碼的源文件，用做你的 Web 頁的模板，或者把它修改之后用做其他用途.
HTML 標(biāo)記
HTML
該元素指明你的文件包含 HTML-編碼 信息. 文件擴(kuò)展名 .html 也指明該文件是一個 HTML 文檔而且 必須使用. (如果你的系統(tǒng)受 8.3 制文件名的限制 (如., LeeHome.htm）, 可以用 .htm 做擴(kuò)展名.)
HEAD
頭元素 head 是你的 HTML-編碼 文檔中包含標(biāo)題 title 的第一部分. 標(biāo)題是作為你的瀏覽器窗口的一部分來顯示的 (見下文).
TITLE
標(biāo)題 title 元素含有你的文檔標(biāo)題并且作為一種全局上下文識別其內(nèi)容. 標(biāo)題通常顯示在瀏覽器窗口的某個位置 (通常在頂端), 而不是在文本區(qū). 標(biāo)題同時也用于熱點列表 hotlist 或書簽列表 bookmark list 中的顯示, 因此標(biāo)題的選擇因當(dāng)是描述性的, 獨特的, 和相對簡潔的. 標(biāo)題在 WAIS 服務(wù)中還用于搜索服務(wù)器.
例如, 你可能在一章的內(nèi)容中包含一個短小的書本的標(biāo)題: NCSA Mosaic 指南 (Windows): 安裝. 這個標(biāo)題說明了軟件的名稱, 使用平臺, 和本章內(nèi)容, 它比簡單地把該文檔稱為 安裝. 要好得多。一般你的標(biāo)題應(yīng)該不超過 64 個字符.
BODY
HTML 文檔的第二部分，也是最大的部分是正文 body, 它含有你的文檔的內(nèi)容 (顯示在你的瀏覽器窗口文本區(qū)的部分). 下面介紹的標(biāo)記用在 HTML 文檔的正文 body 內(nèi).
標(biāo)題字體Headings
HTML 有六級標(biāo)題字體, 從 1 到 6 編號, 1 號最小. 標(biāo)題字體的顯示比普通文本字體大或者粗. 每個文檔中的第一個標(biāo)題字體應(yīng)該標(biāo)記為 <H1>.
標(biāo)題字體元素的語法為:
<Hy>標(biāo)題字體文本 </Hy>
其中 y 是從 1 到 6 的數(shù)字，指明標(biāo)題字體的等級.
在你的文檔中不要跳躍使用標(biāo)題字體等級. 例如, 不要用一級標(biāo)題 (<H1>) 開始，然后跟隨一個三級標(biāo)題 (<H3>) .
段落Paragraphs
不同于多數(shù)字處理器中的文檔, HTML 文件中的換行是不重要的. 你不用擔(dān)心你的文本中行的長度 ( 當(dāng)然最好不要超過 72 個字符). 在你的源文件中任何地方可以使用換行, 多個空白在你的瀏覽器中被重疊成為一個空白.
在“最小的 HTML 文檔”中給出的例子中第一段的編碼為
<P>Welcome to the world of HTML.
This is the first paragraph.
While short it is
still a paragraph!</P>
源文件中各行之間有換行. Web 瀏覽器忽略這些換行，只有遇到另一個 <p> 標(biāo)記時才開始新段落 <P>
要點: 你必須用 <P> 元素指明段落. 瀏覽器忽略源文件中的任何縮進(jìn)或空行. 如果沒有 <P> 元素, 文檔將被看作一個大段落處理. (一個例外的情況是把文本標(biāo)記為 "preformatted," 下文中將做介紹.) 例如, 下面的內(nèi)容的輸出和第一個 HTML 例子完全相同:
<H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is the
first paragraph. While short it is still a
paragraph! </P> <P>And this is the second paragraph.</P>
為了保持 HTML 文件的可讀性, 標(biāo)題字體應(yīng)該獨占一行, 在開始一個新的部分之前加一到兩行空行，段落之間也用空行隔開( 除了用<P> 標(biāo)記以外). 這些額外的空白在你編輯文件時將會有用 ( 但是你的瀏覽器將忽略這些空白因為它有自己的關(guān)于空白的規(guī)則，不依賴于你源文件中的空白).
注意: 結(jié)束標(biāo)記 </P> 可以省略. 這是因為當(dāng)瀏覽器遇到一個 <P> 標(biāo)記時, 它認(rèn)為前一個段落到此結(jié)束.
使用 <P> 和 </P> 作為段落標(biāo)記使得你可以通過在源文件中使用 ALIGN=alignment 屬性使一個段落居中排列.
<P ALIGN=CENTER>
這是一個居中的段落. [見下面的輸出形式]
</P>
這是一個居中的段落.[page]
列表Lists
HTML 支持不編號 unnumbered, 編號numbered, 和定義definition 三種列表. 你也可以嵌套列表, 但是不要嵌套過多，否則會使讀者感到不清晰。
不編號列表Unnumbered Lists
制作一個不編號的，公告式列表,
用開始標(biāo)記 <UL> ( unnumbered list 的簡記) 開始
輸入 <LI> (list item) 標(biāo)記，后面跟獨立的項; 不需使用 </LI> 標(biāo)記
用 </UL> 標(biāo)記結(jié)束整個列表
下面是一個有三個項的列表:
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
輸出形式為:
apples
bananas
grapefruit
<LI> 項可以含有多個段落. 用段落標(biāo)記 <P> 指明.
編號列表Numbered Lists
編號列表 (也稱為 有序列表ordered list) 和不編號列表相同, 只是用 <OL> 代替 <UL>. 各項同樣用 <LI> 標(biāo)記. 下面的 HTML 代碼:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
產(chǎn)生的輸出為:
oranges
peaches
grapes
定義列表Definition Lists
定義列表 (編碼為 <DL>) 通常含有交替出現(xiàn)的 定義術(shù)語definition term (編碼為 <DT>) 和定義描述definition definition (編碼為 <DD>). Web 瀏覽器通常另起一行顯示定義描述.
下面是一個定義列表的例子:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York.
</DL>
輸出形式為:
NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.
<DT> 和 <DD> 項可以包含多個段落 (用 <P> 標(biāo)記指示), 列表, 或其他的定義信息.
COMPACT 屬性可能會被經(jīng)常使用，如果你的定義術(shù)語很簡短的話. 例如，如果你想顯示一些計算機(jī)選項, 它們可以和定義的開始處于同一行中.
<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows using the
initialization file defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode
</DL>
輸出形式為:
-i
invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
-k
invokes NCSA Mosaic for Microsoft Windows in kiosk mode.
嵌套列表Nested Lists
列表可以嵌套. 在每個列表項中，你還可以含有多個段落，每個段落含有嵌套列表.
[page]
這里是一個嵌套列表的例子:
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
這個嵌套列表的顯示：
A few New England states:
Vermont
New Hampshire
Maine
Two Midwestern states:
Michigan
Indiana
預(yù)排格式文本Preformatted Text
用<PRE> 標(biāo)記 (表示 "preformatted") 可以產(chǎn)生固定寬度的字體. 該標(biāo)記同時使空格，新行，和制表鍵 tabs 有效 (多個空格顯示為多個空格, 源文件中的換行也在瀏覽器中產(chǎn)生換行). 這對于程序清單和其他一些情況是很有用的. 例如, 下面的行:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
顯示為:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
<PRE> 標(biāo)記可以帶一個寬度屬性 WIDTH ，指明一行中最多允許的字符數(shù). WIDTH 同時通知瀏覽器選擇一個合適的字體以及文本的縮排.
在 <PRE> 作用的部分中也可以加超鏈. 但是其他的 HTML 標(biāo)記應(yīng)該避免在 <PRE> 的區(qū)間中使用.
注意，由于<, >, 和 & 在 HTML 文件中有特殊含義, 在你輸入這些字符的時候必須使用它們的轉(zhuǎn)義序列 (分別為<, >, 和 &) . 詳細(xì)內(nèi)容參見轉(zhuǎn)義序列 .
大范圍引用Extended Quotations
使用 <BLOCKQUOTE> 標(biāo)記可以在屏幕上用分離的塊顯示大段的引用. 多數(shù)瀏覽器通常改變引用部分的頁邊界，以和周圍的文本區(qū)分開.
在下面的例子中:
<BLOCKQUOTE>
<P>Omit needless words.</P>
<P>Vigorous writing is concise. A sentence should contain no
unnecessary words, a paragraph no unnecessary sentences, for the
same reason that a drawing should have no unnecessary lines and a
machine no unnecessary parts.</P>
--William Strunk, Jr., 1918
</BLOCKQUOTE>
顯示結(jié)果為:
Omit needless words.
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
--William Strunk, Jr., 1918
[page]
地址Addresses
<ADDRESS> 標(biāo)記通常用于說明文檔的作者, 與作者聯(lián)系的方法 (如, 一個電子郵件地址), 和一個修訂日期. 它一般是一個文件的最后部分.
例如, 本在線指南的最后一行為:
<ADDRESS>
A Beginner's Guide to HTML / NCSA / [email protected] / revised April 96
</ADDRESS>
結(jié)果為:
A Beginner's Guide to HTML / NCSA / [email protected] / revised April 96
注意: <ADDRESS> 不 用于普通郵政地址. 關(guān)于普通郵政地址參見下文的 "強(qiáng)制換行" .
強(qiáng)制換行Forced Line Breaks/郵政地址Postal Addresses
<BR> 標(biāo)記強(qiáng)制產(chǎn)生一個換行，行間沒有間隙. 對于由較短的行組成的文本，如郵政地址， <P> 元素產(chǎn)生的附加空行會使你覺得不必要. 例如, 使用 <BR>:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
輸出為:
National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
水平線Horizontal Rules
<HR> 標(biāo)記產(chǎn)生一個和瀏覽器窗口等寬的水平線. 水平線對于你分割文檔中的各個部分很有用. 例如，很多人在他們的文本結(jié)束和 <address> 信息開始之前加一個水平線.
你可以改變一條線的尺寸 (粗) 和寬度 ( 水平線延伸長度占窗口的百分比). 你可以試著改變設(shè)置，直到對顯示效果滿意. 例如:
<HR SIZE=4 WIDTH="50%">
顯示為:
--------------------------------------------------------------------------------
字符格式
HTML 有針對單個字符或句子的兩種風(fēng)格: 邏輯風(fēng)格和物理風(fēng)格logical and physical. 邏輯風(fēng)格Logical styles 根據(jù)文本的內(nèi)容進(jìn)行標(biāo)記, 而物理風(fēng)格 physical styles 指明一個部分的顯示效果. 例如, 在前面的句子中, "logical styles" 這個單詞標(biāo)記為一個 "定義definition." 同樣的效果 (斜體) 可以通過其他的標(biāo)記告訴你的瀏覽器 "把這些字變成斜體" 來實現(xiàn)。
注意： 有些瀏覽器對 <DFN> 標(biāo)記不做任何風(fēng)格解釋, 因此你可能沒有發(fā)現(xiàn)前面段落中的單詞顯示成斜體。
邏輯風(fēng)格和物理風(fēng)格Logical Versus Physical Styles
如果物理風(fēng)格和邏輯風(fēng)格能夠產(chǎn)生相同的效果, 為什么不和而為一呢?
在理想的 SGML 概念中, 內(nèi)容和它的顯示是分開的. 因此 SGML 標(biāo)記一個一級標(biāo)題字體為一級標(biāo)題字體, 但是并不指明一級標(biāo)題字體應(yīng)該顯示多大, 例如, 24點粗體 加倍集中24-point bold Times centered. 這種處理的好處（類似于很多字處理軟件的 style sheets ) 是，如果你決定把一級標(biāo)記字體改為 20-point left-justified Helvetica, 你只需要改變你的瀏覽器中一級標(biāo)題字體的定義就可以了. 今天確實有很多瀏覽器允許你按你的希望定義多種 HTML 標(biāo)記在屏幕上的實際效果.
邏輯標(biāo)簽的另一個優(yōu)點在于它們有助于在你的文檔中保持一致性. 標(biāo)記 <H1> 比 24-point bold Times center 或其它描述要好記得多. 例如, 對 <STRONG> 標(biāo)記. 多數(shù)瀏覽器用粗體解釋. 但是, 某個讀者可能喜歡把這部分顯示為紅色. 邏輯風(fēng)格提供了這種靈活性.
當(dāng)然, 假設(shè)如果你想用斜體顯示一些內(nèi)容而不想受瀏覽器的設(shè)置的影響, 你就需要使用物理風(fēng)格 . 因此，物理風(fēng)格提供一種另一種一致性：在你的文檔中用某種方式顯示的內(nèi)容在別的地方也會以同樣的方式顯示.
你應(yīng)該固定地使用某一種風(fēng)格. 如果你用物理風(fēng)格標(biāo)記, 則在一篇文檔中全都使用物理風(fēng)格. 如果你使用邏輯風(fēng)格, 則在文檔中堅持使用邏輯風(fēng)格. 記住，將來的 HTML 可能不再支持物理風(fēng)格, 這意味著瀏覽器將不解釋物理風(fēng)格的編碼.
[page]
邏輯風(fēng)格Logical Styles
<DFN>
用于被定義的單詞. 一般用斜體顯示. (NCSA Mosaic is a World Wide Web browser.)
<EM>
用于強(qiáng)調(diào). 通常用斜體顯示. (Consultants cannot reset your password unless you call the help line.)
<CITE>
用于書籍的標(biāo)題, 等. 通常斜體顯示. (A Beginner's Guide to HTML)
<CODE>
用于計算機(jī)編碼. 用固定寬度字體顯示. (The <stdio.h> header file)
<KBD>
用于用戶鍵盤輸入. 通常用無格式固定寬度字體顯示. (Enter passwd to change your password.)
<SAMP>
用于字母序列. 用固定寬度字體顯示. (Segmentation fault: Core dumped.)
<STRONG>
用于著重強(qiáng)調(diào). 通常用粗體顯示. (NOTE: Always check your links.)
<VAR>
用于變量, 你將用確定的信息代替這個變量. 通常用斜體顯示. (rm filename deletes the file.)
物理風(fēng)格標(biāo)記
<B>
粗體文本
<I>
斜體文本
<TT>
打字機(jī)文本typewriter text, 如固定寬度文本.
轉(zhuǎn)義序列Escape Sequences (a.k.a. Character Entities)
字符有兩種功能:
轉(zhuǎn)義特殊字符
顯示普通 ASCII 字符集中不包含的字符 ( 帶有可區(qū)別標(biāo)記的基本字符)
有三個 ASCII 字符--左尖括號(<), 右尖括號 (>), 和ampersand (&)--在 HTML 中有特殊含義，因此不能按照原樣用在文本中. (尖括號用于指示 HTML 標(biāo)記的開始和結(jié)束, ampersand 用于指示一個轉(zhuǎn)義序列的開始.) 雙引號可以原樣使用，但是也可以使用字符實體(").
如果在 HTML 文檔中使用上述三個字符, you must enter its escape sequence instead:
<
< 的轉(zhuǎn)義序列;
>
> 的轉(zhuǎn)義序列;
&
& 的轉(zhuǎn)義序列;
其它的轉(zhuǎn)義序列支持重讀字符, 如:
ö
帶元音變音的小寫字母 o : *
ñ
小寫字母n 帶 tilde: *
È
大寫字母 E 帶低重音（ grave accent）: *
你可以用其它字母替代上面的 o, n, 和 E. 參考特殊字符清單.
注意: 轉(zhuǎn)義序列是區(qū)分大小寫的，這一點不同于 HTML 的其它部分。例如，你不能用 < 代替 <.
鏈接 Linking
HTML 的主要長處在于它能夠鏈接文本和/或圖象到另一個文檔或者文檔的一部分中. 瀏覽器用顏色和/或下劃線突出指定的文本或圖象，以說明它是一個超文本鏈接hypertext link (通常簡寫為 hyperlink 或 link).
HTML 的單個與超文本鏈接有關(guān)的標(biāo)記為 <A>, 表示 anchor. 在文檔中包含 anchor:
用 <A 開始一個 anchor ( A 后面要留一個空白)
指明你要連接的文檔：HREF="filename" ，后面?zhèn)�跟一個右尖括號 (>)
輸入在當(dāng)前文檔中作為超鏈文本的部分
輸入 anchor 結(jié)束標(biāo)記: </A> ( anchor 結(jié)束標(biāo)記之前不需空白 )
以下是一個含有超文本鏈接到 US.html: 的例子
<A HREF="MaineStats.html">Maine</A>
上面的例子中，單詞 Maine 被作為指向文檔 MaineStats.html的超鏈，它和第一個文檔在同一個目錄下.
相對路徑名和絕對路徑名
你可以通過和當(dāng)前文檔的相對路徑relative path指明鏈接到其它目錄的文檔. 例如, 到 AtlanticStatesa 子目錄的文件 NYStats.html 的鏈接為:
<A HREF="AtlanticStates/NYStats.html">New York</A>
它們之所以被稱為 相對路徑鏈接 是因為你指定到連接文件的路徑是相對于當(dāng)前文件的位置而言的. 你也可以使用文件的絕對路徑 (完整的 URL), 但是相對路徑在訪問一個服務(wù)器時效率更高.
路徑名使用標(biāo)準(zhǔn) UNIX 格式. 在 UNIX 格式中，父目錄(包含當(dāng)前目錄的目錄) 表示為 "..". (更詳盡的信息請參考 UNIX 入門參考手冊如 Learning the UNIX Operating System from O'Reilly and Associates, Inc.)
假設(shè)你在 NYStats.html 文件中，想要參考原始文檔 US.html, 你的鏈接如下:
<A HREF="../US.html">United States</A>
一般地, 你應(yīng)該使用相對鏈接，因為:
移動一組文件到另一個位置會比較容易(因為相對路徑名依然有效)
和服務(wù)器的連接更有效率
需要鍵入的信息更少
但是，如果指向的文檔和當(dāng)前文檔沒有直接聯(lián)系，就需要絕對路徑名. 例如, 考慮構(gòu)成一個用戶手冊的一組文檔. 這組文檔內(nèi)部的鏈接應(yīng)該采用相對鏈接. 而到其它文檔的鏈接 ( 可能指向一個相關(guān)的軟件) 應(yīng)該用絕對鏈接. 這樣，當(dāng)你把用戶手冊移到一個新目錄下時，所有的鏈接都不必改變.
[page]
URLs
World Wide Web 使用標(biāo)準(zhǔn)資源定位 Uniform Resource Locators (URLs) 指明其它服務(wù)器中的文件. 一個 URL 包括訪問資源的類型(例如, Web, gopher, WAIS), 服務(wù)器的地址, 和文件的位置. 語法格式為:
scheme://host.domain [:port]/path/ filename
其中 scheme 是以下的一個
file
本地系統(tǒng)的一個文件
ftp
匿名FTP 服務(wù)器中的文件
http
World Wide Web 服務(wù)器中的文件
gopher
Gopher 服務(wù)器中的文件
WAIS
WAIS 服務(wù)器中的文件
news
Usenet 的一個新聞組newsgroup
telnet
到一個基于Telnet 的服務(wù)的連接
端口port 號通�？梢允÷�. (除非對方告訴你使用它，否則忽略它)
例如，在你的文檔中鏈接本指南:
<A >
NCSA's Beginner's Guide to HTML</A>
它將文本 NCSA's Beginner's Guide to HTML 標(biāo)記為一個超鏈，連到當(dāng)前文檔中 .
到指定部分的鏈接
錨鏈也可以用于引導(dǎo)讀者到一篇文檔（可以是當(dāng)前文檔或其他文檔）中的 特定區(qū)域，而不一定到缺省的頂端位置. 這種類型的錨鏈通常稱為一個 命名錨鏈named anchor ，因為創(chuàng)建鏈接時, 你需要在文檔中插入 HTML 名字.
本指南是在同一篇文檔中使用命名錨鏈的很好的例子. 它作成一篇文檔以便于打印. 但是當(dāng)你只是想了解關(guān)于HTML 的一部分信息時，在這樣一篇（長）文檔中瀏覽是比較費(fèi)時的. 內(nèi)部的超鏈用于在文檔開始創(chuàng)建一個"內(nèi)容索引table of contents". 這些超鏈?zhǔn)鼓憧梢詮奈臋n中的一個位置移到另一個位置。(到本文的頂端點擊內(nèi)容索引中 到指定部分的鏈接. 你就會返回這里.)
你還可以鏈接到另一篇文檔中的指定部分. 首先提這一點是因為這會有助于幫助你理解一篇文檔內(nèi)部的鏈接.
不同文檔中指定部分之間的鏈接
假設(shè)你想從文檔A (documentA.html) 中建立一條到另一篇文檔(MaineStats.html)中的一個指定部分的鏈接.
輸入HTML編碼指向一個命名鏈接:
documentA.html:
In addition to the many state parks, Maine is also home to
<a href="MaineStats.html#ANP">Acadia National Park</a>.
井號（＃）后面的字符串可以看作文件MaineStats.html 中的一個標(biāo)簽. 這個標(biāo)簽說明了當(dāng)該鏈接被激活時瀏覽器從什么地方開始顯示. 在上例中，顯示的第一行將是 Acadia National Park heading.
第二步, 在MaineStats.html中創(chuàng)建 命名錨鏈 (本例中為 "ANP")
<H2><A NAME="ANP">Acadia National Park</a></H2>
這些元素都作好以后，你就可以讓讀者直接找到MaineStats.html中Acadia 的參考信息了.
注意: 要想鏈接到另一篇文檔中的指定位置，你需要對那篇文檔具有寫權(quán)限，或者那篇文檔中已經(jīng)含有文檔內(nèi)部的命名錨鏈. 例如，你可以在你所寫的文檔中包含指向本指南的錨鏈，因為本文中已經(jīng)含有命名錨鏈 (使用瀏覽器中的 View Source 看一看編碼). 但是如果本文檔 沒有命名錨鏈, 你就不能制作到特定位置的鏈接，因為你不能編輯NCSA服務(wù)器中的原始文件.
指向當(dāng)前文檔內(nèi)指定部分的鏈接
語法和前文相同，只是文件名 省略.
例如, 要從 MaineStats中鏈接到 ANP :
...More information about <A HREF="#ANP">Acadia National Park</a>
is available elsewhere in this document.
注意確保你的文檔中在鏈接指向的部分包含 <A NAME=> 標(biāo)記(<H2><A NAME="ANP">Acadia National Park</a></H2>).
當(dāng)你認(rèn)為讀者可能需要打印全部文檔，或者在一個文件中有很多短信息需要在線說明的情況下非常有用.
郵件發(fā)送Mailto
在超鏈中包含mailto屬性，可以方便讀者給某個人或別名發(fā)送電子郵件. 格式為:
<A HREF="mailto:emailinfo@host">Name</a>
例如, 輸入:
<A HREF="mailto:[email protected]">NCSA Publications Group</a>
可以創(chuàng)建一個已經(jīng)配置好的發(fā)往 BUPT Publications Group的郵件窗口. (你當(dāng)然應(yīng)該換用另一個地址!)
[page]
嵌入行中的圖象
多數(shù) Web 瀏覽器可以顯示嵌入行中的X 位圖(XBM), GIF, 或 JPEG 格式的圖象(即和文本想鄰的圖象) . 其他格式的圖象正在合并到Web 瀏覽器中[如, Portable Network Graphic (PNG) 格式]. 每個圖象都花費(fèi)處理時間并降低文檔顯示的速度. 仔細(xì)選擇你的文檔中的圖象和圖象的個數(shù).
包含一個嵌入行中的圖象, 輸入:
<IMG SRC=圖象名>
ALT="FORWARD" HEIGHT=32 WIDTH=32>
其中 圖象名 是圖象文件的URL .
<IMG SRC> URLs 的語法格式和錨鏈HREF使用的格式相同. 如果圖象文件是GIF 文件, 則圖象名中的文件名部分必須以.gif結(jié)束. X 位圖格式的文件必須以.xbm結(jié)尾; JPEG 圖象文件必須以.jpg或 .jpeg結(jié)束; Portable Network Graphic 文件必須以.png結(jié)束.
圖象大小屬性
在<IMG> 標(biāo)記中你應(yīng)該包含其它兩個屬性，用于通知瀏覽器正在和文本一起下載的圖象的大小. HEIGHT 和 WIDTH 屬性使瀏覽器在下載文件其它部分的時候為圖象留出適當(dāng)?shù)目臻g（象素）. (從你的圖象處理軟件如Adobe Photoshop中可以得到象素大小.)
例如, 要在文件中包含一幅自己的肖像, 輸入:
<IMG src="http://www.3lian.com/edu/Files/newspic/2/059408224239045.gif" HEIGHT=100 WIDTH=65>
ALT="FORWARD" HEIGHT=32 WIDTH=32>
注意: 當(dāng)圖象大小與屬性描述大小不一致時，有些瀏覽器使用 HEIGHT 和 WIDTH屬性來擴(kuò)大或縮小一幅圖象以使它適用于分配的空間. 并非所有的瀏覽器開發(fā)者都贊同放大／縮小圖象. 因此，在安排時不要假設(shè)你的讀者都可以使用這種特性. 最好查看一下圖象大小，使用正確的尺寸.
圖象定位
對于圖象的顯示你具有一定的靈活性. 你可以讓圖象和文本分開，把圖象放在左邊，右邊，或者中間. 或者你可以讓圖象和文本在同一行。你可以嘗試多種形式，看一看哪種最好
使圖象和文本在同一行
缺省情況下圖象的底部和隨后的文本在同一行顯示，就象現(xiàn)在的這段. 你也可以通過把ALIGN= 屬性的值設(shè)為 TOP 或 CENTER，把圖象放到一段的頂端或中間。
這段文本與圖象的頂端在同一行(<IMG SRC = "BarHotlist.gif" ALIGN=TOP>). 注意只有一行文本如此，其他行跳到圖象的底部顯示.
這一行文本顯示在圖象中間(<IMG SRC = "BarHotlist.gif" ALIGN=CENTER>). 同樣，只有一行顯示在中間，其他行在圖象的下面.
不帶文本的圖象
如果要顯示一幅不帶文本的圖象(例如，你的組織的徽標(biāo)), 只要把它作為單獨的一段即可. 使用段落標(biāo)記的 ALIGN=屬性把圖象調(diào)整到窗口的中間或右邊，如下所示:
<p ALIGN=CENTER>
<IMG SRC = "BarHotlist.gif">
</p>
結(jié)果為:
圖象顯示在中間; 本段從它下面靠左開始.
圖象的替換文本
一些 World Wide Web 瀏覽器--主要是那些在 VT100 終端上運(yùn)行的瀏覽器--不能顯示圖象. 有些用戶會關(guān)掉圖象下載功能，就算他們的軟件可以顯示圖象(特別是如果他們是 modem 或低速線路的用戶). HTML 提供一種機(jī)制使得讀者知道他們看到的頁面上缺少了什么.
ALT 屬性使你可以指定一段可以替代圖象來顯示的文本. 例如:
<IMG src="http://www.3lian.com/edu/Files/newspic/2/059408224237966.gif" ALT="Up">
ALT="" HEIGHT=48 WIDTH=50>
其中 UpArrow.gif 是一個向上的箭頭.在具有圖象顯示功能并且圖象下載打開的瀏覽器中，你可以看到一個上箭頭的圖形。在VT100 瀏覽器中或者圖象下載關(guān)閉的情況下, 你的窗口中將顯示 Up 這個單詞.
你應(yīng)該對出現(xiàn)在你的文檔中的每個圖象都使用一個替換文本, 這是一種對讀者的禮貌.
背景圖象
新版本的 Web 瀏覽器可以下載一幅圖象用做顯示一個主頁時的背景. 有些人喜歡使用背景，有些人不喜歡. 通常，如果你想包含一個背景, 你要確保你的文本在背景上依然可以被很清晰地閱讀.
背景圖象可以是一個物體的組織 (例如亞麻布紙張)或圖象 (可能是一個徽標(biāo)). 你可以象生成其他任何圖象一樣來生成背景圖象。
不過你只需要制作一個很小的圖象. 瀏覽器會使用一種稱之為“蓋瓦”tiling的特性重復(fù)顯示這個圖象，填滿整個瀏覽器窗口。簡單地說，你只要生成一幅圖象，瀏覽器會自動重復(fù)多次，直到填滿你的窗口。當(dāng)你使用下面說明的標(biāo)記時，這個動作會自動執(zhí)行.
包含背景圖象的標(biāo)記包含在 <BODY> 標(biāo)記描述中作為一個屬性:
<BODY BACKGROUND="filename.gif">
背景顏色
缺省情況下瀏覽器使用灰底黑字顯示文本. 但是, 你可以改變它們. 一些 HTML 作者選擇一個背景顏色，配以文本顏色的相應(yīng)改變.
對于這種改變一定要預(yù)先看一看，是否還易于閱讀. (例如, 不少人用黑底紅字，非常難以閱讀!)
使用<BODY>標(biāo)記的多種屬性，你可以改變文本，鏈接，看過的鏈接和活動鏈接的顏色. 例如, 輸入:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
將創(chuàng)建一個窗口，背景為黑色 (BGCOLOR), 文本為白色 (TEXT), 超鏈為銀色 (LINK).
六位的數(shù)字和字母的組合代表顏色，它給出某種顏色的 RGB (紅red, 綠green, 藍(lán)blue)的值. 這個六位數(shù)字實際上是三個順序排列的兩位數(shù), 代表從00到FF的紅，綠，藍(lán)比重的十六進(jìn)制值。例如, 000000 表示黑色(沒有任何顏色), FF0000 是亮紅, FFFFFF 是白色 (所有三種顏色全部飽和). 這些數(shù)字和字母的組合的含義是模糊的. 幸運(yùn)的是有一個在線資源可以幫助你了解各種組合與顏色的對應(yīng)關(guān)系:
ColorPro Web server
外部圖象，聲音，和動畫
你可能希望當(dāng)用戶激活你的文檔中一個單詞或小的圖象作成的鏈接時，把一幅圖象作為單獨的文檔打開. 這種情況稱為一個外部圖象, 當(dāng)你不想由于大的圖象而降低主文檔的下載速度時，它是很有用的.
要包含一個外部圖象的鏈接, 輸入:
<A HREF="MyImage.gif">link anchor</A>
你也可以用一個小的圖象作為到大圖象的鏈接. 輸入:
<A HREF="LargerImage.gif"><IMG src="http://www.3lian.com/edu/Files/newspic/2/05940822422768.gif"></A>
ALT="" HEIGHT=48 WIDTH=50>
讀者看到圖象 SmallImage.gif ，點擊它就可以打開文件 LargerImage.gif .
使用同樣的語法鏈接外部動畫和聲音. 唯一的不同在于鏈接文件的擴(kuò)展名. 例如,
<A HREF="AdamsRib.mov">link anchor</A>
[page]
指明一個到QuickTime 電影的鏈接. 一些通常的文件類型和其擴(kuò)展名為:
文件類型 擴(kuò)展名
純文本plain text .txt
HTML 文檔 .html
GIF 圖象 .gif
TIFF 圖象 .tiff
X 位圖圖象 .xbm
JPEG 圖象 .jpg 或 .jpeg
PostScript 文件 .ps
AIFF 聲音文件 .aiff
AU 聲音文件 .au
WAV 聲音文件 .wav
QuickTime 電影 .mov
MPEG 電影 .mpeg 或 .mpg
記住你假設(shè)的讀者和他們使用的軟件. 例如，多數(shù)UNIX 工作站不能播放QuickTime 電影
