HTML語(yǔ)言入門(mén)教程

上傳人：2*** IP屬地：湖北上傳時(shí)間：2022-12-29 格式：DOC 頁(yè)數(shù)：40 大?。?59.18KB 積分：30 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩35頁(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ǔ)言入門(mén)教程(一)什么是HTML語(yǔ)言

HTML(HyperTextMarkUpLanguage)是使用特殊標(biāo)記來(lái)描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語(yǔ)言，由W3C(WorldWideWebConsortium)所制定和更新。我們可以用任何一種文本編譯起來(lái)編輯HTML文件，因?yàn)樗褪且豢偧兾谋疚募?。HTML語(yǔ)言的基本結(jié)構(gòu)下面我們來(lái)看一小段HTML語(yǔ)言的代碼，來(lái)了解HTML語(yǔ)言的基本結(jié)構(gòu)：<html>

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

<body>

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

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

這是聲明HTML文件的語(yǔ)法格式。每一個(gè)HTML文件，都必須以<HTML>開(kāi)頭，以</HTML>結(jié)束<head>…………</head>這是文件頭聲明的語(yǔ)法格式。在這之內(nèi)的所有文字都屬于文件的文件頭，并不屬于文件本體。<title>…………</title>這是聲明文件標(biāo)題的語(yǔ)法格式。在這之中寫(xiě)下的所有內(nèi)容，都將寫(xiě)在網(wǎng)頁(yè)最上面的標(biāo)題欄中。<body>…………</body>這是聲明文件主體的語(yǔ)法格式。在者之間寫(xiě)下的內(nèi)容都是文件的主體，也就是說(shuō)將會(huì)被顯示在客戶(hù)區(qū)之中。注意：幾乎每一種HTML語(yǔ)言的語(yǔ)法都是以<>開(kāi)頭，以</>結(jié)束。在編輯HTML語(yǔ)言過(guò)程中，也可以使用注釋。語(yǔ)法格式為：<!-文件注釋->。就好像C語(yǔ)言中的/*…………*/一樣，中間的內(nèi)容只是解釋說(shuō)明，并不被編譯器所編譯。HTML語(yǔ)言的基本單位1.長(zhǎng)度單位長(zhǎng)度單位可以用來(lái)定義水平線、表格邊匡、圖像等對(duì)象的長(zhǎng)、寬、高等一系列屬性，同時(shí)也可以用來(lái)定義這些對(duì)象在頁(yè)面上的位置等屬性，用來(lái)描述頁(yè)面上可能遇到的各種長(zhǎng)度。長(zhǎng)度的表示方法有兩種：絕對(duì)長(zhǎng)度和相對(duì)長(zhǎng)度。他們的單位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每個(gè)點(diǎn)，而百分比代表的是相對(duì)于客戶(hù)區(qū)的多少。下面我們就以水平線的寬度為例，說(shuō)明這兩種表示方法。<html>

<head><title>HTML語(yǔ)言的長(zhǎng)度表示</title></head>

<body>

HTML(HyperTextMarkUpLanguage)是使用特殊標(biāo)記來(lái)描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語(yǔ)言。<hrwidth="500"><!絕對(duì)長(zhǎng)度的聲明><hrwidth="50%">

<!相對(duì)長(zhǎng)度的聲明></body></html>在文本編譯器中編譯，改變網(wǎng)頁(yè)的大小，就會(huì)看到這兩者表示長(zhǎng)度方法的不同。其中<hr>標(biāo)記是在頁(yè)面上建立水平線的標(biāo)記。width是水平線元素中的一種屬性，用來(lái)表示水平線的寬度。這里width="500"即表示這個(gè)水平線的寬度是500像素；width="%50"即表示水平線占據(jù)客戶(hù)區(qū)的總寬度的%50。2.顏色單位和長(zhǎng)度單位一樣，顏色單位也是描述頁(yè)面表現(xiàn)形式的一種很重要的的數(shù)據(jù)類(lèi)型。顏色單位有三種表示方法：16進(jìn)制顏色代碼、10進(jìn)制RGB碼、直接顏色名稱(chēng)。這三種表示方法不同，但是效果卻是一樣的。下面用一小段代碼說(shuō)明這三種顏色的表示方法。<html>

<head><title>HTML語(yǔ)言中顏色的不同表示方法</title></head>

