HTML語言入門教程

上傳人：y*** IP屬地：安徽上傳時間：2023-06-23 格式：DOC 頁數(shù)：58 大小：158KB 積分：15 舉報 版權(quán)申訴

已閱讀5頁，還剩53頁未讀，繼續(xù)免費閱讀

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

文檔簡介

HTML語言入門教程(一)什么是HTML語言

HTML(HyperTextMarkUpLanguage)是使用特殊標(biāo)記來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言，由W3C(WorldWideWebConsortium)所制定和更新，我們可以用任何一種文本編譯起來編輯HTML文件，因為它就是一總純文本文件。HTML語言的基本結(jié)構(gòu)下面我們來看一小段HTML語言的代碼，來了解HTML語言的基本結(jié)構(gòu)：<html>

<head>

<title>HTML語言的基本結(jié)構(gòu)</title>

</head>

<body>

HTML(HyperTextMarkUpLanguage)是使用特殊標(biāo)記來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言。

</body></html>將這一小段代碼粘貼至文本文件中，然后選擇“另存為”，將文件的后綴名改為.htm或者.html即可，然后再所在的目錄下就可看到一個IE的圖標(biāo)，名字就是你所存的文件名稱。<html>…………</html>

這是聲明HTML文件的語法格式。每一個HTML文件，都必須以<HTML>開頭，以</HTML>結(jié)束<head>…………</head>

這是文件頭聲明的語法格式。在這之內(nèi)的所有文字都屬于文件的文件頭，并不屬于文件本體。<title>…………</title>

這是聲明文件標(biāo)題的語法格式。在這之中寫下的所有內(nèi)容，都將寫在網(wǎng)頁最上面的標(biāo)題欄中。<body>…………</body>

這是聲明文件主體的語法格式。在者之間寫下的內(nèi)容都是文件的主體，也就是說將會被顯示在客戶區(qū)之中。注意：幾乎每一種HTML語言的語法都是以<>開頭，以</>結(jié)束。在編輯HTML語言過程中，也可以使用注釋。語法格式為：<!-文件注釋->。就好像C語言中的/*…………*/一樣，中間的內(nèi)容只是解釋說明，并不被編譯器所編譯。HTML語言的基本單位1.長度單位

長度單位可以用來定義水平線、表格邊匡、圖像等對象的長、寬、高等一系列屬性，同時也可以用來定義這些對象在頁面上的位置等屬性，用來描述頁面上可能遇到的各種長度。

長度的表示方法有兩種：絕對長度和相對長度。他們的單位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每個點，而百分比代表的是相對于客戶區(qū)的多少。下面我們就以水平線的寬度為例，說明這兩種表示方法。<html>

<head>

<title>HTML語言的長度表示</title>

</head>

<body>

HTML(HyperTextMarkUpLanguage)是使用特殊標(biāo)記來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言。

<hrwidth="500">

<!絕對長度的聲明>

<hrwidth="50%">

<!相對長度的聲明>

</body></html>

在文本編譯器中編譯，改變網(wǎng)頁的大小，就會看到這兩者表示長度方法的不同。

其中<hr>標(biāo)記是在頁面上建立水平線的標(biāo)記。width是水平線元素中的一種屬性，用來表示水平線的寬度。這里width="500"即表示這個水平線的寬度是500像素；width="%50"即表示水平線占據(jù)客戶區(qū)的總寬度的%50。2.顏色單位

和長度單位一樣，顏色單位也是描述頁面表現(xiàn)形式的一種很重要的的數(shù)據(jù)類型。顏色單位有三種表示方法：16進制顏色代碼、10進制RGB碼、直接顏色名稱。這三種表示方法不同，但是效果卻是一樣的。下面用一小段代碼說明這三種顏色的表示方法。<html>

<head>

<title>HTML語言中顏色的不同表示方法</title>

</head>

<body>

<fontcolor="red">靜夜思</font><br><!紅色>

<fontcolor="#008000">窗前明月光</font><br><!綠色>

<fontcolor="rgb(0,0,255)">疑是地上霜</font><br><!藍色>

<fontcolor="#ffff00">舉頭望明月</font><br><!黃色>

<fontcolor="#800000">低頭思故鄉(xiāng)</font><!栗色>

</body></html>

注意：本文件在保存時請選擇Unicode字符型進行保存。

16進制顏色代碼，語法格式：#RRGGBB。16進制顏色代碼之前必須有一個“#”號，這種顏色代碼是由三部分組成的，其中前兩位代表紅色，中間兩位代表綠色，后兩位代表藍色。不同的取值代表不同的顏色，他們的取值范圍是00--FF。

10進制RGB碼，語法格式：RGB(RRR,GGG,BBB)。在這種表示法中，后面三個參數(shù)分別是紅色、綠色、藍色，他們的取值范圍是0--255。以上兩種表達方式可以相互轉(zhuǎn)換，標(biāo)準(zhǔn)是16進制與10進制的相互轉(zhuǎn)換。

直接顏色名稱，可以在代碼中直接寫出顏色的英文名稱。

以上三種表示方法的效果相同，一般16進制顏色代碼的表示方法比較常用。讀者可以根據(jù)自己的喜好和實際情況來決定使用哪一種表示方法。關(guān)于不同顏色的定義，請查看相關(guān)資料。。3.URL路徑

URL(UniversalResourceLocator)路徑是一種互聯(lián)網(wǎng)地址的表示法。在這個數(shù)據(jù)里可以包括以何種協(xié)議連接、要連接到哪一個地址、連接地址的端口(Port)號以及服務(wù)器(Server)里文件的完整路徑和文件名稱等信息。在HTML中，URL路徑分為兩種形式：絕對路經(jīng)和相對路徑。

a.絕對路徑：

絕對路徑是將服務(wù)器上磁盤驅(qū)動器名稱和完整的倫夠?qū)懗鰜?，同時也會表現(xiàn)出磁盤上的目錄結(jié)構(gòu)。

語法格式：

其中，<scheme>是某一種傳輸協(xié)議，而<scheme_dependent_information>則是連接的位置信息。

例如：

<ahref="">

<ahref="file:///D:/test/html.htm">

b.相對路徑：

相對路徑是相對于當(dāng)前的HTML文檔所在目錄或站點根目錄的路徑。

語法格式：

相對關(guān)系/部分路徑/文件名

根據(jù)相對路徑的參照點又可以分為相對文檔的相對路徑以及相對根目錄的相對路徑。

<1>相對文檔：

這種路徑的表現(xiàn)形式是根據(jù)目標(biāo)文檔所在目錄和當(dāng)前文檔所在目錄之間的關(guān)系的一種表現(xiàn)形式。“../”表示上一級目錄，沒有“../”表示當(dāng)前目錄。

