隨筆 - 20  文章 - 12  trackbacks - 0
          <2010年8月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          2930311234

          常用鏈接

          留言簿(1)

          隨筆檔案(20)

          java論壇

          我的朋友

          最新隨筆

          搜索

          •  

          積分與排名

          • 積分 - 15175
          • 排名 - 1998

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          HTML語言是網(wǎng)頁(yè)的源代碼程序語言,我們平時(shí)看到的花花綠綠形形色色的網(wǎng)頁(yè),它并不是想象中的電影海報(bào)那樣,將文字和圖片簡(jiǎn)單拼接,像貼畫一樣就可以貼成的,而是通過HTML源程序來具體規(guī)定網(wǎng)頁(yè)的排版方式、網(wǎng)頁(yè)顯示的內(nèi)容。

          HTML的全名是HyperText?Markup?Language,直譯就是超文本標(biāo)記語言。從這個(gè)名字上來講,一、它是文本,它在網(wǎng)上就是以文本的方式傳輸?shù)模欢⑺且环N標(biāo)記性質(zhì)的語言。這個(gè)深入之后就可以體會(huì)到所謂“標(biāo)記”的真正含義。

          在這里我只介紹基礎(chǔ)的簡(jiǎn)單的HTML語言不詳細(xì)展開,可以參考詳細(xì)的書籍資料。

          HTML編輯的方法很簡(jiǎn)單,正因?yàn)槭俏谋荆憧梢杂萌魏挝谋揪庉嫻ぞ邅砭帉慔TML源代碼,比如最常用的就是WINDOWS的“記事本”。當(dāng)然,在你保存的時(shí)候不能保存為單純的文本文件,而要選擇保存為“網(wǎng)頁(yè)”,在“記事本”中你可以這樣保存,選擇“另存為”,保存類型為“任何文件”,文件名加上“.html”或者“.htm”的擴(kuò)展名就行了,這兩個(gè)擴(kuò)展名表示文件類型為網(wǎng)頁(yè)文件。

          HTML是一種文本語言,所以,你所輸入的文本信息,是會(huì)直接顯示給大家看到的,而標(biāo)記的部分,只是作為限定文本顯示的方式而已,我們舉個(gè)例子:

          首先我們希望在網(wǎng)頁(yè)上顯示“歡迎”這兩個(gè)字,那要怎么它才會(huì)顯示呢?很簡(jiǎn)單,你直接在網(wǎng)頁(yè)文件中寫入“歡迎”,這兩個(gè)字就會(huì)顯示出來了,但是我們并不滿足,我們希望這兩個(gè)字能夠顯示的顯眼一點(diǎn),所以可以用一個(gè)加粗的標(biāo)記:<b>歡迎</b>,再打開網(wǎng)頁(yè)的時(shí)候我們發(fā)現(xiàn)歡迎已經(jīng)顯示為加粗了。我們用了一對(duì)<b>...</b>標(biāo)簽來限定了“歡迎”這兩個(gè)字的顯示方式——加粗,幾乎所有的HTML標(biāo)記都是這個(gè)樣子,不同的標(biāo)簽其實(shí)就是對(duì)文本不同方式的限定而已,所以,到這里我想你能明白為什么把它叫做“標(biāo)記語言”的原因了吧?。

          加粗標(biāo)簽<b>...</b>只是我們最常用的也是最簡(jiǎn)單的一個(gè)標(biāo)簽而已,不同功能的標(biāo)簽,我們根據(jù)功能來分類:頂級(jí)標(biāo)簽、文本標(biāo)簽、圖片媒體標(biāo)簽、表格排版標(biāo)簽、框架標(biāo)簽還有表單標(biāo)簽,不明白不要緊,我會(huì)一一介紹給大家的。

          今天我們就來談?wù)勥@頂級(jí)標(biāo)簽

          頂級(jí)標(biāo)簽是用來說明文檔的基本信息用的,主要包括這幾個(gè):<html>...</html>、<head>...</head>、<body>...</body>

          1.<html>...</html>標(biāo)簽
          作用:說明該文檔是一個(gè)HTML網(wǎng)頁(yè)文檔
          這個(gè)是最主要的標(biāo)簽,它表示其中的內(nèi)容是HTML源代碼,所以,其他的源代碼、標(biāo)簽都位于這個(gè)標(biāo)簽以內(nèi)。
          2.<head>...</head>
          作用:頭部標(biāo)簽,這個(gè)標(biāo)簽用來存放文檔的基本信息,僅僅作為說明用的,所以在網(wǎng)頁(yè)中一般都不顯示
          3.<body>...</body>
          作用:這個(gè)才是主題部分,是網(wǎng)頁(yè)內(nèi)容顯示,所有網(wǎng)頁(yè)中的主體內(nèi)容均包含在這個(gè)標(biāo)簽以內(nèi)。

          仍然用我們剛才的那個(gè)例子,一個(gè)顯示加粗的歡迎字樣的網(wǎng)頁(yè),可以這樣來編寫:
          程序代碼:?[?復(fù)制代碼?]?[?運(yùn)行代碼?] ?
          <html>
          <head>
          </head>
          <body>
          <b>歡迎</b>
          </body>
          </html>

          將它保存為“.htm”擴(kuò)展名的文件,雙擊運(yùn)行看看,效果就有了哦!其實(shí)網(wǎng)頁(yè)就是這樣的標(biāo)簽堆成的:)

          可能大家注意到<head></head>這個(gè)頭部標(biāo)簽沒有包含任何內(nèi)容,我們剛才說過這個(gè)是用來存放說明網(wǎng)頁(yè)基本信息用的,如何存放呢,這個(gè)標(biāo)簽還有這么幾個(gè)子標(biāo)簽可以使用,分別說明文檔的信息:
          1.<title>...</title>
          網(wǎng)頁(yè)的標(biāo)題,它會(huì)顯示在瀏覽器的標(biāo)題欄上面,例如我們可以這樣寫:
          <title>歡迎頁(yè)面</title>
          這幾個(gè)字就會(huì)在標(biāo)題欄上面顯示出來了。

          2.<link>
          這個(gè)標(biāo)簽是沒有結(jié)束標(biāo)記的(</link>),這是怎么回事呢?因?yàn)檫@個(gè)標(biāo)簽只是引進(jìn)外部的文件,它并不包含任何文本內(nèi)容,我們來看一個(gè)例子:
          程序代碼:?[?復(fù)制代碼?]?[?運(yùn)行代碼?] ?
          <link?rel=stylesheet?href="style.css"?type="text/css">
          這個(gè)大概有點(diǎn)復(fù)雜了,我解釋一下:標(biāo)簽中的內(nèi)容叫做標(biāo)簽的屬性,它是具體來說明標(biāo)簽包含的內(nèi)容的,其中的內(nèi)容不在網(wǎng)頁(yè)上面顯示,上面這一句的意思是從外部導(dǎo)入一個(gè)叫做style.css的文件(href表示的內(nèi)容),它的文件類型是stylesheet(樣式表,以后會(huì)知道的,rel表示的內(nèi)容),類型為?CSS樣式表(type表示的內(nèi)容)。這里我們從外部導(dǎo)入了一個(gè)文件,并且可以在網(wǎng)頁(yè)中使用這個(gè)導(dǎo)入的文件(這是后話了),導(dǎo)入過程中我們沒有需要網(wǎng)頁(yè)顯示出任何文本的信息,所以自然就不用結(jié)束標(biāo)簽了,以后有幾個(gè)標(biāo)簽也是沒有結(jié)束標(biāo)簽的,比如換行標(biāo)記“<br>”

          3.<meta>
          作用:原數(shù)據(jù)
          這個(gè)標(biāo)簽用來說明文本的一些基本的數(shù)據(jù)資料,也是不在網(wǎng)頁(yè)中顯示出來的,所以,也沒有結(jié)束標(biāo)記。
          舉個(gè)例子:
          程序代碼:?[?復(fù)制代碼?]?[?運(yùn)行代碼?] ?
          <meta?name="keywords"?lang="en"?content="web,page">
          這里就說明了一個(gè)網(wǎng)頁(yè)關(guān)鍵字,name表示這個(gè)標(biāo)簽的內(nèi)容(可以任意設(shè)置只要自己看得懂表示什么意義就行了),lang表示語言(en是英語的意思),?content則是關(guān)鍵字的內(nèi)容,有什么作用呢?這個(gè)是提供給搜索引擎查找數(shù)據(jù)用的,搜索引擎查找關(guān)鍵字的時(shí)候,首先就是掃描這個(gè)標(biāo)簽內(nèi)容,所以,要是為了讓搜索引擎更快的搜索到你的網(wǎng)頁(yè),這個(gè)設(shè)置就很重要拉~這只是一個(gè)應(yīng)用而已,meta標(biāo)簽非常有用,以后具體遇到運(yùn)用的地方再詳細(xì)展開咯!

          頭部標(biāo)記主要的子標(biāo)簽就這3個(gè),注意運(yùn)用的話將會(huì)啟到很好的作用。

          除了子標(biāo)簽以外,頭部標(biāo)簽中還經(jīng)常包括一些功能性的程序模塊,比如JAVA?SCRIPT代碼段等等,這些運(yùn)用都是十分常用的,以后會(huì)詳細(xì)說明。

          我們把今天所學(xué)的內(nèi)容匯總起來編寫成一個(gè)網(wǎng)頁(yè):
          程序代碼:?[?復(fù)制代碼?]?[?運(yùn)行代碼?] ?
          <html>
          <head>
          <link?rel=stylesheet?href="style.css"?type="text/css">
          <meta?name="keywords"?lang="en"?content="web,page">
          </head>
          <body>
          <b>歡迎</b>
          </body>
          </html>


          在上一講中,我們提到的是HTML文檔的主標(biāo)簽也叫頂級(jí)標(biāo)簽,以及頭部標(biāo)簽<head>...</head>子標(biāo)簽的運(yùn)用,這些部分一般都不在網(wǎng)頁(yè)中顯示出來,它的作用,主要是為了說明文檔的一些概要性質(zhì)的資料,一方面,可以給搜索引擎之類的查詢系統(tǒng)能更快得搜集資料,另外一方面,也是告訴了瀏覽器一些初始的操作:比如<link>標(biāo)簽的外部導(dǎo)入文件功能。

          我們正在要顯示在網(wǎng)頁(yè)中的內(nèi)容,全部包含在<body>...</body>標(biāo)簽(網(wǎng)頁(yè)主體標(biāo)簽)中,這個(gè)我們上一次其實(shí)也已經(jīng)提到了,以后我們所要說到的那些標(biāo)簽,基本上都是用在主體之中也就是<body>標(biāo)簽里面。這些標(biāo)簽有許多,我們按照功能來對(duì)其進(jìn)行分類,上一講中已經(jīng)提到,我們先來學(xué)習(xí)一下文本標(biāo)簽。

          文本標(biāo)簽,顧名思義就是用來修飾文本用的,比如,文字的大小、顏色、樣式、字體等等等等。

          1.<p>...</p>?????段落標(biāo)簽
          可用屬性:align
          段落標(biāo)簽表示位于其中的文本,為一個(gè)段落,在顯示的時(shí)候,會(huì)自動(dòng)首行縮進(jìn)字符,而且會(huì)與前一段和后一段文字空出一行來,以體現(xiàn)這段文字為一個(gè)獨(dú)立的段落。

          加入屬性align,它的取值可以是:left、center、right,這個(gè)是對(duì)齊屬性,可以讓這段文字在網(wǎng)頁(yè)中分別:左對(duì)齊、居中、右對(duì)齊,舉個(gè)例子
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <p?align=center>這里是段落</p>

          功能就是把“這里是段落”這幾個(gè)文字歸為一個(gè)段落,與前文和后文都空一行,而且,文字居中對(duì)齊。

          注意:在這里你可以省略結(jié)束標(biāo)簽</p>,這是什么道理呢?因?yàn)楹竺嬗謺?huì)有新的段落,當(dāng)遇到新的段落或者其他文本的時(shí)候,系統(tǒng)也就自然會(huì)知道上一段落到這里也就結(jié)束了,所以自動(dòng)會(huì)把上一個(gè)段落結(jié)束掉,但是,我們不鼓勵(lì)這里的缺省標(biāo)簽!在國(guó)際網(wǎng)頁(yè)規(guī)范中,是不允許有未封閉的標(biāo)簽的,因?yàn)檫@會(huì)給統(tǒng)計(jì)系統(tǒng)、其他文本識(shí)別系統(tǒng)帶來處理的麻煩,作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師,嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度也是十分必要的。

          2.<pre>...</pre>預(yù)定義標(biāo)簽
          屬性:width
          所謂預(yù)定義標(biāo)簽,就是讓其中的文字能夠按照你輸入的方式顯示出來。這句話可能你有點(diǎn)犯迷糊了,難道網(wǎng)頁(yè)中的文本不是我怎么寫就是怎么顯示的嗎?事實(shí)確實(shí)是這樣,HTML網(wǎng)頁(yè)文檔在顯示的時(shí)候,它只承認(rèn)你輸入的第一個(gè)空格符號(hào),而其他的符號(hào)均會(huì)忽略,例如兩個(gè)文字之間你一共打了5個(gè)空格符號(hào),顯示出來的時(shí)候卻會(huì)發(fā)現(xiàn)只空了一格而已,而且,換行符(TAB鍵),回車符號(hào)等等一切超過一個(gè)空格長(zhǎng)度的間隔符號(hào)都會(huì)被忽略為一個(gè)空格。這其中的道理其實(shí)也是有利有弊,空格符的忽略,可以給文本的后臺(tái)程序處理帶來方便,同時(shí)也會(huì)在制作的時(shí)候帶來麻煩,但既然它這樣規(guī)定我們也是沒有辦法改變的。如果你要想保持你輸入的那些空格、換行之類的符號(hào),那就用這個(gè)預(yù)定義標(biāo)簽把你想保留間隔符的文本給限定起來,它將不會(huì)忽略你所輸入的空格和換行。

          屬性width是規(guī)定文本的最大寬度,如果不限定的話,網(wǎng)頁(yè)顯示時(shí)是不會(huì)自動(dòng)換行而一直顯示下去,除非遇到換行標(biāo)簽。

          3.<q>...</q>引用標(biāo)簽
          經(jīng)常在論壇灌水的朋友我想對(duì)引用這個(gè)功能一定不會(huì)陌生,引用別人說的話和文字,引用的內(nèi)容會(huì)被一個(gè)特殊的方框框起來并且提示引用,這里的引用標(biāo)簽就是這個(gè)作用,引用部分的文本會(huì)像<p>標(biāo)簽?zāi)菢优c前后的文字空行分隔,而且會(huì)在前面留白,以區(qū)別其他文字。

          4.<hr>?水平線
          很簡(jiǎn)單,加這個(gè)標(biāo)簽就是在網(wǎng)頁(yè)中顯示一條水平線而已,它沒有結(jié)束標(biāo)簽,因?yàn)樗痪哂行揎椢谋镜墓δ堋?br />水平線的顯示效果由一下屬性來規(guī)定:
          width???水平線寬度,值可以是正整數(shù)或者百分?jǐn)?shù),正整數(shù)表示單位為象素,百分比。。當(dāng)然就是占當(dāng)前行的百分比拉
          size?????水平線的高度,其實(shí)就是粗細(xì),值取正整數(shù),單位也是象素
          align????對(duì)齊,取left/center/right,表示對(duì)齊方式
          noshade??無陰影,水平線默認(rèn)有一個(gè)陰影效果,如果輸入這個(gè)值,就會(huì)取消而只顯示一條平面的線

          舉個(gè)例子:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <hr?size=2?width=100?noshade?align=left>

          就是一條左對(duì)齊,高度為2象素,長(zhǎng)度為100象素并且沒有陰影效果的直線(屬性順序可以任意寫)。

          5.<br>換行標(biāo)簽
          這個(gè)非常常用了,很簡(jiǎn)單,就是在標(biāo)簽位置插入一個(gè)換行,前面我們說過,編輯文檔的時(shí)候輸入的換行是會(huì)被忽略為一個(gè)空格的,所以換行的部位你可以用換行標(biāo)簽來實(shí)現(xiàn),當(dāng)然你用<pre>標(biāo)簽也是可以的,不過換行標(biāo)簽更加常用更加方便,它沒有任何屬性也沒有結(jié)束標(biāo)簽,理由我想可以不用說了吧

          6.<center>...</center>居中標(biāo)簽
          作用也非常簡(jiǎn)單也非常實(shí)用,可以讓位于標(biāo)簽中的一切東東全部居中顯示,也許你要問,那如果我在居中標(biāo)簽中使用了<p?align=left>段落文字</p>,那“段落文字”是居中呢還是左對(duì)齊?呵呵,你只要記住HTML這個(gè)特性就行了:修飾標(biāo)簽修飾功能有重疊或者沖突時(shí),總是以最靠近被修飾文本的標(biāo)簽或者說最后一次修飾的標(biāo)簽為準(zhǔn),所以,“段落文字”會(huì)左對(duì)齊。

          7.<font>字體標(biāo)簽
          這個(gè)標(biāo)簽非常實(shí)用,大部分文本的修飾工作都要靠它來完成。我們看看它可以使用的屬性,就知道它可以怎么修飾文本了:
          size???字體大小,可以取1、2、3、4、5、6、7,1最小7最大,還可以取+1,+2,+3,+4,+5,+6,+7,-1,-2,-3,-4,-5,-6這是相對(duì)大小,即在原來大小上做加減。
          color????顏色,字體的顏色由這個(gè)屬性來修飾,顏色必須使用網(wǎng)頁(yè)通用的顏色代碼,它由一個(gè)#符號(hào)開始,6位16進(jìn)制數(shù)字組成,比如#ff0000代表紅色,這個(gè)代碼可以對(duì)照顏色表來決定。你也可以輸入一些預(yù)設(shè)好的顏色如:red(紅色)、green(綠色)等等,不過不是你認(rèn)為對(duì)的顏色英文單詞都可以用,你可以自己試試看。
          face????字體,多種字體可以用半角的“,”隔開,比如:“宋體,楷體,黑體”,第一個(gè)首選,如果瀏覽者沒有第一種字體就嘗試第二個(gè),依此類推。

          字體標(biāo)簽的運(yùn)用:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <font?color="#ff0000"?size=3?face="宋體,楷體,黑體">被修飾的文字</font>

          表示大小為3號(hào),紅色,首選為宋體的文字。

          8.特殊修飾字體標(biāo)簽,這幾個(gè)標(biāo)簽都是沒有屬性,而且非常簡(jiǎn)單只實(shí)現(xiàn)單一修飾功能的標(biāo)簽,如下:
          <b>...</b>????加粗字體
          <i>...</i>????斜體字
          <u>...</u>??加下劃線
          <sup>...</sup>???上標(biāo)
          <sub>...</sub>???下標(biāo)
          <s>...</s>???加刪除線

          <em>...</em>???斜體,跟<i>標(biāo)簽功能相同
          <strong>...</strong>???加粗
          <code>...</code>???代碼,會(huì)以特殊的字體顯示,可以自己試試看了

          以上分成了兩組,第二組還有其他的標(biāo)簽,但是運(yùn)用的比較少,第一組是修飾標(biāo)簽,第二組則是歸類為強(qiáng)調(diào)性文字用的標(biāo)簽。

          9.<a>...</a>?鏈接標(biāo)簽
          這個(gè)用處非常大,就是給文本加上超鏈接信息(以后我們講了圖片之后,你會(huì)發(fā)現(xiàn)也可以給圖片加鏈接),可以說網(wǎng)頁(yè)的瀏覽功能就是靠這個(gè)標(biāo)簽的完成的!看它的屬性:
          href???鏈接地址URL,就是鏈接的地址,可以是相對(duì)的地址也可以是絕對(duì)地址
          target??目標(biāo)位置,就是打開鏈接的位置,可以取_self(在當(dāng)前窗口打開新鏈接)、_blank(在新窗口打開)、name(在指定窗口名字的窗口打開),還有一些其他的取值等我們提到框架的時(shí)候在具體說明。
          舉個(gè)例子:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <a?href="http://thefeeling.rknw.com"&?...?quot;_self">蟲子的博客</a>

          這就給“蟲子的博客”加上了鏈接,點(diǎn)擊這個(gè)鏈接的時(shí)候會(huì)在當(dāng)前窗口打開我的博客網(wǎng)頁(yè):)

          文本標(biāo)簽主要說的就這些,這些也是最常用到的,在下一次,我們講述的是圖片媒體標(biāo)簽與排版標(biāo)簽,進(jìn)一步美化我們的網(wǎng)頁(yè)咯!好,我們把今天所講的東西做在一個(gè)頁(yè)面里:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <html>
          <head>
          <title>HTML學(xué)習(xí)</title>
          </head>
          <body>
          <font?size=6?color=green>HTML?的學(xué)習(xí)</font>
          <hr?size=1?width=100%?ailgn=left>
          <p?align=left><b>今天我們學(xué)習(xí)了文本標(biāo)簽</b></p>
          這篇文章出自<a?href="http://thefeeling.rknw.com"?target=_self>未名蟲子的博客</a>
          </body>
          </html>


          請(qǐng)注意:當(dāng)我們需要多個(gè)顯示效果的時(shí)候,我們的標(biāo)簽是可以互相套用起來的,但是要注意,就像括號(hào)一樣標(biāo)簽必須成對(duì)出現(xiàn),并且一一相對(duì)應(yīng)好,不然,會(huì)出現(xiàn)意外的顯示效果出來!


          在網(wǎng)絡(luò)中,我們常用的地址有絕對(duì)地址與URL,所謂絕對(duì)地址,就是物理地址,也就是我們電腦上最常用來表示文件地址,格式一般是這樣:“盤符:\文件夾\文件”,實(shí)際在網(wǎng)絡(luò)上的運(yùn)用要比URL要少得多,很多情況是在后臺(tái)程序中運(yùn)用,比如ASP中常用的數(shù)據(jù)庫(kù)連接,數(shù)據(jù)庫(kù)所在位置必須使用絕對(duì)地址也就是物理地址才能夠完成讀取、寫入操作,這些內(nèi)容等與大家聊到后臺(tái)程序設(shè)計(jì)的時(shí)候再細(xì)細(xì)地說吧。

          URL是我要說的一個(gè)比較重要的概念,英文全名是:?Uniform?Resource?Locator(統(tǒng)一資源定位器),是文檔在Web或者Internet上的地址,一般用在超級(jí)鏈接當(dāng)中。盡管URL?看起來可能很長(zhǎng)很復(fù)雜,但它總是由四個(gè)部分構(gòu)成:協(xié)議、主機(jī)名、文件夾名(路徑)和文件名,各有各的特定功能。

          下面是一個(gè)標(biāo)準(zhǔn)的URL:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          http://thefeeling.rknw.com/music/musiclist.html

          其中,http://是協(xié)議,thefeeling.rknw.com是主機(jī)名,/music是文件夾名,musiclist.html是文件名。

          協(xié)議

          協(xié)議用于指定計(jì)算機(jī)傳輸信息時(shí)所用的語言,具體來說,協(xié)議告訴瀏覽器信息在什么地方(例如在Web服務(wù)器、FTP服務(wù)器或者本地硬盤等等),并且告訴瀏覽器取得文件的過程(例如是否需要登陸、服務(wù)器提供哪些信息等)。

          下面是常用的幾個(gè)協(xié)議:
          http://???用于Web文檔,包括HTML文檔及相關(guān)鏈接,最常用。
          file:///????用于本地硬盤上的文檔,第三個(gè)“/”表示主機(jī)名,所以可以直接輸入文件夾名和文件名。
          ftp://?????用于FTP服務(wù)器上的文檔。
          gopher://?用于gopher服務(wù)器上的文檔。
          telnet://??用于與特定主機(jī)的telnet鏈接,一般用于鏈接圖書館書目,但這個(gè)協(xié)議是不確定的,因?yàn)椴恢涝L問者端是否安裝或者設(shè)置了telnet應(yīng)用程序。
          wais://??用于鏈接wais數(shù)據(jù)庫(kù),很少用到。
          mailto:???用于提供一個(gè)窗口,讓訪問者向指定e-mail地址發(fā)送消息。大多數(shù)瀏覽器都支持mailto:,但是它還不是標(biāo)準(zhǔn)或者正是接受的協(xié)議。這個(gè)協(xié)議不帶//。
          news:???用于連接新聞組或者組中的特定文章,但這是不保險(xiǎn)的,因?yàn)槲覀儫o法知道瀏覽者要訪問哪一個(gè)新聞組。

          主機(jī)名

          主機(jī)名是保存HTML文檔和相關(guān)文件的服務(wù)器名。每一個(gè)服務(wù)器都有特定的地址,該服務(wù)器上所有的文檔都有相同的主機(jī)名。

          作為信息的提供者,不一定非用服務(wù)器名作為URL的主機(jī)名部分。我們可以使用虛擬域名,用自己的主機(jī)名,但文件仍然存在別的主機(jī)上。

          文件夾名

          文件夾名使URL中的下一段信息,表示文件所在的文件夾。文件夾在Web服務(wù)器上的作用與PC機(jī)上相同,就是用于組織文檔。如果把文件放在最高層,則可以不要文件夾名。為了管理和維護(hù)的方便,一般都是把相關(guān)的文件放在相關(guān)的文件夾里的。這是文件管理和網(wǎng)頁(yè)制作的一個(gè)好習(xí)慣。

          文件夾命名時(shí),它只能以下列字符:
          1。字母(大寫,小寫)
          2。數(shù)字
          3。符號(hào),包括美元($),連字符(-),下劃線(_),點(diǎn)號(hào)(.)

          如果文件夾名含有其他字符,就要采用這些字符的十六進(jìn)制表示。例如,有些操作系統(tǒng)在文件夾名中支持空格,為了在URL中放進(jìn)空格,就需要采用與空格對(duì)應(yīng)的十六進(jìn)制表示符20%。一般來說,最好不要使用特殊符號(hào)給文件夾命名。

          文件名

          文件名時(shí)具體HTML文檔或者其他文件的名稱,具體包括兩個(gè)信息:文件的名稱和文件的擴(kuò)展名。在提供文件名時(shí),者兩個(gè)信息都不能有錯(cuò)誤,否則就會(huì)報(bào)告找不到這個(gè)文件。

          在Web服務(wù)器上,指定URL中的主機(jī)名或者文件夾名而不指定文件名時(shí),可以取得某個(gè)缺省的文件。比如我們?cè)跒g覽器中只需要輸入主機(jī)名:www.sina.com.cn,而不輸入文件名就能顯示頁(yè)面,原因是Web服務(wù)器根目錄下有一個(gè)缺省文件index.htm存在。

          URL的類型

          URL隨鏈接文檔的位置不同而不同。例如:如果文件在www上,URL就比較長(zhǎng),有比較多的信息:如果文件在本地硬盤上,那么就可以比較短了。

          URL大致可以分成:

          絕對(duì)URL
          相對(duì)URL

          絕對(duì)URL幾乎包含了URL的全部信息,包括協(xié)議、主機(jī)名、文件夾名和文件名。如果其中的任何一個(gè)部分出錯(cuò),那么都會(huì)找不到相應(yīng)的文件。

          相對(duì)URL通常只包含文件夾名和文件名,如果就在當(dāng)前文件夾下,那么連文件夾名都不需要。此時(shí),瀏覽器假設(shè)鏈接的目標(biāo)文檔和原文檔在同一個(gè)文件夾中或者同一個(gè)服務(wù)器中,所以不需要協(xié)議和主機(jī)名。相對(duì)URL的使用跟Unix和Dos中的目錄進(jìn)出很相似。比如“../”表示上一級(jí)目錄,“./”表示當(dāng)前目錄,?“/”表示根目錄。

          舉個(gè)例子:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          ../../hello.htm


          表示鏈接到當(dāng)前文件所在位置的上一級(jí)的上一級(jí)文件夾中的hello.htm文件的URL。

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          /index.htm


          表示鏈接到當(dāng)前服務(wù)器下根目錄中的index.htm文件的URL。

          在做葉子時(shí),對(duì)于同一服務(wù)器下的頁(yè)面,一般鼓勵(lì)使用相對(duì)URL,這與訪問鏈接的速度很有關(guān)系,如果你使用的時(shí)絕對(duì)地址,那么服務(wù)器在進(jìn)行尋址操作時(shí),會(huì)按照絕對(duì)URL的支持重復(fù)一次尋址操作,如果用了相對(duì)URL,那么服務(wù)器在尋址時(shí)就直接從當(dāng)前文件所在文件夾開始進(jìn)行,速度上有明顯的優(yōu)勢(shì),一般情況下除非沒有辦法,盡量使用相對(duì)URL。


          首先說說圖片標(biāo)記,從前幾次我們也了解到,網(wǎng)頁(yè)其實(shí)就是用HTML語言寫的特殊類型文本文件,而不是如同WORD那樣的軟件,文字和圖片可以以“塊”的方式進(jìn)行任意編排,用一個(gè)白背景,然后所有的塊可以任意往上面貼的,任意變換他們的位置的,一切,都必須用HTML設(shè)定好的標(biāo)記來添加進(jìn)去。因此,插入圖片也是使用特定標(biāo)簽——圖片標(biāo)簽來插入的,至于圖文混排的具體方法,這個(gè)接下來說網(wǎng)頁(yè)排版問題的時(shí)候再詳細(xì)展開。

          HTML文檔,屬于純文檔,因此用簡(jiǎn)單的記事本就可以打開編輯,我們不可能用WORD中的“插入圖片”命令來簡(jiǎn)單把圖片放進(jìn)去,我們要用到的標(biāo)記是:<img>

          <img>標(biāo)記相比其他的標(biāo)簽來說稍微復(fù)雜一點(diǎn),我先用個(gè)例子來說明:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <img?src="tupian.jpg"?align=absmiddle?alt="這里是圖片"?width=120?height=120>


          什么意思呢?其實(shí)就是指,在這個(gè)標(biāo)簽的位置插入一張圖片,圖片的來源是src中的內(nèi)容即tupian.jpg,width/height這個(gè)我想不用我解釋大家也能明白,這個(gè)分別是圖片的寬度和高度,align這個(gè)屬性似曾相識(shí),我們?cè)?lt;p>段落標(biāo)記中也用到過,它代表的是“對(duì)齊方式”,這里也是用樣的道理,也是表示圖片的對(duì)齊方式,但是稍稍不同的是,圖片的對(duì)齊方式指的是與四周文字的對(duì)齊方式,我們可以取的值有:?top?middle?bottom?abstop?absmiddle?absbottom等,常用的就這幾個(gè),什么意思呢?top即頂對(duì)齊,其實(shí)就是圖片的上緣與文字的頂部對(duì)齊,middle當(dāng)然就是文字對(duì)齊到圖片的中間,而bottom則是文字對(duì)齊到圖片的下緣。很顯然一般圖片的高度是肯定要超過文字的,所以這個(gè)對(duì)齊方式?jīng)Q定了它周圍一行文字的位置關(guān)系,abs是“絕對(duì)”的意思,是以文字所在行的對(duì)齊方式,與“非絕對(duì)”有什么不同呢?這個(gè)在說道網(wǎng)頁(yè)排版的時(shí)候,就清楚了。此外,align還可以取left(左對(duì)齊),這種對(duì)齊方式,文字將環(huán)繞圖片分布,具體效果是什么樣大家可以自己操作試試看。記住是圖文混排的時(shí)候才起作用的。alt屬性是對(duì)圖片的說明,不在網(wǎng)頁(yè)上直接顯示,當(dāng)由于某種原因圖片文件沒有找到的時(shí)候,說明文字則會(huì)被顯示出來,這很重要,由于網(wǎng)絡(luò)速度的問題,圖片并不一定能完全導(dǎo)入,或者導(dǎo)入失敗,那么,必要的文字說明是很需要的,瀏覽者需要知道這個(gè)位置原來是要放什么東西。

          從這個(gè)例子我們看到,HTML插入圖片的時(shí)候,并不是直接把一張圖片放進(jìn)去,而是用了一種間接的方式,做了一個(gè)標(biāo)記(即<img>標(biāo)簽),告訴瀏覽器從哪里下載這一張圖片(即src屬性指定的地址),然后以多少寬度高度顯示,如何與周圍文字對(duì)齊,在找不到圖片的時(shí)候如何顯示,這樣HTML就把原本是圖片的文件簡(jiǎn)單的用一行語句給代替了,當(dāng)瀏覽者打開這個(gè)網(wǎng)頁(yè)的時(shí)候,在從標(biāo)簽中指定的位置取讀取圖片文件并以指定的方式顯示出來。以后你會(huì)發(fā)現(xiàn)?HTML除了圖片,其他例如聲音、動(dòng)畫等等之類的媒體插入的時(shí)候都是利用這種方式。

          總結(jié)一下圖片標(biāo)簽的運(yùn)用:
          標(biāo)簽:<img>??(沒有結(jié)束標(biāo)簽)
          可用屬性:
          src?????圖片的來源,值為URL(上次我們已經(jīng)詳細(xì)討論過了),相對(duì)和絕對(duì)URL都可以,當(dāng)然,盡量用相對(duì)URL
          width???圖片寬度,值為正整數(shù),可以取0(取0圖片就沒了。。。也沒多大意義),單位是象素
          height???圖片高度,用法同width
          align????與周圍文字對(duì)齊方法,取值:top(頂部對(duì)齊)、middle(中間)、bottom(底部)、absmiddle(絕對(duì)中間)、absbottom(絕對(duì)底部)、baseline(基線對(duì)齊)、left(左對(duì)齊)、right(右對(duì)齊)
          alt????文字說明,當(dāng)圖片不能顯示時(shí),會(huì)在原來圖片位置顯示說明文字,當(dāng)鼠標(biāo)移動(dòng)到圖片上方并停留時(shí),也會(huì)顯示出來
          border???圖片的邊線,取值為整數(shù),表示圖片邊線的寬度,0時(shí)沒有邊線
          hspace、vspace??圖片與周圍文本的距離,值為整數(shù)

          如何給圖片做鏈接呢,上回我們說到<a>標(biāo)記的時(shí)候,我提到<a>標(biāo)記不僅可以給文字加鏈接,也可以給圖片加鏈接,所以,只要把圖片標(biāo)記放到<a>...</a>之間就實(shí)現(xiàn)鏈接了,舉例如下:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <a?href="http://thefeeling.rknw.com"?target="_self"><img&?...?nbsp;width=88?height=31?alt="蟲子的BLOG"?border=0></a>


          這個(gè)例子,其實(shí)就是我的BLOG的圖片鏈接:)

          網(wǎng)頁(yè)中除了文本之外有了圖片,就變得豐富多彩了,但是,圖文混排就成了問題,我們不能隨便讓一個(gè)圖片插入到文本之間,雖然圖片標(biāo)記中的align屬性能提供簡(jiǎn)單的對(duì)齊關(guān)系,但是這樣版面還是比較混亂,所以,必須需要一個(gè)框框架架的東西,來編排好網(wǎng)頁(yè)的格局,就像書架一樣,先得有個(gè)架子,然后往上面放東西就會(huì)比較整齊、條理,網(wǎng)頁(yè)中的編排方式,大致可以分成一下三種:表格布局、框架布局和CSS+DIV布局方法,我們這里要討論的,主要是表格布局,框架布局略微說明(其實(shí)是比較簡(jiǎn)單的),CSS+DIV布局方式是目前最標(biāo)準(zhǔn)的布局方法,需要很深的CSS基礎(chǔ),所以,暫時(shí)只作為介紹。

          關(guān)于表格布局,今天的篇幅有限,所以放到下一次專門來討論這個(gè)表格布局方法。

          框架布局,就是把原本是一個(gè)頁(yè)面的網(wǎng)頁(yè),分成塊,然后在每一個(gè)塊中分別導(dǎo)入一個(gè)頁(yè)面,以此拼成一個(gè)整體的頁(yè)面。框架的頁(yè)面,需要以下兩個(gè)部分:一就是架子,二就是架子里放的東西。首先我們要搭一個(gè)網(wǎng)頁(yè)的架子出來,單獨(dú)保存為一個(gè)頁(yè)面,這個(gè)頁(yè)面包括了網(wǎng)頁(yè)的基本框架結(jié)構(gòu)和框架中導(dǎo)入頁(yè)面的地址。

          框架的主標(biāo)記:<frameset>...</frameset>
          屬性:
          rows???多重框架高度
          cols????多重框架寬度
          這個(gè)標(biāo)記是用來切分頁(yè)面用的,比如:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <framset?rows="80,*">


          將頁(yè)面分成了兩個(gè)部分,即上部和下部,上部高度占80象素,下部則是占剩下的高度(用*來表示余下的部分),另外這個(gè)80可以寫成百分?jǐn)?shù),這樣就以百分比來切分頁(yè)面。這個(gè)標(biāo)簽,就是框架的架子

          除了上述兩個(gè)切分頁(yè)面的屬性外還有:

          frameborder???是否顯示框架分隔線,取值為yes、no
          framespace????框架內(nèi)部留白,即框架內(nèi)容與分隔線之間的距離
          bordercolor????分隔線的顏色

          框架單元標(biāo)簽:<frame>
          沒有結(jié)束標(biāo)記

          屬性:
          name???這個(gè)框架單元的名字
          src??????框架內(nèi)容的來源
          frameborder??是否顯示框架分隔線,取值為yes、no
          marginwidth??框架內(nèi)留白的寬度
          marginheight?框架內(nèi)留白的高度
          scrolling???框架內(nèi)容超過內(nèi)容大小的時(shí)候是否顯示滾動(dòng)條,可以取auto(自動(dòng),超過就顯示不超過則不顯示,這個(gè)是默認(rèn)值)、yes(總是有滾動(dòng)條)、no(沒有滾動(dòng)條,這樣超過的部分就顯示不出來了)

          這個(gè)標(biāo)簽的作用,就是用來代表框架中的具體內(nèi)容了。下面我們來看一個(gè)具體的例子:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <html>
          <head>
          <title>框架實(shí)例</title>
          </head>
          <frameset?rows="80,*"?frameborder="no"?border=0?framespacing=0>
          ???<frame?src="top.htm"?scrolling="no"?name="top">
          ???<frame?src="content.htm"?scrolling="auto"?name="content">
          </frameset>
          </html>


          這個(gè)框架頁(yè)面,把網(wǎng)頁(yè)分成了上下兩個(gè)部分,上部占80象素高,下部占余下的部分,上部導(dǎo)入top.htm這個(gè)頁(yè)面為內(nèi)容,下部導(dǎo)入content.htm這個(gè)頁(yè)面作為內(nèi)容,也就是說這個(gè)頁(yè)面其實(shí)是由兩個(gè)頁(yè)面拼接而成的。

          為什么我們要設(shè)置name這個(gè)屬性呢?假如我們?cè)趖op.htm這個(gè)葉子里有這樣的一個(gè)鏈接:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <a?href="myfavorite.htm"?target="content">我的愛好</a>


          當(dāng)我們點(diǎn)擊這個(gè)“我的愛好”的鏈接,就會(huì)打開myfavorite.htm這個(gè)頁(yè)面,在哪里打開?對(duì)了,注意到target屬性沒有用我們上次說的那些值:?_self、_blank,而是用了下部的那個(gè)框架content的名字,就是在命名為content的框架中打開這個(gè)頁(yè)面,這樣,就實(shí)現(xiàn)了網(wǎng)頁(yè)中部分內(nèi)容的切換而不切換整個(gè)頁(yè)面,就像電視的畫中畫功能一樣,通過上部框架頁(yè)面的鏈接控制下部框架顯示的內(nèi)容,反過來也可以用下面的鏈接控制上部框架的內(nèi)容,這個(gè)只是跟target的取值有關(guān)而已,這樣我們也就體會(huì)到框架的好處了

          我們修改一下上面的那個(gè)框架頁(yè)面:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <html>
          <head>
          <title>框架實(shí)例</title>
          </head>
          <frameset?rows="80,*"?frameborder="no"?border=0?framespacing=0>
          ???<frame?src="top.htm"?scrolling="no"?name="top">
          ???<frameset?cols="10%,*"?frameborder="no"?border=0?framespacing=0>
          ?????<frame?src="left.htm"?scrolling="no"?name="left">
          ?????<frame?src="content.htm"?scrolling="auto"?name="content">
          ???</frameset>
          </frameset>
          </html>


          這段代碼,我們對(duì)下部的框架進(jìn)行了再分割,分成左邊占10%、右邊占剩下的空間兩個(gè)部分,左邊導(dǎo)入left.htm頁(yè)面作為內(nèi)容,右邊則是導(dǎo)入content.htm作為內(nèi)容。

          類似的,我們可以對(duì)框架再細(xì)細(xì)分隔,但是,隨著分隔數(shù)量增多,網(wǎng)頁(yè)被分成了許多塊,每一塊必須導(dǎo)入一個(gè)頁(yè)面作為內(nèi)容,這樣,對(duì)網(wǎng)頁(yè)的更新、修改是非常麻煩的一件事情,所以,框架的布局是十分有限的,復(fù)雜的頁(yè)面,我們最好還是采用表格布局或者CSS+DIV布局。

          CSS?+DIV布局的思想,有點(diǎn)類似WORD的排版,也就是把文字圖片等等網(wǎng)頁(yè)的內(nèi)容分成許多塊,然后,用坐標(biāo)值來定位每一個(gè)塊的位置,這樣就實(shí)現(xiàn)了類似于?WORD的排版方式,所謂的DIV其實(shí)就是塊的意思,而CSS在布局時(shí)發(fā)揮的作用就是用坐標(biāo)來詳細(xì)定義這些塊的位置,以此可見,只要我們改動(dòng)CSS中關(guān)于坐標(biāo)的定位值,我們就可以輕松改變網(wǎng)頁(yè)中塊的位置,網(wǎng)頁(yè)的整體布局也就會(huì)完全被改變!這種布局方式是目前的潮流所趨,但是需要比較搞的HTML+CSS編輯能力,真正排版起來,也并不是向我現(xiàn)在說的那么輕松的。但是,它比表格布局方式運(yùn)行更快、更方便搜索引擎之類的查詢媒體搜索,所以潛力很大,而表格布局的簡(jiǎn)單實(shí)用也有它的優(yōu)勢(shì),也有其生命力,不需要熟悉CSS就可以實(shí)現(xiàn)網(wǎng)頁(yè)的編排,所以下一次,我們?cè)敿?xì)來討論如何用表格來對(duì)網(wǎng)頁(yè)進(jìn)行布局。


          今天講的差不多是HTML基礎(chǔ)的最后一講,也是最關(guān)鍵的表格布局。

          先不說布局,來說說怎么在網(wǎng)頁(yè)上畫出一張表格來。HTML是純文本的一種網(wǎng)頁(yè)語言,所以,網(wǎng)頁(yè)中的表格也必須轉(zhuǎn)化成標(biāo)簽代碼的格式,我們用<table>....<?/table>代表一個(gè)表格,用<tr>...</tr>來表示表格中的一行,用<td>...<?/td>來表示表格中的一格。具體來看下面一個(gè)例子:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <table>
          ??<tr><td>第一行第一格</td><td>第二格</td><td>第三格</td></tr>
          ??<tr><td>第二行第一格</td><td>第二格</td><td>第三格</td></tr>
          </table>


          上述例子是畫了一個(gè)2×3的表格,即有兩行,三列。這樣,HTML就把這個(gè)表格轉(zhuǎn)化成了代碼表示,我們現(xiàn)在具體看看這些標(biāo)簽的運(yùn)用:

          1.<table>...</table>
          表格標(biāo)記,代表其中是一個(gè)表格

          可用的屬性:
          width????表格寬度,可以取整數(shù)或者百分比數(shù),如果為百分比數(shù),則表示占網(wǎng)頁(yè)總寬度的百分比,如果表格嵌套在其他表格的某個(gè)單元格中,則表示占這個(gè)單元格寬度的百分比。
          height???表格高度,取值與寬度相同
          border???表格邊線寬度,取整數(shù),取0即不顯示邊線
          background??背景圖片,取值為URL
          bgcolor???背景顏色
          align??????對(duì)齊方式,與<p>的align對(duì)齊方式完全相同
          cellpadding??單元格填充距離,就是單元格中的內(nèi)容與邊線之間的距離,取整數(shù)
          cellspacing???單元格間距,取整數(shù)

          2.<tr>...</tr>
          表示表格的一行,只能用在<table>標(biāo)簽內(nèi)部

          屬性:
          align???該行中內(nèi)容的水平對(duì)齊方式,取值:left(左對(duì)齊)、center(居中)、right(右對(duì)齊)
          valign??該行中內(nèi)容的垂直對(duì)齊方式,取值:top(頂端)、middle(中間)、bottom(底部對(duì)齊)
          bgcolor?該行背景顏色

          3.<td>...</td>
          表示一個(gè)單元格,只能用在<tr>標(biāo)簽內(nèi)部

          屬性:
          width、height???單元格寬度和高度,取值和<table>中相同
          bgcolor????單元格的背景顏色
          background??單元格背景,取值為圖片的URL
          align、valign??單元格對(duì)齊方式,與<tr>標(biāo)簽中用法相同
          colspan???該單元格占用多少格列數(shù)
          rowspan??該單元格占用多少格行數(shù)

          下面我們舉一個(gè)稍微復(fù)雜一點(diǎn)的表格例子:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <table?width=500?height=400?cellpadding=0?cellspacing=0?bgcolor="#cccccc"?border=1>
          ??<tr>
          ?????<td?align=center?width=20%>第一行第一格</td>
          ?????<td?align=center?width=30%>第一行第二格</td>
          ?????<td?align=center?valign=middle?width=50%>第一行第三格</td>
          ??</tr>
          ??<tr>
          ?????<td?colspan=2?align=center>第二行第一格</td>
          ?????<td?align=center>第二行第二格</td>
          ??</tr>
          </table>


          畫出來表格大致是這個(gè)樣子:

          ┌──┬─────┬─────────┐
          ├──┴─────┼─────────┤
          └────────┴─────────┘

          在例子中,第一行的每一個(gè)單元格的寬度我都做了限定,而第二行我則沒有做限定,第二行的單元格會(huì)自動(dòng)與上一個(gè)單元格對(duì)應(yīng)對(duì)齊,也就是和該列上一個(gè)單元格的寬度相等,如果想要不相等怎么辦?對(duì)不起沒有辦法。。。HTML的表格自動(dòng)對(duì)齊方式有利有弊,如果同一列上下兩個(gè)單元格寬度不等時(shí),一個(gè)方法就是用?colspan來合并幾個(gè)單元格成為一格,這樣這個(gè)單元格的寬度就增加了,但是這樣這個(gè)單元格的寬度就等于上一列所合并的單元格寬度之和,還是不能隨意的改動(dòng),唯一的解決辦法是:在需要重新拆分成不同寬度的這個(gè)單元格中再插入一個(gè)表格,用新的表格來限定寬度!不同表格之間寬度是互相不影響的,這也是表格排版的一個(gè)重要思想!例如上一個(gè)表格中我們需要在第二行的第二格重新分成左右兩格,寬度與上一行不等:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <table?width=500?height=400?cellpadding=0?cellspacing=0?bgcolor="#cccccc"?border=1>
          ??<tr>
          ?????<td?align=center?width=20%>第一行第一格</td>
          ?????<td?align=center?width=30%>第一行第二格</td>
          ?????<td?align=center?valign=middle?width=50%>第一行第三格</td>
          ??</tr>
          ??<tr>
          ?????<td?colspan=2?align=center>第二行第一格</td>
          ?????<td?align=center>
          ????????<table?width=100%?height=100%?cellpadding=0?cellspacing=0?border=1>
          ????????<tr>
          ??????????<td?width=50%?align=center>左邊的表格</td>
          ??????????<td?width=50%?align=center>右邊的表格</td>
          ????????</tr>
          ????????</table>
          ?????</td>
          ??</tr>
          </table>


          表格的多重嵌套,就可以使表格的排版越來越復(fù)雜,但是,請(qǐng)注意表格嵌套層次越多,網(wǎng)頁(yè)導(dǎo)入的速度也就越慢,所以,合理嵌套并劃分表格以盡量減少對(duì)導(dǎo)入速度的影響,這是一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師必須考慮的問題。

          表格的畫法,我們就介紹這么多了,下面我們就來談?wù)勅绾斡帽砀駚聿季帧?br />
          其實(shí)非常簡(jiǎn)單,我們可以先用表格來畫一個(gè)網(wǎng)頁(yè)的整體框架結(jié)構(gòu),然后,把表格的邊線設(shè)置為0(即border=0)隱去所有的邊線,就可以實(shí)現(xiàn)網(wǎng)頁(yè)的布局了,除去邊線之后只有表格中的內(nèi)容會(huì)被顯示,框架結(jié)構(gòu)是不會(huì)顯示出來的,這就是我們說的表格布局,熟練了表格的制作以后其實(shí)這是非常簡(jiǎn)單的。

          這里,表格布局的觀念我要給大家說幾個(gè)注意點(diǎn),首先,一個(gè)網(wǎng)頁(yè)不要用一個(gè)表格來布局,網(wǎng)頁(yè)顯示時(shí),是一個(gè)表格導(dǎo)入完了然后全部顯示出來的,所以整個(gè)網(wǎng)頁(yè)如果只有一個(gè)表格的話,那么,只有等整個(gè)表格內(nèi)容導(dǎo)入之后才會(huì)被顯示出來,所以,如果網(wǎng)速比較慢的瀏覽者,那他將面對(duì)比較長(zhǎng)的時(shí)間是一個(gè)空白的頁(yè)面,而我們的期望是導(dǎo)入一部分就顯示一部分,避免消磨瀏覽者的耐心,所以表格布局要拆分成若干個(gè)表格來分擔(dān),如何拆分這就是個(gè)人習(xí)慣問題了,需要一段時(shí)間的實(shí)踐,慢慢就會(huì)有自己的套路。

          另外,將表格布局與框架布局合理結(jié)合,可以使網(wǎng)頁(yè)在瀏覽操作的時(shí)候更加方便,比如網(wǎng)頁(yè)的導(dǎo)航欄與內(nèi)容部分分成兩個(gè)框架,點(diǎn)擊導(dǎo)航欄鏈接時(shí)更換內(nèi)容部分的顯示而不更換導(dǎo)航欄的內(nèi)容,導(dǎo)航欄和內(nèi)容部分又可以使用表格來布局,瀏覽這樣一個(gè)布局格式的頁(yè)面將會(huì)是一件很方便的事情


          HTML?語言是動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)最基本的內(nèi)容,也是必須要熟悉的基礎(chǔ),ASP等等其他后臺(tái)程序的設(shè)計(jì)都是基于HTML的基礎(chǔ)之上的。但是,這里講HTML語言,目的并非是要大家用HTML來編寫網(wǎng)頁(yè)的源代碼,但可以作為修改網(wǎng)頁(yè)源代碼的基礎(chǔ),網(wǎng)頁(yè)細(xì)節(jié)部分的內(nèi)容還是必須通過對(duì)HTML源代碼直接修改來完成的。不過用記事本來編輯網(wǎng)頁(yè)是鍛煉基本功的一個(gè)非常好的途徑,其實(shí)我本人學(xué)習(xí)網(wǎng)頁(yè)制作,一開始接觸的也是HTML而不是諸如FRONTPAGE、DW之類的軟件,?FEELING?DESIGN最初版本,就是我完全使用記事本寫出來的,當(dāng)然這樣做的效率比起用軟件來要低得多,但是親手寫出來的網(wǎng)頁(yè)源代碼,結(jié)構(gòu)清晰,層次明確,沒有冗余的代碼,這也是軟件所不能及的,大家用什么方法來學(xué)HTML,可以自己把握衡量,如果你想向著網(wǎng)絡(luò)程序員的方向發(fā)展,那么鼓勵(lì)使用記事本或者其他純文本編輯器來寫網(wǎng)頁(yè)文件!

          本次要說的,如何豐富和美化網(wǎng)頁(yè)的內(nèi)容,其實(shí)也是一些純理論的東西,多實(shí)踐是最好的鍛煉方法。

          1.給網(wǎng)頁(yè)加入圖片。

          圖片對(duì)于一個(gè)網(wǎng)站來說是一把雙刃劍,加入圖片,給網(wǎng)頁(yè)的導(dǎo)入帶來了負(fù)荷壓力,圖片的文件大小往往比一個(gè)網(wǎng)頁(yè)(xxx.htm文件)大得多,這會(huì)減慢導(dǎo)入網(wǎng)頁(yè)的速度,然而圖片對(duì)于網(wǎng)站的美化來說不可缺少的。隨著現(xiàn)代網(wǎng)絡(luò)硬件的發(fā)展,網(wǎng)速也提高得非常快,可以說圖片導(dǎo)入的速度問題,以不像原來那樣占據(jù)主要地位了,但是一個(gè)好的網(wǎng)站,導(dǎo)入速度與美化必須都要慎重考慮!

          理論上說,比起密密麻麻的文字,直觀的圖片是瀏覽者更加愿意看的,所以,給網(wǎng)頁(yè)加上必要的圖片,為了加快導(dǎo)入的速度,圖片盡量使用網(wǎng)頁(yè)通用的圖片格式例如:GIF?JPG等,而不要使用未經(jīng)壓縮的BMP?PNG等,在不影響瀏覽效果的前提下,盡量壓縮圖片,能用HTML代替的地方盡量不要使用圖片。

          2.給網(wǎng)頁(yè)加入背景

          方法:<body>標(biāo)簽的屬性:background、bgcolor
          <body>標(biāo)簽的兩個(gè)屬性,background可以定義背景圖片,bgcolor則定義背景的顏色,例如:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <body?background="bg.gif"?bgcolor="#eeeeee">


          背景圖片會(huì)自動(dòng)重復(fù)鋪滿整個(gè)頁(yè)面,當(dāng)這兩個(gè)值都設(shè)置時(shí),將顯示圖片而不顯示背景顏色,兩個(gè)都定義的好處就是,如果背景圖片由于某些問題沒有導(dǎo)入成功,那么就不會(huì)顯示而顯示出背景顏色。

          3.給網(wǎng)頁(yè)加入背景音樂

          方法:<bgsound>標(biāo)簽
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <bgsound?src="URL"?loop=number>


          src屬性代表音樂來源URL,loop屬性表示音樂重復(fù)的次數(shù),如果想讓音樂無限循環(huán),取-1。注意,請(qǐng)慎重使用背景音樂,一方面會(huì)影響頁(yè)面的導(dǎo)入速度(音樂文件一般比圖片還要大),另一方面,比較正式的網(wǎng)站需要比較嚴(yán)肅的氣氛或者瀏覽者并不希望聽到什么聲音。

          4.給網(wǎng)頁(yè)加入視頻文件

          方法:<embed>...</embed>標(biāo)簽
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <embed?src="tv.wmv"?width=500?height=400?autostart="yes"></embed>


          src屬性表示視頻文件的來源URL
          width、height??表示視頻的寬度和高度
          autostart???表示是否在網(wǎng)頁(yè)導(dǎo)入后自動(dòng)播放,取值為yes、no

          這個(gè)標(biāo)簽不僅可以加入視頻,音頻也可以加入

          5.給網(wǎng)頁(yè)加入FLASH

          方法:<embed>...</embed>標(biāo)記

          用法和插入視頻相同,此外還可以用<object>...</object>(其實(shí)這個(gè)更加常用一點(diǎn)),屬性比較復(fù)雜,用法見下:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <object?classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"?codebase="http://download.macromedia.com/pub/sho?...?h/swflash.cab#version=4,2,0"?width="300"?height="300"?vspace=0?hspace=0?border=0>
          ??<param?name=flash?value="flash.swf">
          ??<param?name="scale"?value="noborder">
          </object>


          <?object>標(biāo)簽是插入媒體的標(biāo)簽,<param>是它的子標(biāo)簽,用來設(shè)定用<object>插入媒體的一些參數(shù)。?<object>標(biāo)簽中的classid屬性,后面跟著一大堆代碼,我們不用去管他,它是代表FLASH播放插件的,codebase代表?flash播放插件的位置,也就是說如果瀏覽者的瀏覽器上沒有安裝FLASH播放器的話,就會(huì)從這個(gè)位置下載播放插件以播放媒體文件。?width/height/vspace/hspace?這幾個(gè)屬性我想不用我多介紹了吧:)

          <param>是<?object>專用的子標(biāo)簽,它只能位于<object>標(biāo)簽內(nèi)部,用來設(shè)定播放插件的參數(shù)值,第一個(gè)參數(shù)值就是代表FLASH文件的地址URL,第二個(gè)參數(shù)是設(shè)定FLASH播放器沒有邊線顯示,參數(shù)根據(jù)object標(biāo)簽插入媒體的不同而不同,所以屬性是比較復(fù)雜的,這里我不詳細(xì)展開,大家可以參考HTML相關(guān)的書籍。

          6.內(nèi)部框架
          方法:<iframe>...</iframe>
          屬性:
          src???內(nèi)部框架的內(nèi)容來源URL
          width、height?框架寬度?高度
          marginwidth、marginheight??框架內(nèi)部?jī)?nèi)容留白
          frameborder?框架邊線的寬度,取值為整數(shù)

          例如:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <iframe?src="window.htm"?width=300?height=200?marginwidth=0?marginheight=0?frameborder=1>無法顯示框架</iframe>


          iframe?的功能,是插入一個(gè)內(nèi)部框架,就像打開了一個(gè)窗口,窗口內(nèi)導(dǎo)入了另外一個(gè)網(wǎng)頁(yè),合理利用這個(gè)標(biāo)簽將給頁(yè)面的布局帶來不少方便,<?iframe>...</iframe>標(biāo)簽內(nèi)的文本,是當(dāng)瀏覽器不能支持框架時(shí)所顯示的內(nèi)容(目前瀏覽器的版本基本都支持)

          7.加入動(dòng)態(tài)的文字

          方法:<marquee>...</marquee>標(biāo)簽
          屬性:
          direction??滾動(dòng)方向,取值:left(從右到左)、right(從左到右)、up(從下到上)、down(從上到下)
          behavior??滾動(dòng)方式,取值:scroll(無限次反復(fù)滾動(dòng)),slide(滑入,就是只滾動(dòng)一次),alternate(來回振蕩)
          loop???循環(huán)次數(shù),默認(rèn)無限次
          scrollamount??運(yùn)動(dòng)速度,取正整數(shù),默認(rèn)是6
          scrolldelay??運(yùn)動(dòng)停頓,取正整數(shù),默認(rèn)是0,也就是沒有停頓,如果這個(gè)值不為0則在滾動(dòng)中就會(huì)出現(xiàn)停頓現(xiàn)象
          align?滾動(dòng)部分的垂直對(duì)齊方式,取值:top?middle?bottom,默認(rèn)是middle
          bgcolor?滾動(dòng)部分的背景顏色
          height??滾動(dòng)部分的高度
          width???滾動(dòng)部分的寬度
          hspace??內(nèi)部?jī)?nèi)容留白

          一個(gè)例子:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <marquee?behavior="scroll"?direction="up"?width=100?height=200?scrollamount=2?scrolldelay=60>
          ????<p>這里是滾動(dòng)的文字
          ????<p><img?src="image.jpg"?alt="圖片也可以滾動(dòng)"?width=50?height=120?border=0>
          <marquee>


          8.加入腳本

          方法:<script>...</script>標(biāo)簽
          可以加入用其他語言編寫的腳本文件,例如最常見的Javascript腳本等等,可以幫助網(wǎng)頁(yè)實(shí)現(xiàn)一定的特效功能,這些腳本在網(wǎng)上有很多,他們屬于外部代碼不包括在HTML語言中,我這里也不詳細(xì)討論了。

          屬性:
          language??腳本使用的語言
          src???外部腳本文件導(dǎo)入地址,有些網(wǎng)頁(yè)為了方便將嵌入的腳本程序單獨(dú)保存為一個(gè)文件,然后用這個(gè)屬性來導(dǎo)入,這樣腳本可以被多個(gè)網(wǎng)頁(yè)使用而減少重復(fù)寫腳本代碼的時(shí)間。

          內(nèi)部腳本使用的例子:

          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <script?language="Javascript">
          <!--
          ??alert("腳本被執(zhí)行了!");
          -->
          </script>


          運(yùn)行時(shí)會(huì)彈出一個(gè)警告窗口,并告訴瀏覽者“腳本被執(zhí)行了!”,這個(gè)彈出警告窗口的功能就是javascript腳本來實(shí)現(xiàn)的,<!--??--?>這是什么意思呢?這是HTML中使用的注釋語句,包括在其中的文本不會(huì)顯示在網(wǎng)頁(yè)上,而保存在源代碼中,當(dāng)JAVASCRIPT源代碼編寫有問題時(shí)有時(shí)會(huì)把源代碼當(dāng)作普通文本顯示到網(wǎng)頁(yè)上,這不是我們想看到的,因?yàn)闀?huì)嚴(yán)重影響網(wǎng)頁(yè)的內(nèi)部文本顯示,影響美觀,用這個(gè)注釋標(biāo)簽可以保證內(nèi)部的文字不會(huì)被顯示,另外,寫過程序的朋友也知道,在程序中加入注釋可以增加程序的可讀性,雖然它并不在網(wǎng)頁(yè)的顯示中體現(xiàn)什么功能或者說是效果,但是給編程人員修改網(wǎng)頁(yè),查看代碼的時(shí)候帶來了很大的便利,網(wǎng)頁(yè)比較復(fù)雜,程序比較長(zhǎng)的時(shí)候必要的地方(如果功能模塊等)加入注釋是編程的一個(gè)好習(xí)慣

          外部導(dǎo)入腳本文件的例子:
          程序代碼:????[?復(fù)制代碼到剪貼板?]
          <script?language="Javascript"?src="javascript.js">...</script>


          這段代碼從外部導(dǎo)入了一個(gè)叫做javascript.js的腳本文檔,功能上,與腳本文檔中的程序代碼直接寫到HTML網(wǎng)頁(yè)里是完全相同的,好處就是一來多個(gè)網(wǎng)頁(yè)可以導(dǎo)入這同一個(gè)文檔避免重復(fù)寫代碼,二來修改這個(gè)腳本文檔,所有導(dǎo)入了這個(gè)腳本文檔的網(wǎng)頁(yè)功能也隨之會(huì)改變,修改起來就減輕了工作量,三來,網(wǎng)頁(yè)的結(jié)構(gòu)也更加清晰簡(jiǎn)單,給網(wǎng)頁(yè)的修改編輯帶來了方便。

          HTML的內(nèi)容到此全部結(jié)束,還有一個(gè)重要的層<div>標(biāo)簽沒有講,是因?yàn)樗贑SS中才發(fā)揮了強(qiáng)大的作用,所以當(dāng)我們說到CSS的時(shí)候再詳細(xì)給大家說明。

          另:
          格式預(yù)設(shè):<pre>內(nèi)容</pre>

          ????這是非常有用的一個(gè)標(biāo)簽,它可以使得最終顯示效果以原始格式實(shí)現(xiàn)。請(qǐng)看以下代碼和效果:

          代碼:

          <pre>
          ???1236
          ??-1207
          --------
          ?????29?
          </pre>

          效果:
          ???1236
          ??-1207
          --------
          ?????29?

          ????論壇里,有時(shí)我們需要精確地對(duì)齊某些元素,pre標(biāo)簽?zāi)軌驇蜕洗竺Γ芰钚Ч仍凇霸O(shè)計(jì)”模式下用空格符移動(dòng)顯示符號(hào)更準(zhǔn)確。


          posted on 2006-03-29 01:33 閱讀(7244) 評(píng)論(5)  編輯  收藏

          FeedBack:
          # re: HTML 語言標(biāo)簽 2006-07-29 09:56 lbcx125
          這位網(wǎng)友介紹的很詳細(xì),我從中收益頗多.我應(yīng)向這位朋友學(xué)習(xí).  回復(fù)  更多評(píng)論
            
          # re: HTML 語言標(biāo)簽 2006-09-20 08:39 ddd
          <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/0QgauN11VXQ&autoplay=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/0QgauN11VXQ&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>   回復(fù)  更多評(píng)論
            
          # re: HTML 語言標(biāo)簽 2006-09-20 08:40 ddd
          <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/0QgauN11VXQ"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/0QgauN11VXQ" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>   回復(fù)  更多評(píng)論
            
          # re: HTML 語言標(biāo)簽 2006-12-16 00:20 陳超
          多謝大哥了!!  回復(fù)  更多評(píng)論
            
          # re: HTML 語言標(biāo)簽 2010-08-06 16:12 loafer
          very good~  回復(fù)  更多評(píng)論
            

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 宜春市| 天全县| 阿鲁科尔沁旗| 大石桥市| 花莲县| 吐鲁番市| 澄江县| 颍上县| 科技| 定州市| 平舆县| 连南| 柳河县| 广昌县| 巫山县| 凭祥市| 天柱县| 通海县| 泸州市| 安岳县| 竹山县| 台前县| 南部县| 蓬安县| 托克托县| 肥城市| 介休市| 崇明县| 和硕县| 固镇县| 大丰市| 嘉峪关市| 翁源县| 保康县| 清水县| 东城区| 台州市| 东兰县| 鄯善县| 靖江市| 林州市|