<fontcolor="#008000">窗前明月光</font><br><!綠色><fontcolor="rgb(0,0,255)">疑是地上霜</font><br><!藍(lán)色>

<fontcolor="#ffff00">舉頭望明月</font><br><!黃色><fontcolor="#800000">低頭思故鄉(xiāng)</font><!栗色></body></html>注意：本文件在保存時(shí)請(qǐng)選擇Unicode字符型進(jìn)行保存。16進(jìn)制顏色代碼，語(yǔ)法格式：#RRGGBB。16進(jìn)制顏色代碼之前必須有一個(gè)“#”號(hào)，這種顏色代碼是由三部分組成的，其中前兩位代表紅色，中間兩位代表綠色，后兩位代表藍(lán)色。不同的取值代表不同的顏色，他們的取值范圍是00--FF。

10進(jìn)制RGB碼，語(yǔ)法格式：RGB(RRR,GGG,BBB)。在這種表示法中，后面三個(gè)參數(shù)分別是紅色、綠色、藍(lán)色，他們的取值范圍是0--255。以上兩種表達(dá)方式可以相互轉(zhuǎn)換，標(biāo)準(zhǔn)是16進(jìn)制與10進(jìn)制的相互轉(zhuǎn)換。直接顏色名稱(chēng)，可以在代碼中直接寫(xiě)出顏色的英文名稱(chēng)。以上三種表示方法的效果相同，一般16進(jìn)制顏色代碼的表示方法比較常用。讀者可以根據(jù)自己的喜好和實(shí)際情況來(lái)決定使用哪一種表示方法。關(guān)于不同顏色的定義，請(qǐng)查看相關(guān)資料。。3.URL路徑

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

a.絕對(duì)路徑：絕對(duì)路徑是將服務(wù)器上磁盤(pán)驅(qū)動(dòng)器名稱(chēng)和完整的倫夠?qū)懗鰜?lái)，同時(shí)也會(huì)表現(xiàn)出磁盤(pán)上的目錄結(jié)構(gòu)。語(yǔ)法格式：

<scheme>:<scheme_dependent_information>其中，<scheme>是某一種傳輸協(xié)議，而<scheme_dependent_information>則是連接的位置信息。例如：<ahref=""><ahref="file:///D:/test/html.htm">b.相對(duì)路徑：相對(duì)路徑是相對(duì)于當(dāng)前的HTML文檔所在目錄或站點(diǎn)根目錄的路徑。語(yǔ)法格式：相對(duì)關(guān)系/部分路徑/文件名根據(jù)相對(duì)路徑的參照點(diǎn)又可以分為相對(duì)文檔的相對(duì)路徑以及相對(duì)根目錄的相對(duì)路徑。

<1>相對(duì)文檔：這種路徑的表現(xiàn)形式是根據(jù)目標(biāo)文檔所在目錄和當(dāng)前文檔所在目錄之間的關(guān)系的一種表現(xiàn)形式。“../”表示上一級(jí)目錄，沒(méi)有“../”表示當(dāng)前目錄。例如當(dāng)前文檔的路徑是：test/project1/index.htm。我們要找test目錄下的html.htm。而當(dāng)前的目錄是project1，我們要回到上一級(jí)目錄中，所以路徑是“../html.htm”。

<2>相對(duì)根目錄：這種路徑根據(jù)目標(biāo)文檔相對(duì)于根目錄的關(guān)系的一種表現(xiàn)形式。在這種表達(dá)式種的第一個(gè)字符是“/”，這個(gè)符號(hào)表示這個(gè)路徑是一個(gè)相對(duì)于根目錄的表達(dá)式。例如：<ahref="/test/html.htm">這一課我給大家介紹html文檔中head部分的基本使用方法。

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

title：title包含的內(nèi)容將會(huì)被顯示在瀏覽器窗口的標(biāo)題欄中。給自己的網(wǎng)頁(yè)起一個(gè)適當(dāng)?shù)拿郑梢泽w現(xiàn)出一些自己的個(gè)性。語(yǔ)法格式：<title>…………</title>在省略號(hào)處加入的文字或符號(hào)，都將顯示在瀏覽器的標(biāo)題欄中。

meta：