例如當(dāng)前文檔的路徑是：test/project1/index.htm。我們要找test目錄下的html.htm。而當(dāng)前的目錄是project1，我們要回到上一級目錄中，所以路徑是“../html.htm”。

<2>相對根目錄：

這種路徑根據(jù)目標(biāo)文檔相對于根目錄的關(guān)系的一種表現(xiàn)形式。在這種表達式種的第一個字符是“/”，這個符號表示這個路徑是一個相對于根目錄的表達式。

例如：

<ahref="/test/html.htm">

這一課我給大家介紹html文檔中head部分的基本使用方法。

head這一部分是由標(biāo)記<head>開始，以標(biāo)記</head>結(jié)束，是html文檔的首要部分。下面我們看一下head部分所包含的元素：元素描述title文檔標(biāo)題meta描述非html標(biāo)準(zhǔn)的一些文檔信息link描述當(dāng)前文檔與其他文檔之間的連接關(guān)系base定義體試時默認的外部資源script腳本程序內(nèi)容style樣式表內(nèi)容下面簡要介紹一下各個部分的功能及用法：

title：

title包含的內(nèi)容將會被顯示在瀏覽器窗口的標(biāo)題欄中。給自己的網(wǎng)頁起一個適當(dāng)?shù)拿?，可以體現(xiàn)出一些自己的個性。

語法格式：

在省略號處加入的文字或符號，都將顯示在瀏覽器的標(biāo)題欄中。

meta：

meta元素提供的信息是用戶不可見的。下面是meta的幾種用法：定義搜索關(guān)鍵字：

這里介紹兩種基本的用法：<metaname="keywords"content（內(nèi)容）="html,css,javascript"><metaname="description"(描述，描寫)content="網(wǎng)頁制作">

這樣一來，在你的網(wǎng)頁中就會體現(xiàn)出這樣的信息。但是這些信息是不可見的，只是提供給那些搜索引擎使用。

控制頁面緩存：<metahttp-equiv="pragma"（雜注）content="no-cache">

瀏覽器一般為了節(jié)約時間，都在本地硬盤上保存一個網(wǎng)上的文件作為臨時版本。在用戶下次打開這個網(wǎng)頁的時候，瀏覽器將會直接調(diào)用硬盤上的這個版本，而不是網(wǎng)上的。如果想讓瀏覽者每次打開網(wǎng)頁的時候都是看到的最新版本，那么就在網(wǎng)頁上加上這一句吧！

定義語言：<metahttp-equiv="content-type"content="text/html;charset="GB2312">

我們可以通過這樣的語句設(shè)定語言的編碼方式。這樣，瀏覽器就可以為我們正確的選擇語言，不需要我們來選取。上面的例子顯示的就是簡體中文，如果想要顯示繁體中文，將GB3212替換為BIG5就可以了。

刷新頁面<metahttp-equiv="refresh"content="60",URL="new.htm">

這樣的語句可以讓我們的瀏覽器按照content屬性中制定的時間來跳轉(zhuǎn)到URL屬性中設(shè)定的URL地址。上面的例子就是在打開頁面60秒后調(diào)用一個新的頁面new.htm。如果沒有能夠找到new.htm，瀏覽器就﹞執(zhí)行刷新本頁的操作。這也是大多數(shù)聊天室的設(shè)定方法。

link：

這個元素用來指定當(dāng)前文檔和其他文檔之間的聯(lián)接關(guān)系。

語法格式：<linkrel="描述"href="URL地址">

rel說明兩個文檔之間的關(guān)系；href說明目標(biāo)文檔名。以下是一個指定外聯(lián)樣式表文件的例子：<linkrel="stylesheet"href="style.css">

關(guān)于css層疊樣式表，請查閱有關(guān)資料。

base：

用于定義文檔提交是默認的外部資源。

語法格式：<basehref="原始地址"target="目標(biāo)窗口名稱">

href指定文檔中鏈接到的所有文件默認的URL地址。在這里指定href的屬性，所有的相對盧勁的前面都會加上href屬性中的值。

target指定文檔中所有鏈接的默認打開窗口。最常見的應(yīng)用是在框架頁(frame)中。我們要把Menu框架中的聯(lián)接顯示到content框架中，就可以在Menu的網(wǎng)頁中加上<basetarget="content">。這樣，就省去了在Menu網(wǎng)頁上所有鏈接的<a>屬性上加上target屬性了。

script：

標(biāo)記用來在頁面中加入腳本程序。

語法格式：<scriptlanguage="腳本語言">…………</script>

在language中一定要指定腳本語言的種類。如VBScript等。

style：

用來指定當(dāng)前文檔的css層疊樣式表。css對于網(wǎng)頁的字體樣式、背景、邊界等都有很大的應(yīng)用。詳細部分請大家參閱css有關(guān)內(nèi)容。

這一次我給大家介紹html語言中的body的部分用法。大家從各大門戶網(wǎng)站的主頁上就可以看出，body部分占據(jù)了大部分的代碼?？梢奲ody是一個網(wǎng)頁代碼的絕對主要部分。body是由<body>開始，由</body>結(jié)束。下面我們看一下body部分的元素：元素描述bgcolor背景色background背景圖案text文本顏色link鏈接文字顏色alink活動鏈接文字顏色vlink已訪問鏈接文字顏色leftmargin頁面左側(cè)的留白距離topmargin頁面頂部的留白距離下面介紹各個部分的功能及用法：

bgcolor:bgcolor用于指定頁面的背景顏色。在Microsoft公司的IE瀏覽器中，默認情況下是白色，Netscape公司的Navigator瀏覽器的默認情況是灰色。語法格式：<bodybgcolor="顏色值">

background:background屬性用于指定頁面的背景圖案。語法格式：<bodybackground="URL">

下面介紹幾種文字的屬性，可以改變文字的顏色,以及在頁面上留出空白：text

link

alink

