HTML语言基础课件_第1页
HTML语言基础课件_第2页
HTML语言基础课件_第3页
HTML语言基础课件_第4页
HTML语言基础课件_第5页
已阅读5页，还剩72页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML語言基礎

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

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

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

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

設計網頁如同編寫其他電腦程式一樣,需要一定的專業知識和基本技能，而且必須對設計環境有個明確的瞭解。在設計網頁的過程中，要清楚地瞭解網頁的閱讀對象，要對整個網路文檔有統一的規劃。總體說來，要瞭解以下基本設計原則：

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

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

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

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

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

background.gif屬性值。表示用

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

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

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

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

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

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

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

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

對齊方式示例

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

統一資源定位器URL(UiformResourceLocator)是檔案名的擴展。在單機系統中，定位一個檔需要路徑和文件名，對於遍佈全球的Internet網，顯然還需要知道檔存放在哪個網路的哪臺主機中才行。與單機系統不一樣的是在單機系統中，所有的檔都由統一的操作系統管理，因而不必給出訪問該檔的方法；而在Internet上，各個網路、各個主機的操作系統可能不一樣，因此必須指定訪問該檔的方法。一個URL包括了以上所有的資訊。它的構成為：protocol://[:port]/directory/filename其中，protocol是訪問該資源所採用的協議，即訪問該資源的方法，它可以是：http：超文本傳輸協議，該資源是html檔。file：檔傳輸協議，用ftp訪問該資源。ftp：檔傳輸協議，用ftp訪問該資源。news：表明該資源是網路新聞組。：是存放該資源主機的IP地址，通常以字元形式出現，如mail.edu.cnport端口號：是伺服器在該主機所使用的端口號。一般情況下端口號不需指定。只有當伺服器所使用的端口號不是缺省的端口號時才指定，例如WWW服務默認情況下採用的端口號為80，如果設置了其他的端口號，訪問時必須加上端口號。directory和filename：該資源的路徑和文件名.一個典型的URL為：http://www.edu.cn它表示中國教育和科研電腦網WWW伺服器上的起始html檔。（檔具體存放的路徑及檔案名取決於該WWW伺服器的配置情況）。與單機系統絕對路徑、相對路徑的概念類似，統一資源定位器也有絕對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指向一個目標<a>

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

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

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

若各個資源之間沒有固定的關係，這時就只能用絕對url了。3.4.3標記一個目標上面提到的鏈接指針可以使讀者在整個Internet網上方便地鏈接。但如果編寫了一個很長的html檔，怎麼能在同一檔的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉呢？前面提到一個超文本鏈接指針包括兩個部分：一是指向目標的鏈接指針，二是被指向的目標。對於一個完整的檔，可以用它的url來唯一地標識它，但對於同一檔的不同部分，怎樣來標識呢？下麵的內容將介紹鏈接指針元素的另外的一個用途：標識目標。標識一個目標的方法為：<aname="name">text</a>name屬性將放置該標記的地方標記為“name”，name是一個全文唯一的標記串，text部分可有可無。這樣，就把放置標記的地方做了一個叫做“name”的標記。做好標記後，可以用下列方法來指向它：<ahref="url#name">text</a>url是放置標記的html檔的urlname是標記名。對於同一個檔，可以寫為：<ahref="#name">text</a>這時就可以點取text跳轉到標記名為name的部分了。3.4.4目標窗口如果希望被指向的目標在一個新的窗口中顯示，可以使用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">中國教育和科研電腦網<imgsrc="edu.gif"></a>3.4.6圖像地圖（imagemap）

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

rect url左上角座標，右下角座標poly url各頂點座標circleurl直徑兩端點座標defaulturlrect指定一個矩形區域，該區域的位置由左上角座標和右下角座標說明。poly指定一多邊形區域，該區域的位置由各頂點座標說明。circle指定一圓形區域，該區域的位置由垂直通過圓心的直徑與該圓的交點座標說明。default指定圖像地圖其他部分的url。座標的寫法為：x，y，各點座標之間用空格分開。下麵是一個完整的說明文件：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”是圖像檔說明部分的標記名，流覽器尋找名字為mymap的<map>元素並從中得到圖像地圖的分區資訊。客戶端圖像地圖的分區資訊用<mapname=mapname>元素說明，name屬性命名<map>元素。圖像地圖的各個區域用<areashape="形狀"coords="座標"href="url">說明，形狀可以是：rect矩形，用左上角，右下角的座標表示，各個座標值之間用逗號分開；poly多邊形，用各頂點的座標值表示；circle圓形，用圓心及半徑表示，前兩個參數分別為圓心的橫、縱坐標，第三個參數為半徑。href="url"，表示該區域所指向的資源的url，也可以是nohref，表示在該區域滑鼠點取無效。客戶端圖像地圖各個區域可以重疊，重疊區以先說明的條目為准，下麵是一個例子：<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版面風格控制使用HTML可以對Web頁面的版面進行控制，比如字體大小、分行、畫線、背景和文本顏色等等。3.5.1字體1．字型大小html有七種字型大小，1號最小，7號最大。默認字型大小為3，可以用<fontsize=字型大小>來設置新的字型大小。設置文本的字型大小有兩種辦法：一種是設置絕對字型大小，如<fontsize=字型大小>；另一種是設置文本的相對字型大小，如<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>輸出結果為：圖3-3不同字型大小的輸出結果

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

<em>強調<srrony>特別強調<code>源代碼

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

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

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

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

&的轉義序列為&s或&；l

<的轉義序列為<或<；l

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

需要說明的是：l

轉義序列各字元間不能有空格。l

轉義序列必須以“;”結束。l

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

3.6.3表的大小、邊框寬度及表格間距表的大小用width=#和height=#屬性說明。前者為表寬，後者為表高，#是以像素為單位的整數。邊框寬度由border=#說明，#為寬度值，單位是像素。表格間距即劃分表格的線的粗細用cellspacing=#表示，#的單位是像素。

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

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

3.8特技與多媒體利用HTML中的特殊標記，可以實現簡單的特技，如會移動的文字，以及在網頁中嵌入多媒體。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=#>#=次數，若未指定則迴圈不止(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．外觀設置（1）對齊方式(Align)：<align=#>#=top,middle,bottom＃為對齊上沿、中間、下沿。例如：<fontsize=6><marqueealign=#width=400>我會移動啦！</marquee></font>（2）底色<bgcolor=#>#=rrggbb16進制數碼，或者是下列預定義色彩：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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论