HTML語(yǔ)言基礎(chǔ)課件_第1頁(yè)
HTML語(yǔ)言基礎(chǔ)課件_第2頁(yè)
HTML語(yǔ)言基礎(chǔ)課件_第3頁(yè)
HTML語(yǔ)言基礎(chǔ)課件_第4頁(yè)
HTML語(yǔ)言基礎(chǔ)課件_第5頁(yè)
已閱讀5頁(yè)，還剩72頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML語(yǔ)言基礎(chǔ)

HTML（HyperTextMarkupLanguage，即超文本標(biāo)記語(yǔ)言）是一種用來(lái)製作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。用HTML編寫(xiě)的超文本文檔稱(chēng)為HTML文檔，它能獨(dú)立於各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等）。自1990年以來(lái)HTML就一直被用作WWW上的資訊表述語(yǔ)言，用於描述網(wǎng)頁(yè)的格式設(shè)計(jì)和它與WWW上其他網(wǎng)頁(yè)的鏈接資訊。

HTML文檔（即網(wǎng)頁(yè)的原始檔案）是一個(gè)放置了標(biāo)記的ASCII文本檔，通常它帶有.html或.htm的檔擴(kuò)展名。生成一個(gè)HTML文檔主要有以下三種途徑：

（1）手工直接編寫(xiě)（例如用你所喜愛(ài)的ASCII文本編輯器或其他HTML的編輯工具）。（2）通過(guò)某些格式轉(zhuǎn)換工具將現(xiàn)有的其他格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。（3）借助專(zhuān)用製作工具軟體，如Frontpage、Dreamweaver等進(jìn)行設(shè)計(jì)與製作。

HTML語(yǔ)言是通過(guò)利用各種標(biāo)記（tags）來(lái)標(biāo)識(shí)文檔的結(jié)構(gòu)以及標(biāo)識(shí)超鏈接（Hyperlink）資訊的。雖然HTML語(yǔ)言描述了文檔的結(jié)構(gòu)格式，但並不能精確地定義文檔資訊必須如何顯示和排列，而只是建議Web流覽器（如Mosiac，Netscape等）應(yīng)該如何顯示和排列這些資訊，最終在用戶(hù)面前的顯示結(jié)果取決於Web流覽器本身的顯示風(fēng)格及其對(duì)標(biāo)記的解釋能力。這就是為什麼同一文檔在不同的流覽器中展示的效果會(huì)不一樣的原因。3.1網(wǎng)頁(yè)設(shè)計(jì)基本原則

設(shè)計(jì)網(wǎng)頁(yè)如同編寫(xiě)其他電腦程式一樣,需要一定的專(zhuān)業(yè)知識(shí)和基本技能，而且必須對(duì)設(shè)計(jì)環(huán)境有個(gè)明確的瞭解。在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，要清楚地瞭解網(wǎng)頁(yè)的閱讀對(duì)象，要對(duì)整個(gè)網(wǎng)路文檔有統(tǒng)一的規(guī)劃?？傮w說(shuō)來(lái)，要瞭解以下基本設(shè)計(jì)原則：

（1）正確分析網(wǎng)頁(yè)用戶(hù)的需要。（2）網(wǎng)頁(yè)下載時(shí)間不宜過(guò)長(zhǎng)。注意網(wǎng)頁(yè)文件的大小，在50KB以?xún)?nèi)為宜。（3）網(wǎng)頁(yè)的設(shè)計(jì)要做到在不同的環(huán)境下都能流覽。（4）注意網(wǎng)頁(yè)中的圖形設(shè)計(jì)。首先，圖形的檔大小要盡可能小，儘量使用GIF檔和JPG檔，不使用BMP檔。其次，每個(gè)圖形都要有相應(yīng)的替代文字，這使得用戶(hù)在關(guān)閉圖形顯示功能時(shí)能夠看到替代文字。（5）定期更新網(wǎng)頁(yè)內(nèi)容。每隔一定時(shí)間就對(duì)網(wǎng)頁(yè)內(nèi)容和版面設(shè)計(jì)進(jìn)行較大幅度的更新，從而吸引訪(fǎng)問(wèn)者的注意力。這不失為增加來(lái)訪(fǎng)次數(shù)的好方法。（6）注意網(wǎng)站內(nèi)容的搭配。在首頁(yè)中儘量使之美觀大方，直觀又豐富。其他網(wǎng)頁(yè)要與首頁(yè)有很好的搭配效果。（7）考慮不支持某些功能的流覽器。隨著網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的不斷進(jìn)步，在網(wǎng)頁(yè)中經(jīng)常會(huì)使用一些特殊的技術(shù)，使得網(wǎng)頁(yè)的功能更加豐富，看起來(lái)也更加美觀。但是不可排除一些用戶(hù)使用過(guò)時(shí)的流覽器流覽這些網(wǎng)頁(yè)，這就需要為這些特殊的功能部分添加替代性文字，避免誤將程式代碼顯示出來(lái)。（8）對(duì)多媒體檔實(shí)施有限的限制。儘管網(wǎng)路多媒體技術(shù)有了很大的發(fā)展，但由於網(wǎng)路速度的限制，就要求一個(gè)網(wǎng)頁(yè)設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)要充分考慮到所添加多媒體部分的大小和必要性。3.2HTML語(yǔ)言的結(jié)構(gòu)