vlinkleftmargintopmargin他們的作用分別是：非鏈接文字的顏色；可連接文字的顏色；正被點擊的可鏈接文字的顏色；已被點擊的可鏈接的文字的顏色；頁面左側(cè)的留白；頁面頂部的留白。語法格式：<bodytext="color"link="color"alink="color"vlink="color"><bodyleftmargin="value"topmargin="value">示例：<html><head><title>body元素示例</title></head><bodybgcolor="#ff0000"text="#ffff00"leftmargin="100"><p>這里顯示body的示例。</p></body></html>說明：對于link這樣的屬性，大多數(shù)html的頁面已經(jīng)不使用這樣的用法了?，F(xiàn)在多數(shù)是在head中加入相應(yīng)的代碼。要達到的效果是鼠標(biāo)放到有鏈接的字體上時，字體變色，點擊后字體變?yōu)榛疑?。具體方法如下：A:link{color:#00007f;}

A:visited{color:#65038e;}

A:active{color:#ff0000;}

A:hover{color:#ff0000;}將這段代碼加入到head中，在body中加入有鏈接的文字，就可以看出效果了。這一部分是屬于css中的知識。在body中加入有鏈接的文字：在Dreamweaver中，選定文字后，在下面的Properties中的link中加入想要鏈接到的頁面的地址。在FrontPage中，選定文字后，點擊右鍵就會有相應(yīng)的選項。第一課基礎(chǔ)

Html是英文HyperTextMarkupLanguage的縮寫，中文意思是“超文本標(biāo)志語言”，用它編寫的文件(文檔)的擴展名是.html或.htm，它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或FrontPageEditor等編輯工具來編寫Html文件。Html語言使用標(biāo)志對的方法編寫文件，既簡單又方便，它通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<html></html>標(biāo)志對)，因此在Html文檔中這樣的標(biāo)志對都必須是成對使用的。

當(dāng)我們暢游Internet時，我們透過瀏覽器所看到的網(wǎng)站，是由HTML(HyperTextMarkupLanguage)語言所構(gòu)成。HTML(超文件標(biāo)記語言)是一種建立網(wǎng)頁文件的語言，透過標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字等連結(jié)顯示出來。HTML標(biāo)記是由<和>所括住的指令，主要分為:單標(biāo)記指令、雙標(biāo)記指令(由<起始標(biāo)記>，</結(jié)束標(biāo)記>所構(gòu)成)。HTML網(wǎng)頁文件可由任何文本編輯器或網(wǎng)頁專用編輯器編輯，完成后(以.htm或.html為文件后綴保存)將HTML網(wǎng)頁文件由瀏覽器打開顯示，若測試沒有問題則可以放到服務(wù)器(Server)上，對外發(fā)布信息。HTML文件基本架構(gòu)<HTML>文件開始

<HEAD>標(biāo)頭區(qū)開始

<TITLE>...</TITLE>標(biāo)題區(qū)

</HEAD>標(biāo)頭區(qū)結(jié)束<BODY>本文區(qū)開始

本文區(qū)內(nèi)容

</BODY>本文區(qū)結(jié)束</HTML>文件結(jié)束<HTML>網(wǎng)頁文件格式。

<HEAD>標(biāo)頭區(qū):記錄文件基本資料，如作者、編寫時間。

<TITLE>標(biāo)題區(qū):文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到標(biāo)題。

<BODY>本文區(qū):文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。注意事項通常一份HTML網(wǎng)頁文件包含二個部份:<HEAD>...</HEAD>標(biāo)頭區(qū)、<BODY>...</BODY>本文區(qū)。而<HTML>和</HTML>代表網(wǎng)頁文件格式。習(xí)慣上一個網(wǎng)站的首頁名稱通常訂為index.htm或index.html這樣只要瀏覽網(wǎng)站，瀏覽器便會自動的找出index.htm文件。第二課字體

<hn>...</hn>標(biāo)題，設(shè)定標(biāo)題字體大小，n=1(大)~6(小)會自動跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。如:<h2>標(biāo)題</h2>標(biāo)題如:<h3align=center>標(biāo)題</h3>(標(biāo)題置中)標(biāo)題<b>...</b>粗體字。如:<b>粗體字</b>粗體字<i>...</i>斜體字。如:<i>斜體字</i>

斜體字<del>...</del>橫線(表示刪除)。如:<del>橫線</del>

<tt>...</tt>打字體(固定寬度文字)。如:<tt>打字體</tt>

打字體<sup>...</sup>上標(biāo)字。如:字體<sup>上標(biāo)字</sup>

字體上標(biāo)字<sub>...</sub>下標(biāo)字。如:字體<sub>下標(biāo)字</sub>

字體下標(biāo)字<!...>注解(不會顯示在瀏覽器上)，可以多行。如:<!更新日期:2000/1/1>第三課表格

表格是html的一項非常重要功能，利用其多種屬性能夠設(shè)計出多樣化的表格。使用表格可以使你的頁面有很多意想不到的效果，使頁面更加整齊美觀。常用表格標(biāo)記<table>...</table>表格指令。相關(guān)屬性:

·align調(diào)整

·bgcolor背景顏色

·border邊框

·height高度

·width寬度<caption>...</caption>表格標(biāo)題。相關(guān)屬性:

·align調(diào)整<tr>...</tr>表格列(</tr>可省略)。相關(guān)屬性:

·align調(diào)整<th>...</th>表格欄標(biāo)題(表頭)粗體字(</th>可省略)。相關(guān)屬性:

·align調(diào)整

·colspan欄寬

·rowspan欄高<td>...</td>表格欄資料(儲存格)(</td>可省略)。相關(guān)屬性:

·align調(diào)整

·bgcolor背景顏色

·height高度

·width寬度

·colspan欄寬

·rowspan欄高舉例如:(基礎(chǔ)型)

<tableborder=1align=center>

<tr><td>太平洋網(wǎng)絡(luò)學(xué)院<td>太平洋網(wǎng)絡(luò)學(xué)院

</table>太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院如:(加強型)增加背景顏色、表格標(biāo)題、欄標(biāo)題、跨欄寬、跨欄高。<tableborder=1align=centerbgcolor=#ccccff>

<tr><td><thcolspan=2>行標(biāo)題1<thcolspan=2>行標(biāo)題2

<tr><throwspan=2>列標(biāo)題1<td>a<td>a<td>a<td>a

<tr><td>b<td>b<td>b<td>b

<tr><throwspan=2>列標(biāo)題2<td>c<td>c<td>c<td>c

<tr><td>d<td>d<td>d<td>d

</table>表格標(biāo)題行標(biāo)題1行標(biāo)題2列標(biāo)題1aaaabbbb列標(biāo)題2ccccdddd第四課標(biāo)示html提供許多種類的標(biāo)示標(biāo)記，作項目標(biāo)示，而且可以作巢狀式標(biāo)示！常用標(biāo)示標(biāo)記<li>標(biāo)示項目。如:

<ol>

<li>第一項

<li>第二項

</ol>第一項第二項<ol>...</ol>編號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。如:

<oltype=i>

<li>第一項

<li>第二項

</ol>第一項第二項<ul>...</ul>符號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。如:

<ul>

<li>第一項

<li>第二項

</ul>第一項第二項<dt>定義項目。<dd>定義資料。<dl>...</dl>定義標(biāo)示。如:

<dl>

<dt>十進制:<dd>0、1、2、3、4、5、6、7、8、9

<dt>十六進制:<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

</dl>十進制:0、1、2、3、4、5、6、7、8、9十六進制:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f巢狀式標(biāo)示巢狀式標(biāo)示如:<ol><li>第一章<oltype=i><li>第一節(jié)<ul><li>第一段<li>第二段</ul><li>第二節(jié)</ol><li>第二章<li>第三章</ol>第一章第一節(jié)第一段第二段第二節(jié)第二章第三章其他標(biāo)示標(biāo)記<dir>...</dir>目錄式標(biāo)示(自動加圓點)。如:

網(wǎng)絡(luò)學(xué)院:

<dir>

<li>新手上路

<li>軟件教室

<li>設(shè)計教室

<li>開發(fā)教室

</dir>網(wǎng)絡(luò)學(xué)院:新手上路軟件教室設(shè)計教室開發(fā)教室注意事項標(biāo)示項目符號也可以用<font>...</font>標(biāo)記，以符號字元(○、◆、◎、★、■...等)標(biāo)示。如:<fontcolor=#ff0000>●</font>特殊符號:在html文件中，有些符號是代表特定的意義的。所以當(dāng)我們要使用這些特殊符號時，便要用替代指令。符號替代指令""或"&&或&<<或<>>或>不可分空格第五課區(qū)段標(biāo)記

一個網(wǎng)站不僅要內(nèi)容豐富外，也要有美觀簡潔的版面。html所提供的區(qū)段標(biāo)記功能，如果可以好好的利用也會有相當(dāng)不錯的效果。常用區(qū)段標(biāo)記<hr>產(chǎn)生水平線。如:<hraling=certenwidth=90%><br>跳下一行。如:太平洋網(wǎng)絡(luò)學(xué)院，<br>網(wǎng)上學(xué)電腦的好去處。

太平洋網(wǎng)絡(luò)學(xué)院，

網(wǎng)上學(xué)電腦的好去處。<p>...</p>段落，跳下一行并加一行空白。(</p>可省略)如:太平洋網(wǎng)絡(luò)學(xué)院，<p>網(wǎng)上學(xué)電腦的好去處。

太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。<center>...</center>置中。如:<center>置中</center>置中<nobr>...</nobr>不跳下一行。如:<nobr>太平洋網(wǎng)絡(luò)學(xué)院，</nobr>網(wǎng)上學(xué)電腦的好去處。

太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。<pre>...</pre>以文件原始格式顯示。如:<pre>原始格式:文件</pre>原始格式:文件第六課鏈接

鏈接可說是html中最重要的功能！因為html擁有鏈接的功能，使你能接上internet、www……享受多姿多彩的網(wǎng)絡(luò)世界。基本上鏈接分成:外部鏈接——鏈接至網(wǎng)絡(luò)的某個url網(wǎng)址或文件，可參考考網(wǎng)絡(luò)鏈接方式。

內(nèi)部鏈接——鏈接html文件的某個區(qū)段。網(wǎng)絡(luò)鏈接方式網(wǎng)絡(luò)鏈接方式://主機名稱/路徑/文件名稱網(wǎng)址如:http:///文件傳輸如:ftp:///gropher傳輸如:gropher:///遠端登入如:telnet:///文件下載如:file://data/html/file.zipnetnews傳輸如:news:e-mail如:mailto:pcedu@常用鏈接標(biāo)記<base>設(shè)定基本url位置或路徑，以後只要設(shè)定文件名稱即會自動加上位置或路徑。相關(guān)屬性:

·href鏈接的url位址或文件

·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標(biāo)記配合使用或開新的視窗)如:

<basehref="http:///">

<ahref="kk.htm">■</a><basehref="http:///"target=frame1><a>...</a>鏈接指令。相關(guān)屬性:

·href鏈接的url位址或文件

·name名稱

·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標(biāo)記配合使用或開新的視窗)如:

外部鏈接

<ahref="http:///">■</a><ahref="http:///"target=frame1>■</a>

第六課鏈接

內(nèi)部鏈接

·ch1.htm文件

<ahref=#a>■</a>(欲鏈接至html文件a點)<aname=a>■</a>(html文件a點)·ch2.htm文件

<ahref=ch1.htm#a>■</a>(欲鏈接至ch1.htm文件a點)"■"表示鏈接點，可以是文字或圖案。(即游標(biāo)移到時，會變成手指形狀的地方)<link>鏈接指令(用于head區(qū)，設(shè)定css文件)。<meta>儲存應(yīng)用資訊，可設(shè)定時間載入網(wǎng)頁(用于head區(qū))。相關(guān)屬性:

·charset設(shè)定

·content回應(yīng)表頭資料內(nèi)容,若是數(shù)字表示秒數(shù)

·http-equiv回應(yīng)表頭,若設(shè)定為refresh載入url設(shè)定

·urlhtml位置如:

·設(shè)定中文自動跳行。

<metahttp-equiv="content-type"content="text/html;charset=gb2312">·設(shè)定十秒回到首頁。(若不設(shè)定html文件位置則再載入原h(huán)tml文件)

<metahttp-equiv="refresh"content=10url=index.htm>設(shè)定鏈接、未鏈接部份顏色設(shè)定鏈接、未鏈接部份顏色，用<body>...</body>標(biāo)記。相關(guān)屬性:·alink按下鏈接部份未放開時顏色

·link未看過的鏈接部份顏色

·vlink已看過的鏈接部份顏色如:<bodylink=#0000ffalink=#ff0000vlink=#00ff00>第八課設(shè)置圖片

圖片增加了網(wǎng)站版面的美觀，不過也不要放了大量的圖片，而拖慢網(wǎng)站傳輸?shù)男视嘘P(guān)設(shè)定圖片的方法共有以下幾種:設(shè)定html文件背景圖片、背景顏色。<body>...</body>標(biāo)記。

