搜索
Html語法.doc黃明祥-1-2019/10/13超媒體文件(HTML格式)實務製作(一)(By黃明祥Oct.26,2004)一、基本概念1.縮寫HTML:HypertextMarkupLanguage(超媒體標示語言)URL:UniformResourceLocator(一致資源定位器)瀏覽器伺服器(全球資訊網)2.編寫工具2.1HTML編寫工具：任何文書編輯器(記事本,小作家pe2,vi,notes,...)2.2影像製作工具：Photoshop,ImagePales,CorelDraw,其它3.瀏覽工具Netscape,IE二、HTML主體架構※檔名：xxx.htm(forWindows)xxx.html(forUnix)※格式：標籤名稱屬性名稱屬性值/標籤名稱屬性名稱屬性值※簡單的範例：title歡迎蒞臨交通部電信研究所/titlebodybackground=tttbg.jpgtext=#400040centerimgsrc=ttt.jpg/img/center/bodyHtml語法.doc黃明祥-2-2019/10/13三、語法格式1.主題(title)title主題/title※用來顯示本頁之主題。※顯示在netscape或ie最上面畫面。2.標題(heading)h1第一層標題/h1h2第二層標題/h2h3第三層標題/h3h4第四層標題/h4h5第五層標題/h5h6第六層標題/h6※顯示文章之標題，類似文章之章、節、項。※標題的字體與大小可由使用者自行設定。3.新段落(paragraph)p※產生一個新的段落4.超連結及定位錨(Anchors)4.1與其它文件做連結ahref=“filename.htm”連結內容標題/a※用來連結(link)執行filename.htm之html檔案。※在ie瀏覽器上，連結內容標題會以底線及不同顏色(default為籃色)顯示。※當游標移到這些文字時，游標之形狀會由箭頭轉成手指狀，只要在此點一下就會跳到並執行filename.htm之HTML檔案。4.2連結其它Web站ahref=“URLfilename”連結其它Web站/a※用來超連結(hyperlink)到其它Web站。※範例：ahref=“scheme://host[:port]/dir/subdir/filename.htm”連結其它Web站/ascheme:http,file,gopher,WAIS,news,telnet,ftp,mailtoahref=“@host/”/a※相對路徑連結：※絕對路徑連結：Html語法.doc黃明祥-3-2019/10/134.3與同一份文件中之其它章節作連結ahref=“#xxxx”跳到本文其它有標xxxx位置/a※直接跳到本文其它有標aname=“xxxx”位置/a4.4與其它文件之章節作連結ahref=“filename.htm#xxxx”跳到filename.htm文件上標xxxx位置/a※直接跳到filename.htm文件上有標aname=“xxxx”位置/a4.5連結到其它影像ahref=“imagefile”連結到其它影像/a5.列表(lists)5.1未標序號之排列(unorderedlist)ulli資料內容一li資料內容二/ul顯示結果：‧資料內容一‧資料內容二5.2有標序號之排列(orederedlist)olli資料內容一li資料內容二/ol顯示結果：1資料內容一2資料內容二5.3多層次列表(nestedlist)ulli無序號資料內容一olli有序號資料內容一li有序號資料內容二li有序號資料內容三Html語法.doc黃明祥-4-2019/10/13/olli無序號資料內容二/ul顯示結果：‧無序號資料內容一1有序號資料內容一2有序號資料內容二3有序號資料內容三‧無序號資料內容二5.4敘述性列表(definitionlist)dldt資料內容1dd資料內容1.1dt資料內容2dd資料內容2.1/dl顯示結果：資料內容1資料內容1.1資料內容2資料內容2.1dldt1資料內容dd1.1資料內容dldd1.1.1資料內容dd1.1.2資料內容/dldd1.2資料內容dt2資料內容dd2.1資料內容dt3資料內容/dl顯示結果：1資料內容1.1資料內容1.1.1資料內容Html語法.doc黃明祥-5-2019/10/131.1.2資料內容1.2資料內容2資料內容2.1資料內容3資料內容5.5表格(table)tablecaptionfontsize=6表格標題/font/captiontrth欄位名稱一th欄位名稱二th欄位名稱三th欄位名稱四trtd資料內容一td資料內容二td資料內容三td資料內容四/table6.水平線(horizontalrule)hr※產生一等寬之水平線例：hralign=“left”width=60%size=37.強迫換行(linebreak)br※強迫換一行8.註解(comment)!--註解內容--9.使用原始排版方式pre......................./pre※在pre與/pre之間資料內容會按照原編輯檔案顯示螢幕上。※換行及空白字不會被吃掉。10.字型變化i資料內容/i※資料內容以斜體字型顯示b資料內容/bHtml語法.doc黃明祥-6-2019/10/13※資料內容以粗體字型顯示tt打字機文字資料/tt11.特殊字元:<:>&:&“:"12.線上顯示影像imgsrc=“imagefile”資料內容/img※資料內容之文字會放在圖下imgalign=topsrc=“imagefile”資料內容/img※資料內容之文字會放在圖上imgalign=middlesrc=“imagefile”資料內容/imgimgalign=bottomsrc=“imagefile”alt=“Warning”資料內容/img註：alt:當軟硬體環境無法顯示圖型檔案時，以“Warning“字串替代。ahref=“/cgi-bin/htimage/dir/subdir/imagefile.conf”asrc=“imagefile”ismap/a13.address作者Email位址/address用來告訴本篇文件的作者的Emailaddress。