HTML詳細(xì)教程

1、第一節(jié) HTML 文檔的基本結(jié)構(gòu)及編輯運(yùn)算HTML用途    超文本標(biāo)記語言HTML是Web的通用語言，是創(chuàng)建Web頁和發(fā)布Web信息的格式，是Web設(shè)計(jì)的基礎(chǔ)，是控制Web瀏覽器在屏幕上顯示內(nèi)容的核心技術(shù)。HTML產(chǎn)生    十九世紀(jì)七十年代，美國(guó)哈佛大學(xué)的學(xué)生Ted.Nelson提出了一個(gè)極富有創(chuàng)造性的幻想：全球?qū)⒔⒁粋€(gè)信息網(wǎng)，在這個(gè)信息網(wǎng)上用戶可以任意地選擇其所需訪問的信息資源，而不需要關(guān)心這些信息量的來源。為此他還創(chuàng)造了一個(gè)術(shù)語超文本。超文本具的極強(qiáng)交互能力。用戶只需指點(diǎn)文本中的字或詞組，便可激發(fā)與其語意相關(guān)的新的信息流。因

2、為在超文本中的許多字或詞都具有一個(gè)鏈，將其指向另一個(gè)文本，而之后仍有鏈接指向下一個(gè)文本。這樣只憑借詞義或語意的關(guān)系即可供人們?nèi)我鉃g覽。    這是一個(gè)邁向新技術(shù)挑戰(zhàn)的幻想，是人類向信息社會(huì)邁進(jìn)時(shí)夢(mèng)寐以求的目標(biāo)。當(dāng)年的幻想隨著世界計(jì)算機(jī)技術(shù)的飛速發(fā)展，如今已成為現(xiàn)實(shí)。    HTML是1986年制定的國(guó)際標(biāo)準(zhǔn)ISO8879-Standard Generalized Markup Language(SGML)的一種應(yīng)用。SGML是一種工業(yè)技術(shù)中應(yīng)用的標(biāo)記語言的標(biāo)準(zhǔn)，它由三個(gè)部分組成：說明、程序和實(shí)例。其序言是一種文檔類型定義（DTD），它

3、定義了一種語法。HTML即是SGML的一種語法定義。HTML近似于SGML的一個(gè)簡(jiǎn)化的專業(yè)版，但是它提供的信息鏈接特性使其成為有別于SGML的一種著名計(jì)算機(jī)語言。    HTML繼早先發(fā)表的0.9版、1.0版和2.0版后，于1995年3月發(fā)表了3.0版（HTML Specification Version3.0）的草案，即未正式發(fā)表的版本。值得一提的是1.0版、2.0版或3.0并不是指這種語言的軟件產(chǎn)品的版本，而是指HTML的語法規(guī)定的版本。它被子稱為Internet工程任務(wù)實(shí)施方案（Draft the Internet Engineering Task Forc

4、e）。它由Internet工程任務(wù)實(shí)施（IETF）的HTML工作組在“”中發(fā)布。HTML目的    最初設(shè)計(jì)HTML語言的目的是使科學(xué)家們可以創(chuàng)建包含基本格式化命令（即標(biāo)記）和其他信息鏈接（稱作超文本或超鏈接）的基于文本的文檔。例如，一個(gè)有關(guān)地震的文檔可以包含一個(gè)到其他科學(xué)家撰寫的有關(guān)板塊構(gòu)造理論的文檔的鏈接。    HTML用于編制可以在不同的平臺(tái)上實(shí)施鏈接的超文本文件。HTML的標(biāo)記可以表達(dá)超文本的新聞、郵件、文檔及超媒體包含在線的圖形、視像的信息體。    在這一

5、節(jié)中將介紹HTML是如何實(shí)現(xiàn)超文本的鏈接，HTML文檔的基本組成以及支持HTML文檔的傳輸協(xié)議HTTP。它們是HTML的基礎(chǔ)，又是一些容易混淆的抽象概念。一、超文本鏈接的相關(guān)概念 1超鏈接（Hyperlink）    超文本的鏈接稱為超鏈接。在HTML中將超鏈接定義為兩個(gè)錨標(biāo)（anchor）之間的聯(lián)系。錨標(biāo)是信息存儲(chǔ)的地點(diǎn)。形成超鏈接的兩個(gè)地點(diǎn)必然是從源點(diǎn)（source）指向目標(biāo)（destination）。若用一個(gè)箭頭來描述一個(gè)超鏈接關(guān)系，則出發(fā)的源點(diǎn)是箭頭的尾（tail），到達(dá)的目的地是箭頭的頭（head）。在實(shí)際應(yīng)用中，用鼠標(biāo)點(diǎn)擊屏幕上的超文本之處即是超鏈接的

6、源點(diǎn)或尾，由該鏈接所調(diào)出的文檔所在地點(diǎn)即是超鏈接的目標(biāo)或頭。2統(tǒng)一資源定位器    超鏈接的目標(biāo)地點(diǎn)的描述采用統(tǒng)一資源定位的方法。在超文本中任何一個(gè)目標(biāo)地點(diǎn)都有一個(gè)統(tǒng)一資源定位器（URL，Uniform Resoure Location）。它確定了網(wǎng)絡(luò)中任何一個(gè)文檔的所在地點(diǎn)。URL由三個(gè)部分組成，例如學(xué)院主頁的URL為：            http:定義了服務(wù)器的訪問方法，亦即是訪問協(xié)議的名稱。http-超文本傳輸協(xié)議（后面介紹）。  &#