如:<bodybackground=a.gif>...</body>或

<bodybgcolor=#000000>...</body>設(shè)定圖片。<img>標(biāo)記。設(shè)定地圖。<map>...</map>標(biāo)記。常用圖片標(biāo)記<img>指令相關(guān)屬性:

·align調(diào)整

·alt提示字

·border邊框

·height高度

·src文件或url位址

·usemap地圖名稱

·width寬度如:可插入圖片(gif、jpg格式)、avi電影

<imgsrc="../../../images/pcedu_lo.gif"alt="太平洋網(wǎng)絡(luò)學(xué)院"align=topborder=1>

</center><map>...</map>地圖相關(guān)屬性:

·name名稱<area>設(shè)定地圖動作區(qū)域相關(guān)屬性:

·coords設(shè)定動作區(qū)域座標(biāo)(左上角座標(biāo):x1,y1;右下角座標(biāo):x2,y2)

·href動作區(qū)域連結(jié)點(可載入位址或文件)

·nohref動作區(qū)域連結(jié)點不動作

·shape外型舉例設(shè)定地圖

<imgborder=0src=a.gifusemap=#a>

<mapname=a>

<areashape=rectcoords=0,0,200,100href=1.htm>

<areashape=rectcoords=0,100,200,200nohref>

<areashape=rectcoords=0,200,200,300href=3.htm>

