1 / 51

HTML 語法簡介

HTML 語法簡介. 寫網頁前所必須知道的名詞. Html ： (HyperText Markup Language ) ，是編寫網頁的基本語法，簡單易懂，用最基本的文字編輯器即可編寫，例如：記事本。 瀏覽器： 相當於 html 翻譯器，將 html 語法，用生動活潑易懂的方式解讀出來，目前時下最受歡迎的瀏覽器有 IE 、 Netscape 。 網頁： 您所看到的每一頁 html 文件都叫做網頁。. 首頁：

samira
Download Presentation

HTML 語法簡介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML語法簡介

  2. 寫網頁前所必須知道的名詞 • Html： • (HyperText Markup Language )，是編寫網頁的基本語法，簡單易懂，用最基本的文字編輯器即可編寫，例如：記事本。 • 瀏覽器： • 相當於html翻譯器，將html語法，用生動活潑易懂的方式解讀出來，目前時下最受歡迎的瀏覽器有IE、Netscape。 • 網頁： • 您所看到的每一頁html文件都叫做網頁。

  3. 首頁： • 當你連上一個站時，所出現的第一個畫面就叫做首頁，通常完整檔名應該存成index.htm或是index.html 。但有些提供網頁空間的公司，會規定你首頁的檔名，那你就必須存成這個檔名才行(例如default.htm)。 • 標籤： • 又稱為標記，例如<body>。html文件就是由一群標籤所構成的，瀏覽器會根據你所寫的標籤，解讀出相對應的內容。 • 屬性： • 有些標籤中還可以加入屬性來做進階的控制，例如 <body text="#000000">，text就是body這個標籤下的一個屬性，是用來控制文字顏色的。

  4. I. html文件的骨架 1.基本架構： <html> <head> <title> </title> </head> <body> </body> </html> ２、在<title>與</title>之間，輸入簡短的文字。 　 ３、同樣的，在<body>與</body>之間，輸入簡短的文字。

  5. 以下是基本架構的說明 • <html>...</html> • 這一對配對標籤，是用來表示這份html文件的有效範圍。 • <title>...</title> • 輸入在這對標籤中的文字，將成為網頁的標題，會出現在瀏覽器最左上方的部分。 • <body>...</body> • 這一對標籤，是用來標示網頁主要內容(文字或圖片等等)的開始與結束。接下來幾個單元介紹的所有語法都必須放在這對標籤之中！ 　 • 另外，body這個標籤內可加入許多的屬性，啥？你不懂什麼是屬性？你一定是沒專心上課吧！幫你複習一下:ex. <body text=“#000000”> • 其中text就是body中的屬性，記住囉，以後標籤中的屬性就是這樣加的！

  6. body中的屬性 • text • 用來控制你網頁中，所有文字的顏色，寫法是<body text=“#000000”>其中 #000000 是網頁所使用的顏色代碼，變換這些色碼，可自行設定顏色。 • bgcolor • 用來控制您網頁中，背景的顏色，寫法是<body bgcolor="#ffffff"> • link • 用來控制網頁中，超連結的顏色，寫法是<body link="#0080ff"> • alink • 用來指定超連結，在連結中的顏色，寫法是 <body alink="#8000ff"> • vlink • 用來指定超連結，在連結後的顏色，寫法是<body vlink="#ff0000"> • background • 用來控制網頁中，背景的圖案，若你嫌背景每次都用素面的顏色不好看，那就一定要用這個，寫法是<body background=“xxx.jpg”> 直接將圖檔的位置輸入在引號中，可放置 jpg 或 gif 這兩種格式的圖檔。 　

  7. 調色原理 • HTML 的顏色表示可分兩種： • (1) 以命名方式定義常用的顏色，如 RED。 • (2) 以 RGB 值表示，如 #FF0000 表示 red。 • RGB 值的原理： • 顏色是由 “red” “green” “blue” 三原色組合而成的，在 HTML 中對於彩度的定義是 採十六進位，對於三原色分別給予兩個十六進位定義，因此每個原色可有 256 種彩度，故此三原色可混合成256X256X256 種顏色。 • 例如 : 白色的組成是 red=ff, green=ff, blue=ff, RGB 值即為 ffffff 紅色的組成是 red=ff, green=00, blue=00, RGB 值即為 ff0000 綠色的組成是 red=00, green=ff, blue=00, RGB 值即為 00ff00 藍色的組成是 red=00, green=00, blue=ff, RGB 值即為 0000ff 黑色的組成是 red=00, green=00, blue=00, RGB 值即為 000000 • 應用時常在每個 RGB 值之前加上符號 # ，但不加亦可。 • 色碼表 http://jemimap.freeshell.org/style/color/wheel.html • http://nknucc.nknu.edu.tw/~s1378/wjs-1306.htm

  8. 也許你會有疑問，若是想一次控制很多屬性，豈不是要打一堆body？不用啦！這些屬性可以在一個標籤內完成。只要在屬性與屬性之間空一格即可，以後我們都這樣做。 ex. <body text="#000000" bgcolor="#ffffff"> • 廢話不多說，看範例 <html> <head> <title>教學範例</title> </head> <body text="#3366ff" bgcolor="#000000"> 請注意看視窗左上角，還有文字與背景的顏色。 </body> </html> • 以上藍色的部分，就是由你自己決定啦，試著改變它的內容，再看看有什麼不同。

  9. II. 排版標籤 • 換行 • 對齊 • 固定模式 • 縮排

  10. 換行 • html文件並不是按下 enter就會自動換行，它必須使用這些標籤。 • <p>...</p> • <p> 代表一個段落的開始，用了它以後，文字會自動換行，</p>則代表此段落結束。 • <br> • 它可以使文字換到下一行。注意！它並沒有配對標籤。

  11. 對齊 • 使用word的人一定知道，可以讓文字靠左靠右，或是置中。 　 • html文件也可以做到。 • <p align=left>...</p> • <p align=center>...</p> • <p align=right>...</p> • 這分別是靠左、置中與靠右的寫法。沒錯，其實只要用<p>...</p> 中 align這個屬性就可以做到，所以除了對齊的功能外，也有上述的換行功能。 • <center>...</center>夾在這組配對標籤中的元件，將會被置中。

  12. 固定模式 • <pre>...</pre> • 這組配對標籤好用極了！你可以先用平常在word中的排版方式，將網頁的主要內容搞定，再用這個標籤將主要內容全部包起來，最後在瀏覽器看到的結果，不管是空格、空行、換行或是文字的位置，都會依你原來的格式乖乖排好。

  13. 縮排 • <blockquote>...</blockquote> • 使用這個標籤，文字將會向右縮排，相當於打字時按下「 Tab」鍵 　的效果。如果使用兩組的話，就會縮排兩單位，依此類推。

  14. 範例 <html> <body> 你總以為愛是討你歡心， <p>對你好不過是天經地義，</p> <p>卻不曾關心我也有情緒。</p> <p>我的付出需要你的熱情回應。 <br>是我寵壞了你 <br>溺愛驕縱了你的心 </p> 小痞子， <br>逛大街， <br>沿街被人扁。 <p align=left>我走路愛靠左邊</p> <p align=center>我走路愛走中間</p> <p align=right>我走路愛靠右邊</p> <center>我是兄弟象的中間手 <br>我是味全龍的中間手 <br>我是三商虎的中間手</center> <pre>男人不該讓女人流淚 至少我盡力而為 相　　信　　我 </pre> <blockquote>縮排一次</blockquote> <blockquote><blockquote>縮排兩次</blockquote></blockquote> </body> </html>

  15. 向上帝借羊 • 三兄弟分家，財產是十七隻羊。老大要二分之一、老二要三分之一、老三要九分之一。 1/2+1/3+1/9=17/18　十七隻羊怎麼分？ 聰明的數學家解掉了這個問題。方法是向上帝借一隻羊湊足十八隻。老大：18*1/2=9老二：18*1/3=6老三：18*1/9=2再將剩下的一隻還給上帝。

  16. III.字體標籤 • 標題文字 • 字體大小 • 字型及顏色

  17. 標題文字 • 使用方法： • <h1>標題內容</h1> • 標籤解說： • 標題的大小一共有六種，兩個標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。

  18. 字體大小 • 使用方法： <font size=3>文字內容</font> • 標籤解說： 標題的大小一共有七種，也就是<font size=1>（最小）到<font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內容</font>，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。

  19. 字型 • 使用方法： <b>文字</b> • 標籤解說： 在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上『原始碼』的標籤。

  20. 文字顏色 • 使用方法： <font color="#fefecb">文字顏色</font> • 標籤解說： 文字也可以設定 顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！

  21. 文字字型 • 使用方法： <font face="字型名稱">文字</font> • 標籤解說： 網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！ 如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。

  22. 特殊字元 • 使用方法：&nbsp; • 標籤解說： 很多特殊的符號是需要特別處理的，比如說“ < ”、“ > ”這兩個符號若想要呈現在網頁上是沒有辦法直接打“ < ”的，要呈現“ < ”必須輸入編碼表示法：「&lt;」，常用的如下：

  23. IV. 圖片標籤 • 使用方法： <img src=“boy.gif” alt=“本站圖示" align=right height=56 width=32> • 標籤解說： 目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。

  24. 範例

  25. 關於路徑 • 該如何正確的使用路徑  有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:\images裡，而網頁檔放在c:\demo裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成右表：

  26. V. 超連結標籤 • 連結基本概念 (1)『內部連結』及『外部連結』 • 所謂『內部連結』就是自己網站間網頁的連結，至於外部連結則連結到外面去，可以擴充您網站的實用性及充實性。 (2)『相對路徑』及『絕對路徑』 • 絕對路徑』要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而『相對路徑』就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找。

  27. 內部連結 • 使用方法： • 先在欲連結處作記號：<a name="here1">這裡是你想連結的點</a> • 設定連結：<a href="#here1">連結</a> • 標籤解說： • 有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！

  28. 外部連結 • 標籤解說： 連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。 • 使用範例：

  29. 連結標籤的參數 • 使用方法：在連結後面加入 target=_參數 • 標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是『目標』，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！ • 使用範例： • target=框窗名稱：這在『框架標籤』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。 • target=_blank：將連結的畫面內容，開在新的瀏覽視窗中。 • target=_parent：將連結的畫面內容，當成文件的上一個畫面。 • target=_self：將連結的畫面內容，顯示在目前的視窗中。 • target=_top：這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。

  30. VI. 表格標籤 • 表格的基本架構 • <table>...</table>　代表一個表格的開始與結束。border　用這個屬性來控制框線的粗細，數字越大，框線越粗，也就越有立體感。<tr>...</tr>　代表往下多增加一橫列。<td>...</td>　代表在那一橫列中，往右多加一格。

  31. 多行多列表格

  32. 合併表格欄位 • 左右欄位合併 • COLSPAN=“3”的意思就是「這個欄位左右橫跨了3個欄位」，也正因如此，本來的兩個<TD>都可以省掉，因為都被併掉了嘛！ • 上下合併 • ROWSPAN=2就是「這個欄位上下連跨了2個欄位」,這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看圖，果然4已經刪掉了 • 合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。

  33. 表格欄位對齊 • 設定表格的大小 • 左右對齊 • 置中ALIGN=CENTER • 置右ALIGN=RIGHT • 置左（預設值）ALIGN=LEFT • 為什麼要加在<TD>中呢？因為，<TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。 • 上下對齊 • 靠上方VALIGN=TOP • 垂直置中（預設值） VALIGN=MIDDLE • 靠下方VALIGN=BOTTOM

  34. VII. 序列標籤 序列標籤基本上可分為兩種，「無序條列」「有序條列」。 • 無序列表標籤 • <UL>標籤即為「無序列表標籤」，每增加一列內容，就必須加一個<LI> • 符號一定是要圓形的嗎？可以加入TYPE=“形狀名稱”屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種 • 有序列表標籤 • <OL>標籤即為「有序列表標籤」，每增加一列內容，必須加一個<LI>。 • 可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）

  35. VIII. 表單標籤 【表單的用途】 • 對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！ • 本課程純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。

  36. 1. 文字輸入列 每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，。文字輸入列的形態就是TYPE="TEXT，其使用方法如下： • 可設定之屬性： • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。 • SIZE="數值"，是設定此一欄位顯現的寬度。 • VALUE="預設內容"，是設定此一欄位的預設內容。 • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 • MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。

  37. 2. 單選核取表單 利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。 • 可設定之屬性： • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。 • VALUE="內容"，是設定此一欄位的內容、值或是意義。 • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 • CHECKED，是設定此一欄位為預設選取值。

  38. 3. 複選核取表單 • 利用TYPE=" CHECKBOX "就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。 • 可設定之屬性： • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。 • VALUE="內容"，是設定此一欄位的內容、值或是意義。 • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。 • CHECKED，是設定此一欄位為預設選取值。

  39. 4. 送出按鈕 • 通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。 • 可設定之屬性： • NAME="名稱"，是設定此一按鈕的名稱。 • VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。 • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。

  40. 5. 大量文字輸入元件 • 有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作為預設文字。 • 可設定之屬性： • NAME="名稱"，是設定此一欄位的名稱。 • WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。 • COLS="數值"，是設定此一欄位的行數（橫向字數）。 • ROWS="數值"，是設定此一欄位的列數（垂直字數）。

  41. 6. 下拉式選單 • 下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣才算完整喔！ • 可設定之屬性： • SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。 • MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。

  42. IX.框架標籤 【框架的基本概念】 • 首先，各位先看看右手邊這張圖，我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？ • 原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。） • 這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）

  43. 開始分割 • 在右面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的 • 開始動手割 :在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

  44. 3.再將右邊的框窗再割成上下兩個畫面 原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！ 4. 呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！

  45. 【其他標籤參數說明】 • <FRAMESET COLS="120,*" frameborder=0 framespacing=5> • COLS="120,*“ 就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單只要寫成 COLS="30,*,50" （數字隨便您自己調整啦！），依此類推，四個以上當然就是四組數字啦！ • ROWS="120,*“ 就是橫向切割畫面，也就是將畫面上下分開，切法同上。 • frameborder=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。 • framespacing=5 表示框架與框架間的保留空白的距離，以免看起來太擠。

  46. SRC="a.htm"設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這裡就是要您填入對應網頁的名稱。NAME="1"設定這個框架的名稱，這樣才能指定框架來作連結，所以一定要設定喔！當然名稱隨你高興取名。 frameborder=0設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。 scrolling="no"設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。 noresize設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。 marginhight=2表示框架高度部份邊緣所保留的空間。 marginwidth=2表示框架寬度部份邊緣所保留的空間。 <FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>

  47. 相關用法 ◆ <noframe> 使用方法：<noframe>請換有支援Frame功能的瀏覽器</noframe> 標籤解說：有些瀏覽器較為老舊，無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這標籤中，擺上沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。 ◆ target=框窗名稱 使用方法：<A HREF="d1-1.htm" target=3>顯示內容</A> 標籤解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱 就行啦！ ◆ target=_top 使用方法：<A HREF=“http://www.ctc.com” target=_top>中台</A> 標籤解說：有時候，在框窗裡會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個螢幕啦！

  48. X. Meta標籤簡介 • <meta http-quive="content-type" content="text/html; charset=iso-8859-1">說明網站的格式及編碼方式，另外這個功能也可以拿來說明網站的名稱。 • <meta name="keyword" contents="關鍵字一, 關鍵字二, 關鍵字三, …..">剷明整個網站的關鍵字，關鍵字間用逗點隔開，總長度最好不要超過1000個Character (約44個字)。 • <meta name="description" contents="整個網站的描述….">剷明整個網站為何吸引人的地方，可用逗點隔開，總長度最好不要超過200個Character (約15個字)，若文章真的太長，可以切割成兩個部分，較不重要的部分置入下一個Description。 • <meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">此功能是要給搜尋引擎使用的，是要用來告訴Spider哪些網頁是要去擷取的或不用去擷取的，一般都設定成All(內定值)。

  49. XI.多媒體 1. 背景音樂 <BGSOUND> 是用以插入背景音樂，但只適用於 IE，其參數設定不多。如下 <BGSOUND src="your.mid" autostart=true loop=infinite> src="your.mid" 設定 midi 檔案及路徑，可以是相對或絕對。 autostart=true 是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內定值)。 loop=infinite 是否自動反覆播放。LOOP=2 表示重複兩次，Infinite 表示重複多次。

More Related