從結(jié)構(gòu)上講，HTML檔由元素（element）組成。組成HTML檔的元素有許多，用於組織檔的內(nèi)容和指導(dǎo)檔的輸出格式。絕大多數(shù)元素是“容器”，即它有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始標(biāo)記(starttag)。元素結(jié)束標(biāo)記叫做結(jié)尾標(biāo)記(endtag)。在起始標(biāo)記和結(jié)尾標(biāo)記中間的部分是元素體。每一個(gè)元素都有名稱(chēng)和可選擇的屬性，元素的名稱(chēng)和屬性都在起始標(biāo)記內(nèi)標(biāo)明。比如體元素(body)：

<bodybackgroud＝"background.gif"><h2>示例</h2>這是一個(gè)示例<p></body>第一行是體元素的起始標(biāo)記，它標(biāo)明體元素從此開(kāi)始。由於所有的標(biāo)記都具有相同的結(jié)構(gòu)，因此仔細(xì)分析這個(gè)標(biāo)記的各個(gè)部分，就能對(duì)標(biāo)記的寫(xiě)法有一個(gè)大概瞭解。<起始標(biāo)記開(kāi)始

body元素名稱(chēng)，由於元素和標(biāo)記一一對(duì)應(yīng)，所以元素名也叫標(biāo)記名。注意：<和body之間不能有空格。元素名稱(chēng)不分大小寫(xiě)。

background屬性名。一個(gè)元素可以有多個(gè)屬性，屬性及其屬性值不分大小寫(xiě)。

background.gif屬性值。表示用

background.gif檔來(lái)填充背景。屬性名、=、屬性值三者合起來(lái)構(gòu)成一個(gè)完整的屬性，一個(gè)元素可以有多個(gè)屬性，各個(gè)屬性用空格分開(kāi)。

>起始鏈接鏈結(jié)束。第二行和第三行是body元素的元素體，最後一行是body元素的結(jié)尾標(biāo)記。結(jié)尾標(biāo)記用</開(kāi)始，隨後是元素名，然後是大於號(hào)>。

從上面的例子中可以看出，一個(gè)元素的元素體內(nèi)可以有另外的元素。實(shí)際上，html檔僅由一個(gè)html元素組成，即檔以<html>開(kāi)始，以</html>結(jié)尾，檔其他部分都是html的元素體。html元素的元素體由兩大部分，即頭元素<head>…</head>和體元<body>…</body>和一些注釋組成。頭元素和體元素的元素體又由其他的元素和文本及注釋組成。也就是說(shuō)，一個(gè)HTML檔應(yīng)具有下麵的結(jié)構(gòu)：

<html>html檔開(kāi)始<head> 檔頭開(kāi)始檔頭</head> 檔頭結(jié)束<body> 檔體開(kāi)始檔體</body> 檔體結(jié)束</html> HTML檔結(jié)束需要說(shuō)明的是，HTML是一門(mén)發(fā)展很快的語(yǔ)言，因而現(xiàn)在流行的流覽器為保持對(duì)早期HTML檔的相容性,也支持不按上述結(jié)構(gòu)編寫(xiě)HTML檔。還需要說(shuō)明的是，各種流覽器對(duì)HTML元素及其屬性的解釋也不完全一樣。一般來(lái)講，HTML的元素有下列三種表示方法：<元素名>檔或超文本</元素名>。<元素名屬性名=“屬性值…”>文本或超文本<／元素名>。<元素名>

第三種寫(xiě)法僅用於一些特殊的元素，例如分段元素P，它僅僅通知WWW流覽器在此處分段，因而不需要界定作用範(fàn)圍，所以它沒(méi)有結(jié)尾標(biāo)記。HTML3.0標(biāo)準(zhǔn)中，也定義了</p>標(biāo)記，它用於需要界定作用範(fàn)圍的段落，比如增加對(duì)齊方式屬性的段落。在HTML檔中，有些元素只能出現(xiàn)在頭元素中，絕大多數(shù)元素只能出現(xiàn)在體元素中。在頭元素中的元素表示的是該HTML檔的一般資訊，比如檔案名稱(chēng)、是否可檢索等等。這些元素書(shū)寫(xiě)的次序是無(wú)關(guān)緊要的，它只表明該HTML有沒(méi)有該屬性。與此相反，出現(xiàn)在體元素中的元素是次序敏感的，改變?cè)卦贖TML檔中的次序會(huì)改變?cè)揌TML檔的輸出形式。3.3構(gòu)成網(wǎng)頁(yè)的基本元素3.3.1題目(title)title元素是檔頭中唯一一個(gè)必須出現(xiàn)的元素，它也只能出現(xiàn)在檔頭中。title元素的格式為：<title>題目</title>題目：標(biāo)明該HTML檔的題目，是對(duì)檔內(nèi)容的概括。檔的題目一般不會(huì)顯示在文本窗口中，而以窗口的名稱(chēng)顯示出來(lái)。除了標(biāo)識(shí)窗口外，當(dāng)將某一網(wǎng)頁(yè)存入書(shū)簽或檔時(shí)，題目還用作書(shū)簽名或缺省的檔案名。<html><title>一個(gè)簡(jiǎn)單的html檔</title>這是我的第一個(gè)html檔。</html>雖然題目的長(zhǎng)度沒(méi)有限制，但過(guò)長(zhǎng)的題目會(huì)導(dǎo)致折行，一般情況下它的長(zhǎng)度不應(yīng)超過(guò)64個(gè)字元。由於題目的作用是標(biāo)明檔內(nèi)容，所以太短的題目也是不可取的。在頭元素中還可以出現(xiàn)其他元素，如<isindex>，<meta>等等，這些元素都不是必須的，而且也不常用。具體用法及含義可以參考有關(guān)書(shū)籍。下麵是一個(gè)最簡(jiǎn)單的HTML檔：3.3.2標(biāo)題(hn)