</map>第九課加入聲音

html不僅能插入圖片，也可以載入midi音樂、wav音效喔！常用音樂標(biāo)記<bgsound>背景音樂、音效。相關(guān)屬性:

·loop循環(huán),背景音樂播放次數(shù)

·src文件或url位址(可為wav、midi格式)如:

<bgsoundsrc=m-1.midloop=true>內(nèi)嵌音樂插件<embed>...</embed>內(nèi)嵌插件。相關(guān)屬性:

·height高度

·width寬度(可設(shè)百分比%)

·src設(shè)定內(nèi)嵌物件的url位址

·loop循環(huán),背景音樂播放次數(shù)

·autostart自動播放如:

<embedsrc=m-1.midwidth=145height=60autostart=trueloop=true></embed>第十課滾動條

這是由ie提供的滾動條，可不要被眾多的屬性嚇到了，越多的屬性功能越強喔！【文字卷動標(biāo)記】<marquee>...</marquee>文字卷動(滾動條)?！鞠嚓P(guān)屬性】·behavior=設(shè)定卷動方式

--alternate交替來回卷動

--scroll卷動(預(yù)設(shè))

--slide滑動·bgcolor=color背景顏色

·direction=設(shè)定卷動方向

·height=n高度

·loop=n循環(huán),卷動次數(shù)(預(yù)設(shè)循環(huán))

·scrollamount=n設(shè)定卷動距離

·scrolldelay=milliseconds設(shè)定卷動時間

·truespeed=milliseconds設(shè)定卷動速度

·width=n寬度(可設(shè)百分比%)【舉例】如:<marqueebgcolor=redbehavior=alternatedirection=leftscrollamout=10scrolldelay=100><fontcolor=white>太平洋網(wǎng)絡(luò)學(xué)院</font></marquee>如:<marqueebgcolor=greenheight=50behavior=scrolldirection=upscrollamout=10scrolldelay=300><fontcolor=white><center>太平洋網(wǎng)絡(luò)學(xué)院</center></font></marquee>一html的標(biāo)簽table，tbody,tr,td稱為html的標(biāo)簽，以雙標(biāo)簽的形式出現(xiàn)，所謂雙標(biāo)簽，也就是有一個<table>就有一個對應(yīng)的</table>與之對應(yīng)，同樣適用于其他的雙標(biāo)簽。一般標(biāo)簽都為雙標(biāo)簽。標(biāo)簽最終所顯示的網(wǎng)頁效果由各個屬性來表達，屬性可選擇使用，不一定全部都用。在整個圖片或帖子里雙標(biāo)簽以首尾呼應(yīng)的方式出現(xiàn)。<tablealign=centerbackground="背景圖片地址"border=0cellpadding=0cellspacing=0bordercolor=#0000ffwidth="100%">

<tbody>

<tr>

<td>

這里是圖片,文字或帖子內(nèi)容.

</td>

</tr>

</tbody>

</table><table>的常用參數(shù)設(shè)定：<tablewidth="400"border="1"cellspacing="2"cellpadding="2"align="center"valign="top"background="myweb.gif"bgcolor="#0000ff"bordercolor="#cf0000"bordercolorlight="#00ff00"bordercolordark="#00ffff">width="400"

表格寬度，接受絕對值(如width=80)及相對值(width=80%)。border="1"

表格邊框的厚度，不同瀏覽器有不同的內(nèi)定值。cellspacing="2"

表格格線的厚度align="center"

表格的擺放位置(水平)，可選值為：left(居左),right(居右),center(居中)valign="top".

表格內(nèi)內(nèi)容的對齊方式(垂直)，可選值為：top,middle,bottom。background="myweb.gif"

表格的背景圖片，與bgcolor不要同用。bgcolor="#0000ff"

表格的背景顏色，與background不要同用bordercolor="#cf0000"

表格邊框顏色bordercolorlight="#00ff00"

表格邊框向光部分的顏色bordercolordark="#00ffff"

表格邊框背光部分的顏色，使用bordercolorlight或bordercolordark時bordercolor將會失效。播放器寬度width和高度height的值根據(jù)需要自定二帖圖格式帖圖基本代碼如下：<imgsrc="圖片連接url地址"><img>稱圖形標(biāo)記，主要用來插入圖形標(biāo)記。三文字設(shè)制基本代碼如下：<palign=center><fontcolor=#0066ffface=隸書size=5>插入文字</font></p>align=center表示字體居中，可選值為居右（right）居左（left）color=顏色代碼face=字體常用字體為：宋體.黑體.楷體.仿宋.幻緣.新宋體.細明體等size=字體大小，這里的最大值為7取值越大文字就越大四加入音樂<embedsrc="音樂文件地址">常用屬性如下：src="your.mid"

設(shè)定midi檔案及路徑，可以是相對或絕對。autostart=true

是否在音樂檔下載完之后就自動播放。true是，false否(內(nèi)定值)。loop="true"

是否自動反復(fù)播放。loop=2表示重復(fù)兩次，true是，false否。hidden="true"

是否完全隱藏控制畫面，true為是，no為否(內(nèi)定)。starttime="分:秒"

設(shè)定歌曲開始播放的時間。如starttime="00:30"表示從第30秒處開始播放。volume="0-100"

設(shè)定音量的大小，數(shù)值是0到100之間。內(nèi)定則為使用系統(tǒng)本身的設(shè)定width="整數(shù)"和high="整數(shù)"

設(shè)定控制面板的高度和寬度。(若hidden="no")align="center"

設(shè)定控制面板和旁邊文字的對齊方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottomcontrols="smallconsole"

設(shè)定控制面板的外觀。預(yù)設(shè)值是console。

console一般正常面板

smallconsole較小的面板

playbutton只顯示播放按鈕

pausecutton只顯示暫停按鈕

stopbutton只顯示停止按鈕

volumelever只顯示音量調(diào)節(jié)按鈕貼音樂的完整語法如下:一:隱藏播放器<embedsrc="音樂文件地址"hidden=trueautostart=trueloop=true>二:不隱藏播放器<embedsrc="音樂文件地址"width=""height="">入門HTML>