meta元素提供的信息是用戶(hù)不可見(jiàn)的。下面是meta的幾種用法：定義搜索關(guān)鍵字：這里介紹兩種基本的用法：<metaname="keywords"content（內(nèi)容）="html,css,javascript"><metaname="description"(描述，描寫(xiě))content="網(wǎng)頁(yè)制作">這樣一來(lái)，在你的網(wǎng)頁(yè)中就會(huì)體現(xiàn)出這樣的信息。但是這些信息是不可見(jiàn)的，只是提供給那些搜索引擎使用。控制頁(yè)面緩存：<metahttp-equiv="pragma"（雜注）content="no-cache">瀏覽器一般為了節(jié)約時(shí)間，都在本地硬盤(pán)上保存一個(gè)網(wǎng)上的文件作為臨時(shí)版本。在用戶(hù)下次打開(kāi)這個(gè)網(wǎng)頁(yè)的時(shí)候，瀏覽器將會(huì)直接調(diào)用硬盤(pán)上的這個(gè)版本，而不是網(wǎng)上的。如果想讓瀏覽者每次打開(kāi)網(wǎng)頁(yè)的時(shí)候都是看到的最新版本，那么就在網(wǎng)頁(yè)上加上這一句吧！定義語(yǔ)言：<metahttp-equiv="content-type"content="text/html;charset="GB2312">我們可以通過(guò)這樣的語(yǔ)句設(shè)定語(yǔ)言的編碼方式。這樣，瀏覽器就可以為我們正確的選擇語(yǔ)言，不需要我們來(lái)選取。上面的例子顯示的就是簡(jiǎn)體中文，如果想要顯示繁體中文，將GB3212替換為BIG5就可以了。刷新頁(yè)面<metahttp-equiv="refresh"content="60",URL="new.htm">這樣的語(yǔ)句可以讓我們的瀏覽器按照content屬性中制定的時(shí)間來(lái)跳轉(zhuǎn)到URL屬性中設(shè)定的URL地址。上面的例子就是在打開(kāi)頁(yè)面60秒后調(diào)用一個(gè)新的頁(yè)面new.htm。如果沒(méi)有能夠找到new.htm，瀏覽器就﹞執(zhí)行刷新本頁(yè)的操作。這也是大多數(shù)聊天室的設(shè)定方法。

link：這個(gè)元素用來(lái)指定當(dāng)前文檔和其他文檔之間的聯(lián)接關(guān)系。語(yǔ)法格式：<linkrel="描述"href="URL地址">

rel說(shuō)明兩個(gè)文檔之間的關(guān)系；href說(shuō)明目標(biāo)文檔名。以下是一個(gè)指定外聯(lián)樣式表文件的例子：<linkrel="stylesheet"href="style.css">關(guān)于css層疊樣式表，請(qǐng)查閱有關(guān)資料。

base：用于定義文檔提交是默認(rèn)的外部資源。語(yǔ)法格式：<basehref="原始地址"target="目標(biāo)窗口名稱(chēng)">

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

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

script：標(biāo)記用來(lái)在頁(yè)面中加入腳本程序。語(yǔ)法格式：<scriptlanguage="腳本語(yǔ)言">…………</script>在language中一定要指定腳本語(yǔ)言的種類(lèi)。如VBScript等。

style：用來(lái)指定當(dāng)前文檔的css層疊樣式表。css對(duì)于網(wǎng)頁(yè)的字體樣式、背景、邊界等都有很大的應(yīng)用。詳細(xì)部分請(qǐng)大家參閱css有關(guān)內(nèi)容。這一次我給大家介紹html語(yǔ)言中的body的部分用法。大家從各大門(mén)戶(hù)網(wǎng)站的主頁(yè)上就可以看出，body部分占據(jù)了大部分的代碼?？梢?jiàn)body是一個(gè)網(wǎng)頁(yè)代碼的絕對(duì)主要部分。body是由<body>開(kāi)始，由</body>結(jié)束。下面我們看一下body部分的元素：元素描述bgcolor背景色background背景圖案text文本顏色link鏈接文字顏色alink活動(dòng)鏈接文字顏色vlink已訪問(wèn)鏈接文字顏色leftmargin頁(yè)面左側(cè)的留白距離topmargin頁(yè)面頂部的留白距離下面介紹各個(gè)部分的功能及用法：

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

background:background屬性用于指定頁(yè)面的背景圖案。語(yǔ)法格式：<bodybackground="URL">下面介紹幾種文字的屬性，可以改變文字的顏色,以及在頁(yè)面上留出空白：text

