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

下載本文檔

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

文檔簡介

HTML語言基礎(chǔ)

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

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

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

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

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

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

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

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

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

background.gif屬性值。表示用

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

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

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

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

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

HTML的瀏覽器是基于窗口的，用戶可以隨時(shí)改變顯示區(qū)的大小，所以HTML將多個(gè)空格以及回車看成一個(gè)空格，這是和絕大多數(shù)字處理器不同的。HTML的分段依賴于分段元素<P>。<P>也有多種屬性，比較常用的屬性是：align＝##可以是left，center，right，其含義同上文。例如：<palign=center>段落居中</p>當(dāng)HTML文件中有圖形時(shí)，圖形可能占據(jù)了窗口的一端，圖形的周圍可能有較大的空白區(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種格式，即無序清單(unorderedList)，有序清單(orderedlist)和定義清單(definitionlist)。1．無序清單(ul)無序清單用(ul，此處的l不是數(shù)字1)開始，每一個(gè)清單條目用<li>引導(dǎo)，最后是</ul>。注意清單條目不需要結(jié)尾標(biāo)記</li>。輸出時(shí)每一清單條目縮進(jìn)，并且以圈點(diǎn)標(biāo)示。例如：<ul><li>今天<li>明天</ul>輸出為：○今天○明天2．有序清單<ol>有序清單與無序清單相比，只是在輸出時(shí)清單條目用數(shù)字標(biāo)示，下面是一個(gè)例子及其輸出。<ol><li>今天<li>明天</ol>輸出為：1.今天2.明天

3．定義清單<dl>定義清單用于對(duì)清單條目進(jìn)行簡短說明的場合，用<dl>開始，清單條目用<dt>引導(dǎo)，它的說明用<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ī)訪問的能力，更加符合人的思維方式。組織得好的鏈接指針不僅能使讀者跳過不感興趣的章節(jié)，而且有助于更好地理解作者的意圖。一個(gè)超文本鏈接指針由兩部分組成：一部分是被指向的目標(biāo)，它可以是同一文件的另一部分，也可以是世界另一端的一個(gè)文件，還可以是動(dòng)畫或音樂；另一部分是指向目標(biāo)的鏈接指針。3.4.1統(tǒng)一資源定位器URL

統(tǒng)一資源定位器URL(UiformResourceLocator)是文件名的擴(kuò)展。在單機(jī)系統(tǒng)中，定位一個(gè)文件需要路徑和文件名，對(duì)于遍布全球的Internet網(wǎng)，顯然還需要知道文件存放在哪個(gè)網(wǎng)絡(luò)的哪臺(tái)主機(jī)中才行。與單機(jī)系統(tǒng)不一樣的是在單機(jī)系統(tǒng)中，所有的文件都由統(tǒng)一的操作系統(tǒng)管理，因而不必給出訪問該文件的方法；而在Internet上，各個(gè)網(wǎng)絡(luò)、各個(gè)主機(jī)的操作系統(tǒng)可能不一樣，因此必須指定訪問該文件的方法。一個(gè)URL包括了以上所有的信息。它的構(gòu)成為：protocol://[:port]/directory/filename其中，protocol是訪問該資源所采用的協(xié)議，即訪問該資源的方法，它可以是：http：超文本傳輸協(xié)議，該資源是html文件。file：文件傳輸協(xié)議，用ftp訪問該資源。ftp：文件傳輸協(xié)議，用ftp訪問該資源。news：表明該資源是網(wǎng)絡(luò)新聞組。：是存放該資源主機(jī)的IP地址，通常以字符形式出現(xiàn)，如mail.edu.cnport端口號(hào)：是服務(wù)器在該主機(jī)所使用的端口號(hào)。一般情況下端口號(hào)不需指定。只有當(dāng)服務(wù)器所使用的端口號(hào)不是缺省的端口號(hào)時(shí)才指定，例如WWW服務(wù)默認(rèn)情況下采用的端口號(hào)為80，如果設(shè)置了其它的端口號(hào)，訪問時(shí)必須加上端口號(hào)。directory和filename：該資源的路徑和文件名.一個(gè)典型的URL為：http://www.edu.cn它表示中國教育和科研計(jì)算機(jī)網(wǎng)WWW服務(wù)器上的起始html文件。（文件具體存放的路徑及文件名取決于該WWW服務(wù)器的配置情況）。與單機(jī)系統(tǒng)絕對(duì)路徑、相對(duì)路徑的概念類似，統(tǒng)一資源定位器也有絕對(duì)URL和相對(duì)URL之分。前面所述的是絕對(duì)URL。相對(duì)URL是相對(duì)于最近訪問的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)用戶用鼠標(biāo)點(diǎn)擊這個(gè)字符串時(shí)，瀏覽器就會(huì)將url處的資源顯示在屏幕上。

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

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