<HEAD>

</HEAD>

<BODY>

網(wǎng)頁的內(nèi)容

</BODY>

</HTML>

例1-1

當(dāng)你點開任何網(wǎng)頁的源文件的時候，相信都可以在長長的字符中尋找到上面這些單詞,或者你現(xiàn)在把上面這些單詞復(fù)制到你新建的文檔文件中，保存之后把后綴名改成.html，一個網(wǎng)頁就誕生了。這就是HTML語言，它不象C++，VB等等程序語言要你摸不清頭腦，HTML語言只是一個在SGML定義下的描述性語言，或者說是標(biāo)識語言。

既然是標(biāo)識語言，我們就從標(biāo)識開始進行學(xué)習(xí)好了，也許當(dāng)你完全掌握標(biāo)識之后，就會發(fā)現(xiàn)基本上已經(jīng)明白什么是HTML了。

標(biāo)識的寫法:

1.任何標(biāo)識都應(yīng)該寫在"<"和">"之間，如<html>

2.標(biāo)識的字母沒有大小寫的區(qū)分。

3.在起始標(biāo)識中加入“/”就是終止標(biāo)識，一般情況下有起始表示就有終止標(biāo)識。例如<html>...</html>

4.有的標(biāo)識需要加入?yún)?shù)，有的不必，需要注意的是這些參數(shù)只能加在起始標(biāo)識中。

現(xiàn)在我們開始認識第一類標(biāo)識：文件標(biāo)識

事實上你已經(jīng)見過了這些標(biāo)識,沒錯就是<HTML>；<HEAD>；<BODY>；<TITLE>，

這段標(biāo)識告訴瀏覽器現(xiàn)在運行HTML文件，所以你寫HTML文件都應(yīng)該以<html>開頭，</html>.

這是HTML文件的開頭部分，相應(yīng)的<body>...</body>就是本文部分，開頭部分主要是用來記載關(guān)于這個頁面的一寫重要資訊，所以呢大部分的標(biāo)記都將在本文部分進行應(yīng)用。

這里的文字就成了你所建立頁面的標(biāo)題，你可以更改一下例1-1中非標(biāo)記部分。

這些標(biāo)記就構(gòu)成了HTML的基本構(gòu)架，其中只有<body>具有參數(shù)設(shè)定,我們就通過一個例子還認識好了

<BODYtext=""link=""alink=""vlink=""background=""bgcolor=""leftmargin=topmargin=bgproperties="fixed">

text=""

用以設(shè)定文字顏色。

link=""

設(shè)定一般文字連結(jié)顏色。

alink=""

設(shè)定剛按下時文字連結(jié)顏色。

vlink=""

設(shè)定連結(jié)后的顏色。（被按過）。

background=""

設(shè)定背景墻紙。

bgcolor=""

設(shè)定背景顏色。

leftmargin=

設(shè)定整份文件顯示畫面的左方邊沿空間，單位為像素。

topmargin=

設(shè)定整份文件顯示畫面的上方邊沿空間。

bgproperties="fixed"

固定背景墻紙，當(dāng)卷動文字時墻紙不會跟著卷動。

這里需要說明的是色彩的問題，色彩是用16進制的紅－綠－藍(red-green-blue,RGB)值來表示的，所以一個顏色也就由RRGGBB的格式構(gòu)成,而16進制的數(shù)碼有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

#000000,其中紅=00，藍=00,綠=00，色彩即為黑色

#0000FF，其中紅=00,綠=00，藍=ff,色彩即為藍色

如果你想深入了解色彩的問題，你可以查看諸如FLASH等等軟件的色彩表.

首先我們看<font>,<basefont>

這兩個標(biāo)識都是用于控制字體的大小，色彩，字體，但<basefont>可以用于<head></head>之間，控制全文的文字;而<font>只應(yīng)用與<body></body>之間，控制在它選擇范圍中的文字.兩個標(biāo)識出現(xiàn)在一個html文件中的時候，沒有被<font>選擇的文字才會受到<basefont>的影響。

下面我們就來看一個例子：

<html>

<head>

<title>H.SWorkshop</title><basefontface="Arial"size="7"color="#000000">

</head>

<body>

歡迎來到<fontface="Arial"size="5"color="ff0000">H.SWorkshop</font>

</body>

<html>

[例2-1]

我們看到<basrfont>告訴IE全文用7號黑色Arial字體顯示，但H.SWorkshop被我們用<font>圍住了，所以執(zhí)行<font>的設(shè)定.這里有face=,size=,color=三個參數(shù)可以進行設(shè)定，

face=

設(shè)定字體。

size=(1,2,3,4,5,6,7,-x,+x)

設(shè)定字體大小，這里需要注意的是相對值和絕對值，我們在例2-1中，把<font>的size的值改成"-2"你會發(fā)現(xiàn)效果是一樣的，相應(yīng)的把<basefont>的size值改成其他任何小于7的數(shù)值，你就會發(fā)現(xiàn)改變。我們在這里就把size="-2"稱為相對值,被<font>圍住的文字在<basefont>的基礎(chǔ)上，減少2個字符大小,公式為"n-/+x".當(dāng)然只有<font>可以設(shè)定相對值。

color=

設(shè)定文字色彩.

這里我們還發(fā)現(xiàn)了一個問題，<basefont>沒有終止標(biāo)識，但它一樣可以實現(xiàn)它的功能，這就是HTML的空標(biāo)識，因為我們看到</basefont>沒有存在的意義，所以可以忽略，當(dāng)然如果你在<basefont>后面添加</basefont>對整個html文件也沒有影響。其他的我們就稱之為圍堵標(biāo)識。

接下來看<Hn>...</Hn>（n=1,2,3,4,5,6)

這是一個標(biāo)題標(biāo)識，從1到6替減，是一個圍堵標(biāo)識，我們需要注意的是這個標(biāo)識獨占一行并自動插入一個空行，你可以自己嘗試一下，這里就不舉例說明了。

<STRONG><B><TT><SAMP><CODE><KBD><U><STRIKE><s><BIG><SMALL><SUP><SUB><I><EM><VAR><CITE><DFN><ADDRESS>：

這是對文字進行一些特殊處理的標(biāo)識，我們就來看看他們的效果來進行學(xué)習(xí)好了.

歡迎來到H.SWorkshop歡迎來到H.SWorkshop

<strong>歡迎來到H.SWorkshop</strong>歡迎來到H.SWorkshop

<b>歡迎來到H.SWorkshop</b>歡迎來到H.SWorkshop

<tt>歡迎來到H.SWorkshop</tt>歡迎來到H.SWorkshop