標(biāo)題標(biāo)籤用於顯示HTML檔的各級(jí)標(biāo)題，格式為:<Hn>標(biāo)題內(nèi)容</Hn>其中n為1-6之間的整數(shù)，其值越大，字越?。簿褪钦f(shuō)第一級(jí)標(biāo)題(H1)字最大，第六級(jí)(H6)最小。標(biāo)題內(nèi)容用黑體字顯示，各行之間自動(dòng)插入空行。<H4>多用作文本正文；H6字體最小(幾乎不用)。<H1>至<H3>比一般正文字體大，而<H5>至<H6>比一般正文字體小。由於標(biāo)題標(biāo)籤具有段落屬性，這就使得一個(gè)段落內(nèi)不能使用兩種標(biāo)題標(biāo)籤。圖3-1給出了由下麵代碼產(chǎn)生的螢?zāi)恍Ч?lt;html><head><title>標(biāo)題示例</title></Head><body> <h1>一級(jí)標(biāo)題是這樣的</h1> <h2>二級(jí)標(biāo)題是這樣的</h2> <h3>三級(jí)標(biāo)題是這樣的</h3> <h4>四級(jí)標(biāo)題是這樣的</h4> <h5>五級(jí)標(biāo)題是這樣的</h5> <h6>六級(jí)標(biāo)題是這樣的</h6></body></html>圖3-1hn的螢?zāi)惠敵鼋Y(jié)果3.3.3分段<P>

HTML的流覽器是基於窗口的，用戶(hù)可以隨時(shí)改變顯示區(qū)的大小，所以HTML將多個(gè)空格以及回車(chē)看成一個(gè)空格，這是和絕大多數(shù)字處理器不同的。HTML的分段依賴(lài)於分段元素<P>。<P>也有多種屬性，比較常用的屬性是：align＝##可以是left，center，right，其含義同上文。例如：<palign=center>段落居中</p>當(dāng)HTML檔中有圖形時(shí)，圖形可能佔(zhàn)據(jù)了窗口的一端，圖形的周?chē)赡苡休^大的空白區(qū)。這時(shí)，不帶clear屬性的<P>可能會(huì)使文章的內(nèi)容顯示在該空白區(qū)內(nèi)。為確保下一段內(nèi)容顯示在圖形的下方，可使用clear屬性。clear屬性的含義為：clear=left下一段顯示在左邊界處空白的區(qū)域。clear=right下一段顯示在右邊界處空白的區(qū)域。clear=all下一段的左右兩邊都不許有別的內(nèi)容。3.3.4清單List清單用於列舉事實(shí)。常用的清單有3種格式，即無(wú)序清單(unorderedList)，有序清單(orderedlist)和定義清單(definitionlist)。1．無(wú)序清單(ul)無(wú)序清單用(ul，此處的l不是數(shù)字1)開(kāi)始，每一個(gè)清單條目用<li>引導(dǎo)，最後是</ul>。注意清單條目不需要結(jié)尾標(biāo)記</li>。輸出時(shí)每一清單條目縮進(jìn)，並且以圈點(diǎn)標(biāo)示。例如：<ul><li>今天<li>明天</ul>輸出為：○今天○明天2．有序清單<ol>有序清單與無(wú)序清單相比，只是在輸出時(shí)清單條目用數(shù)字標(biāo)示，下麵是一個(gè)例子及其輸出。<ol><li>今天<li>明天</ol>輸出為：1.今天2.明天

3．定義清單<dl>定義清單用於對(duì)清單條目進(jìn)行簡(jiǎn)短說(shuō)明的場(chǎng)合，用<dl>開(kāi)始，清單條目用<dt>引導(dǎo)，它的說(shuō)明用<dd>引導(dǎo)。<dl><dt>條目1<dd>條目1的定義<dt>條目2<dd>條目2的定義</dl>輸出為：條目1條目1的定義條目2條目2的定義3.3.5居中很多元素都有對(duì)齊方式屬性，如hn、p等。也可以直接用居中標(biāo)記<center>…</center>：圖3-2

對(duì)齊方式示例

<h3align=center>今天的</h3><center>天氣真好！??！</center>輸出結(jié)果如圖3-2所示。3.4超文本鏈接指針超文本鏈接指針是html最吸引人的優(yōu)點(diǎn)之一。使用超文本鏈接指針可以使順序存放的檔具有一定程度上隨機(jī)訪(fǎng)問(wèn)的能力，更加符合人的思維方式。組織得好的鏈接指針不僅能使讀者跳過(guò)不感興趣的章節(jié)，而且有助於更好地理解作者的意圖。一個(gè)超文本鏈接指針由兩部分組成：一部分是被指向的目標(biāo)，它可以是同一檔的另一部分，也可以是世界另一端的一個(gè)檔，還可以是動(dòng)畫(huà)或音樂(lè)；另一部分是指向目標(biāo)的鏈接指針。3.4.1統(tǒng)一資源定位器URL