7、160; / ：定義了服務(wù)器地址，或稱主機(jī)名（hostname）。    / ：定義了文件在服務(wù)器中的路徑和文件名稱。    上述的表達(dá)必須符合Internet中資源描述的統(tǒng)一規(guī)定，因而都冠以“統(tǒng)一資源”的稱呼。3超文本傳輸協(xié)議和HTTP服務(wù)器    支持超鏈接的協(xié)議就是超文本傳輸協(xié)議HTTP。    超文本傳輸協(xié)議的作用是通過HTML文檔和支持HTML的瀏覽器來實(shí)現(xiàn)的。換句話說，在Wold Wide Web上用瀏覽器來瀏覽超文本文檔時(shí)所依靠和遵循的規(guī)則就是HTTP協(xié)議。&#

8、160;   存放HTML文檔的服務(wù)器稱為HTTP服務(wù)器或Web服務(wù)器。在HTML文檔中用“http:/”表示一個(gè)HTTP服務(wù)器的地址。    支持HTTP協(xié)議的瀏覽器稱為Web瀏覽器。通常Web瀏覽器也支持其他的文件傳輸協(xié)議如FTP等。4HTTP服務(wù)器的頁（page）和主頁（Homepage）    由于HTML文檔均是用于瀏覽的，瀏覽中出現(xiàn)的都是頁面，因此常把HTML文檔編輯稱為頁面編輯，把服務(wù)器中不同的HTML文檔稱為不同的頁。通常在每個(gè)服務(wù)器的根目錄中都可以放置一個(gè)缺省的文檔，類似于DOS中的自動(dòng)批處理文件

9、autoexec.bat。   系統(tǒng)支持的HTTP服務(wù)器中它的名字為index.html，其它系統(tǒng)支持的服務(wù)器中的名字為 welcome.htm。    在HTML中超鏈接的統(tǒng)一資源定位即是對(duì)HTTP服務(wù)器的尋址。當(dāng)一個(gè)超鏈接僅給出服務(wù)器地址時(shí)同即能自動(dòng)顯示這個(gè)缺省文件。這個(gè)特殊的文檔就稱為主頁或起始頁（Homepage）。用戶可通過這個(gè)主頁所提供的超鏈接十分方便地瀏覽該服務(wù)器中的其他相關(guān)文檔。二、標(biāo)記基礎(chǔ)知識(shí) 1標(biāo)記（Markup）    標(biāo)記是HTML文檔的基本特征。在HTML的文檔中，字符和數(shù)據(jù)的語

10、法結(jié)構(gòu)是通過標(biāo)記來表達(dá)的。因此標(biāo)記是HTML語言的標(biāo)簽符號(hào)和用標(biāo)簽符號(hào)構(gòu)成的各種元素的統(tǒng)稱。2標(biāo)簽（tag）    標(biāo)簽是描述性的標(biāo)記，用一對(duì)< >符號(hào)中間包含若干字符來表示。標(biāo)簽通常是配對(duì)使用的，前一個(gè)是開始標(biāo)簽（start-tag），后一個(gè)是結(jié)束標(biāo)簽（end-tag）。結(jié)束標(biāo)簽的符號(hào)內(nèi)第一個(gè)字符是“/”。還有一種標(biāo)簽是不配對(duì)使用的，像是僅用了一個(gè)開始標(biāo)簽，稱為空標(biāo)簽。3元素（element）    元素是HTM文檔中的組成部分，相當(dāng)于程序中的語句。各種元素都應(yīng)符合文檔類型定義（DTD）的規(guī)定。例如：HTML中有頭（he

11、ad），標(biāo)題（title），列表（list），等各種類型的元素。一個(gè)HTML文檔就是由不同類型元素組成的有序結(jié)構(gòu)。    元素的表示通常是一個(gè)開始標(biāo)簽，標(biāo)簽內(nèi)表明元素名。開始標(biāo)簽后跟著元素內(nèi)容的字符串 ，字符串后面是結(jié)束標(biāo)簽。    一對(duì)標(biāo)簽用來界定一個(gè)元素?？諛?biāo)簽亦界定一個(gè)元素。例如：    <h1>This is a Heading</h1> (用一對(duì)標(biāo)簽來界定一個(gè)元素。)    <p>This is a paragrph. (用一個(gè)空

12、標(biāo)簽界定一個(gè)元素。)    元素是可以嵌套的。例如：    <head><title>An Example of Nested Element</title></head>    元素的具體表達(dá)方法體現(xiàn)了HTML的語法規(guī)定。（有關(guān)元素在實(shí)際應(yīng)用中表達(dá)的更詳細(xì)的內(nèi)容在后面討論）。三、HTML文檔的基本結(jié)構(gòu)HTML文檔具有最基本的結(jié)構(gòu)框架“頭”和“體”。    HTML文檔均用于在瀏覽器上顯示，而支持HTTP的瀏覽器均為WINDOW

13、S式的圖形用戶接口（GUI）界面，因此HTML文檔的基本結(jié)構(gòu)是依據(jù)這一要求而設(shè)計(jì)確定的。一個(gè)GUI的視窗通常由標(biāo)題欄和窗口體作為其最基本的構(gòu)成。HTML文檔結(jié)構(gòu)的“頭”和“體”正應(yīng)于這一要求。1HTML容器標(biāo)記    HTML文檔的第一個(gè)標(biāo)記<HTML>是HTML的容器標(biāo)記，它向?yàn)g覽器指示，其后的代碼應(yīng)使用由HTML制定的語法和結(jié)構(gòu)規(guī)則來處理。相應(yīng)的結(jié)束標(biāo)記</HTML>出現(xiàn)在文件的結(jié)尾處。    注意：不要把HTML文檔的任何文本放置在這兩個(gè)標(biāo)記的外面，否則其結(jié)果是不可預(yù)見的。2頭標(biāo)記（head）  

