HTML簡介

文章推薦指數： 80 %
投票人數：10人

檔案延伸名設為.htm 或.html. 排版標籤. 註解.   空白字元符號,等於0.5個半形空白字元的寬度 基本架構

文件標題 　Java/VBScript程式碼 　文件本體 檔案延伸名設為.htm或.html 排版標籤 &lt!--這些註解文字不會顯示在瀏覽器中--&gt　註解 &ampnbsp;　空白字元符號,等於0.5個半形空白字元的寬度 e.g.,這裡有5個空白字元→[     ] 範例展示
　換行 e.g.,第一行資料
第二行資料 範例展示 　取消自動換行 e.g.,標籤內的所有資料不會因瀏覽器的寬度不足而產生自動換行的現象 範例展示 &ltPALIGN=[left|center|right]TITLE="提示文字"&gt...&lt/P>　段落 e.g., 大學之道在明明德，在親民，在止於至善。

知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得，物有本末，事有終始，知所先後，則近道也。

範例展示 &ltPRE>...&lt/PRE>　保留原始文字排版 e.g., 床前明月光 疑似地上霜 舉頭望明月 低頭絲故鄉 範例展示 &ltXMP>...&lt/XMP>　保留輸出 e.g.,

<b> 床前明月光<br> 疑似地上霜<br> 舉頭望明月<br> 低頭絲故鄉<br> </b> 範例展示 &ltCENTER&gt...&lt/CENTER>　置中對齊 e.g.,
測試內容置中
範例展示 &ltBLOCKQUOTE>...&lt/BLOCKQUOTE>　向右縮排 e.g.,
第一段測試內容
第二段測試內容
範例展示 &ltB>...&lt/B>　粗體 e.g.,BOLD範例展示 &ltSTRONG>...&lt/STRONG>　粗體 e.g.,STRONG範例展示 &ltI>...&lt/I>　斜體 e.g.,I範例展示 &ltEM>...&lt/EM>　斜體 e.g.,EM範例展示 &ltVAR>...&lt/VAR>　斜體 e.g.,VAR範例展示 &ltCITE>...&lt/CITE>　斜體 e.g.,CITE範例展示 &ltTT>...&lt/TT>　打字機字體 e.g.,TeleTypeFont範例展示 &ltU>...&lt/U>　底線 e.g.,UNDER範例展示 &ltS>...&lt/S>　刪除線 e.g.,STRIKE範例展示 &ltSTRIKE>...&lt/STRIKE>　刪除線 e.g.,STRIKE範例展示 &ltBLINK>...&lt/BLINK>　文字閃爍(Netscape才支援) e.g.,文字閃爍範例展示 &ltSUB>...&lt/SUB>　文字下標 e.g.,H1 範例展示 &ltSUP>...&lt/SUP>　文字上標 e.g.,H2&lt/SUP> 範例展示 &ltHxALIGN=[left|center|right]>...&lt/Hx>x=1,2,...,6　文字標題 e.g., H1 H2 H3 H4 H5 H6 範例展示 &ltBASEFONTSIZE=x>x=1,2,...,7　預設字型(標準字型大小等級為3) &ltFONTSIZE=xCOLOR=#rrggbbFACE="字體名稱">...&lt/FONT>　多功能文字排版,x=1,2,...,7,rrggbb(顏色表示法)=000000(黑)～FFFFFF(白) e.g,&ltFONTSIZE=7COLOR=#aacceeFACE="華康勘亭流,標楷體">文件內容&lt/FONT> 範例展示 &ltBIG>...&lt/BIG>　加大字型一級 e.g.,正常加大 範例展示 &ltSMALL>...&lt/SMALL>　縮小字型一級 e.g.,正常縮小 範例展示 &ltBODYBGCOLOR=#rrggbbBACKGROUND="graphics/body.gif"TEXT=#rrggbbLINK=#rrggbbVLINK=#rrggbbALINK=#rrggbb>...&lt/BODY> 的屬性 屬性功能說明 BGCOLOR網頁的背景顏色 BACKGROUND網頁的背景圖片 TEXT網頁內的文字顏色 LINK尚未瀏覽過之超連結文字顏色 VLINK已瀏覽過之超連結文字顏色 ALINK超連結文字被選取時之顏色 BGPROPERTIES 固定背景圖片(=fixed) LEFTMARGIN網頁與左、右邊界的距離(pixel) TOPMARGIN網頁與上、下邊界的距離(pixel) 特殊符號語法 特殊符號HTML表示法特殊符號HTML表示法 >®® ""×× &&÷÷ 水平線
水平線的屬性 屬性功能說明 WIDTH水平線寬度(pixel,or80%) SIZE水平線高度(pixel,default=2) ALIGN水平線位置(LEFT|CENTER|RIGHT) NOSHADE 無內凹，實線顯示 COLOR水平線顏色 e.g.,
範例展示 清單 ─符號清單 &ltLH> 　&ltLI> 　‧ 　‧ 　‧ 　&ltLI> &lt/LH> e.g., 三大台灣網路系統：
  • TANet
  • HiNet
  • SeedNet
    • 範例展示 ─符號清單
      &ltULTYPE=[disc(預設)|circle|square]> 　&ltLI> 　‧ 　‧ 　‧ 　&ltLI> &lt/UL> e.g., 三大台灣網路系統：
      • TANet
      • HiNet
      • SeedNet
      範例展示 ─編號清單
      &ltOLTYPE=[1|a|A|i|I]> 　&ltLI> 　‧ 　‧ 　‧ 　&ltLI &lt/OL> e.g., 三大台灣網路系統：
    1. TANet
    2. HiNet
    3. SeedNet
    範例展示 ─巢狀清單 &ltUL> 　&ltLI> 　　&ltOL> 　　　&ltLI> 　　　‧ 　　　‧ 　　　‧ 　　　&ltLI> 　　&lt/OL> 　&ltLI> &lt/UL> e.g.,
  • 棒球類 　　 　　
  • 中華職棒聯盟 　　　　
      　　　　
    1. 統一獅 　　　　
    2. 三商虎 　　　　
    　　
  • 中華職籃聯盟 　　　　
      　　　　
    1. 高雄雷公 　　　　
    2. 台中金剛 　　　　
    　　
  • 籃球類 範例展示 ─敘述式清單 &ltDL> 　&ltDT>項目一 　　&ltDD>項目一的敘述 　&ltDT>項目二 　　&ltDD>項目二的敘述 　‧ 　‧ 　‧ &lt/DL> e.g.,
    台灣學術教育網路(TANet)
    TANet是由教育部所支持的全國學術單位、研究單位和校園所組成的校際網路。

    中華電信公司網路(HiNet)
    HiNet是交通部所設立的商用Internet，於83年底建立完成。

    資策會種子網路(SeedNet)
    77年經濟部委託財團法人資訊工業策進會進行這項計劃，主要目的在提供各類網路和資料庫的服務。

    範例展示 表格 　...... 　...... 　‧ 　‧ 　‧ 　......
    ......
    ......
    ......
    表格範例
    表格的屬性 標籤屬性功能說明 BORDERBGCOLORWIDTHHEIGHTCELLSPACINGCELLPADDINGALIGN 表格邊框厚度表格背景顏色表格寬度表格高度儲存格距離資料與框線距離表格左右位置(left,center,right) BGCOLORALIGNVALIGN 列的背景顏色文字左右位置(left,center,right)文字上下位置(top,middle,bottom) CLASS LIST HEADER1 HEADER2 DATA1 DATA2 表格範例-1
    BGCOLORWIDTHHEIGHTALIGNVALIGNROWSPANCOLSPAN 儲存格背景顏色儲存格寬度儲存格高度文字左右位置(left,center,right)文字上下位置(top,middle,bottom)儲存格橫向擴展儲存格縱向擴展
    ALIGNVALIGN 標題左右位置(left,center,right)標題上下位置(top,bottom) e.g.,
    範例展示 HTML4.0的表格擴充規格 　表頭 用來定義表格中要作為表頭的資料列。

    如果表格資料較長，列印會超過一頁，表頭資料會列印在每一頁的表格開頭。

    　表格主體 將表格中的資料以列為單位，細分為幾個小群體。

    　表尾 用來定義表格中要作為表尾的資料列。

    如果表格資料較長，列印會超過一頁，表尾資料會列印在每一頁的表格結尾。

    HTML4.0規格的表格屬性 標籤屬性功能說明 ALIGNVALIGN 表頭左右位置(left,center,right)表頭上下位置(top,middle,bottom) ALIGNVALIGN 主體左右位置(left,center,right)主體上下位置(top,middle,bottom) ALIGNVALIGN 表尾左右位置(left,center,right)表尾上下位置(top,middle,bottom) e.g., 　 早期 近期 區域 國家 70年 75年 80年 90年 美洲 美國76399 153462 267584 542764 加拿大 1741 3074 15671 139143 歐洲 德國1345 1845 698 15532 荷蘭264 4626 14823 135830 亞洲 日本218486 253524 653242 741767 韓國98241 81644 284902 117821 資料來源:交通部 表格範例-2 範例展示 超連結 ─HTTP協定 ...超連結文字... URL(UniversalResourceLocator)格式： 　絕對路徑：http://主機名稱(或IP位址)/檔名 　相對路徑：檔案相對路徑/檔名 TARGET屬性值(英文字母大小寫有別)： 框架名稱將所連結之網頁顯示在指定的框架中 _self將所連結之網頁顯示在目前的框架中 _blank將所連結之網頁顯示在新開啟的視窗中 _parent將所連結之網頁顯示在目前文件的父框架中 _top將所連結之網頁顯示在目前的瀏覽器中，取消所有框架 e.g., 大華技術學院&lt/A> 範例展示 登入 範例展示 ─FILE協定 類似HTTP協定，不過所連結的目標是本地端的檔案而非遠端伺服器的檔案。

    URL(UniversalResourceLocator)格式： 　絕對路徑：file:///磁碟機代號|/檔案完整路徑/檔名 　相對路徑：檔案相對路徑/檔名 e.g., 本地端網頁&lt/A> 範例展示 ─FTP協定 :@主機名稱(或IP位址):port/檔名"TARGET="框架視窗">...超連結文字... 有些網站不需要使用者名稱及帳號，則可以省略。

    FTP預設port號碼為21，如未變動，亦可省略。

    e.g., 國立交通大學校園網路策進會 範例展示 ─TELNET協定 ...超連結文字... e.g., 成大資工BBS 範例展示 ─NEWS協定 ...超連結文字... 新聞主機 範例展示 ─MAILTO協定 ...超連結文字... 將啟動瀏覽器已設定的電子郵件程式... e.g.,&ltAHREF="mailto:[email protected]">電子郵件位址&lt/A> 範例展示 ─內部超連結 如果網頁內容冗長，則可設計內部超連結，例如：&ltAHREF="#跑馬燈">跑馬燈段落， 讓瀏覽者可以隨意跳到指定的段落，但指定的段落前必須設有標籤。

    若欲連結之段落標籤位於不同文件中(如test.htm)，則超連結語法可為 跑馬燈段落 e.g.,跑馬燈段落 範例展示 ─基本路徑 放置於...之間，則網頁中所有以相對路徑表示的超連結目標，都會與所設定的基本路徑結合成完整的絕對路徑。

    圖片 圖片的屬性 屬性功能說明 SRC圖片來源(內定支援GIF與JPEG兩種格式) ALT圖片文字說明 WIDTH圖片寬度 HEIGHT圖片高度 BORDER圖片外框的厚度 ALIGN圖片與文字的相對位置(TOP|MIDDLE|BOTTOM|LEFT|RIGHT) HSPACE圖片與文字的水平間隔 VSPACE圖片與文字的垂直間隔 LOWSRC 先顯示的圖片(低解析度)來源 USEMAP多方超連結所參考的地圖 e.g., 範例展示 回首頁"> 範例展示 圖片與文字的水平間隔為30像素 範例展示 ClientSide影像地圖 事先在網頁中指定圖片各區域對應的超連結網址，使用者在按滑鼠時，瀏覽器就能決定要連到指定的網址，不需要等待Server來決定。

    　‧ 　‧ 　‧ 區域形狀可分為3種：RECT(矩形)、CIRCLE(圓形)、POLY(多邊形)。

    ─矩形 X1,Y1是代表矩形左上角的座標，X2,Y2是代表矩形右下角的座標。

    ─圓形 X1,Y1是代表圓形的圓心座標，R是代表圓形的半徑。

    ─多邊形 X,Y是代表多邊形的各端點座標。

    e.g., 範例展示 框架 水平框架宣告 　 　 　‧ 　‧ 　‧ 　 　Y1,Y2,...,Yn代表各水平框架的垂直高度分配，單位為像素(pixel)或百分比。

    e.g., 　 　 　 範例展示 垂直框架宣告 　 　 　‧ 　‧ 　‧ 　 　X1,X2,...,Xn代表各垂直框架的水平寬度分配，單位為像素(pixel)或百分比。

    e.g., 　 　 　 範例展示 的其他屬性 屬性功能說明 BORDER框線厚度(數值) FRAMEBORDER顯示分割線與否(YES|NO) FRAMESPACING 框架間距 的其他屬性 屬性功能說明 MARGINHEIGHT 框架內容與框線的垂直距離 MARGINWIDTH框架內容與框線的水平距離 SCROLLING顯示捲軸(YES|NO|AUTO) NORESIZE不可調整框架大小 e.g., 　 　 　　 　　 　 　　 　　　請使用提供frames功能的瀏覽器!! 　　 範例展示 InlineFrames 　...讓不支援IFRAME標籤的瀏覽器能看到的說明文字... 要注意的是， 範例展示 跑馬燈(僅適用於IE) &ltMARQUEE>...跑馬燈內容文字... 跑馬燈的屬性 屬性功能說明 BGCOLOR跑馬燈的背景顏色 WIDTH跑馬燈看板的寬度 HEIGHT跑馬燈看板的高度 ALIGN跑馬燈文字的垂直對齊方式(TOP|MIDDLE|BOTTOM) BEHAVIOR跑馬燈文字的移動方式(SCROLL|ALTERNATE|SLIDE) DIRECTION跑馬燈文字的移動方向(LEFT|RIGHT) SCROLLDELAY跑馬燈文字的移動延遲時間(1/1000秒) SCROLLAMOUNT 跑馬燈文字的移動距離(pixel) LOOP跑馬燈文字的重複表現次數 e.g., 歡迎光臨首頁製作園地 範例展示 歡迎光臨首頁製作園地 範例展示 歡迎光臨首頁製作園地 範例展示 閃爍文字 範例展示 背景音樂 &ltBGSOUNDSRC="音樂檔URL"LOOP="INFINITE">(僅適用於IE) &ltEMBEDSRC="音樂檔URL"HIDDENAUTOSTART=TRUELOOP=TRUE> e.g.,
    現正撥放背景音樂『梁祝』...
    範例展示 視訊檔 &ltEMBEDSRC="視訊檔URL"> 的屬性 屬性功能說明 SRC視訊檔來源 WIDTH影像的顯示寬度 HEIGHT影像的顯示高度 AUTOSTART 是否自動開始撥放(TRUE|NO) LOOP是否無限次撥放(TRUE|NO) HIDDEN隱藏影像 e.g., 範例展示 &ltOBJECTDATA="視訊檔URL"WIDTH=200HEIGHT=200>&lt/OBJECT> 表單
    NAME="表單名稱" 　　　ACTION="目標程式URL" 　　　METHOD="傳送格式" 　　　ENCTYPE="編碼方式" 　　　......
    表單的屬性 屬性功能說明 NAME表單名稱 ACTION接收表單資料的目標程式(位於伺服器端) METHOD資料傳送的格式[GET(預設)|POST] GET：表單中的資料會附在ACTION屬性所指URL的後面，當做參數一起傳送，資料量不能超過1024個位元組。

    POST：表單中的資料是另外傳送到ACTION屬性所指的URL，所以沒有長度的限制。

    ENCTYPE 資料傳送的的編碼方式[ application/x-www-form-urlencoded(預設)| multipart/form-data| text/plain] e.g.,
    意見調查
    編號： 姓名： &ltBR> 密碼：
    相片：
    最高學歷： 小學 國中 高中 大學 研究所
    語言能力： 中文> 英文 日文 德文 法文
    常用軟體：
    Word Excel PowerPoint Access
    意見：
    第一行文字 第二行文字 &ltBR>
    範例展示 CSS樣式表 ─格式一：需定義於...之內 　H1{color:red;font-size:30} 　TH,TD{text-align:right} 　#N1{color:ff0000;font-style:italic} 　H3#N1{color:ff00ff;font-size:30} 　*.N2{color:00ff00;font-weight:bold} 　H3.N2{color:00ffff;font-size:30} e.g., 使用標籤N1的效果 範例展示

    中使用標籤N1的效果

    範例展示 使用標籤N2的效果 範例展示

    中使用標籤N2的效果

    範例展示 ─格式二：直接於HTML標籤內使用STYLE屬性 e.g., 大學之道在明明德，在親民，在止於至善。

    範例展示 大學之道在明明德，在親民，在止於至善。

    知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得，物有本末，事有終始，知所先後，則近道也。

    範例展示 ※各類CSS元素介紹 文字特效之CSS元素 CSS元素元素值 font-family可以設定多個字型，並以","隔開。

    e.g.,font-family:華康仿宋體,標楷體 font-sizee.g.,10pt,20px,etc. font-stylee.g.,normal(正常不做變化),oblique(斜體),italic(斜體) font-variante.g.,normal(正常不做變化),small-caps(小寫字母的大小但大寫的方式) font-weighte.g.,normal(正常不做變化),bold,bolder,light,lighter,100,200,300,400(normal),500,600,700(bold),800 fontfont樣式是上述樣式的綜合表示法，e.g.,font:bold20ptitalic 排版特效之CSS元素 CSS元素元素值 text-align指定文字的對齊方式。

    e.g.,left(靠左),right(靠右),center(置中),justify(左右對齊) text-decoratione.g.,none(正常不做變化),underline(加底線),overline(加頂線), line-through(加刪除線),blink(文字閃爍) text-ident指定段落的首行縮排。

    e.g.,1cm,10pt,3%(每行長度的百分比),etc. text-transforme.g.,none(正常不做變化),capitalize(第一個字母改成大寫), uppercase(改成大寫),lowercase(改成小寫) letter-spacing指定字元間距。

    e.g.,normal(正常不做變化),2px,3pt,etc. word-spacing指定文字(單字)間距。

    e.g.,normal(正常不做變化),2px,3pt,etc. line-height指定文字行距。

    e.g.,normal(正常不做變化),5px,5pt,2(兩倍行高),150%(行高的150%),etc. 清單特效之CSS元素 CSS元素元素值 list-style-type指定清單的符號或序號。

    e.g.,none(無清單符號或序號),disc(圓形實心),circle(圓形空心), square(正方形實心),decimal(數字1,2,3...),decimal-leading-zero(數字01,02,03,...), lower-roman(小寫羅馬字i,ii,iii,iv,...),upper-roman(大寫羅馬字母I,II,III,IV,...), lower-alpha(小寫英文字母a,b,c...),upper-alpha(大寫英文字母A,B,C,...),CJK-ideographic(中文數字 一,二,三,...),lower-latin(小寫拉丁字母),upper-latin(大寫拉丁字母),lower-greek(小寫希臘字母), etc. list-style-position指定清單項目的符號或圖片是否向外凸排。

    e.g.,outside(清單項目的第二行內容向右縮排), inside(清單項目的第二行內容與清單符號對齊) list-style-image指定圖片做為清單符號。

    e.g.,url(ball.gif) list-stylelist-style樣式是上述樣式的綜合表示法，e.g.,list-style:upper-romaninsideurl("ball.gif") 背景特效之CSS元素 CSS元素元素值 background-color指定HTML元件的背景顏色。

    e.g.,yellow,#ff0000,etc. background-image指定HTML元件的背景圖片。

    e.g.,url(bg.gif) background-repeat指定是否重複以背景圖片填滿區域。

    e.g.,repeat(在水平方向及垂直方向重複排列背景圖片), no-repeat(不做重複排列圖片),repeat-x(在水平方向重複排列背景圖片),repeat-y(在垂直方向重複排列背景圖片) background-attachment指定背景圖片是否隨捲軸移動。

    e.g.,scroll(背景圖片隨捲軸移動),fixed(背景圖片不隨捲軸移動) background-position指定背景圖片開始顯示的位置。

    e.g.,5cm10cm(水平方向5公分處及垂直方向10公分處), 10%20%(水平方向10%處及垂直方向20%處),left(區域左邊),right(區域右邊),center(區域中間),top(區域頂部),bottom(區域底部) backgroundbackground樣式是上述樣式的綜合表示法，e.g.,background:url(bg.gif)no-repeattopright 區塊之CSS元素 CSS元素元素值 width指定區塊的寬度。

    e.g.,300px,60%(視窗寬度之60%),etc. height指定區塊的高度。

    e.g.,200px,40%(視窗高度之40%),etc. padding-top區塊文字與區塊上邊框的間距(預設值為0)。

    padding-right區塊文字與區塊右邊框的間距(預設值為0)。

    padding-bottom區塊文字與區塊下邊框的間距(預設值為0)。

    padding-left區塊文字與區塊左邊框的間距(預設值為0)。

    paddingpadding樣式是上述4樣式的綜合表示法，e.g.,padding:1cm2cm3cm4cm表 區塊文字與區塊上邊框、右邊框、下邊框、左邊框的間距為1、2、3、4公分。

    border-style指定區塊的邊框樣式。

    e.g.,none(不顯示邊框，此為預設值),dotted(虛線點狀), dashed(虛線),solid(實線),double(雙實線),groove(立體內凹實線),ridge(立體外凸實線), inset(內凹實線),outset(外凸實線) border-color指定區塊的邊框顏色。

    border-width指定區塊的邊框寬度。

    e.g.,thin(細),medium(預設值),thick(粗),0.5cm,etc. border指定區塊四周的邊框樣式、顏色、寬度。

    e.g.,border:solidredthick margin-top指定區塊上邊框外的空白寬度。

    margin-right指定區塊右邊框外的空白寬度。

    margin-bottom指定區塊下邊框外的空白寬度。

    margin-left指定區塊左邊框外的空白寬度。

    margin指定區塊四周邊框外的空白寬度。

    e.g.,margin:1cm2cm3cm4cm表 區塊上邊框、右邊框、下邊框、左邊框外的空白寬度為1、2、3、4公分。

    overflow設定區塊捲軸。

    e.g.,visible(無捲軸且區塊內容不會被裁減), hidden(無捲軸且區塊內容會被裁減),scroll(有捲軸),auto(由瀏覽器決定是否有捲軸) overflow-x元素值與overflow相同，但效果僅限於水平捲軸。

    overflow-y元素值與overflow相同，但效果僅限於垂直捲軸。

    scrollbar-arrow-color指定捲軸方塊箭頭的顏色。

    scrollbar-face-color指定捲軸方塊及捲動軸的顏色。

    scrollbar-base-color指定捲軸方塊及捲動軸的顏色。

    scrollbar-track-color指定捲動軸背景的顏色。

    scrollbar-3dlight-color指定捲軸方塊及捲動軸的左邊框與上邊框顏色。

    scrollbar-darkshadow-color指定捲軸方塊及捲動軸的右邊框與下邊框顏色。

    • 請為這篇文章評分？

    延伸文章資訊