統(tǒng)一資源定位器URL(UiformResourceLocator)是檔案名的擴(kuò)展。在單機(jī)系統(tǒng)中，定位一個(gè)檔需要路徑和文件名，對(duì)於遍佈全球的Internet網(wǎng)，顯然還需要知道檔存放在哪個(gè)網(wǎng)路的哪臺(tái)主機(jī)中才行。與單機(jī)系統(tǒng)不一樣的是在單機(jī)系統(tǒng)中，所有的檔都由統(tǒng)一的操作系統(tǒng)管理，因而不必給出訪(fǎng)問(wèn)該檔的方法；而在Internet上，各個(gè)網(wǎng)路、各個(gè)主機(jī)的操作系統(tǒng)可能不一樣，因此必須指定訪(fǎng)問(wèn)該檔的方法。一個(gè)URL包括了以上所有的資訊。它的構(gòu)成為：protocol://[:port]/directory/filename其中，protocol是訪(fǎng)問(wèn)該資源所採(cǎi)用的協(xié)議，即訪(fǎng)問(wèn)該資源的方法，它可以是：http：超文本傳輸協(xié)議，該資源是html檔。file：檔傳輸協(xié)議，用ftp訪(fǎng)問(wèn)該資源。ftp：檔傳輸協(xié)議，用ftp訪(fǎng)問(wèn)該資源。news：表明該資源是網(wǎng)路新聞組。：是存放該資源主機(jī)的IP地址，通常以字元形式出現(xiàn)，如mail.edu.cnport端口號(hào)：是伺服器在該主機(jī)所使用的端口號(hào)。一般情況下端口號(hào)不需指定。只有當(dāng)伺服器所使用的端口號(hào)不是缺省的端口號(hào)時(shí)才指定，例如WWW服務(wù)默認(rèn)情況下採(cǎi)用的端口號(hào)為80，如果設(shè)置了其他的端口號(hào)，訪(fǎng)問(wèn)時(shí)必須加上端口號(hào)。directory和filename：該資源的路徑和文件名.一個(gè)典型的URL為：http://www.edu.cn它表示中國(guó)教育和科研電腦網(wǎng)WWW伺服器上的起始html檔。（檔具體存放的路徑及檔案名取決於該WWW伺服器的配置情況）。與單機(jī)系統(tǒng)絕對(duì)路徑、相對(duì)路徑的概念類(lèi)似，統(tǒng)一資源定位器也有絕對(duì)URL和相對(duì)URL之分。前面所述的是絕對(duì)URL。相對(duì)URL是相對(duì)於最近訪(fǎng)問(wèn)的URL。比如你正在流覽一個(gè)URL為http://www.edu.cn/index.html的檔，如果想看同一個(gè)目錄下的另一個(gè)檔如http://www.edu.cn/news.html，就可以直接使用news.html，這時(shí)news.html就是一個(gè)相對(duì)URL，它的絕對(duì)URL為http://www.edu.cn/news.html

3.4.2指向一個(gè)目標(biāo)<a>

在html檔中可用鏈接指針指向一個(gè)目標(biāo)。其基本格式為：<ahref="url">字串</a>href屬性中的url是被指向的目標(biāo)，隨後的“字串”在html檔中充當(dāng)指針的角色，它一般顯示為藍(lán)色，也可以定義成其他顏色。當(dāng)用戶(hù)用滑鼠點(diǎn)擊這個(gè)字串時(shí)，流覽器就會(huì)將url處的資源顯示在螢?zāi)簧稀?/p>

在編寫(xiě)html檔時(shí)，需要知道目標(biāo)的url。如何才能得到目標(biāo)的url呢？對(duì)於自己主機(jī)內(nèi)的檔，它的url可以根據(jù)該檔的實(shí)際情況決定。對(duì)於Internet上的資源，在用流覽器觀看時(shí)，它的url會(huì)在流覽器的“地址欄”中顯示出來(lái)，把它抄下來(lái)寫(xiě)到html檔中即可。此外，編寫(xiě)html檔時(shí)，對(duì)有可能確定關(guān)係的一組資源（比如在同一個(gè)目錄中）應(yīng)採(cǎi)用相對(duì)url，

這不僅可以簡(jiǎn)化html檔，而且便於維護(hù)。比如當(dāng)需要將某個(gè)目錄整個(gè)搬到另外一個(gè)地方或把某一主機(jī)的資源移到另一臺(tái)主機(jī)時(shí)，用相對(duì)url寫(xiě)的html檔不用更新其中的url。但如果用絕對(duì)url編寫(xiě)html檔，那麼就逐個(gè)修改每個(gè)鏈接指針中的url。

