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

下載本文檔

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

文檔簡介

HTML語言基礎(chǔ)

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

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

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

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

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

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

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

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

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

background.gif屬性值。表示用

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

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

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

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

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

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

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

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

對齊方式示例

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

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

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

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

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

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

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

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

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

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

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

<samp>例子<kbd>鍵盤輸入<var>變數(shù)<dfn>定義<cite>引用<small>較小<big>較大<sup>上標(biāo)<sup>下標(biāo)3．閃爍<blink>文本</blink>可使文本閃爍，閃爍頻率為1秒鐘一次。3.5.2橫線（hr）橫線，一般用於分隔同一文本的不同部分。在窗口中劃一條橫線非常簡單，只要寫一個<hr>即可。橫線的寬度用<hrsize=n>指定，n是線寬，單位是象素。例：<hrsize=10>。<hrwidth=#>指定橫線長度，既可以指定絕對線長，也可以指定橫線長度占窗口寬度的百分比。例<hrwidth=50>、<hrwidth=50%>。橫線的位置用<hralign=#>指定。#是left或right之一。left表示左端與左邊界對齊，right是右端與右邊界對齊。默認時，橫線出現(xiàn)在窗口中央。3.5.3行間圖像行間圖像可使網(wǎng)頁更加漂亮，但是過大的圖像會導(dǎo)致網(wǎng)路通訊量急劇增大，延長訪問時間。所以在主頁上不宜採用很大的圖像。如果確實需要一些大圖像，最好在主頁中用一個縮小的圖像指向原圖，並標(biāo)明該圖的大小。這樣訪問者可以快速地訪問你的主頁，自己選擇看還是不看那些圖像。圖像的基本格式為：<imgsrc="image-url">或<imgsrc="image-urd"alt="text">image-url是圖像檔的url。目前，大部分流覽器支持.gif和.jpg檔，alt屬性告訴不支持圖像的流覽器用text代替該圖。圖像在窗口中會佔據(jù)一塊空間，在圖像的左右可能會有空白，不加說明時，流覽器將隨後的文本顯示在這些空白中，顯示的位置由align屬性指定。用align=left，right時，圖像是一個浮動圖像。比如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=#>第一行指定的是填充背景的圖像，如果圖像的大小小於窗口大小，則把背景圖像重複，直到填滿窗口區(qū)域。第二行指定的是16進制的紅、綠、藍分量。bgcolor：背景顏色text：文本顏色link：鏈接指針顏色alink：活動的鏈接指針顏色vlink：已訪問過的鏈接指針顏色例如：<bodybgcolor=FF0000>大紅背景色。

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

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

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

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

需要說明的是：l

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

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

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

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

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

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

3.8特技與多媒體利用HTML中的特殊標(biāo)記，可以實現(xiàn)簡單的特技，如會移動的文字，以及在網(wǎng)頁中嵌入多媒體。3.8.1會移動的文字1．語法<marquee>…</marquee>例如：<marquee>從右向左移動的文字</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）迴圈<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）延時<scrolldelay=#>例如：<marqueescrolldelay=500scrollamount=100>走一步，停一停！</marquee>3．外觀設(shè)置（1）對齊方式(Align)：<align=#>#=top,middle,bottom＃為對齊上沿、中間、下沿。例如：<fontsize=6><marqueealign=#width=400>我會移動啦！</marquee></font>（2）底色<bgcolor=#>#=rrggbb16進制數(shù)碼，或者是下列預(yù)定義色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,Green,Purple,Silver,Yellow,Aqua例如：<marqueebgcolor=aaaaee>我會移動啦！</marquee>（3）背景面積<height=#width=#>例如：<marqueeheight=40width=5

溫馨提示

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

評論

0/150

提交評論