HTML基本语法.docx

1、HTML基本语法 有關網頁環境的宣告、JAVA SCRIPT程式、標題的設定等 標題 內容編輯區 一、背景之設定二、文字的設定三、編輯方式四、項目排列五、超鏈結六、圖片七、表格八、畫面分割 (框架)九、表單十、背景音樂十一、動態鏈結十二、CGI及JAVA Applet十三、CSS樣式一、背景之設定 捲動畫面時，背景圖片為固定或捲動顏色從 #000000 #FFFFFF (紅、綠、藍 00 FF)例:(#FFFFFF：白色)、(#000000：黑色)、(#FF0000：紅色)、(#00FF00：綠色)、(#0000FF：藍色)、(#00FFFF：淺藍色)、(#FFE0FF；淡紫色)、(#FFFF

2、00：黃色) 色碼小程式 範例：主要架構HTML簡介.二、文字設定 本字體設定 n=17(內定值為3)文字 字體設定標題文字 字型大小(n=16)及文字對齊(居中,靠左,靠右)文字粗體字文字斜體字文字字下線文字放大文字縮小文字上標文字下標 範例：基本字型3號字字體-11號字綠色+1字紅色5號字中黑6號字楷書7號字粗體字斜體字字下線放大縮小X 2X 1 結果： 基本字型藍色3號字字體-11號字綠色+1字紅色5號字 中黑6號字 楷書7號字 粗體字斜體字字下線放大縮小X 2X 1 H1 H6標題文字變化 H1標題文字H2標題文字H3標題文字H4標題文字H5標題文字H6標題文字三、編輯方式程式註解段落

3、 設定某一段落，段落間會加一空白列換行內容 不可斷行內容顯示與HTML相同的斷行方式，其內定字型大小為2，字體為細明體內容在左右分別空出一定?度內容 圖文對中水平線 HTML顯示字元"<& 非斷列空白 半方空白 全方空白範例：四、項目排列 數字化項目.非數字化項目.定義式項目. 範例：學歷中山國小陽明國中台中商專淡江大學學士元智工學院碩士雲林科技大學博士學歷中山國小陽明國中台中商專淡江大學學士元智工學院碩士雲林科技大學博士學歷中山國小彰化市中山路二段100號陽明國中彰化市長順街50號台中商專台中市三民路三段129號淡江大學學士元智工學院碩士

4、雲林科技大學博士結果：學歷I. 中山國小II. 陽明國中III. 台中商專IV. 淡江大學學士V. 元智工學院碩士VI. 雲林科技大學博士學歷 中山國小 陽明國中 台中商專 淡江大學學士 元智工學院碩士 雲林科技大學博士學歷中山國小彰化市中山路二段100號陽明國中彰化市長順街50號台中商專台中市三民路三段129號淡江大學學士元智工學院碩士雲林科技大學博士五、超鏈結 超鏈結說明或圖片 超鏈結內容1. FILE:/. 硬碟內檔案2. HTTP:/. 網路上的檔案(若檔案無法由網頁型態開啟，則會自動下載)可以在瀏覽器上開啟的檔案包括： html檔 CGI程式 (php、pl、asp執行程式) 文字檔

5、 圖檔( xxxx.jpg 、 xxxx.gif 或 xxxx.png ) OFFICE檔案：若為 xxxx.doc 會開啟WORD程式、 xxxx.xls 會開啟EXCEL程式、 xxxx.pps 或 xxxx.ppt 會開啟POWER POINT程式 多媒體檔：若為 xxxx.avi、 xxxx.mpeg 或 xxxx.mp3等會開啟Media Player播放、若為 xxxx.mov 則會開啟Quick time播放、若為 xxxx.rm 則會開啟Real Player播放 Flash檔( xxxx.swf) PDF檔：會開啟Acrobat Reader程式 EXE檔或壓縮檔( xxxx

6、.zip 、 xxxx.rar 或 xxxx.lzh 等)：會出現檔案下載的對話視窗3. GOPHER:/. GOPHER文字系統 4. FTP:/. FTP檔案傳輸，連結伺服器5. NEWS: . NEW網路論壇系統6. MAILTO:E-mail 利用Outlook Express來寄信7. TELNET:. 遠端登入，利用登入BBS系統常用的網頁連結方式： 連結至其它網站的網頁，例： 雅虎奇摩站或是 記得要設border=0，否則圖片會有超連結顏色外框 連結至本網站的其它網頁，例：首頁 路徑說明： . 表示目前所在目錄. 表示上一層目錄/ 用於上一層目錄名稱與下一層目錄名稱的連接符號例如