若各個(gè)資源之間沒(méi)有固定的關(guān)係，這時(shí)就只能用絕對(duì)url了。3.4.3標(biāo)記一個(gè)目標(biāo)上面提到的鏈接指針可以使讀者在整個(gè)Internet網(wǎng)上方便地鏈接。但如果編寫(xiě)了一個(gè)很長(zhǎng)的html檔，怎麼能在同一檔的不同部分之間也建立起鏈接，使用戶(hù)方便地在上下方之間跳轉(zhuǎn)呢？前面提到一個(gè)超文本鏈接指針包括兩個(gè)部分：一是指向目標(biāo)的鏈接指針，二是被指向的目標(biāo)。對(duì)於一個(gè)完整的檔，可以用它的url來(lái)唯一地標(biāo)識(shí)它，但對(duì)於同一檔的不同部分，怎樣來(lái)標(biāo)識(shí)呢？下麵的內(nèi)容將介紹鏈接指針元素的另外的一個(gè)用途：標(biāo)識(shí)目標(biāo)。標(biāo)識(shí)一個(gè)目標(biāo)的方法為：<aname="name">text</a>name屬性將放置該標(biāo)記的地方標(biāo)記為“name”，name是一個(gè)全文唯一的標(biāo)記串，text部分可有可無(wú)。這樣，就把放置標(biāo)記的地方做了一個(gè)叫做“name”的標(biāo)記。做好標(biāo)記後，可以用下列方法來(lái)指向它：<ahref="url#name">text</a>url是放置標(biāo)記的html檔的urlname是標(biāo)記名。對(duì)於同一個(gè)檔，可以寫(xiě)為：<ahref="#name">text</a>這時(shí)就可以點(diǎn)取text跳轉(zhuǎn)到標(biāo)記名為name的部分了。3.4.4目標(biāo)窗口如果希望被指向的目標(biāo)在一個(gè)新的窗口中顯示，可以使用target屬性來(lái)修飾鏈接指針元素。如：<ahref="url"target="window-name">text</a>可將url代表的資源顯示在一個(gè)新的窗口中，該窗口的名字叫window-name，它可以是本窗口（_self）、父窗口（_parent）、新窗口（_blank）及整個(gè)流覽器窗口（_top）。

3.4.5圖像鏈接指針圖像也可以做為鏈接指針。格式為：<ahref="url"><imgsrc="url"></a>可以看出，上例中用<imgsrc="url">取代了鏈接指針中text的位置。<imgsrc="url">是圖像元素，它表明顯示url代表的圖像檔。下麵是一個(gè)簡(jiǎn)單的圖像鏈接指針。<ahref="www.edu.cn">中國(guó)教育和科研電腦網(wǎng)<imgsrc="edu.gif"></a>3.4.6圖像地圖（imagemap）

上面介紹的圖像鏈接指針每幅圖只能指向一個(gè)地點(diǎn)，而圖像地圖可以把圖像分成多個(gè)區(qū)域，每個(gè)區(qū)域指向不同的地點(diǎn)。這樣，就可以用圖像地圖編寫(xiě)出很漂亮的html檔。使用圖像地圖稍微複雜一點(diǎn)。圖像地圖不僅需要在html檔中說(shuō)明，它還需要一個(gè)尾碼為.map的檔，用來(lái)說(shuō)明圖像分區(qū)及其指向的url的資訊。在.map檔中說(shuō)明分區(qū)資訊的格式如下：