若各個(gè)資源之間沒有固定的關(guān)系，這時(shí)就只能用絕對(duì)url了。3.4.3標(biāo)記一個(gè)目標(biāo)上面提到的鏈接指針可以使讀者在整個(gè)Internet網(wǎng)上方便地鏈接。但如果編寫了一個(gè)很長的html文件，怎么能在同一文件的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉(zhuǎn)呢？前面提到一個(gè)超文本鏈接指針包括兩個(gè)部分：一是指向目標(biāo)的鏈接指針，二是被指向的目標(biāo)。對(duì)于一個(gè)完整的文件，可以用它的url來唯一地標(biāo)識(shí)它，但對(duì)于同一文件的不同部分，怎樣來標(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部分可有可無。這樣，就把放置標(biāo)記的地方做了一個(gè)叫做“name”的標(biāo)記。做好標(biāo)記后，可以用下列方法來指向它：<ahref="url#name">text</a>url是放置標(biāo)記的html文件的urlname是標(biāo)記名。對(duì)于同一個(gè)文件，可以寫為：<ahref="#name">text</a>這時(shí)就可以點(diǎn)取text跳轉(zhuǎn)到標(biāo)記名為name的部分了。3.4.4目標(biāo)窗口如果希望被指向的目標(biāo)在一個(gè)新的窗口中顯示，可以使用target屬性來修飾鏈接指針元素。如：<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è)簡單的圖像鏈接指針。<ahref="www.edu.cn">中國教育和科研計(jì)算機(jī)網(wǎng)<imgsrc="edu.gif"></a>3.4.6圖像地圖（imagemap）

上面介紹的圖像鏈接指針每幅圖只能指向一個(gè)地點(diǎn)，而圖像地圖可以把圖像分成多個(gè)區(qū)域，每個(gè)區(qū)域指向不同的地點(diǎn)。這樣，就可以用圖像地圖編寫出很漂亮的html文件。使用圖像地圖稍微復(fù)雜一點(diǎn)。圖像地圖不僅需要在html文件中說明，它還需要一個(gè)后綴為.map的文件，用來說明圖像分區(qū)及其指向的url的信息。在.map文件中說明分區(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)說明。poly指定一多邊形區(qū)域，該區(qū)域的位置由各頂點(diǎn)坐標(biāo)說明。circle指定一圓形區(qū)域，該區(qū)域的位置由垂直通過圓心的直徑與該圓的交點(diǎn)坐標(biāo)說明。default指定圖像地圖其它部分的url。坐標(biāo)的寫法為：x，y，各點(diǎn)坐標(biāo)之間用空格分開。下面是一個(gè)完整的說明文件：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屬性說明。需要說明的是鏈接指針中的href屬性，它由兩部分組成：第一部分是/cgi-bin/imagemap，它指出用哪個(gè)程序來處理圖像地圖，必須原樣寫入；第二部分是圖形地圖的說明文件mymap.map。/cgi-bin/imagemap/mymap.map絕不表示mymap.map在/cgi-bin/imagemap目錄中。在netscape擴(kuò)展中，圖像地圖可以用一種比較簡化的方式來表示，這就是客戶端圖像地圖。用戶端地圖可以將圖像地圖的說明文件寫在html文件中，而且不需要另外的程序來處理。這就使html作者可以用同別的元素相一致的寫法來寫圖像地圖。用戶端圖像地圖的格式為：<imgsrc="url"usemap="#mymap">src="url"用于指定用作圖像地圖的圖像。usemap屬性指明這是客戶端圖像地圖。其中的“#mymap”是圖像文件說明部分的標(biāo)記名，瀏覽器尋找名字為mymap的<map>元素并從中得到圖像地圖的分區(qū)信息。客戶端圖像地圖的分區(qū)信息用<mapname=mapname>元素說明，name屬性命名<map>元素。圖像地圖的各個(gè)區(qū)域用<areashape="形狀"coords="坐標(biāo)"href="url">說明，形狀可以是：rect矩形，用左上角，右下角的坐標(biāo)表示，各個(gè)坐標(biāo)值之間用逗號(hào)分開；poly多邊形，用各頂點(diǎn)的坐標(biāo)值表示；circle圓形，用圓心及半徑表示，前兩個(gè)參數(shù)分別為圓心的橫、縱坐標(biāo)，第三個(gè)參數(shù)為半徑。href="url"，表示該區(qū)域所指向的資源的url，也可以是nohref，表示在該區(qū)域鼠標(biāo)點(diǎn)取無效?？蛻舳藞D像地圖各個(gè)區(qū)域可以重疊，重疊區(qū)以先說明的條目為準(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頁面的版面進(jìn)行控制，比如字體大小、分行、畫線、背景和文本顏色等等。3.5.1字體1．字號(hào)html有七種字號(hào)，1號(hào)最小，7號(hào)最大。默認(rèn)字號(hào)為3，可以用<fontsize=字號(hào)>來設(shè)置新的字號(hào)。設(shè)置文本的字號(hào)有兩種辦法：一種是設(shè)置絕對(duì)字號(hào)，如<fontsize=字號(hào)>；另一種是設(shè)置文本的相對(duì)字號(hào)，如<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不同字號(hào)的輸出結(jié)果

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

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

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

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

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