14、;   <HEAD>和</HEAD>是一對(duì)頭標(biāo)簽，是標(biāo)記文件頭區(qū)域的分界線（<head>.</head>），s有在瀏覽器的標(biāo)題欄中顯示的文檔標(biāo)題名稱（title）和該文檔有關(guān)的屬性參數(shù)。它是HTML文檔的第一個(gè)部分，是一個(gè)可選項(xiàng)。（盡管HTML規(guī)定一些元素只能在它的內(nèi)部使用。）在文檔頭中能用于瀏覽顯示的元素僅有標(biāo)題（title），其他的元素均不顯示。    TITLE（標(biāo)題）也是一個(gè)可選元素.用一對(duì)標(biāo)簽(<TITLE></TITLE>)標(biāo)記定義了在瀏覽器的標(biāo)題欄中顯示的內(nèi)容

15、。標(biāo)題元素總是嵌套在頭元素中的。    例2.1.1:    <HEAD>    <TITLE> This is an example of HTML HEAD</TITLE>    </HEAD>    <BODY>    Yet another “Hello world”    </BODY> 

16、0;  本例中的“The Example -HEAD”將作為文檔標(biāo)題顯示在瀏覽器的標(biāo)題欄中。3體標(biāo)記（body）     體（BODY）是HTML文檔中的主體，反映在瀏覽器的屏幕的正文區(qū)域，它包含了文檔的內(nèi)容即在網(wǎng)頁上可見的資料。    <BODY>和</BODY>是一對(duì)體標(biāo)簽，用于標(biāo)記（<BODY></BODY>）除了頭以外的其余的文檔內(nèi)容。與頭元素一樣是一個(gè)復(fù)合元素，可在體標(biāo)簽內(nèi)嵌套其他的字符和元素。    如例1.1 中的顯示的正文文本是：&

17、#160;   Yet another “Hello world”    例2.1.2    <BODY>    This is an example of HTML document     <B> This is “bold” text </B><BR> （黑體字）    <I> This is “italic” text.</I> （斜體字）

18、0;   </BODY>4一個(gè)最簡(jiǎn)單的HTML文檔的組成    頭和體結(jié)合就能組成一個(gè)HTML文檔    例2.1.3<HTML> <HEAD><TITLE> This is an example of HTML </TITLE></HEAD><BODY>This is an example of HTML document <B> This is “bold” text </B><BR> （黑體

19、字）<I> This is “italic” text.</I> （斜體字）</BODY></HTML>這個(gè)例子在瀏覽器中顯示的結(jié)果是：This is an example of HTML document This is “bold” text This is “italic” text.四、HTML文檔的編輯和運(yùn)行1HTML文檔的編輯     HTML文檔的編輯十分方便。所有的TEXT文本編輯器都可用來編輯HTML文檔，如DOS的EDIT，WINDOWS中的Notepad(記事本)以及UNIX中的vi等等。

20、60;   HTML文檔以html為擴(kuò)展名。例如：Status.html，Serverinfo.html等等。但在PC的DOS或WINDOWS環(huán)境中由于擴(kuò)展名至多通用三個(gè)字符，因此用htm作擴(kuò)展名。有時(shí)也仍用html作擴(kuò)展名的，但系統(tǒng)實(shí)際只認(rèn)識(shí)三個(gè)字符。2HTML文檔的運(yùn)行     HTML文檔的運(yùn)行是由Web瀏覽器直接用HTTP命令來調(diào)用并解釋執(zhí)行的。    HTML文檔應(yīng)該存放在Web Server中。在Web Server中可設(shè)置Docs/為html文檔的缺省目錄；這樣當(dāng)用戶訪問該Server時(shí)，可以用服務(wù)器

21、的域名來瀏覽其首頁，通過首頁的超級(jí)鏈接來瀏覽其他的文檔。HTML文檔也可放置在Web服務(wù)器的任何目錄中，這樣當(dāng)用戶欲瀏覽該文檔時(shí)必須寫明路徑和文檔名。    例如：    上例中， 是服務(wù)器的名字，student 是目錄 路徑，myfile.html是文件名。在Web瀏覽器中用上述命令即能運(yùn)行WWW服務(wù)器中的myfile.html的文檔。習(xí)題：1. 用HTML編寫符合如下要求的文檔：標(biāo)題為“My File”，窗口內(nèi)顯示“This is my document.” 2. 將上題文檔存入磁盤，并用Web瀏覽器調(diào)閱該文檔，寫出可能使用的調(diào)閱

22、命令. 第二節(jié) HTML的語法基礎(chǔ)、文檔格式 一、HTML語句的語法     1. 標(biāo)簽（TAG）     標(biāo)簽的作用是指出文檔是如何組織的。一個(gè)標(biāo)簽以“”開始，以“”結(jié)束。元素名位于大于號(hào)和小于號(hào)這間，元素名不區(qū)分大小寫。例如HTML，hTML，html是同一標(biāo)簽。    標(biāo)簽一般應(yīng)開始標(biāo)簽和結(jié)束標(biāo)簽成對(duì)使用，在開始標(biāo)簽中，小于號(hào)“”和元素之間不能留有空格。    2. 屬性（ATTRIBUTES）     屬性是為標(biāo)簽實(shí)現(xiàn)某種功能而

23、提供的一些具體的參數(shù)。屬性由屬性名和屬性值組成。屬性名由HTML規(guī)定的專用名詞來表達(dá)，屬性值按情況不同，可以是HTML規(guī)定選項(xiàng)中的某一個(gè)或者是HTML文檔設(shè)計(jì)者輸入的信息。當(dāng)屬性值為輸入的信息時(shí)，通常在輸入信息的前后加上雙引號(hào)。    HTML規(guī)定，屬性定在開始標(biāo)簽中元素名和“”符號(hào)之間。    例2.2.1    <IMG SRC=“center.gif”>    其中<IMG> 是顯示圖像文件的標(biāo)簽，它單獨(dú)使用，稱為“空標(biāo)簽”；IMG為元素名；SR