rect url左上角座標(biāo)，右下角座標(biāo)poly url各頂點(diǎn)座標(biāo)circleurl直徑兩端點(diǎn)座標(biāo)defaulturlrect指定一個(gè)矩形區(qū)域，該區(qū)域的位置由左上角座標(biāo)和右下角座標(biāo)說(shuō)明。poly指定一多邊形區(qū)域，該區(qū)域的位置由各頂點(diǎn)座標(biāo)說(shuō)明。circle指定一圓形區(qū)域，該區(qū)域的位置由垂直通過(guò)圓心的直徑與該圓的交點(diǎn)座標(biāo)說(shuō)明。default指定圖像地圖其他部分的url。座標(biāo)的寫(xiě)法為：x，y，各點(diǎn)座標(biāo)之間用空格分開(kāi)。下麵是一個(gè)完整的說(shuō)明文件：default：http://www.edu.cnrect：http://www.ibm.com140,20280,60poly：http://www.microsoft.com180,80200,140circle：80,14080,100圖像地圖需要一個(gè)特殊的處理程式imagemap。imagemap放在/cgi-bin中。在html檔中引用圖像地圖的格式為：<ahref="/cgi-bin/imagemap/mymap.map"><imgsrc="mymap.gif"ismap></a>可以看出這是一個(gè)包含圖像元素的鏈接指針元素。圖像元素指明用於圖像地圖的圖像的url，並用Ismap屬性說(shuō)明。需要說(shuō)明的是鏈接指針中的href屬性，它由兩部分組成：第一部分是/cgi-bin/imagemap，它指出用哪個(gè)程式來(lái)處理圖像地圖，必須原樣寫(xiě)入；第二部分是圖形地圖的說(shuō)明文件mymap.map。/cgi-bin/imagemap/mymap.map絕不表示mymap.map在/cgi-bin/imagemap目錄中。在netscape擴(kuò)展中，圖像地圖可以用一種比較簡(jiǎn)化的方式來(lái)表示，這就是客戶(hù)端圖像地圖。用戶(hù)端地圖可以將圖像地圖的說(shuō)明文件寫(xiě)在html檔中，而且不需要另外的程式來(lái)處理。這就使html作者可以用同別的元素相一致的寫(xiě)法來(lái)寫(xiě)圖像地圖。用戶(hù)端圖像地圖的格式為：<imgsrc="url"usemap="#mymap">src="url"用於指定用作圖像地圖的圖像。usemap屬性指明這是客戶(hù)端圖像地圖。其中的“#mymap”是圖像檔說(shuō)明部分的標(biāo)記名，流覽器尋找名字為mymap的<map>元素並從中得到圖像地圖的分區(qū)資訊?？蛻?hù)端圖像地圖的分區(qū)資訊用<mapname=mapname>元素說(shuō)明，name屬性命名<map>元素。圖像地圖的各個(gè)區(qū)域用<areashape="形狀"coords="座標(biāo)"href="url">說(shuō)明，形狀可以是：rect矩形，用左上角，右下角的座標(biāo)表示，各個(gè)座標(biāo)值之間用逗號(hào)分開(kāi)；poly多邊形，用各頂點(diǎn)的座標(biāo)值表示；circle圓形，用圓心及半徑表示，前兩個(gè)參數(shù)分別為圓心的橫、縱坐標(biāo)，第三個(gè)參數(shù)為半徑。href="url"，表示該區(qū)域所指向的資源的url，也可以是nohref，表示在該區(qū)域滑鼠點(diǎn)取無(wú)效?？蛻?hù)端圖像地圖各個(gè)區(qū)域可以重疊，重疊區(qū)以先說(shuō)明的條目為準(zhǔn)，下麵是一個(gè)例子：<imgsrc="mapimg.gif"usemap="#Face"><mapname="Face"><!TextBOTTON>此行是注釋<areashape="rect"href="page.html"coords="140,20,280,60"><!TriangleBOTTON><areashape="poly"href="image.html"coords="100,100,180,80,200,140"><!FACE><areashape="circle"href="nes.html"coords="80,100,60></map>3.5版面風(fēng)格控制使用HTML可以對(duì)Web頁(yè)面的版面進(jìn)行控制，比如字體大小、分行、畫(huà)線(xiàn)、背景和文本顏色等等。3.5.1字體1．字型大小html有七種字型大小，1號(hào)最小，7號(hào)最大。默認(rèn)字型大小為3，可以用<fontsize=字型大小>來(lái)設(shè)置新的字型大小。設(shè)置文本的字型大小有兩種辦法：一種是設(shè)置絕對(duì)字型大小，如<fontsize=字型大小>；另一種是設(shè)置文本的相對(duì)字型大小，如<fontsize=±n>。用第二種方法時(shí)“＋”號(hào)表示字體變大，“－”號(hào)表示字體變小。<fontsize=7>size=7:今天天氣很好！</font><br><fontsize=6>size=6:今天天氣很好！</font><br><fontsize=5>size=5:今天天氣很好！</font><br><fontsize=4>size=4:今天天氣很好！</font><br><fontsize=3>size=3:今天天氣很好！</font><br><fontsize=2>size=2:今天天氣很好！</font><br><fontsize=1>size=1:今天天氣很好！</font><br>輸出結(jié)果為：圖3-3不同字型大小的輸出結(jié)果

2．字體風(fēng)格字體風(fēng)格分為物理風(fēng)格和邏輯風(fēng)格。物理風(fēng)格直接指定字體，其字體有黑體<b>，斜體<i>，下劃線(xiàn)<u>，打字機(jī)體<tt>。邏輯風(fēng)格用於指定文本的作用。如：

<em>強(qiáng)調(diào)<srrony>特別強(qiáng)調(diào)<code>源代碼

<samp>例子<kbd>鍵盤(pán)輸入<var>變數(shù)<dfn>定義<cite>引用<small>較小<big>較大<sup>上標(biāo)<sup>下標(biāo)3．閃爍<blink>文本</blink>可使文本閃爍，閃爍頻率為1秒鐘一次。3.5.2橫線(xiàn)（hr）橫線(xiàn)，一般用於分隔同一文本的不同部分。在窗口中劃一條橫線(xiàn)非常簡(jiǎn)單，只要寫(xiě)一個(gè)<hr>即可。橫線(xiàn)的寬度用<hrsize=n>指定，n是線(xiàn)寬，單位是象素。例：<hrsize=10>。<hrwidth=#>指定橫線(xiàn)長(zhǎng)度，既可以指定絕對(duì)線(xiàn)長(zhǎng)，也可以指定橫線(xiàn)長(zhǎng)度占窗口寬度的百分比。例<hrwidth=50>、<hrwidth=50%>。橫線(xiàn)的位置用<hralign=#>指定。#是left或right之一。left表示左端與左邊界對(duì)齊，right是右端與右邊界對(duì)齊。默認(rèn)時(shí)，橫線(xiàn)出現(xiàn)在窗口中央。3.5.3行間圖像行間圖像可使網(wǎng)頁(yè)更加漂亮，但是過(guò)大的圖像會(huì)導(dǎo)致網(wǎng)路通訊量急劇增大，延長(zhǎng)訪(fǎng)問(wèn)時(shí)間。所以在主頁(yè)上不宜採(cǎi)用很大的圖像。如果確實(shí)需要一些大圖像，最好在主頁(yè)中用一個(gè)縮小的圖像指向原圖，並標(biāo)明該圖的大小。這樣訪(fǎng)問(wèn)者可以快速地訪(fǎng)問(wèn)你的主頁(yè)，自己選擇看還是不看那些圖像。圖像的基本格式為：<imgsrc="image-url">或<imgsrc="image-urd"alt="text">image-url是圖像檔的url。目前，大部分流覽器支持.gif和.jpg檔，alt屬性告訴不支持圖像的流覽器用text代替該圖。圖像在窗口中會(huì)佔(zhàn)據(jù)一塊空間，在圖像的左右可能會(huì)有空白，不加說(shuō)明時(shí)，流覽器將隨後的文本顯示在這些空白中，顯示的位置由align屬性指定。用align=left，right時(shí)，圖像是一個(gè)浮動(dòng)圖像。比如align=left，圖像必須挨著左邊框，它把原來(lái)佔(zhàn)據(jù)該塊空白的文本“擠走”，或擠到它右邊，或擠到它上下。文本與圖像的間距用vspace=#，hspace=#指定，#是整數(shù)，單位是像素。前者指定縱向間距，後者指定橫向間距。3.5.4分行<br>和禁止分行<nobr><br>表示在此處分行，<nobr>…</nobr>將通知流覽器，其中的內(nèi)容在一行內(nèi)顯示，若一行內(nèi)顯示不了，則超出部分將被裁剪掉。<brclear=#>中的clear屬性標(biāo)明下一行的情況，如