link

alink

vlinkleftmargintopmargin他們的作用分別是：非鏈接文字的顏色；可連接文字的顏色；正被點(diǎn)擊的可鏈接文字的顏色；已被點(diǎn)擊的可鏈接的文字的顏色；頁(yè)面左側(cè)的留白；頁(yè)面頂部的留白。語(yǔ)法格式：<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>說(shuō)明：對(duì)于link這樣的屬性，大多數(shù)html的頁(yè)面已經(jīng)不使用這樣的用法了?，F(xiàn)在多數(shù)是在head中加入相應(yīng)的代碼。要達(dá)到的效果是鼠標(biāo)放到有鏈接的字體上時(shí)，字體變色，點(diǎn)擊后字體變?yōu)榛疑?。具體方法如下：A:link{color:#00007f;}

A:visited{color:#65038e;}

A:active{color:#ff0000;}

A:hover{color:#ff0000;}將這段代碼加入到head中，在body中加入有鏈接的文字，就可以看出效果了。這一部分是屬于css中的知識(shí)。在body中加入有鏈接的文字：在Dreamweaver中，選定文字后，在下面的Properties中的link中加入想要鏈接到的頁(yè)面的地址。在FrontPage中，選定文字后，點(diǎn)擊右鍵就會(huì)有相應(yīng)的選項(xiàng)。第一課基礎(chǔ)Html是英文HyperTextMarkupLanguage的縮寫(xiě)，中文意思是“超文本標(biāo)志語(yǔ)言”，用它編寫(xiě)的文件(文檔)的擴(kuò)展名是.html或.htm，它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫(xiě)字板或FrontPageEditor等編輯工具來(lái)編寫(xiě)Html文件。Html語(yǔ)言使用標(biāo)志對(duì)的方法編寫(xiě)文件，既簡(jiǎn)單又方便，它通常使用<標(biāo)志名></標(biāo)志名>來(lái)表示標(biāo)志的開(kāi)始和結(jié)束(例如<html></html>標(biāo)志對(duì))，因此在Html文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。當(dāng)我們暢游Internet時(shí)，我們透過(guò)瀏覽器所看到的網(wǎng)站，是由HTML(HyperTextMarkupLanguage)語(yǔ)言所構(gòu)成。HTML(超文件標(biāo)記語(yǔ)言)是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，透過(guò)標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字等連結(jié)顯示出來(lái)。HTML標(biāo)記是由<和>所括住的指令，主要分為:單標(biāo)記指令、雙標(biāo)記指令(由<起始標(biāo)記>，</結(jié)束標(biāo)記>所構(gòu)成)。HTML網(wǎng)頁(yè)文件可由任何文本編輯器或網(wǎng)頁(yè)專(zhuān)用編輯器編輯，完成后(以.htm或.html為文件后綴保存)將HTML網(wǎng)頁(yè)文件由瀏覽器打開(kāi)顯示，若測(cè)試沒(méi)有問(wèn)題則可以放到服務(wù)器(Server)上，對(duì)外發(fā)布信息。HTML文件基本架構(gòu)<HTML>文件開(kāi)始

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

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

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

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

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

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

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

<BODY>本文區(qū):文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。注意事項(xiàng)通常一份HTML網(wǎng)頁(yè)文件包含二個(gè)部份:<HEAD>...</HEAD>標(biāo)頭區(qū)、<BODY>...</BODY>本文區(qū)。而<HTML>和</HTML>代表網(wǎng)頁(yè)文件格式。習(xí)慣上一個(gè)網(wǎng)站的首頁(yè)名稱(chēng)通常訂為index.htm或index.html這樣只要瀏覽網(wǎng)站，瀏覽器便會(huì)自動(dòng)的找出index.htm文件。第二課字體<hn>...</hn>標(biāo)題，設(shè)定標(biāo)題字體大小，n=1(大)~6(小)會(huì)自動(dòng)跳下一行。通常用在如章節(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)字<!...>注解(不會(huì)顯示在瀏覽器上)，可以多行。如:<!更新日期:2000/1/1>第三課表格表格是html的一項(xiàng)非常重要功能，利用其多種屬性能夠設(shè)計(jì)出多樣化的表格。使用表格可以使你的頁(yè)面有很多意想不到的效果，使頁(yè)面更加整齊美觀。常用表格標(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>表格欄資料(儲(chǔ)存格)(</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é)院如:(加強(qiáng)型)增加背景顏色、表格標(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提供許多種類(lèi)的標(biāo)示標(biāo)記，作項(xiàng)目標(biāo)示，而且可以作巢狀式標(biāo)示！常用標(biāo)示標(biāo)記<li>

標(biāo)示項(xiàng)目。如:

<ol>

<li>第一項(xiàng)

<li>第二項(xiàng)

</ol>1.

第一項(xiàng)2.

第二項(xiàng)<ol>...</ol>

編號(hào)標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。如:

<oltype=i>

<li>第一項(xiàng)

<li>第二項(xiàng)

</ol>i.

第一項(xiàng)ii.

第二項(xiàng)<ul>...</ul>

符號(hào)標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。如:

<ul>

<li>第一項(xiàng)

<li>第二項(xiàng)

</ul>第一項(xiàng)第二項(xiàng)<dt>

定義項(xiàng)目。<dd>

定義資料。<dl>...</dl>

定義標(biāo)示。如:

<dl>

<dt>十進(jìn)制:<dd>0、1、2、3、4、5、6、7、8、9

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

</dl>十進(jìn)制:0、1、2、3、4、5、6、7、8、9十六進(jìn)制: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>1.第一章i.第一節(jié)§第一段§第二段ii.第二節(jié)2.第二章3.第三章其他標(biāo)示標(biāo)記<dir>...</dir>目錄式標(biāo)示(自動(dòng)加圓點(diǎn))。如:

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

<dir>

<li>新手上路

<li>軟件教室

<li>設(shè)計(jì)教室

<li>開(kāi)發(fā)教室

</dir>網(wǎng)絡(luò)學(xué)院:·新手上路·軟件教室·設(shè)計(jì)教室·開(kāi)發(fā)教室注意事項(xiàng)標(biāo)示項(xiàng)目符號(hào)也可以用<font>...</font>標(biāo)記，以符號(hào)字元(○、◆、◎、★、■...等)標(biāo)示。如:<fontcolor=#ff0000>●</font>特殊符號(hào):在html文件中，有些符號(hào)是代表特定的意義的。所以當(dāng)我們要使用這些特殊符號(hào)時(shí)，便要用替代指令。符號(hào)替代指令""或"&&或&<<或<>>或>不可分空格第五課區(qū)段標(biāo)記一個(gè)網(wǎng)站不僅要內(nèi)容豐富外，也要有美觀簡(jiǎn)潔的版面。html所提供的區(qū)段標(biāo)記功能，如果可以好好的利用也會(huì)有相當(dāng)不錯(cuò)的效果。常用區(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>原始格式:文件第六課鏈接鏈接可說(shuō)是html中最重要的功能！因?yàn)閔tml擁有鏈接的功能，使你能接上internet、www……享受多姿多彩的網(wǎng)絡(luò)世界?；旧湘溄臃殖?外部鏈接——鏈接至網(wǎng)絡(luò)的某個(gè)url網(wǎng)址或文件，可參考考網(wǎng)絡(luò)鏈接方式。

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

·href鏈接的url位址或文件

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

<basehref="http:///">

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

·href鏈接的url位址或文件

·name名稱(chēng)

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

外部鏈接

<ahref="http:///">■</a><ahref="http:///"target=frame1>■</a>第六課鏈接內(nèi)部鏈接

·ch1.htm文件

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

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

·charset設(shè)定

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

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

·urlhtml位置如:

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

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

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

·link未看過(guò)的鏈接部份顏色

·vlink已看過(guò)的鏈接部份顏色如:<bodylink=#0000ffalink=#ff0000vlink=#00ff00>第八課設(shè)置圖片圖片增加了網(wǎng)站版面的美觀，不過(guò)也不要放了大量的圖片，而拖慢網(wǎng)站傳輸?shù)男视嘘P(guān)設(shè)定圖片的方法共有以下幾種:1.設(shè)定html文件背景圖片、背景顏色。<body>...</body>標(biāo)記。

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

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

·align調(diào)整

·alt提示字

·border邊框

·height高度

·src文件或url位址

·usemap地圖名稱(chēng)

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

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

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

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

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

·href動(dòng)作區(qū)域連結(jié)點(diǎn)(可載入位址或文件)

·nohref動(dòng)作區(qū)域連結(jié)點(diǎn)不動(dòng)作

·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音樂(lè)、wav音效喔！常用音樂(lè)標(biāo)記<bgsound>背景音樂(lè)、音效。相關(guān)屬性:

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

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

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

·height高度

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

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

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

·autostart自動(dòng)播放如:

<embedsrc=m-1.midwidth=145height=60autostart=trueloop=true></embed>第十課滾動(dòng)條這是由ie提供的滾動(dòng)條，可不要被眾多的屬性嚇到了，越多的屬性功能越強(qiáng)喔！【文字卷動(dòng)標(biāo)記】<marquee>...</marquee>文字卷動(dòng)(滾動(dòng)條)?！鞠嚓P(guān)屬性】·behavior=設(shè)定卷動(dòng)方式

--alternate交替來(lái)回卷動(dòng)

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

--slide滑動(dòng)·bgcolor=color背景顏色

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

·height=n高度

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

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

·scrolldelay=milliseconds設(shè)定卷動(dòng)時(shí)間

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

·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稱(chēng)為html的標(biāo)簽，以雙標(biāo)簽的形式出現(xiàn)，所謂雙標(biāo)簽，也就是有一個(gè)<table>就有一個(gè)對(duì)應(yīng)的</table>與之對(duì)應(yīng)，同樣適用于其他的雙標(biāo)簽。一般標(biāo)簽都為雙標(biāo)簽。標(biāo)簽最終所顯示的網(wǎng)頁(yè)效果由各個(gè)屬性來(lái)表達(dá)，屬性可選擇使用，不一定全部都用。在整個(gè)圖片或帖子里雙標(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"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

console一般正常面板

smallconsole較小的面板

playbutton只顯示播放按鈕

pausecutton只顯示暫停按鈕

stopbutton只顯示停止按鈕

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

<HEAD>

</HEAD>

<BODY>

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

</BODY>

</HTML>

例1-1

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

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

標(biāo)識(shí)的寫(xiě)法:

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

2.標(biāo)識(shí)的字母沒(méi)有大小寫(xiě)的區(qū)分。

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

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

現(xiàn)在我們開(kāi)始認(rèn)識(shí)第一類(lèi)標(biāo)識(shí)：文件標(biāo)識(shí)

事實(shí)上你已經(jīng)見(jiàn)過(guò)了這些標(biāo)識(shí),沒(méi)錯(cuò)就是<HTML>；<HEAD>；<BODY>；<TITLE>，

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

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

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

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

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

text=""

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

link=""

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

alink=""

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

vlink=""

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

background=""

設(shè)定背景墻紙。

bgcolor=""

設(shè)定背景顏色。

leftmargin=

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

topmargin=

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

bgproperties="fixed"

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

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

#000000,其中紅=00，藍(lán)=00,綠=00，色彩即為黑色

#0000FF，其中紅=00,綠=00，藍(lán)=ff,色彩即為藍(lán)色

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

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

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

下面我們就來(lái)看一個(gè)例子：

<html>

<head>

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

</head>

<body>

歡迎來(lái)到<fontface="Arial"size="5"color="ff0000">H.SWorkshop</font>

</body>

<html>

[例2-1]

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

face=

設(shè)定字體。

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

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

color=

設(shè)定文字色彩.

這里我們還發(fā)現(xiàn)了一個(gè)問(wèn)題，<basefont>沒(méi)有終止標(biāo)識(shí)，但它一樣可以實(shí)現(xiàn)它的功能，這就是HTML的空標(biāo)識(shí)，因?yàn)槲覀兛吹?lt;/basefont>沒(méi)有存在的意義，所以可以忽略，當(dāng)然如果你在<basefont>后面添加</basefont>對(duì)整個(gè)html文件也沒(méi)有影響。其他的我們就稱(chēng)之為圍堵標(biāo)識(shí)。

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

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

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

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

歡迎來(lái)到H.SWorkshop歡迎來(lái)到H.SWorkshop

<strong>歡迎來(lái)到H.SWorkshop</strong>歡迎來(lái)到H.SWorkshop

<b>歡迎來(lái)到H.SWorkshop</b>歡迎來(lái)到H.SWorkshop

<tt>歡迎來(lái)到H.SWorkshop</tt>歡迎來(lái)到H.SWorkshop

<samp>歡迎來(lái)到H.SWorkshop</samp>歡迎來(lái)到H.SWorkshop

<code>歡迎來(lái)到H.SWorkshop</code>歡迎來(lái)到H.SWorkshop

<kbd>歡迎來(lái)到H.SWorkshop</kbd>歡迎來(lái)到H.SWorkshop

<u>歡迎來(lái)到H.SWorkshop</u>歡迎來(lái)到H.SWorkshop

<strike>歡迎來(lái)到H.SWorkshop</strike>歡迎來(lái)到H.SWorkshop

<s>歡迎來(lái)到H.SWorkshop</s>歡迎來(lái)到H.SWorkshop

<big>歡迎來(lái)到H.SWorkshop</big>歡迎來(lái)到H.SWorkshop

<small>歡迎來(lái)到H.SWorkshop</small>歡迎來(lái)到H.SWorkshop

<sup>歡迎來(lái)到H.SWorkshop</sup>歡迎來(lái)到H.SWorkshop

<sub>歡迎來(lái)到H.SWorkshop</sub>歡迎來(lái)到H.SWorkshop

<i>歡迎來(lái)到H.SWorkshop</i>歡迎來(lái)到H.SWorkshop

<em>歡迎來(lái)到H.SWorkshop</em>歡迎來(lái)到H.SWorkshop

<var>歡迎來(lái)到H.SWorkshop</var>歡迎來(lái)到H.SWorkshop

<cite>歡迎來(lái)到H.SWorkshop</cite>歡迎來(lái)到H.SWorkshop

<dfn>歡迎來(lái)到H.SWorkshop</dfn>歡迎來(lái)到H.SWorkshop

<address>歡迎來(lái)到H.SWorkshop</address>歡迎來(lái)到H.SWorkshop

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

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

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

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

現(xiàn)在我們開(kāi)始認(rèn)識(shí)對(duì)段落控制的標(biāo)識(shí)，<p>,<br>,<nobr>.

<p>

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

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

分別表示左對(duì)齊，右對(duì)齊，居中。默認(rèn)值為left.

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

<HTML>

<HEAD>

</HEAD>

<BODY>

H.SWrokshop

<p>H.SWrokshop

<palign="center">H.SWrokshop

<palign="right">H.SWorkshop

</BODY>

</HTML>

[例3-1]

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

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

<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]

這樣一來(lái)我們就可以實(shí)現(xiàn)對(duì)<br>的對(duì)齊效果了。

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

<wbr>

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

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

<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>

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

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

align=

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

size=

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

width=

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

color=

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

noshade

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

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

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

<img>

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

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

src=

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

width=,height=

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

border=

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

hspace=,vspace=

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

align=（top,middle,bottom,left,right）默認(rèn)值為botom

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

alt=

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

lowsrc=

同樣在顯示src所顯示的圖片之前先顯示出一張圖片，條件也是在src還沒(méi)有被讀取的時(shí)候，一般我們用于顯示原圖片的縮略圖，使瀏覽者不會(huì)因?yàn)閳D片讀取慢而失去瀏覽的興趣。

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

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

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

windth=

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

border=

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

cellspacing=

表格線的厚度，為了和border=區(qū)別開(kāi)來(lái)，我們看個(gè)例子

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

<tr>

</tr>

<tr>

</tr>

</table>

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

<tr>

</tr>

<tr>

</tr>

</table>

[例5-1]

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

cellpadding=""

文字和格線之間的距離，使文字看起來(lái)更清晰。

align=""(left,right,center)

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

valign=""(top,middle,bottom)

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

background=""

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

bgcolor=""

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

bordercolor=""

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

bordercolorlight=""

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

bordercolordark=""

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

cols=""

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

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

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

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

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

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

<table>

<tr>

<td>

</td>

</tr>

</table>

[例5-2]

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

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

align=""(left,right,center)

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

valign=""(top,middle,bottom)

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

bgcolor=""

這一列的背景色。

bordercolor=""

這一列的邊框顏色。

bordercolorlight=""

這一列的向光部分.

bordercolordark=""

這一列的背光部分.

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

<tdwidth=""height=""colspan=""rowspan=""ali

人人文庫(kù)> 全部分類(lèi)> 教育資料 > 課件下載

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

HTML語(yǔ)言入門(mén)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

HTML語(yǔ)言入門(mén)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