24、C為屬性名，它用來指出圖像的源文件位置；屬性值“center.gif”是輸入的圖像源文件名。    例2.2.2    <P ALIGN=left>a paragraph</p>    其中<P>是開始標(biāo)簽，</P>是結(jié)束標(biāo)簽，它們是分段標(biāo)簽；P是元素名；ALIGN是屬性名，它用來指出a paragraph這一段文字在屏幕中的位置；HTML規(guī)定ALGN的屬性值是left，center或者right中的一個(gè)。    3. 字符規(guī)定

25、     HTML說明書中規(guī)定HTML文檔的字符是ISO-8859-1標(biāo)準(zhǔn)所定義的8位單字節(jié)編碼的圖形字符集，也稱為L(zhǎng)atin Alphabet NO.1或Latin-1。這是一個(gè)256個(gè)字符的字符集，其中包括了很多圖形元素及除英語處在歐洲應(yīng)用最多的各種語言中的加重音的字符。ISO-8859-1標(biāo)準(zhǔn)圖形字符集的前128個(gè)字符與ASCII字符集基本相同，這個(gè)字符集有時(shí)被稱作國(guó)際參照或ISO-646。    在實(shí)際應(yīng)用中，考慮到鍵盤的限制及不同CPU和操作系統(tǒng)平臺(tái)上移植的方便，大多數(shù)HTML文檔所用的字符與ASCII字符集相同?？芍苯邮褂?/p>

26、鍵盤輸入。對(duì)于在ISO-8859-1中包含的許多字符，如在電子出版中常用到的加重音字符、貨幣符號(hào)、商標(biāo)、版權(quán)標(biāo)志或其他字符變形等都不包括在ASCII字符集中。也不能直接從標(biāo)準(zhǔn)鍵盤輸入。    數(shù)字轉(zhuǎn)換碼    為了解決那些不包括在ASCII字符集中的字符的輸入問題，HTML定義了一套“數(shù)字轉(zhuǎn)換碼”?！皵?shù)字轉(zhuǎn)換碼”有256個(gè)與ISO-8859-1標(biāo)準(zhǔn)圖形字符集中的256個(gè)字符一一對(duì)應(yīng)。例如©圈C的轉(zhuǎn)換碼是&#169；HTML規(guī)定轉(zhuǎn)換碼由三部分組成，第一部分是“&”符號(hào)；第二部分是“#”號(hào)并緊跟一個(gè)十進(jìn)制數(shù)字，而

27、這個(gè)十進(jìn)制數(shù)字是相應(yīng)字符在ISO-8859-1標(biāo)準(zhǔn)的256個(gè)字符集中的位置；第三部分是“；”。這樣如果要表達(dá)符號(hào)，就可以在鍵盤上輸入&#169；。    對(duì)于在HTML中用于特殊目的的字符，例如“”、“”、“&”等，如果想讓瀏覽器作為普通字符對(duì)待，那么必須寫成“數(shù)字轉(zhuǎn)換碼”形式。例如，想在屏幕上顯示“1256”，則HTML源程序必定是“12&#60;56”其中&#60;是小于號(hào)的轉(zhuǎn)換碼。    對(duì)于一些經(jīng)常需轉(zhuǎn)換的字符，HTML規(guī)定可以用幾個(gè)字母來代替“數(shù)字轉(zhuǎn)換碼”中的第二部分。例如，&#62;

28、和&gt;是表達(dá)同一字符。這種形式叫“實(shí)體參照（entity reference）”。    表21中列出了一些常用字符數(shù)字轉(zhuǎn)換碼和實(shí)體參照。表2-1特殊字符的顯示形式數(shù)字標(biāo)識(shí)符參照實(shí)體參照描述>&#62;&gt;大于號(hào)<&#60;&lt;小于號(hào)&&#38;&amp;"&#34;&quot;©&#169;&copy;版權(quán)®&#174;&reg;注冊(cè)商標(biāo)    例： 

29、0;  <IMG SRC=”cencer.jpg”alt=”a>b”>    要使用這條命令，則必須寫成：    <IMG SRC=”cencer.jpg”alt=”a&#62;b”>或    <IMG SRC=”cencer.jpg”alt=”a&#gt;b”>    此例中的前引號(hào)和后引號(hào)是HTML命令中屬性值表達(dá)式的固定格式，因此不需用轉(zhuǎn)換碼。    4. 注釋（comme

30、nts）     與其它編程語言一樣，在HTML文檔中為了條理清晰以及閱讀方便，有時(shí)需要加入注釋語句。瀏覽器解釋HTML文檔時(shí)忽略注釋語句，即在瀏覽器的窗口注釋語句將不被顯示。    注釋語句格式：！-注釋內(nèi)容    說明：每名注釋語句的內(nèi)容前后必須有“-”識(shí)別。在“！”和“”之間出現(xiàn)空格是允許的。    例2.2.3    <HTML>     <HEAD>   

31、; <TITLE> HTML Comment Example </TITLE>    <!-Id:html-sgml.sgm,2000/3/19 Connolly EXP.->    <!-another-comment->    <!>    </HEAD>    <BODY>    <!-start of italic te

32、xt ->    <I> some text </I>    <BR>    !-end of italic text-> （缺少“”符號(hào)，這行被顯示    <!not a comment, just regular old data characters> (缺少“-”符號(hào)，無法正確解釋)    </BODY>    </HTML>