clear=left，表示下一行從左邊界處開(kāi)始。#可以是left、right、all之一。

3.5.5背影和文本顏色窗口背景可以用下列方法指定：<bodybackground="image-url"><bodybgcolor=#text=#link=#alink=#vlink=#>第一行指定的是填充背景的圖像，如果圖像的大小小於窗口大小，則把背景圖像重複，直到填滿(mǎn)窗口區(qū)域。第二行指定的是16進(jìn)制的紅、綠、藍(lán)分量。bgcolor：背景顏色text：文本顏色link：鏈接指針顏色alink：活動(dòng)的鏈接指針顏色vlink：已訪(fǎng)問(wèn)過(guò)的鏈接指針顏色例如：<bodybgcolor=FF0000>大紅背景色。

注意，此時(shí)體元素必須寫(xiě)完整，即用<body>結(jié)束。3.5.6轉(zhuǎn)義字將與特殊字元html中<、>及&字元有特殊含義，（前兩個(gè)字元用於鏈接簽，&用於轉(zhuǎn)義），不能直接使用。要使用這三個(gè)字元，必須用它們的轉(zhuǎn)義序列。l

&的轉(zhuǎn)義序列為&s或&；l

<的轉(zhuǎn)義序列為<或<；l

>的轉(zhuǎn)義序列為>或>；前者為字元轉(zhuǎn)義序列，後者為數(shù)字轉(zhuǎn)義序列。例如：<font>顯示為<font>。若直接寫(xiě)為<font>則會(huì)被認(rèn)為是一個(gè)鏈接簽。

需要說(shuō)明的是：l

轉(zhuǎn)義序列各字元間不能有空格。l

轉(zhuǎn)義序列必須以“;”結(jié)束。l

單獨(dú)的&不被認(rèn)為是轉(zhuǎn)義開(kāi)始。如“<”被解釋為“<”而不是“<”。另一個(gè)需要轉(zhuǎn)義的字元是引號(hào)，它的轉(zhuǎn)義序列為“"”或“"”，例如<imgsrc="image.gif"alt="A&quol;real"example">html使用的字元集是ISO8859-1字元集，該字元集中有許多在標(biāo)準(zhǔn)鍵盤(pán)上無(wú)法輸入的字元。對(duì)這些特殊字元只能使用轉(zhuǎn)義序列。3.6表格（Table）3.6.1表格的基本形式一個(gè)表由<table>開(kāi)始，</table>結(jié)束，表的內(nèi)容由<tr>、<th>和<td>定義。<tr>說(shuō)明表的一個(gè)行，表有多少行就有多少個(gè)<tr>；<th>說(shuō)明表的列數(shù)和相應(yīng)欄目的名稱(chēng)，有多少個(gè)欄就有多少個(gè)<th>；<td>則填充由<tr>和<th>組成的表格。border屬性用來(lái)說(shuō)明是否用表格線(xiàn)分開(kāi)。3.6.2有通欄的表有橫向通欄的表用<thcolspan=#>屬性說(shuō)明，colspan表示橫向欄距，#代表通欄佔(zhàn)據(jù)的網(wǎng)格數(shù)，它是一個(gè)小於表的橫向網(wǎng)格數(shù)的整數(shù)。有縱向通欄的表用<rowspan=#>屬性說(shuō)明。rowspan表示縱向欄距，#表示通欄佔(zhàn)據(jù)的網(wǎng)格數(shù)，應(yīng)小於縱向網(wǎng)路數(shù)。需要說(shuō)明的是有縱向通欄的表，每一行必須用</tr>明確表示一橫向欄目結(jié)束,這是和表的基本形式不同的。

3.6.3表的大小、邊框?qū)挾燃氨砀耖g距表的大小用width=#和height=#屬性說(shuō)明。前者為表寬，後者為表高，#是以像素為單位的整數(shù)。邊框?qū)挾扔蒪order=#說(shuō)明，#為寬度值，單位是像素。表格間距即劃分表格的線(xiàn)的粗細(xì)用cellspacing=#表示，#的單位是像素。