<samp>歡迎來到H.SWorkshop</samp>歡迎來到H.SWorkshop

<code>歡迎來到H.SWorkshop</code>歡迎來到H.SWorkshop

<kbd>歡迎來到H.SWorkshop</kbd>歡迎來到H.SWorkshop

<u>歡迎來到H.SWorkshop</u>歡迎來到H.SWorkshop

<strike>歡迎來到H.SWorkshop</strike>歡迎來到H.SWorkshop

<s>歡迎來到H.SWorkshop</s>歡迎來到H.SWorkshop

<big>歡迎來到H.SWorkshop</big>歡迎來到H.SWorkshop

<small>歡迎來到H.SWorkshop</small>歡迎來到H.SWorkshop

<sup>歡迎來到H.SWorkshop</sup>歡迎來到H.SWorkshop

<sub>歡迎來到H.SWorkshop</sub>歡迎來到H.SWorkshop

<i>歡迎來到H.SWorkshop</i>歡迎來到H.SWorkshop

<em>歡迎來到H.SWorkshop</em>歡迎來到H.SWorkshop

<var>歡迎來到H.SWorkshop</var>歡迎來到H.SWorkshop

<cite>歡迎來到H.SWorkshop</cite>歡迎來到H.SWorkshop

<dfn>歡迎來到H.SWorkshop</dfn>歡迎來到H.SWorkshop

<address>歡迎來到H.SWorkshop</address>歡迎來到H.SWorkshop

你是否已經(jīng)了解了呢，這些就是HTML實現(xiàn)字體特殊效果的標(biāo)識，唯一特別的是，<address>可以不用插入<br>換行。至于<br>是什么，我想看了明天的排版標(biāo)識我就可以了解了。

昨天我們已經(jīng)認識了文字標(biāo)識，為了讓整個網(wǎng)頁更清晰美觀，我們就不可以少了排版標(biāo)識，那么現(xiàn)在就要我們開始來認識他們吧。

現(xiàn)在比較講知識產(chǎn)權(quán)，呵呵~我們就先來看看如何告訴別人這是你的產(chǎn)權(quán)好了，當(dāng)然我們還可以用它來告訴你的工作伙伴，這段開始是什么，那就是

HTML和其他的程序語言一樣，可以在代碼中添加注釋，來告訴別人這里開始寫的是什么，當(dāng)然這也是告訴自己，方便以后的管理，不過你放心，這只存在于你的原代碼中，不會在瀏覽器中發(fā)生任何影響。

現(xiàn)在我們開始認識對段落控制的標(biāo)識，<p>,<br>,<nobr>.

<p>

我們可以把他看做一個空行標(biāo)識，既在網(wǎng)頁中顯示一段空白行，一般在DW或者FG等網(wǎng)頁編輯工具中，回車即在HTML插入一個<P>，這也是一個空標(biāo)記，他的常用參數(shù)是