33、二、頭HEAD    文檔頭以HEAD和/HEAD標(biāo)簽定義。如果把HTML文檔比作一封信的話，那么HEAD和/HEAD之間的內(nèi)容就是信頭部分，BODY和/BODY之間的內(nèi)容就是信體。    注意：在HEAD和/HEAD之間的任何內(nèi)容都不會(huì)出現(xiàn)在Web瀏覽器窗口有用戶（正文顯示）區(qū)。    在HEAD和/HEAD之間允許出現(xiàn)下列幾種標(biāo)簽：    1. 文檔標(biāo)題標(biāo)簽TITLE     格式：TITLE文檔標(biāo)題/TITLE  

34、60; 文檔標(biāo)題的長(zhǎng)度不受限止，但為了閱讀方便，建議使用小于64個(gè)字符的標(biāo)題。    2. 基地址標(biāo)簽BASE     功能：說明所在HTML文檔的原始URL記錄。有了這個(gè)基地址說明后，在此文檔中的其余URL都可以用相對(duì)于基地址的相對(duì)地址來表示。    注意：基地址標(biāo)簽是單獨(dú)使用的，屬于空標(biāo)簽。    格式：BASE HREF=“URL”    說明：BASE標(biāo)簽僅有一個(gè)屬性HREF，是用于說明URL的。    例2

35、.2.4 一個(gè)文檔在沒有使用基地址前的程序?yàn)椋?#160;   <HTML>     <HEAD>    <TITLE>example of base address </TITLE>    </HEAD>    <BODY>    <IMG SRC=”    <A HREF=” ”>Chinese vers

36、ion </A>    </BODY>    </HTML>    使用BASE標(biāo)簽后程序可寫為：    <HTML>     <HEAD>    <TITLE>example of base address </TITLE>    <BASE HREF=”>   

37、; </HEAD>    <BODY>    <IMG SRC=”/zxtd/welcome.gif”>    <A HREF=”/Chinese.htm”>Chinese version </A>    </BODY>    </HTML>    在此例中，zxtd目錄和Chinese.htm文檔前的“/”必須寫明。但是，如果在BA

38、SE標(biāo)簽中表示為:    HREF=” Chinese.htm文檔前的“/”可加可不加。    注意：這里的目錄分隔符使用的是正斜杠“/”，而不是反斜杠“”。    當(dāng)在一篇HTML文檔中缺省BASE標(biāo)簽時(shí)，Web瀏覽器會(huì)自動(dòng)把此文檔的URL作為基地址。    3. 關(guān)鍵字索引標(biāo)簽ISINDEX     功能：說明所在HTML文檔是可索引的。也就是說，瀏覽者在瀏覽該HTML文檔的同時(shí)可以從鍵盤輸入關(guān)鍵字來尋找相匹配的字符。  

39、  格式：ISINDEX    說明：ISINDEX標(biāo)簽沒有相應(yīng)的屬性，是單獨(dú)使用的，屬于空標(biāo)簽。    例2.2.5    <HTML>     <HEAD>    <TITLE>example of ISINDEX tag</TITLE>    <ISINDEX >    </HEAD> &#

40、160;  <BODY>    HTML has been in use the World Wide Web(WWW) global information initiation since 1990.    </BODY>    </HTML>    圖中“可以搜索該索引。請(qǐng)鍵入要搜索的關(guān)鍵字:”字符串是Web瀏覽器自動(dòng)加上的。    注意：只能在具有搜索工具的Web服務(wù)器上才能使用ISINDEX

41、功能。三、 體BODY    文檔體以BODY和/BODY標(biāo)簽定義。    功能：定義HTML文檔中顯示于Web瀏覽器窗口用戶區(qū)的內(nèi)容。    在BODY和/BODY標(biāo)簽之間可包括各種文本段落、水平規(guī)則、標(biāo)題、列表、圖像、超鏈接等等。除了HTML標(biāo)簽、HEAD標(biāo)簽以及前成所講的用于HEAD和/HEAD之間的一些元素外，其余所提到的各種標(biāo)簽如不加特殊說明均用于BODY部分。    現(xiàn)在我們總結(jié)下構(gòu)成一篇HTML文檔的必需元素有：“HTML，HEAD，TITLE，BODY”。它們

42、的總體結(jié)構(gòu)如下：    <HTML>     <HEAD>    <TITLE>標(biāo)題文本</TITLE>    </HEAD>    <BODY>        文檔內(nèi)容    </BODY>    </HTML> 

43、;   在文檔體可用標(biāo)簽較多，下面對(duì)常用的進(jìn)行介紹。四、格式類標(biāo)簽    1. 行中斷標(biāo)簽BR    功能：用于強(qiáng)迫一個(gè)行中斷，或者說是硬回車。    格式：BR    說明：BR標(biāo)簽出現(xiàn)在一行的行未，是一個(gè)單獨(dú)使用的標(biāo)簽，也稱為“空標(biāo)簽”。    當(dāng)在一篇HTML文檔中沒有指定BR標(biāo)簽時(shí)，Web瀏覽器會(huì)盡量在一行中顯示，并且會(huì)自動(dòng)根據(jù)瀏覽器窗口正文顯示區(qū)的大小自動(dòng)調(diào)整一行的長(zhǎng)短。    2分段標(biāo)

44、簽P    全稱：paragraph    功能：用于指示段落結(jié)束。它除了具有行中斷標(biāo)簽BR的作用外，還能使Web瀏覽器在各個(gè)段落之間插入一個(gè)空白行。    P標(biāo)簽在使用時(shí)，共有三種格式：    單個(gè)P標(biāo)簽在段首。表示這以后的文本另起一段，并且在這一段這前插入一個(gè)空白行。    單個(gè)P標(biāo)簽在段尾。表示這里是一段的結(jié)束，并且與以后的文本之間插入一個(gè)空白行。    P文本/P。表示P和/P之間是一個(gè)段落，并且在這一段的前