3.6.4表中文本的輸出文本與表框的距離用cellpadding=#說(shuō)明。表格的寬度大於其中的文本寬度時(shí)，文本在其中的輸出位置用align=#說(shuō)明。#是left，center和right三者之一，分別表示左對(duì)齊、居中和右對(duì)齊。align屬性可修飾<tr>,<th>和<td>鏈接簽。表格的高度大於其中文本的高度時(shí)，可以用valign=#說(shuō)明文本在其中的位置。#是top，middle，bottom，baseline四者之一。分別表示上對(duì)齊，文本中線(xiàn)與表格中線(xiàn)對(duì)齊，下對(duì)齊，文本基線(xiàn)與表格中線(xiàn)對(duì)齊。特別注意的是基線(xiàn)（baseine）對(duì)齊方式，它使得文本出現(xiàn)在網(wǎng)格的上方而不是想像中的下半部。同樣，valign可以修飾<tr>，<th>，<td>中的任何一個(gè)。3.6.5浮動(dòng)表格所謂浮動(dòng)表格是指表與檔中內(nèi)容對(duì)齊時(shí)，若在現(xiàn)在位置上不能滿(mǎn)足其對(duì)齊方式，表格會(huì)上下移動(dòng)，即“擠開(kāi)”一些內(nèi)容，直到滿(mǎn)足其對(duì)齊要求。浮動(dòng)屬性一般由align=left或right指定3.6.6表格顏色表格的顏色用bgcolor=#指定。#是16進(jìn)制的6位數(shù)，格式為rrggbb，分別表示紅、綠、藍(lán)三色的分量?；蛘呤?6種已定義好的顏色名稱(chēng)，參見(jiàn)文本顏色。3.7分框Frame分框?qū)⒘饔[器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)域可以單獨(dú)顯示一個(gè)html檔，各個(gè)區(qū)域也可相關(guān)連地顯示某一個(gè)內(nèi)容。比如可以將索引放在一個(gè)區(qū)域，檔內(nèi)容顯示在另一個(gè)區(qū)域。分框的基本結(jié)構(gòu)如下:<html><head><title>…</title></head><noframes>…</noframes><frameset><framesrc="url"></frameset></html><noframes>…</noframes>中的內(nèi)容顯示在不支持分框的流覽器窗口中，因而這裏需指

向一個(gè)普通版本的html檔，以便供使用不支持分框流覽器的用戶(hù)閱讀。分框由<frameset>指定，並且可以嵌套，分區(qū)中部分顯示的內(nèi)容用<frame>指定?？梢詫⒋翱跈M向分成幾個(gè)部分，也可以分成縱向幾個(gè)部分，還可以混和分框。橫向分框用<framesetcols=#>指定，#可以是一個(gè)百分?jǐn)?shù)，也可以是一整數(shù)。前者規(guī)定各框占窗口的百分?jǐn)?shù)，後者指定各框的絕對(duì)大小?？v向分框用<framesetcols=#>指定。將窗口分成橫縱幾個(gè)區(qū)域時(shí)，用<framset>代替<frame>鏈接即可將原來(lái)分好的<frame>區(qū)域再次分框。分框與其中的文本間距可以用Marginwidth=#和Marginheigh=#來(lái)指定，前者指定文本與分框的邊緣的橫向距離，後者為縱向距離，其單位都為象素。

3.8特技與多媒體利用HTML中的特殊標(biāo)記，可以實(shí)現(xiàn)簡(jiǎn)單的特技，如會(huì)移動(dòng)的文字，以及在網(wǎng)頁(yè)中嵌入多媒體。3.8.1會(huì)移動(dòng)的文字1．語(yǔ)法<marquee>…</marquee>例如：<marquee>從右向左移動(dòng)的文字</marquee>2．屬性（1）方向<direction=#>#=left,right例如：<marqueedirection=left>從右向左移！</marquee><P><marqueedirection=right>從左向右移！</marquee>（2）方式<behavior=#>#=scroll,slide,alternate例如：<marqueebehavior=scroll>一圈一圈繞著走！</marquee><P><marqueebehavior=slide>只走一次！</marquee><P><marqueebehavior=alternate>來(lái)回走！</marquee>（3）迴圈<loop=#>#=次數(shù)，若未指定則迴圈不止(infinite)例如：<marqueeloop=3width=50%behavior=scroll>只走3趟！</marquee><P><marqueeloop=3width=50%behavior=slide>我只走3趟！</marquee><P><marqueeloop=3width=50%behavior=alternate>我只走3趟！</marquee><marqueescrollamount=20>我走得好快喲！</marquee>（4）延時(shí)<scrolldelay=#>例如：<marqueescrolldelay=500scrollamount=100>走一步，停一停！</marquee>3．外觀設(shè)置（1）對(duì)齊方式(Align)：<align=#>#=top,middle,bottom＃為對(duì)齊上沿、中間、下沿。例如：<fontsize=6><marqueealign=#width=400>我會(huì)移動(dòng)啦！</marquee></font>（2）底色<bgcolor=#>#=rrggbb16進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,Green,Purple,Silver,Yellow,Aqua例如：<marqueebgcolor=aaaaee>我會(huì)移動(dòng)啦！</marquee>（3）背景面積<height=#width=#>例如：<marqueeheight=40width=5

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論