注意，此時(shí)體元素必須寫完整，即用<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>。若直接寫為<font>則會(huì)被認(rèn)為是一個(gè)鏈接簽。

需要說明的是：l

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

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

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

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

3.6.4表中文本的輸出文本與表框的距離用cellpadding=#說明。表格的寬度大于其中的文本寬度時(shí)，文本在其中的輸出位置用align=#說明。#是left，center和right三者之一，分別表示左對(duì)齊、居中和右對(duì)齊。align屬性可修飾<tr>,<th>和<td>鏈接簽。表格的高度大于其中文本的高度時(shí)，可以用valign=#說明文本在其中的位置。#是top，middle，bottom，baseline四者之一。分別表示上對(duì)齊，文本中線與表格中線對(duì)齊，下對(duì)齊，文本基線與表格中線對(duì)齊。特別注意的是基線（baseine）對(duì)齊方式，它使得文本出現(xiàn)在網(wǎng)格的上方而不是想象中的下半部。同樣，valign可以修飾<tr>，<th>，<td>中的任何一個(gè)。3.6.5浮動(dòng)表格所謂浮動(dòng)表格是指表與文件中內(nèi)容對(duì)齊時(shí)，若在現(xiàn)在位置上不能滿足其對(duì)齊方式，表格會(huì)上下移動(dòng)，即“擠開”一些內(nèi)容，直到滿足其對(duì)齊要求。浮動(dòng)屬性一般由align=left或right指定3.6.6表格顏色表格的顏色用bgcolor=#指定。#是16進(jìn)制的6位數(shù)，格式為rrggbb，分別表示紅、綠、藍(lán)三色的分量?；蛘呤?6種已定義好的顏色名稱，參見文本顏色。3.7分框Frame分框?qū)g覽器的窗口分成多個(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文件，以便供使用不支持分框?yàn)g覽器的用戶閱讀。分框由<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>鏈接即可將原來分好的<frame>區(qū)域再次分框。分框與其中的文本間距可以用Marginwidth=#和Marginheigh=#來指定，前者指定文本與分框的邊緣的橫向距離，后者為縱向距離，其單位都為象素。

3.8特技與多媒體利用HTML中的特殊標(biāo)記，可以實(shí)現(xiàn)簡單的特技，如會(huì)移動(dòng)的文字，以及在網(wǎng)頁中嵌入多媒體。3.8.1會(huì)移動(dòng)的文字1．語法<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>來回走！</marquee>（3）循環(huán)<loop=#>#=次數(shù)，若未指定則循環(huán)不止(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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論