45、后各插入一個(gè)空白行。    對(duì)于第三種格式可以使用P標(biāo)簽的屬性，其格式為：    P ALIGN=屬性值文本/P    說明：ALIGN有：left、center、right。使用屬性時(shí)P標(biāo)簽必須成對(duì)使用。例：    <HTML>    <HEAD>    <TITLE>example of paragraphs</TITLE>    &l

46、t;/HEAD>    <BODY>      This is first paragraph.<P>      This is second paragraph.    <P>This is third paragraph.    <P>This is fourth paragraph.</P>    <

47、/BODY>    </HTML>    顯示結(jié)果是各行間都有空行。    例：    <HTML>    <HEAD>    <TITLE>align of paragraph</TITLE>    </HEAD>    <BODY>   

48、; <P ALIGN=left>All of this paragraph<BR>is left aligned! </P>    <P ALIGN=center>All of this paragraph<BR>is center aligned! </P>    <P ALIGN=right>All of this paragraph<BR>is right aligned! </P>    &

49、lt;/BODY>    </HTML>    顯示結(jié)果為左、中、右。    3. 不換行標(biāo)簽<NOBR>    全稱為：NO BREAK。    功能：所定義的文本不會(huì)因?yàn)槠湮谋拘械拈L(zhǎng)度超過瀏覽器窗口的寬度面自動(dòng)去換行，而是在窗口底部出現(xiàn)一個(gè)左右滾動(dòng)條來幫助用戶瀏覽文檔。通常則自動(dòng)換行。    格式：<NOBR>文本</NOBR>  

50、0; 4. 字符格式編排標(biāo)簽    功能：設(shè)置顯示的正文字體格式。    格式：粗體標(biāo)簽 B粗體正文/B          斜體標(biāo)簽 I斜體正文/I         下劃線標(biāo)簽U下劃線正文/U         刪除線標(biāo)簽STRIKE刪除線正文/STRIKE   

51、;      等寬字標(biāo)簽KBD等寬字正文/KBD         下標(biāo)標(biāo)簽 SUB下標(biāo)正文/SUB         上標(biāo)標(biāo)簽 SUP上標(biāo)正文/SUP    功能：設(shè)置更復(fù)雜的文本格式。    格式：FONT COLOR=“顏色” SIZE=“字號(hào)” FACE=“字型”正文/FONT    說明：顏色

52、：RED、BLUE、YELLOW、GREEN等以及十六進(jìn)制的GRB三色值，如0000FF，其范圍為：000000FFFFFF。         字號(hào)：1、2、37。        字型：通常使用默認(rèn)字型。因?yàn)轭A(yù)測(cè)用戶計(jì)算機(jī)可以使用的字體難度較大。    例2.2.6    <HTML>    <HEAD> 

53、0;  <TITLE>example of font1</TITLE>    </HEAD>    <BODY>       This is some <B> bold text</B>      This is some <I> italic text</I>     

54、This is some <U> underline text</U>      This is some < STRIKE > 刪除線文本</STRIKE>      This is some <KBD> 等寬字</KBD>      This is some <SUB>下標(biāo)</SUB>      T

55、his is some <SUP> 上標(biāo)</SUP>    </BODY>    </HTML>    例2.2.7    <HTML>    <HEAD>    <TITLE>example of font2</TITLE>    </HEAD>   

56、; <BODY>    <FONT COLOR=”blue”>Color! </FONT>    <FONT SIZE=”5”>Size! </FONT>    <FONT FACE=”Courier”> Typeface! </FONT>    <FONT SIZE=”6” COLOR=”blue” FACE=”Arial”>Many changes! </FONT>

57、    </BODY>    </HTML>    5項(xiàng)目標(biāo)題標(biāo)簽<H1><H6>    全稱：Heading。    功能：定義文檔內(nèi)的項(xiàng)目標(biāo)題或子標(biāo)題的風(fēng)格及大小。    注意：與<TITLE>標(biāo)簽的區(qū)別。    HTML提供了六種不同級(jí)別的項(xiàng)目標(biāo)題標(biāo)簽：    <H1></H

58、1>、<H2></H2>、<H3></H3>、<H4></H4>、<H5></H5>、<H6></H6>。    各級(jí)項(xiàng)目標(biāo)題所顯示的字樣和大小與所使用的Web瀏覽器有關(guān)，在特殊情況下用戶可以自己定義。它們之間相比<H1>的文本最大，<H6>的最小。    說明：<H1><H6>隱含有<BR>標(biāo)簽的功能。    例如：&#

59、160;   <HTML>    <HEAD>    <TITLE>example of heading</TITLE>    </HEAD>    <BODY>    <H1>This is “heading1” text</H1>    <H2>This is “heading2” te

60、xt</H2>    <H3>This is “heading3” text</H3>    <H4>This is “heading4” text</H4>    <H5>This is “heading5” text</H5>    <H6>This is “heading6” text</H6>    </BODY>

61、60;   </HTML>    6預(yù)定義標(biāo)簽PRE    文檔在顯示時(shí)有兩種效果：嚴(yán)格按文檔編輯時(shí)的字符位置來顯示，這種方法稱為預(yù)格式化。顯示時(shí)忽略原文檔中的空格，僅承認(rèn)其格式符， 這種方法稱為非預(yù)格式化。    功能：定義一段預(yù)格式化的文本。    格式：PRE文本/PRE    HTML的一般文檔在顯示時(shí)，瀏覽器會(huì)根據(jù)需要對(duì)其字型、大小和排版格式作出相應(yīng)調(diào)整。而在PRE和/PRE之間的文本，瀏覽器在顯示時(shí)將嚴(yán)

