版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
學習網頁制作基礎入門教程目錄1網頁編寫 31.1用記事本編寫代碼 31.2標簽解釋： 51.3瀏覽剛做好的網頁 61.4制作網頁的規(guī)則 72排版標簽 72.1文字上的分隔標簽 72.2文字置左、置中、置右 82.3置中標簽 82.4向右縮排標簽 92.5保存原始格式標簽 92.6分隔線標簽 103字體標簽 133.1標題標簽 133.2設定字體大小標簽 143.3字型變化標簽 143.4文字顏色設定 153.5文字字型設定 163.6特殊字元 164圖象標簽 184.1圖象標簽 184.2網頁圖象的重要概念 205背景標簽 225.1背景標簽 225.2網頁內容、連接文字顏色設定 236連接標簽 266.1網頁內部的連接 266.2網頁外部的連接 266.3連接標簽的參數(shù) 277表格標簽 297.1表格單元格對齊位置設定 29合并表格單元格 307.2表格單元格對齊位置設定 317.3表格背景、底色設定 327.4表格邊框線的設定 347.5表格間距設定 358框架標簽 368.1框架概念 368.2開始分割 368.3其他標簽參數(shù)說明 388.4其他標簽 409序列標簽 419.1無序標簽 419.2有序標簽 4210表單標簽 4410.1文字輸入列 4410.2單選表單 4510.3復選表單 4510.4密碼表單 4610.5送出按鈕 4710.6按鈕元件 4810.7大量文字輸入元件 4910.8下拉式選單 491網頁編寫1.1用記事本編寫代碼1.首先打開“記事本”程序（方法是「開始」-「程序」-「附件」-「記事本」）2.將下面代碼復制好粘貼到記事本上，如圖-1所示。（按鼠標右鍵選擇粘貼就可以了！）<html>
<head>
<title>這里是標題</title>
</head>
<body>
這里是放置網頁內容的文本區(qū)域
</body>
</html>【圖-1說明】利用鼠標右鍵的“粘貼”或者按CTRL+V都可以將復制的內容粘貼上的。
【圖-2說明】點擊“文件”里的“保存”就可以文件保存了。將文件保存了，就大功告成了?。ㄔ谟脖P下建立建一個子目錄，我們就在E:盤下建立一個
myweb的子目錄，并將我們的網頁保存為就可以了。）
【圖-3說明】網頁文件的擴展名是htm或是html，所以千萬記得，請輸入完整的文件名，否則記事本將存為.txt的文本文件，那么瀏覽器就瀏覽不出效果來了。1.2標簽解釋：1.以上看到的就是一個最簡單架構的網頁。沒錯，網頁其實就是一堆標簽（所謂標簽就是指被<>包起來的語法）集合起來的，透過瀏覽器的整理，就便成了美麗漂亮的網頁了。2.簡單而言，通常一份完整的網頁包含了二個部分：頭部（HEAD）、文件主體（BODY）。也就是大家在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。3.在頭部里面<HEAD></HEAD>中，另有一組標簽<TITLE></TITLE>。打在<TITLE></TITLE>這里的文字會出現(xiàn)在瀏覽器窗口的最上面蘭色部分里，當作一個網頁的主題。4.您可能會發(fā)現(xiàn)，為什么一直沒有提到<HTML></HTML>這一組標簽呢，恩！因為它可有可無。這一組標簽是告訴瀏覽器：我是一份HTML文件！也就是說它是一個網頁的格式！通常都包在網頁的最上下兩端，將所有的原始碼都包起來了。1.3瀏覽剛做好的網頁1.剛剛保存了文件了，我們存的網頁文件在e:\myweb\。2.在您的瀏覽器的地址欄內輸入e:\myweb\或是file:///e|/myweb\吧?。ㄒ驗槊總€瀏覽器打開硬盤中文件的方式都不太一樣，所以用這樣的方法比較一致。）3.如何，看到您的第一個網頁了吧！【圖-4說明】要瀏覽我們剛做網頁是非常簡單的，首先我們打開瀏覽器，然后輸入我們剛剛保存的文件e:\myweb\看看，看是否能正確顯示無誤。您也可以按網頁范例【】，立即看看這篇網頁的樣子。1.4制作網頁的規(guī)則1.一般而言，一個網站的首頁名稱為或是一定要小寫，只要一進該網站，瀏覽器便會自動的找出這個文件，并且自動的去瀏覽的內容。2.文件大小寫一定要注意，沒事的話，文件名最好全部用「英文小寫字母」來命名，因為，在我們的電腦中，和是一樣的文件，但是上了網絡之后，網站服務器可是會認為這是不同的兩個文件，此時，若是沒注意，那可就！3.你發(fā)現(xiàn)了嗎？同一個標簽，好象都有兩個，唯一不同的是，后面的那一個多了一個“/”，如：<BODY></BODY>。前面的<BODY>是開始標簽，后面的</BODY>是結束標簽。大部分的標簽都是兩個一組，不過也有單一的，這在以后給大家講解。2排版標簽2.1文字上的分隔標簽1.使用方法：強制斷行標簽<BR>、強制分段標簽<P>2.標簽解說：我們在寫文章時，有時候在特定的地方會強迫斷行（<BR>），或是在寫完某一段的時候便會分段（<P>），制作網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。3.使用范例：原始代碼顯示結果
這是一個斷行的例子<BR>看出來了嗎？網頁教學網這是一個斷行的例子
看出來了嗎？網頁教學網這是一個分段的例子<P>看出來了嗎？網頁教學網這是一個分段的例子看出來了嗎？網頁教學網2.2文字置左、置中、置右1.使用方法：老實說，剛剛我們學習過分段標簽<P>再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：2.標簽解說：秘訣就在于「ALIGN=對齊位置」而已！ALIGN是分段標簽<P>的屬性之一，這個屬性將會常常在不同標簽中看到，它的功能是專門在設定「水平對齊位置」，其常見的設定值有三個，也就是置左（ALIGN="LEFT"）、置中（ALIGN="CENTER"）、置右（ALIGN="RIGHT"）。3.使用范例：原始代碼顯示結果<PALIGN="LEFT">文字靠左</P>文字靠左<PALIGN="CENTER">文字置中</P>文字置中<PALIGN="RIGHT">文字靠右</P>文字靠右2.3置中標簽1.使用方法：<CENTER>這是置中</CENTER>2.標簽解說：這個標簽是最常用到的標簽了，除了文字，對于圖片、表格，任何可以顯現(xiàn)在網頁上的內容都可以置中！3.使用范例：原始代碼顯示結果
<CENTER>這是中間</CENTER>這是中間
2.4向右縮排標簽1.使用方法：<BLOCKQUOTE>要縮排的文字</BLOCKQUOTE>2.標簽解說：利用<BLOCKQUOTE></BLOCKQUOTE>這個標簽可以將其包起來的文字，全部往右縮排。而且加一組標簽，往右縮排一單位，加兩組標簽，往右縮排兩個單位，依此類推。3.使用范例：原始代碼顯示結果<BLOCKQUOTE>縮排1單位</BLOCKQUOTE>縮排1單位<BLOCKQUOTE><BLOCKQUOTE>縮排2單位</BLOCKQUOTE></BLOCKQUOTE>縮排2單位2.5保存原始格式標簽1.使用方法：<PRE>文字內容</PRE>2.標簽解說：利用<PRE></PRE>這個標簽可以將其包起來的文字排版、格式，原封不動的顯示出來。算是相當好用的標簽之一。3.使用范例：原始代碼顯示結果
<PRE>文字格式</PRE>文字格式2.6分隔線標簽1.使用方法：上一段文字內容<HR>下一段文字內容2.標簽解說：利用<HR>這個標簽便可產生一條橫分隔線。另外，其有些屬性分別說明如下：3.使用范例：一般用法尚未加任何屬性。原始代碼普通分隔<HR>顯示結果普通分隔線顏色屬性用法：<HRCOLOR="顏色代碼或顏色名稱">原始代碼橘色分隔線<HRCOLOR="#FF8000">顯示結果橘色分隔線寬度屬性用法：<HRWIDTH="寬度">，其單位為px（像素），寬度也可用百分比來作設定，如50%即意為寬度占屏幕的50%。原始代碼寬度為300px的分隔線<HRWIDTH="300">顯示結果普通分隔線厚度屬性用法：<HRSIZE="厚度">原始代碼厚度為
10的分隔線<HRSIZE="10">顯示結果厚度為
10的分隔線位置屬性用法：<HRALIGN="水平對齊位置">，其設定值有三個，也就是置左ALIGN="LEFT"、置中ALIGN="CENTER"、置右ALIGN="RIGHT"原始代碼靠右的分隔線<HRALIGN="RIGHT">顯示結果靠右的分隔線陰影屬性用法：<HRNOSHADE>，無設定值，只要將NOSHADE加入即可，通常會配合顏色設定，效果較佳。原始代碼實心分隔線（無陰影)<HRNOSHADE>顯示結果實心分隔線（無陰影）
3字體標簽3.1標題標簽1.使用方法：<H1>標題內容</H1>2.標簽解釋：標題的大小一共有六種，兩個標簽一組，也就是從<H1>到<H6>，<H1>最大，<H6>最小。使用標題標簽時，該標簽會將字體變?yōu)榇煮w字，并會自成一行。3.使用范例：原始碼呈現(xiàn)結果<H1>標題1</H1>標題1<H2>標題2</H2>標題2<H3>標題3</H3>標題3<H4>標題4</H4>標題4<H5>標題5</H5>標題5<H6>標題6</H6>標題63.2設定字體大小標簽1.使用方法：<FONTSIZE="尺寸">文字內容</FONT>2.標簽解釋：標題的大小一共有七種，也就是<FONTSIZE=1>（最小）到<FONTSIZE=7>（最大），另外，還有一種寫法：<FONTSIZE=+1>文字內容</FONT>，其意思就是說：比預設字大一級。當然也可以FONTSIZE=+2（比預設字大二級），或是FONTSIZE=-1（比預設字小一級），以一般而言，預設字體多為3。3.使用范例：本網頁就是<FONTSIZE=9pt>3.3字型變化標簽1.使用方法：<B>文字內容</B>2.標簽解釋：在文字標簽里，對于文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現(xiàn)成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，并無強迫說遇到原始碼就要加上『原始碼』的標簽。3.使用范例：原始代碼顯示結果<B>粗體</B>粗體
<I>斜體</I>斜體<U>底線</U>底線<SUP>上標</SUP>上標<SUB>下標</SUB>下標<TT>打字機</TT>打字機<BLINK>閃爍</BLINK>閃爍<EM>強調</EM>強調<STRONG>加強</STRONG>加強<SAMP>范例</SAMP>范例<CODE>原始碼</CODE>原始碼<VAR>參數(shù)</VAR>參數(shù)<DFN>定義</DFN>定義<CITE>引用</CITE>引用<ADDRESS>所在地址</ADDRESS>所在地址3.4文字顏色設定1.使用方法：<FONTCOLOR="#000000">文字顏色</FONT>2.標簽解釋：文字也可以設定顏色！3.使用范例：原始代碼顯示結果<FONTCOLOR="#ff0000">紅色</FONT>紅色<FONTCOLOR="#ff8000">橙色</FONT>橙色<FONTCOLOR="#ffff00">黃色</FONT>黃色<FONTCOLOR="#00ff00">綠色</FONT>綠色<FONTCOLOR="#0080ff">藍色</FONT>藍色<FONTCOLOR="#8000ff">紫色</FONT>紫色<FONTCOLOR="#000000">黑色</FONT>黑色3.5文字字型設定1.使用方法：<FONTFACE="字型名稱">文字</FONT>2.標簽解釋：網頁上也可以使用字型！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是默認字體(默認字體為宋體)。另外要說明的是，這個標簽并無法保證在每個瀏覽器上都能正常的顯示，不過這并沒有關系，看不到特殊的字型時，瀏覽器仍會以默認字體顯示，所以不用怕會一團亂。3.使用范例：原始代碼顯示結果<FONTFACE="宋體">宋體</FONT>宋體3.6特殊字元1.使用方法：試打" "2.標簽解釋：很多特殊符號是需要特別處理的，比如說"<"、">"這兩個符號若想要顯示在網頁上是沒有辦法直接打"<"的，要顯示"<"必須輸入編碼表示法。3.使用范例：原始代碼顯示結果 (
代表一個不斷行空白)<<>>&&""
4圖象標簽4.1圖象標簽1.使用方法：<IMGSRC=""ALT="本站特約模特兒"ALIGN=RIGHTBORDER=0HSPACE=2VSPACE=2HEIGHT=56WIDTH=32>2.標簽解釋：目前常見的網頁圖形式有兩種就是GIF及JPG兩種格式。GIF格式只有256色，不過色彩比較鮮艷干凈漂亮，適合電腦美工圖案。而JPG格式的圖象是全彩色失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用JPG格式來表現(xiàn)。3.使用范例：基本用法用法：<IMGSRC="圖象名稱、路徑">
顯示圖片最基本的方法（就是不加任何屬性啦?。┢渲芯褪菆D片的文件名。原始代碼<IMGSRC="">我是網頁教學網模特兒！顯示結果我是網頁教學網模特兒！長寬設定用法：<IMGSRC="圖象名稱、路徑"
HEIGHT="高度"
WIDTH="寬度">設圖片的大小，其實不用設也可以，但是設置了更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算你的圖片有多大啦！此外你也可以自己隨意設定圖片大小。原始代碼<IMGSRC=""HEIGHT=30WIDTH=30>顯示結果加上說明用法：<IMGSRC="圖片"
ALT="說明文字">
鼠標移到圖片上時，說明文字就會自動出現(xiàn)。此外，在圖片未顯示出來或顯示不出來時，也會以這一段文字代替，讓使用者知道這個未顯示出來的圖片究竟是干什么用的，web標準強烈建議大家加上這個說明。原始代碼<IMGSRC=""ALT="網頁教學網">移到圖上看看。顯示結果移到圖上看看。圖片位置用法：<IMGSRC="圖片"
ALIGN="位置">
圖片位置設定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文繞圖”的效果。原始代碼<IMGSRC=""ALIGN=RIGHT>我往右邊靠！顯示結果我往右邊靠！原始代碼<IMGSRC=""ALIGN=LEFT>我往右邊靠！顯示結果我往左邊靠！原始代碼<IMGSRC=""ALIGN=TOP>文字對齊我頭頂！顯示結果文字對齊我頭頂！原始代碼<IMGSRC=""ALIGN=BOTTOM>文字對齊我腳底！顯示結果文字對齊我腳底！原始代碼<IMGSRC=""ALIGN=MIDDLE>文字對齊我中間！顯示結果文字對齊我中間！邊框設定用法：<IMGSRC="圖片"
BORDER="邊框粗細">
設定邊框大小，通常都設成0感覺比較美觀！因為內定的框框實在是不怎么漂亮。尤其在加連接時，設邊框簡直就是...。原始代碼<IMGSRC=""BORDER="4">顯示結果左右間距用法：<IMGSRC="圖片"
HSPACE="離左右元素的距離">
離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。原始代碼左邊的字<IMGSRC=""HSPACE="15">右邊的字顯示結果左邊的字右邊的字上下間距用法：<IMGSRC="圖片"
VSPACE="離上下元素的距離">
離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。原始代碼上面的字<BR><IMGSRC=""VSPACE="15"><BR>下面的字顯示結果上面的字
下面的字4.2網頁圖象的重要概念1.關于路徑：現(xiàn)在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋找到你的路徑去到該有的圖片，所以，我們來看看該如何正確使用路徑。有些人并不喜歡將網頁及圖片通通放在同一個目錄下，比如說有人將圖片放在c:\image里，而網頁文件放在c:\demo里，這樣的話，我們該如何正確的寫圖片的路徑呢？幾種常見的情況整理成下表：HTML文件位置圖片的位置寫法情形說明c:\democ:\demo<imgsrc="">圖文均在同一目錄c:\democ:\demo\image<imgSRC="../../images/">圖在網頁下一層目錄c:\democ:\<imgsrc="../">圖在網頁上一層c:\democ:\image<imgsrc="../../images/">圖文在同一層但不同目錄或許有人看到不明白，先說明一下，「../」是回到上一層目錄的意思?！竔mage/」則是進入下一層目錄image之意，而「../../image/」的意思就是，回到上一層目錄，然后再進入目錄image中。以上我們使用的均為“相對路徑”的概念。2.圖象單位：或許你常常看到px這個單位，沒錯，這是我們在制作網頁時最常用的一個單位了。這個單位完整的寫法是“Pixels”，我們稱之為“像素”。像素，是屏幕上的一個小光點，然而這一小光點的大小，并非是固定的，舉個例子而言，屏幕本身十五寸，不會因為你的任何設定而變成十七寸。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640×480」、「800×600」、「1024×768」等。舉其中之一的640×480來說，其代表的就是在屏幕上有寬640個光點，高有480光點，若是我們將解析度調整為800×600其寬勢必要從640
變成800個光點。3.圖象格式：網頁用的圖片目前只有GIF格式（即擴展名為gif的圖片，如：bg.gif）以及JPG格式（即擴展名為jpg的圖片，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用圖象處理軟件來制作格式的轉換吧！
5背景標簽5.1背景標簽1.使用方法：<BODYBGCOLOR="#ffffff"BACKGROUND="bg.jpg">2.標簽解釋：這個標簽其實應該老早就要講了，畢竟它是制作網頁不可或缺的基本要素之一，我們背景顏色或圖片的設定以及連接字體的顏色，統(tǒng)統(tǒng)都放在<BODY>這個標簽里面。解釋：背景顏色用法：<BODYBGCOLOR="顏色代碼">設定背景顏色。有人會說：“我已經設定了背景圖片，那背景顏色還有用嗎？”當然有用！當使用者連接到貴站時，若背景圖象還沒有顯示全，就會先顯示背景顏色，您說，是不是比一片灰灰的好看多了呢！原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYBGCOLOR="#F9E6A2">
這里是本文區(qū)域
</BODY>
</HTML>顯示結果單擊這里查看演示效果背景圖象用法：<BODYBACKGROUND="圖片名稱、路徑">設定背景圖象。圖片可以是JPG或GIF格式的圖片，強烈建議：圖象不要太大，否則網頁加載時會很慢的。原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYBACKGROUND="bg.jpg">
這里是本文區(qū)域
</BODY>
</HTML>顯示結果單擊這里查看演示效果5.2網頁內容、連接文字顏色設定1.使用方法：<BODYTEXT="#000000"LINK="#0000ff"VLINK="#ff00ff"ALINK="#ff0000>2.標簽解釋：用字體標簽中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個<BODY>標簽中，便有設定網頁內容、連接等文字的顏色內定值功能。用法如下：網頁內容顏色用法：<BODYTEXT="顏色代碼">設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會顯示你所設定的顏色。原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYTEXT="#0906A2">
這里是本文區(qū)域
</BODY>
</HTML>顯示結果單擊這里查看演示效果連接顏色用法：<BODYLINK="顏色代碼">設定“連接”的顏色。只要是有連接的地方就會出現(xiàn)你指定的顏色，當然，如果點擊連接后，那又會變成另一種顏色了，下面會說明。原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYLINK="#FF6600">
<AHREF="">連接文字</A>
</BODY>
</HTML>顯示結果單擊這里查看演示效果（設定連接為橘色）連接時顏色用法：<BODYALINK="顏色代碼">設定“點擊連接”的顏色，也就是當你鼠標點擊那個連接的瞬間所顯示的顏色。原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYALINK="#BLUE">
<AHREF="">連接文字</A>
</BODY>
</HTML>顯示結果單擊這里查看演示效果（鼠標點擊連接瞬間才會出現(xiàn)我們現(xiàn)在設定的藍色）已連接顏色用法：<BODYVLINK="顏色代碼">設定“點擊連接后”的顏色，也就是如果該連接已經被點擊過了，那么就顯示的顏色。如此的做法，是要讓使用者容易識別到底哪些連接已經去過了，哪些連接沒有點擊過。原始代碼<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODYVLINK="RED">
<AHREF="">連接文字</A>
</BODY>
</HTML>顯示結果單擊這里查看演示效果（設定已點擊過的連接以紅色顯示）
6連接標簽6.1網頁內部的連接1.使用方法：先在欲連接處作記號：<ANAME="here">這里是你想連接的點</A>設定連接：<AHREF="#here">連接</A>2.標簽解釋：有時候，當某頁的內容很多時，我們可以利用網頁的內部連接，來使使用者快速的找到資料。其原理不過是：在欲連接處做個記號，然后，連接時就尋找這記號，就可以快速找到資料。很簡單吧！3.使用范例：范例第一步驟第二步驟網頁內部的連接<ANAME="1">連接的位置</A><AHREF="#1">網頁內部的連接</A>網頁外部的連接<ANAME="2">連接的位置</A><AHREF="#2">網頁外部的連接</A>6.2網頁外部的連接1.標簽解釋：連接到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了WWW五彩繽紛的世界。由于網絡上的服務五花八門，所以不同的服務有不同的連接方法。
2.使用范例：網站連接新浪網<AHREF="">新浪網</A>電子郵件連接寫情書給朋友<AHREF="mailto:">寫情書給朋友</A>FTP連接下載檔案<AHREF="ftp://.">下載檔案</A>News連接網上行News<AHREF="news:">網上行News</A>Gopher連接SEEDNETGopher<AHREF="gopher://.net/">SEEDNETGopher</A>BBS連接論壇<AHREF="telnet://.com/">論壇</A>6.3連接標簽的參數(shù)1.使用方法：在連接后面加入target=_參數(shù)2.標簽解釋：連接的參數(shù)并不多，常見的大概就屬target這參數(shù)了，target的意思是『目標』，也就是網頁連接的指向目標，這參數(shù)在框架（Frame）里尤為重要！3.使用范例：標簽代碼target=框架名稱效果這在“框架標簽”中也有提到，而且也只有在框架（框窗orFrame）中才用得到。正常而言，框架有各自的名稱，因此，我們可以利用此標簽，來指定連接的內容顯示到哪一個框架中。標簽代碼target=_blank效果將連接的頁面內容，開在新的瀏覽器窗口中。標簽代碼target=_parent效果將連接的頁面內容，當成文件的上一個頁面。標簽代碼target=_self效果將連接的書面內容，顯示在當前的窗口中。標簽代碼target=_top效果這個參數(shù)可以解決新連接的頁面內容，被框架包圍的困擾，使用這參數(shù)，會將整個頁面重新顯示成連接的頁面內容。
7表格標簽7.1表格單元格對齊位置設定1.首先我們來看一個最簡單的表格：原始代碼顯示結果<TABLEBORDER=1>
<TR><TD>1</TD></TR>
</TABLE>12.利用<TABLE>這個標簽來告訴瀏覽器，這是一個表格，至于BORDER=1這參數(shù)是設定此表格的框線粗細為1。一組<TR></TR>是設定一行的開始位置。一組<TD></TD>則是設定一個單元格。當然，文字就是要放在這里面。3.現(xiàn)在我們再來增加兩個單元格：原始代碼顯示結果<TABLEBORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>1234.看見了吧，<TR></TR>沒有增加，<TD></TD>卻增加了兩組。那如果我要再加上一列呢？很簡單，就像這樣：原始代碼顯示結果<TABLEBORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>123456合并表格單元格1.并非所有的表格都是規(guī)規(guī)矩矩的只有幾行、幾列而已，有時候，我們還會希望能夠“合并單元格”，讓表格更美觀、更實用一點，而談到“合并單元格”，我們就必須知道，合并的方向有兩種：一種是上下合并（也就是行列間的合并），一種是左右合并（也就是行間的合并），這兩種合并方式各有不同的屬性設定方法。2.左右合并：基本上，你的表格已經學會了！接下來，咱們就來看看，如何將1、2、3單元格合并為一個大格：原始代碼顯示結果<TABLEBORDER=1>
<TR><TDCOLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>1456你應該會發(fā)現(xiàn)，怎么2、3都消失了？只剩下1，而且該行的<TD>標簽還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是“左右合并”的屬性，COLSPAN="3"的意思就是“這個行左右橫跨了3個單元格”，也正因如此，本來的兩個<TD>都可以省掉了，因為都被合并掉了！3.上下合并：學會了左右合并！接下來，咱們就來看看，如何上下合并，將1、4單元格通通合并成一個大格：原始代碼顯示結果<TABLEBORDER=1>
<TR><TDROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>12356有了上一次的經驗后，我們就知道，要合并單元格就一定有些單元格的屬性“犧牲”掉（也就是那些被合并的單元格?。@次我們要“上下合并”，我們將1與4合并為一個單元格，那么就要犧牲哪一個單元格呢？沒錯就是下面那一個倒霉的4，我們看看上圖，果然4已經被刪掉了，而在1的<TD>標簽中則多了個生面孔ROWSPAN，這就是“上下單元格合并”的屬性，ROWSPAN=2的意思就是“這個單元格上下連跨2個單元格”，其結果如上所士。7.2表格單元格對齊位置設定1.我可以自己設定表格的大小嗎？當然可以，你可以自由設定表格的“寬”及“高”！我們來制作一個寬100、高60的表格，做法如下：原始代碼顯示結果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>12.哎呀！怎么1老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入ALIGN=CENTER這參數(shù)即可：原始代碼顯示結果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">
<TR><TDALIGN=CENTER>1</TD></TR>
</TABLE>1此外，利用ALIGN=RIGHT可以讓表格中元素置右、利用ALIGN=LEFT可以讓表格中元素置左（默認值），至于為什么要加在<TD>中呢？因為，<TD>是一個單元格的意思，我們要指定在這個單元格中的元素要置中或置左置右，就必須將ALIGN加在<TD>中。3.既然可以置中，那么也可以控制表格內文字靠上、靠下嗎？可以的，只要利用VALIGN=TOP這個屬性即可讓表格內元素靠上方對齊。原始代碼顯示結果<TABLEWIDTH="100"BORDER="1"HEIGHT="60">
<TR><TDALIGN=CENTERVALIGN=TOP>1</TD></TR>
</TABLE>1利用VALIGN=MIDDLE可以讓表格中元素垂直置中（默認值），VALIGN=BOTTOM可以讓表格中元素靠下方。7.3表格背景、底色設定1.表格可以設定底色嗎？可以的不但表格可以，你也可以指定某行或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色代碼"就行了。下面是指定整個表格背景顏色的方法：原始代碼顯示結果<TABLEBORDER="1"BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>1234將BGCOLOR="顏色代碼"加在<TR>中，可以指定“一行”的背景顏色：原始代碼顯示結果<TABLEBORDER="1">
<TRBGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>1234將BGCOLOR="顏色代碼"加在<TD>中，可以指定“一個單元格”的背景顏色：原始代碼顯示結果<TABLEBORDER="1">
<TR><TDBGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>12342.表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，你也可以指定某行或某列的背景圖片：原始代碼顯示結果<TABLEBORDER="1"BGCOLOR="/images/bg.gif">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>12347.4表格邊框線的設定1.如何設定表格粗細？只要利用BORDER="粗細值"就行了。原始代碼顯示結果<TABLEBORDER=5>
<TR><TD>1</TD></TR>
</TABLE>12.如何設定表格顏色？只要利用BORDERCOLOR="顏色代碼"就行了。原始代碼顯示結果<TABLEBORDER="5"BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>13.另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感！只要利用BORDERCOLORLIGHT="#顏色代碼"（亮面設定）BORDERCOLORDARK="顏色代碼"（暗面設定）就行了。原始代碼顯示結果<TABLEBORDER="5"BORDERCOLOR="#0080FF"BORDERCOLORLIGHT="#62B0FF"BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>17.5表格間距設定1.我們可以利用CELLPADDING屬性自由設定表格內容距離邊線的距離，這個屬性很好用，保持適當?shù)木嚯x，看起來比較舒服。一般而言內定值為2，不過建議設定為4比較漂亮。原始代碼顯示結果<TABLEBORDER="1"CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>122.我們可以利用CELLSPACING屬性設定表格單元格邊線之間的距離。一般而言默認值為2，不過建議設置為0。原始代碼顯示結果<TABLEBORDER="1"CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>128框架標簽8.1框架概念1.首先，各位先看看右邊這張圖片，將利用這張圖來做解釋，這樣子，講起來可能會清楚一些。我們可以看見，右邊的這個圖片，一共分為1、2、3三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個文件。然而左下角的那個是做什么用的呢？2.原來，左下角的這個文件，就是要告訴瀏覽器，我們要將頁面分割成這樣，也就是說，所有Frame的標簽，其實都只放在這個文件里。3.這樣明白了吧！總之，你要分割幾個框，就一定會有幾個對應的html文件。8.2開始分割1.分割窗口可是一門學問，要分割也是要一步一步來的?？纯磩倓偰抢?，想像頁面是一個蛋糕，你要怎么割，才能割成那樣呢？原始代碼顯示結果<HTML>
<HEAD>
<TITLE>框架制作</TITLE>
</HEAD>
</HTML>
2.各位會發(fā)現(xiàn)，奇怪，在上面的語法中，怎么沒看到<BODY></BODY>標簽呢？呵呵...沒錯，它已經被將要加進去的<FRAMESET></FRAMESET>標簽給取代了！也就是說，如果我們要分割頁面，就要先用<FRAMESET>標簽告訴瀏覽器：＂我要開始分割了！＂此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！3.現(xiàn)在開似乎動手分割看吧！我們先將頁面分成左右兩邊，如下圖：原始代碼顯示結果<HTML>
<HEAD>
<TITLE>框架制作</TITLE>
</HEAD>
<FRAMESETCOLS="120,*">
<FRAMESRC="a.htm"NAME="左">
<FRAMESRC="b.htm"NAME="右">
</FRAMESET>
</HTML>
4.在<FRAMESET>中，我們要告訴瀏覽器到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESETCOLS="120,*"。COLS="120,*"就是說，左邊那一欄強制定為120px，右邊則隨瀏覽器大小而變。除了直接寫px數(shù)外，我們也可以用百分比來表示，例如COLS="20%,80%"也是可以的。5.然后，再將右邊的框窗再分割成上下兩個頁面。如下圖：原始代碼顯示結果<HTML>
<HEAD>
<TITLE>框架制作</TITLE>
</HEAD>
<FRAMESETCOLS="120,*">
<FRAMESRC="a.htm"NAME="左">
<FRAMESETROWS="100,*">
<FRAMESRC="b.htm"NAME="右上">
<FRAMESRC="c.htm"NAME="右下">
</FRAMESET>
</FRAMESET>
</HTML>
6.看見了沒？原本的<FRAMESRC="b.htm"
NAME="2">在第3點的語法中）被另一組<FRAMESETROWS="100,*">取代了！所以要注意！第二組<FRAMESETROWS="100,*">是被第一組<FRAMESETCOLS="120,*">包圍起來的！7.不知不覺就大功告成了，其實只要將最后完成的那些語法存成，然后再準備三個文件a.htm、b.htm、c.htm那么就完工了！當然，這是一個最好的分割法，再將一些進階的標簽在下面一一說明。8.3其他標簽參數(shù)說明例子:<FRAMESETCOLS="120,*"FRAMEBORDER=0FRAMESPACING=5>
1.COLS="120,*"就是垂直切割頁面啦！你可以一次切成左右兩個頁面，當然也可以切成三個，很簡單只要寫成COLS="30,*,50"（數(shù)字隨便你自己調整?。?，依此類推，四個以上當然就是四組數(shù)字了！
2.ROWS="120,*"就是橫向切割頁面，也就是將頁面上下分開，切法同上。
3.FRAMEBORDER=0設定框架的邊框，其值只有0和1，0就是不要邊框，1就是要顯示邊框。邊框是無法調整粗細的。
4.FRAMESPACING=5表示框架與框架見的保留空白的距離，以免看起來太擠。
例子:<FRAMESRC="a.htm"NAME="1"FRAMEBORDERr=0SCROLLING="no"noresizemarginhight=2marginwidth=2>
1.SRC="a.htm"設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這里就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚）
2.NAME="1"設定這個框架的名稱，這樣才能指定框架來作連接，所以一定要設定??！當然名稱隨你高興取名。
3.FRAMEBORDERr=0設定框架的邊框，其值只有0和1，0就是不要邊框，1就是要顯示邊框。邊框是無法調整粗細的。
4.SCROLLING="no"設定是否要顯示滾動條，YES是要顯示滾動條，NO是無論如何都不要顯示，AUTO是視情況顯示。noresize
5.noresize設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數(shù)，使用者可以很容易的拉動框架，改變其大小。
6.marginhight=2表示框架高度部份邊緣所保留的空間。
7.marginwidth=2表示框架寬度部分邊緣所保留的空間。8.4其他標簽1.<noframe>
使用方法：<noframe>請換有支持Frame功能的瀏覽器<noframe>標簽解釋：有些瀏覽器版本較低，無法顯示Frame的功能，因此，就要使用此標簽，讓這些人知道，該換換瀏覽器了?；蛘?，你也可以在這標簽中，寫上沒有Frame語法的網頁標簽，那么，沒有支持Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。
2.target=框架名稱
使用方法：<AHREF=""target=3>顯示內容</A>標簽解釋：常常有一個情況是，我想在框窗1的地方按下連接，但是希望他的內容出現(xiàn)在框架3中（請參照上面那個圖），那應該如何寫呢？就像上面加個target=框架名稱就行啦！
3.target=_top
使用方法：<AHREF=""target=_top>網頁教學網</A>標簽解釋：有時候，在框架里面連接到別的站，卻發(fā)現(xiàn)，新連接的這個站，竟然被框架包住了，不但難看，而且可能會吃上官司！所以，這時候你必需加入target=_top這個參數(shù)，那么，這個新連接到的網站，就會重新占據整個瀏覽器了！9序列標簽9.1無序標簽1.序列標簽基本上可分為兩種，一種是“無序條列”，一種是“有序條列”。所謂“無序條列”當然就是意指各條列間并沒有順序關系，純粹只是利用條列式方法來顯示資料而已，此種無序標簽，在各條列前面均有一符號以示分隔。至于“有序條列”就是指各條列之間是有順序的，從1、2、3…一直延伸下去。2.我們先來看看“無序列表標簽”如何使用：原始代碼顯示結果<UL>
<LI>靚仔
<LI>靚女
<LI>靚世界
</UL>靚仔靚女靚世界其中<UL>標簽即為“無序列表標簽”，每增加一列內容，就必須加一個<LI>。3.前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種原始代碼顯示結果<ULTYPE="CIRCLE">
<LI>靚仔
<LI>靚女
<LI>靚世界
</UL>靚仔靚女靚世界9.2有序標簽1.接下來，我們來看看“有序列表標簽”如何使用：原始代碼顯示結果<OL>
<LI>靚仔
<LI>靚女
<LI>靚世界
</OL>靚仔靚女靚世界其中<OL>標簽即為“有序標簽”，每增加一列內容，就必須加一個<LI>。2.和無序列表標簽一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數(shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：原始代碼顯示結果<OLTYPE="A">
<LI>靚仔
<LI>靚女
<LI>靚世界
</OL>靚仔靚女靚世界3.另外，我們也可指定序列起始的數(shù)目，其方法如下：原始代碼顯示結果<OLSTART="10">
<LI>靚仔
<LI>靚女
<LI>靚世界
</OL>靚仔靚女靚世
10表單標簽各種輸入類型：10.1文字輸入列每個表單之所以會有不同的類型，原因就在于TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的類型就是TYPE="TEXT"，其使用方法如下：原始代碼<FORM>
姓名：<INPUTTYPE="TEXT"NAME="NAME"SIZE="20">
</FORM>顯示結果姓名：
其有下列可設定之屬性：NAME="名稱"，是設定此文字輸入列的名稱，程序中常會用到。SIZE="數(shù)值"，是設定此文字輸入列顯示的寬度。VALUE="預設內容"，是設定此文字輸入列的預設內容。ALIGN="對齊方式"，是設定此文字輸入列的對齊方式，其值有：TOP（向上對齊）、MIDDLE（中間對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。MAXLENGTH="數(shù)值"，是設定此文字輸入列可設定輸入的最大長度。10.2單選表單利用TYPE="RADIO"就會產生單選表單，單選表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選表單。原始代碼<FORM>
姓名：
男<INPUTTYPE="RADIO"NAME="SEX"VALUE="BOY">
女<INPUTTYPE="RADIO"NAME="SEX"VALUE="GIRL">
</FORM>顯示結果性別：男女
其有下列可設定之屬性：NAME="名稱"，是設定此一欄的名稱，程序中常會用到。VALUE="內容"，是設定此一欄的內容、值或是意義。ALIGN="對齊方式"，是設定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。CHECKED，是設定此一欄為預設選取值。10.3復選表單利用TYPE="CHECKBOX"就會產生復選表單，復選表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為復選表單。原始代碼<FORM>
喜好：
<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="MOVIE">電影
<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="BOOK">看書
</FORM>顯示結果喜好：
電影
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 江陰購房定金協(xié)議書
- 交通協(xié)議書事故證明
- 運營機構加盟協(xié)議書
- 水表改造協(xié)議書模板
- 學生受傷協(xié)議書模板
- 裝修協(xié)議書解約模板
- 汽車教練租賃協(xié)議書
- 就業(yè)協(xié)議書主體順序
- 特殊計算工時協(xié)議書
- 親子離異協(xié)議書范本
- 姜文導演風格分析
- 全民國家安全教育日知識測試題庫和答案
- 醫(yī)療耗材采購工作總結
- 江蘇省蘇州市2023-2024學年五年級下學期期中綜合測試數(shù)學試卷（蘇教版）
- 廉潔教育班會.省公開課一等獎全國示范課微課金獎課件
- 汽車振動學：基于MATLABSimulink的分析與實現(xiàn) 課件 第2章 汽車單自由度振動系統(tǒng)
- 2024版醫(yī)療器械行業(yè)數(shù)字化轉型白皮書
- 12 清貧公開課一等獎創(chuàng)新教案
- 第四講：簡單長管的水力計算
- T-HNMES 11-2023 盾構機選型設計生產協(xié)同制造規(guī)范
- 2020-2021學年復旦附中高二年級下冊英語期中試卷（部分解析版）
評論
0/150
提交評論