7、： 表示目前目錄下的image目錄內的 sea.gif 檔 表示在不同目錄image內的 sea.gif 檔(目前的目錄和image目錄在同一層) 書籤：跳到本文中的其它部分鏈結 書籤內容 超鏈結說明或圖片 範例：奇摩站奇摩站 寄信給我寄信給我 問答集問答集 圖片說明或 圖片說明 六、圖片(最好用GIF檔、 JPG 或 png檔) 六、圖片(最好用GIF檔、 JPG 或 png檔) JPG檔為向量圖形，全彩，畫質較好(照片格式)GIF檔為點陣圖形，256色，速度較快(常用於動畫、背景透明) 對齊方式 top, bottom, middle, left, right如果對齊方式採取align=l

8、eft或align=right則會將圖片以圖蹺文的方式來靠左或靠右 範例： 人生很多經驗是要付代價的，但是也使我們了解這個錯誤，痛定思痛，以後永遠不再犯它。適量的挫折也培養孩子的忍受力與同理心，以後容易與人相處。父母不可能一輩子陪伴著孩子，及早在遊戲中訓練孩子獨立完成一件事是很重要，鼓勵孩子去試新奇的做事方法，不必事事都依你的想法來做，孩子們自發性的創造力就是這樣培養出來的。 趴趴熊趴趴熊(水平間距為20)趴趴熊趴趴熊 Map圖片的超鏈結 形狀=RECT(矩形)、座標=X1,Y1,X2,Y2形狀=CIRCLE(圓形)、座標=X1,Y1,R形狀=POLY(多邊形)、座標=X1,Y1,X2,Y2,

9、X3,Y3,. 範例：天線寶寶 範例： 七、表格 表格標題 標題 標題 . 文字 文字 .其中BORDER 表示框線厚度，CELLSPACING表示內框厚度，CELLPANDDING表示文字與框線距離且 範例：林裕章機密檔案身份台中技術學院會計系副教授學歷雲林科技大學管理研究所博士班元智大學工業工程研究所碩士(第一屆)淡江大學統計系畢業台中技術學院會計統計科畢業(統計組第一屆)彰化縣立陽明國民中學畢業彰化市立中山國民小學畢業經歷台中技術學院課務組組長台中技術學院出版組組長統計人員高考及格任教課程統計學、商業套裝軟體、作業研究、品質管制 結果：林裕章機密檔案身份台中技術學院會計系副教授學歷雲林科

10、技大學管理研究所博士班元智大學工業工程研究所碩士(第一屆)淡江大學統計系畢業台中技術學院會計統計科畢業(統計組第一屆)彰化縣立陽明國民中學畢業彰化市立中山國民小學畢業經歷台中技術學院課務組組長台中技術學院出版組組長統計人員高考及格任教課程統計學、商業套裝軟體、作業研究、品質管制八、框架 . 超鏈結出現視窗 _blank(新增), _new(新增), _self(本身), _parent(上一層), _top(全視窗) 例: ROWS=30%,*分割二列，前一畫面佔30%例: COLS=*,*,*以平分方式分割三欄例: COLS=1*,2*,3*以 1:2:3 方式分割三欄 範例：分成上下兩個畫

11、面，上面畫面高為50，下面畫面分成左右兩個畫面，左邊佔10%，右邊佔90% 歡迎光臨林裕章網站 在up.htm中的超鏈結中如果要出現在main視窗中，則語法為：奇摩站 內置框架 說明 例： 九、表單 傳輸方式有 POST 及GET兩種輸入資料類型有TEXT ：文字欄位、PASSWORD：密碼輸入、CHECKBOX：核取方塊(複選)、RADIO：單選圓鈕、SUBMIT：送出資料按鈕、RESET：重設按鈕、HIDDEN：隱藏下拉式清單內容 文字區塊 範例：姓名：密碼：ISP：HINET SEEDNET 其它性別：男 女URL：心情： 一切正常 欣然微笑 開心大笑 相當不滿 非常生氣 傷心落淚 心中恐懼