62、格按照原始HTML文檔的字型和位置。    <HTML>     <HEAD>    <TITLE>Test of <PRE> tag</TITLE>    </HEAD>    <BODY>    <H3>Some text without &lt;PRE&gt;tag</H3> &

63、#160;      absolute URL:        a URL in absolute form; for example, as per URL        anchor;        one of two ends of a hyperlink; typically, a pgrase marked as an &am

64、p;#60;A&#62; element.    <HR>    <!- start of <PRE> tag->    <H3>Some text using <PRE>tag</H3>    <PRE>        absolute URL:      

65、;  a URL in absolute form; for example, as per URL        anchor;        one of two ends of a hyperlink; typically, a pgrase marked as an &#60;A&#62; element.    </PRE>    </BODY

66、>    </HTML>    顯示如下    本例注意三點(diǎn)：    在HTML源文檔中，<!- start of <PRE> tag->上下兩部分的排版格式是一樣的。但在顯示時(shí)上面一部分的文本瀏覽器自動(dòng)作了調(diào)整，而在<PRE>標(biāo)簽中的文本嚴(yán)格按照原來的格式。    在<PRE>標(biāo)簽中的文本在顯示時(shí)會(huì)自動(dòng)和瀏覽器窗口的左邊界空開一定的空格。    在&

67、lt;PRE>標(biāo)簽中的文本在顯示時(shí)的字體和一般的文本的字體有所不同。    7塊引用標(biāo)簽<BLOCKQUOTE>    功能：定義一段需要引起瀏覽者注意的文本塊。比如一段經(jīng)典或名人名言等。    對(duì)于塊引用的文本，瀏覽器以等間隔的（黑體字型）顯示。同時(shí)使塊引用的文本和瀏覽器窗口的左、右邊界均空出適當(dāng)?shù)目崭?，并且塊引用文本的上下兩邊將各空一行。但是，根據(jù)瀏覽器的不同其顯示結(jié)果也會(huì)有所不同。    例(IP28)    8水平線標(biāo)簽

68、HR    全稱Horizontal Rule.    功能：強(qiáng)行從當(dāng)前文本位置換行，并在新行上顯示一條水平直線。水平直線的上下兩邊都會(huì)留有一定的空白。    在HR出現(xiàn)處，段落被迫中斷，后續(xù)文本則在直線下面左邊緣繼續(xù)顯示。    格式：HR SIZE=尺寸 WIDTH=寬度 ALIGN=位置 NOSHADE    說明：    SIZE：指出水平線的高度。    WIDTH：指出水平線

69、的寬度。屬性值勤可以是數(shù)字或百分?jǐn)?shù)，數(shù)字是指寬度所占的字符數(shù)，百分?jǐn)?shù)是指占整個(gè)瀏覽器窗口寬度的百分比。缺省時(shí)占整個(gè)瀏覽器窗口的寬度。    ALIGN：當(dāng)水平線寬度不足以占據(jù)整個(gè)瀏覽器窗口時(shí)，ALIGN值確定水平線的位置是靠左、居中、靠右。ALIGN的值為：LEFT，CENTER或RIGHT。    NOSHADE：使水平線為實(shí)心狀。    HR標(biāo)簽單個(gè)使用，屬于空標(biāo)簽。    HR顯示的水平線，依瀏覽器的不同顯示的結(jié)果不同，有的是一條凹嵌的直線，有的是一條精美的三維立體圖案

70、，有的只是一條黑線。    例：    <HTML>    <HEAD>    <TITLE>example of <HR></TITLE>    </HEAD>    <BODY>        Hyperline<BR>  

71、60;     A relation between two anchors ,called the head and the tail. <HR>        The link goes from the tail to head. <HR>        The head and tail are also known as <HR>    &l

72、t;HR SIZE=5 WIDTH=200 ALIGN=left>    <HR SIZE=5 WIDTH=200 ALIGN=center>    <HR SIZE=5 WIDTH=200 ALIGN=right>    <HR SIZE=10 WIDTH=100 ALIGN=center>    <HR SIZE=10 WIDTH=100 ALIGN=center NOSHADE>   

73、</BODY>    </HTML>    顯示結(jié)果    是在每行文本之間插入一水平直線，文本后的水平線的寬度和位置等不同。應(yīng)注意HR標(biāo)簽所畫直線上下邊留出的空白。    9地址標(biāo)簽<ADDRESS>    在<ADDRESS>和</ADDRESS>通常是作者的身份、地址、簽名等內(nèi)容。    功能：以黑體、斜體或者是兩者的結(jié)合方式顯示地址標(biāo)簽之間的內(nèi)容。&

74、#160;   格式：<ADDRESS>地址信息</ADDRESS>    說明：<ADDRESS>標(biāo)簽通常位于文檔體標(biāo)簽（<BODY>)的開始或結(jié)尾部分。    例：    顯示結(jié)果五、列表元素    HTML有幾種不同類型的列表，它們?cè)试S以不同的方式顯示信息。列表元素有一個(gè)共同的屬性COMPACT，以緊湊方式顯示，但在大多數(shù)瀏覽器緊湊方式與非緊湊方式并無明顯區(qū)別。    1.

75、 列表標(biāo)簽<UL>和<LI>     UL是Unordered list的縮寫。    功能：使每一項(xiàng)（一段文本）以“”符號(hào)開頭。    說明：在<UL>和</UL>之間的內(nèi)容應(yīng)為一系列類似于采購清單的無需排序的項(xiàng)目列表。    無序列表的每一項(xiàng)都以標(biāo)簽<LI>(即List Item)開始。必須注意的是，<LI>標(biāo)簽是單獨(dú)使用的，屬于空標(biāo)簽。    格式：<UL>