align="#"(#=right,left,center)

分別表示左對齊，右對齊，居中。默認值為left.

實現(xiàn)一下下面的例子你就明白了:

<HTML>

<HEAD>

</HEAD>

<BODY>

H.SWrokshop

<p>H.SWrokshop

<palign="center">H.SWrokshop

<palign="right">H.SWorkshop

</BODY>

</HTML>

[例3-1]

這兩個標(biāo)記分別表示換行和不換行，前者使網(wǎng)頁中的元素直接在下一行，不插入空行，后者則表示不換行，對于一些必須在一行中顯示的文字，對電話號碼等等的顯示比較有用。這里的<br>是個空標(biāo)識,<nobr>是圍堵標(biāo)識.需要注意的是align=""在BR中沒有的意義.

這時候我們就要通過一個另一個標(biāo)識來實現(xiàn)對齊效果，<div></div>,當(dāng)然這個標(biāo)識有它更廣泛的用途，在這里只簡單的提一下其中的對齊參數(shù)運用。下面我們就來看一個簡單的例子。

<HTML>

<HEAD>

</HEAD>

<BODY>

<DIValign="center">H.SWorkshop

<br>H.SWorkshop</DIV>

<br>H.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshop<nobr>H.SWorkshop</nobr>

<DIValign="right">H.SWorkshop

<br>H.SWorkshop</DIV>

</BODY>

</HTML>

[例3-2]

這樣一來我們就可以實現(xiàn)對<br>的對齊效果了。

現(xiàn)在我們把align=""的三個值提出來，發(fā)現(xiàn)他們其實自身也是標(biāo)識，它們可以對單個，單行文字進行圍堵，實現(xiàn)他的效果，這樣又多了一個途徑實現(xiàn)<br>的對齊效果了，具體的就舉例說明了，你可以自行嘗試一下，注意，他們可是圍堵標(biāo)識哦。

<wbr>

這里把它從換行中分出來，是想大家于<br>對比一下，這是個建議折行的標(biāo)識，當(dāng)用戶的分辨率無法完整的顯示出一段文字的時候，你就可以插入這個標(biāo)識,這時候就會發(fā)生于<br>同樣的效果,如果達到了條件則沒有效果產(chǎn)生，你可以自己嘗試一下，它是一個空標(biāo)識。接著我們來看看HTML兩個在排版上非常使用的標(biāo)識。

預(yù)格式化文本標(biāo)識，他們允許你在HTML原文件里輸入空白，并顯示出和你在HTML編輯的一模一樣的格式，區(qū)別就在<pre>顯示出來的是設(shè)定好了的字體大小，<listing>顯示小于設(shè)定的一號字體,〈xmp>則在<pre>的基礎(chǔ)上把html里的標(biāo)識也顯示出來。

<pre>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</pre>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</listing>

<xmp>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</xmp>

大家可以自己看看三者的效果。

<hr>

今天的最后一個標(biāo)識稱為水平線。顧名思義，它實現(xiàn)插入一條水平線的效果。

<HRalign=""size=""width=""color=""noshade>。

align=

設(shè)定線條置放位置，可選擇：left；right；center三種設(shè)定值。

size=

設(shè)定線條厚度，以像素作單位.

width=

設(shè)定線條長度，可以是絕對值（以像素作單位）或相對值，默認值為100%。

color=

設(shè)定線條顏色，內(nèi)定為黑色.

noshade

設(shè)定線條為平面顯示，若刪去則具陰影或立體，這是默認值。

通過這三天的學(xué)習(xí)，你是否可以運用已知的標(biāo)識寫出一個網(wǎng)頁了呢？呵呵~這就開始嘗試一下吧.

今天我們學(xué)習(xí)的只有一個標(biāo)識，重點并不在這個標(biāo)標(biāo)識本身，而在于這個標(biāo)識的參數(shù)設(shè)置，現(xiàn)在我們就來認識一下吧。

<img>

圖形對于一個網(wǎng)頁來說其占的位置盡次于文字所占的比重，我們同過這個標(biāo)識在網(wǎng)頁中加入一張圖片做到圖文并茂，它只是一個空連接，現(xiàn)在我們就來看看它的參數(shù)設(shè)定。

<imgsrc=""width=height=hspace=vspace=border=align=""alt=""lowsrc="">

src=

首先我們必須向HTML中導(dǎo)入一張圖片，這張圖片的格式可以是jpg，gif或者png，同時我們還要注意導(dǎo)入圖片的途徑書寫，當(dāng)你要求導(dǎo)入的圖片和顯示此圖的html在同一個文件夾下，我們就可以只寫文件名即可，如則需要完整的途徑表示。

width=,height=

設(shè)定圖象顯示的大小，以象素為單位，不過一般情況下為了保持頁面的美觀，我們使用真實的大小為佳，通過專業(yè)的圖形編輯工具來編輯圖形的大小。

border=

設(shè)定圖象邊框的大小，單位也是象素，它可以是任何數(shù)值，在現(xiàn)代網(wǎng)頁編輯中通常取值為1。

hspace=,vspace=

設(shè)定圖象邊緣的空白數(shù)，hspace設(shè)定左右，vspace設(shè)定上下，這樣可以確保其他元素與圖片的距離。

align=（top,middle,bottom,left,right）默認值為botom

這個參數(shù)昨天我們已經(jīng)講過，在這里我們我們需要注意的是它的作用是控制文字的位置，具體的運用我們就通過這下面的例子來看看好了.

alt=

在圖片顯示的位置插入一段文字，當(dāng)圖片還沒有被讀取或這瀏覽者使用的是文字游覽器的時候，這段文字就會顯示出來。

lowsrc=

同樣在顯示src所顯示的圖片之前先顯示出一張圖片，條件也是在src還沒有被讀取的時候，一般我們用于顯示原圖片的縮略圖，使瀏覽者不會因為圖片讀取慢而失去瀏覽的興趣。

表格在網(wǎng)頁排版中所占的比重不用說相信大家也都知道，它把整個頁面清晰的分成多個區(qū)域。專業(yè)的網(wǎng)頁怎么可以少了對表格的操作呢~現(xiàn)在我們就來看看關(guān)于表格的標(biāo)識。首先我們必須建立一個表格，我們可以通過<table>著個圍堵標(biāo)識來實現(xiàn)，著個標(biāo)識的作用就好象<html>告訴瀏覽器開始處理HTML文件一樣，它告訴瀏覽器現(xiàn)在開始處理表格，其他所有的表格標(biāo)識都必須寫在<table>里面。

關(guān)于它的參數(shù)比較多，我們現(xiàn)在一個個來看它有什么作用。

<tablewidth=""border=""cellspacing=""cellpadding=""align=""valign=""background=""bgcolor=""bordercolor=""bordercolorlight=""bordercolordark=""cols=""rules=""frame="">

windth=

設(shè)定表格的寬度，一般來說在這層我們只需要指定一個表格的寬度就可以了。這個值可以是絕對的也可以是相對的。

border=

設(shè)定表格邊框的厚度，當(dāng)取值為0時或者不用這個參數(shù)的時候，表格就不在瀏覽器中顯示出來，但表格中的元素仍然是按表格排列。

cellspacing=

表格線的厚度，為了和border=區(qū)別開來，我們看個例子

<tablewidth="70"border="1">

<tr>

</tr>

<tr>

</tr>

</table>

<tablewidth="70"border="1"cellspacing="5">

<tr>

</tr>

<tr>

</tr>

</table>

[例5-1]

比較一下這兩個例子，我們就可以很清晰的看到兩個例子的不同.

cellpadding=""

文字和格線之間的距離，使文字看起來更清晰。

align=""(left,right,center)

這個值在前面我們已經(jīng)重復(fù)的介紹過了，這里是對表格的位置進行水平位置設(shè)定.

valign=""(top,middle,bottom)

這是對表格垂直位置的設(shè)定.

background=""

導(dǎo)入表格的背景圖片。

bgcolor=""

設(shè)定表格的背景顏色。

bordercolor=""

設(shè)定表格的邊框顏色。（注意，當(dāng)設(shè)定border=為0時，這個值無效)

bordercolorlight=""

設(shè)定表格邊框向光部分的顏色.

bordercolordark=""

設(shè)定表格邊框背光部分的顏色.

cols=""

表格欄位數(shù)目，只是讓瀏覽器在下載表格是先畫出整個表格而己.

frame=""(box,above,below,hsides,vsides,lhs,rhs,void)

顯示邊框，參數(shù)的含義依此是：顯示所有邊框，只顯示上邊框，只顯示下邊框，只顯示上下邊框，只顯示左右邊框，只顯示左邊框，只顯示右邊框，不顯示任何邊框.

rules=""(all,groups,rows,cols,none)

顯示分隔線，參數(shù)的含義依此是：顯示所有分隔線，只顯示組與組之間的分隔線，只顯示行與行之間的分隔線，只顯示列與列之間的分隔線，不顯示任何分隔線。

建立了一個表格區(qū)，接著我們就要把這個表格分開，那么就必須用到<tr></tr>這個標(biāo)識，一般我們添加多少個<tr></tr>就表格就會分成多少行。一個表格的基本格式如下:

<table>

<tr>

<td>

</td>

</tr>

</table>

[例5-2]

現(xiàn)在我們就來看看<tr>的參數(shù)設(shè)定吧。

<tralign=""valign=""bgcolor=""bordercolor=""bordercolorlight=""bordercolordark="">

align=""(left,right,center)

這就不多說了。水平位置的設(shè)定.

valign=""(top,middle,bottom)

垂直位置的設(shè)定琀?瑧?瑬;開嫞??????。

bgcolor=""

這一列的背景色。

bordercolor=""

這一列的邊框顏色。

bordercolorlight=""

這一列的向光部分.

bordercolordark=""

這一列的背光部分.

有了列，就要開始設(shè)定單元格，可以說單元格就是一個表格的最小單位。我們用過<td></td>來實現(xiàn).在<tr>下面寫入多少個<td></td>就會在這一列中顯示出多少個單元格。然后我們來看看對單元格有些什么參數(shù)可以設(shè)定吧。

<tdwidth=""height=""colspan=""rows

人人文庫> 全部分類> 應(yīng)用文書 > 規(guī)章制度

溫馨提示

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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML語言入門教程

文檔簡介

溫馨提示

最新文檔

評論

HTML語言入門教程

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