76、    <LI>項(xiàng)目?jī)?nèi)容1    <LI>項(xiàng)目?jī)?nèi)容2    <LI>項(xiàng)目?jī)?nèi)容3       </UL>    例：    <HTML>     <HEAD>    <TITLE>Example of unordered list</TITL

77、E>    </HEAD>    <BODY>    <UL>    <LI>First list item    <LI>Second list item    <P>Second paragraph of second item     <LI>Third list item 

78、0;  </UL>    </BODY>    </HTML>    顯示效果如下:    2. 順序列表標(biāo)簽<OL>和<LI>     OL是Ordered List 的編寫。    功能：使每一項(xiàng)（一段文本）前自動(dòng)加上序號(hào)，序號(hào)以阿拉伯?dāng)?shù)字形式表示。    說明：同樣，順序列表的每一項(xiàng)都以標(biāo)簽<LI>開

79、始。    格式：<OL><LI>項(xiàng)目?jī)?nèi)容1<LI>項(xiàng)目?jī)?nèi)容2<LI>項(xiàng)目?jī)?nèi)容3            </OL>    例IP32（彈出窗口)    例IP32（需返回）    3. 目錄列表標(biāo)簽<DIR>和<LI>    功能：用于列目錄。顯示效果和無序列表相同

80、，也是每一項(xiàng)前以“”符號(hào)開頭。說明：· 目錄列表每一項(xiàng)的內(nèi)容為一系列相對(duì)較短的項(xiàng)目。HTML規(guī)定，<DIR>標(biāo)簽中的每一項(xiàng)最多為207個(gè)字符。 · 同樣，順序列表的每一項(xiàng)都以標(biāo)簽<LI>開始。     例IP33    4. 菜單列表標(biāo)簽<MENU>和</MENU>     功能：顯示效果與無序列表相同。（比無序列表顯示的項(xiàng)目更加緊湊，但不明顯）。    說明：菜單列表中的每一項(xiàng)都以標(biāo)簽<LI>開

81、始。    格式：< MENU ><LI>項(xiàng)目?jī)?nèi)容1<LI>項(xiàng)目?jī)?nèi)容2<LI>項(xiàng)目?jī)?nèi)容3            </MENU >    5. 定義列表標(biāo)簽<DL>,<DT>和<DD>     定義列表所表達(dá)的格式為一個(gè)名詞或短語，后跟一個(gè)該名詞的定義說明。    功能：<DL&

82、gt;和</DL>說明在標(biāo)簽之間的文本為定義列表。在定義列表中<DT>引出一條術(shù)語名詞，<DD>引出對(duì)應(yīng)的定義說明。    說明：· <DT>和<DD>都是單獨(dú)使用的，是空標(biāo)簽。 · 術(shù)語標(biāo)簽<DT>和術(shù)語定義標(biāo)簽<DD>是配合使用的。 · 可以一條術(shù)語對(duì)應(yīng)于一條或幾條術(shù)語定義。 · 絕對(duì)不可幾條術(shù)語對(duì)應(yīng)于一條術(shù)語定義。     在WEB瀏覽器上顯示時(shí)，術(shù)語定義的內(nèi)容會(huì)自動(dòng)比術(shù)語縮進(jìn)一定的空格。 

83、60;  例IP35六、短語元素    短語元素可分為物理風(fēng)格和邏輯風(fēng)格兩類不同的標(biāo)簽。物理風(fēng)格涉及黑體、下劃線等標(biāo)簽，用于強(qiáng)調(diào)文本表現(xiàn)的特定方式。邏輯風(fēng)格則涉及對(duì)語言的習(xí)慣用法。    短語元素總是成對(duì)使用的，它們不存在“空標(biāo)簽”。各個(gè)短語元素之間可以互相嵌套作用，但瀏覽器有時(shí)不一定會(huì)完全按照設(shè)計(jì)者的意圖來顯示。1. 物理風(fēng)格的短語元素 <B>和</B>、<I>和</I>、<U>和<U>前面已介紹，不再敘述。<TT> <TT>

84、其英文原意為Typewrite。功能：固定寬度的打字機(jī)字型。2. 邏輯風(fēng)格的短語元素 常用的短語元素見表面2-2。標(biāo)簽字符格式<CITE></CITE>書名或引用，通常采用斜體字<CODE></CODE>代碼實(shí)例，通常采用等間隔字<EM></EM>強(qiáng)調(diào)，通常采用斜體字<KBO></KBO>從鍵盤上輸入的文本，通常采用間隔字<SAMP></SAMP>字母字符序列，通常采用等間隔字<STRONG></STRONG>著重強(qiáng)調(diào)，通常采用黑體字<VAR&g

85、t;</VAR>變量，通常采用斜體字例IP39習(xí)題：1. 請(qǐng)分別說出標(biāo)簽和屬性的作用。 2. 在下列虛線中填入所缺標(biāo)簽 <HTML>_Title of the HTML document</TITLE>_<BODY>_3. 請(qǐng)用連線把下面左欄中的標(biāo)簽和右欄中的相關(guān)解釋準(zhǔn)確連接。 <BR> 預(yù)定義標(biāo)簽<HR> 分段標(biāo)簽<P> 地址標(biāo)簽<H1><H6> 行中斷標(biāo)簽<PRE> 塊引用標(biāo)簽<BLOCKQUOTE> 水平線標(biāo)簽<ADRESS> 項(xiàng)目標(biāo)題標(biāo)簽  第三節(jié)  HTML的表格、圖象與聲音 一、表格標(biāo)簽TABLE     1. 表格標(biāo)簽TABLE和/TABLE     功能：定義