HTML常用標記

1、HTML常用標記一、HTML文檔結(jié)構(gòu)html/網(wǎng)頁解析開始head/網(wǎng)頁頭部定義開始title標題title/定義標題顯示于瀏覽器的標題欄內(nèi)/head/網(wǎng)頁頭部定義結(jié)束body/網(wǎng)頁主體定義開始網(wǎng)頁主體內(nèi)容/body/網(wǎng)頁主體定義結(jié)束/html/網(wǎng)頁解析結(jié)束以下是具體標記說明。1.文件標題title./title2.文件更新-meta【1】10秒后自動更新一次meta http-equiv="refresh"content=10【2】10秒后自動連結(jié)到另一文件meta http-equiv="refresh"content="10；URL=欲連

2、結(jié)文件之URL"二、文字標記預設的基準路徑-base>base href="放置文件的主機之URL"版面1.標題文字h#./h#=16；h1為最大字，h6為最小字2.字體變化font./font【1】字體大小font size=#./font#=17；數(shù)字愈大字也愈大【2】指定字型font face="字型名稱"./font【3】文字顏色font color=#rrggbb./font取值為十六進制數(shù)r：表紅色（red）色碼 g：表綠色（green）色碼 b：表藍色（blue）色碼3.顯示小字體small./small4.顯示大字體big

3、./big5.粗體字b./b6.斜體字i./i7.打字機字體tt./tt8.底線u./u9.刪除線strike./strike10.下標字sub./sub11.上標字sup>./sup12.文字閃爍效果blink./blink13.換行br14.分段p15.文字的對齊方向p align="#"#號可為left：表向左對齊（預設值）center：表向中對齊right：表向右對齊P.S.p align="#"之後的文字都會以所設的對齊方式顯示，直到出現(xiàn)另一個p align="#"改變其對齊方向，或遇到hr或h#標簽時會自動設回預設的

4、向左對齊。16.水平線（分隔線）hr 注：多個屬性可以同時寫。【1】分隔線的粗細hr size=點數(shù)【2】分隔線的寬度hr size=點數(shù)或百分比【3】分隔線對齊方向hr align="#"#號可為left：表向左對齊（預設值）center：表向中對齊right：表向右對齊【4】分隔線的顏色hr color=#rrggbb【5】實心分隔線hr noshade17.向中對齊center./center18.依原始樣式顯示（預定義格式）pre./pre19.body標簽的屬性【1】背景顏色-bgcolorbodybgcolor=#rrggbb【2】背景圖案-background

5、body background="圖形文件名"【3】設定背景圖案不會卷動-bgpropertiesbody bgproperties=fixed【4】文件內(nèi)容文字的顏色-textbody text=#rrggbb【5】超連結(jié)文字顏色-linkbody link=#rrggbb【6】正被選取的超連結(jié)文字顏色-vlinkbody vlink=#rrggbb【7】已連結(jié)過的超連結(jié)文字顏色-alinkbody alink=#rrggbb20.注解!-.- （點表示注釋部分）符號語法&"空白（空格）版權(quán)& copy注冊商標& reg英鎊& p

6、ound;21.特殊字元表示法（常見有以下幾個） 三、列表（項目符號與編號）1、有序號的清單olli項目1li項目2li項目3/ol【1】序號形式-typeoltype=#或litype=#號可為A：表以大寫英文字母A、B、C、D.做為項目編號a：表以小寫英文字母a、b、c、d.做為項目編號I：表以大寫羅馬數(shù)字做為項目編號i：表以小寫羅馬數(shù)字做為項目編號1：表以阿拉伯數(shù)字做為項目編號（預設值）【2】起始數(shù)字-startol start=欲開始計數(shù)的序數(shù)【3】指定編號-valueli value=欲指定的序數(shù)2、無序號的清單ulli項目1li項目2li項目3/ul【1】項目符號形式-typeul

7、 type=#或li type=#號可為disc：實心圓點（預設值）circle：空心圓點square：實心方塊【2】原始清單-plainul plain【3】清單排列方式-warp1清單垂直排列ul warp=vert2清單水平排列ulwarp=horiz3、目錄式列表dirli項目1li項目2li項目3/dirP.S.目錄式清單每一個項目不能超過20個字元（即10個中文字）4、菜單式列表menuli項目1li項目2li項目3/menu5、定義式列表dldt項目1dd項目1說明dt項目2dd項目2說明dt項目3dd項目3說明/dl緊密排列-compactdlcompactP.S.如此可使dt

8、的內(nèi)容與dd的內(nèi)容在同一行，僅以數(shù)格空白相隔而不換行，但若dt的文字超過一定的長度后，compact的作用就消失了！四、超鏈接1、連結(jié)至其他文件a href="/URL"說明文字或圖片/a2、連結(jié)至文件內(nèi)之某一處（外部連結(jié)）1起點a href="檔名#名稱"./a2終點a name="名稱"3、frame框架的超鏈接【1】開啟新的瀏覽器來顯示連結(jié)文件-_blanka href="/URL" target=_blank【2】顯示連結(jié)文件於目前的frame-_selfa href="/URL" ta

9、rget=_self【3】以上一層的分割視窗顯示連結(jié)文件-_parenta href="/URL" target=_parent【4】以全視窗顯示連結(jié)文件-_topa href="/URL" target=_top【5】以特定視窗顯示連結(jié)文件-a href="/URL" target="特定視窗名稱"五、表格相關(guān)屬性1.定義表格table./table【1】設定邊框的厚度-bordertable border=點數(shù)【2】設定格線的寬度-cellspacingtable cellspacing=點數(shù)【3】設定資料與格

10、線的距離-cellpaddingtable cellpadding=點數(shù)【4】調(diào)整表格寬度-widthtable width=點數(shù)或百分比【5】調(diào)整表格高度-heighttable height=點數(shù)或百分比【6】設定表格背景色彩-bgcolortable bgcolor=#rrggbb【7】設定表格邊框色彩-bordercolortable bordercolor=#rrggbb2.顯示格線table border3.表格標題caption./caption表格標題位置-aligncaption align="#"#號可為top：表標題置于表格上方（預設值）bottom：

11、表標題置于表格下方4.定義列tr5.定義欄位1td：靠左對齊2th：靠中對齊、粗體【1】水平位置-alignth align="#" #號可為left：向左對齊 center：向中對齊right：向右對齊【2】垂直位置-alignth align="#"#號可為 top：向上對齊middle：向中對齊 bottom：向下對齊【3】欄位寬度-width th width=點數(shù)或百分比【4】欄位垂直合并-rowspan th rowspan=欲合并欄位數(shù)【5】欄位橫向合并-colspanth colspan=欲合并欄位數(shù)六、表單表單相關(guān)屬性1、基本架構(gòu)for

12、m action="處理資料用的CGI程式之URL" method="get或post"./form2、輸入文件型表單form action="URL"method="post"inputinput./form【1】欄位類型-typeinput type=#號可為text：文字輸入password：密碼checkbox：多選鈕radio：單選鈕submit：接受按鈕reset：重設按鈕image：圖形鈕hidden：隱藏欄位【2】欄位名稱-nameinput name="資料欄名"P.S.若ty

13、pe為submit、reset則name不必設定【3】文件上的預設值-valueinput value="預設之字串"【4】設定欄位的寬度-sizeinput size=字元數(shù)【5】限制最大輸入字串的長度-maxlengthinput maxlength=字元數(shù)【6】預設checkbox或radio的初值-checkedinput type=checkboxcheckedinput type=radiochecked【7】指定圖形的URL-srcinput type=image src="圖檔名"【8】圖文對齊-aligninput type=image

14、 align="#"#號可為top：文字對齊圖片之頂端middle：文字對齊圖片之中間buttom：文字對齊圖片之底部3、選擇式表單form action="URL"method="post"selectoptionoption./select/formA、select的屬性【1】欄位名稱-nameselect name="資料欄位名"【2】設定顯示的選項數(shù)-sizeselect size=個數(shù)【3】多重選項-multipleselect multipleB、option的屬性【1】定義選項的傳回值-valueop

15、tion value="傳回值"【2】預先選取的選項-selectedoption selected4、多列輸入文字區(qū)表單form action="URL"method="post"textarea./textarea/form【1】文字區(qū)的變數(shù)名稱-nametextarea name=變數(shù)名稱【2】設定文字輸入?yún)^(qū)寬度-colstextarea cols=字元數(shù)【3】設定文字輸入?yún)^(qū)高度-rowstextarea rows=列數(shù)【4】輸入?yún)^(qū)設定預設字串textarea預設文字/textarea【5】自動換行與否-wraptextarea

16、 wrap=#號可為off：表輸入的文字超過欄寬時，不會自動換行（預設值）virtual：表輸入的文字在超過欄寬時會自動換行七、圖片1.插入圖片img src="圖形文件名"2.設定圖框-borderimg src="圖形文件名"border=點數(shù)3.設定圖形大小-width、heightimg src="圖形文件名"width=寬度點數(shù)height=高度點數(shù)4.設定圖形上下左右留空vspace、hspaceimg src="圖形文件名"vspace=上下留空點數(shù)hspace=左右留空點數(shù)5.圖形附注img src

17、="圖形文件名"alt="說明文字"6.預載圖片img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"P.S.兩個圖的圖形大小最好一致7.（地圖鏈接）影像地圖（ImageMap）img src="圖形文件名"usemap="#圖的名稱"map name="圖的名稱"area shape=形狀coords=區(qū)域座標列表href="連結(jié)點之URL"area shape=形狀coords=區(qū)域座標列表href="

18、;連結(jié)點之URL"area shape=形狀coords=區(qū)域座標列表href="連結(jié)點之URL"area shape=形狀coords=區(qū)域座標列表href="連結(jié)點之URL"/map【1】定義形狀shape=rect：矩形shape=circle：圓形shape=poly：多邊形【2】定義區(qū)域coords a.矩形：必須使用四個數(shù)字，前兩個數(shù)字為左上角座標，后兩個數(shù)字為右下角座標例：area shape=rectcoords=100,50,200,75 href="/URL"b.圓形：必須使用三個數(shù)字，前兩個數(shù)字為圓心的

19、座標，最后一個數(shù)字為半徑長度例：area shape=circlecoords=85,155,30 href="/URL"c.任意圖形（多邊形）：將圖形之每一轉(zhuǎn)折點座標依序填入例：area shape=polycoords=232,70,285,70,300,90,250,90,200,78 href="/URL"8、<bgsound src=MID音樂文件地址> 背景音樂設定八、框架屬性1、分割視窗標簽frameset./frameset【1】垂直（上下）分割-rowsframeset rows=#號可為點數(shù)：如欲分割為100,200,30

20、0三個視窗，則frameset rows=100,200,300；亦可以*號代表，如frameset rows=*,500,*百分比：如frameset rows=30%,70%，各項總和最好為100%【2】水平（左右）分割-colsframeset cols=點數(shù)或百分比2、指定視窗內(nèi)容-frameframeset cols=30%,70%frameframe/frameset【1】指定視窗的文件名稱-srcframe src=HTML檔名【2】定義視窗的名稱-nameframe name=視窗名稱【3】設定文件與上下邊框的距離-marginheightframe marginheight=

21、點數(shù)【4】設定文件與左右邊框的距離-marginwidthframe marginwidth=點數(shù)【5】設定分割視窗卷軸-scrollingframe scrolling=#號可為yes：固定出現(xiàn)卷軸no：不出現(xiàn)卷軸auto：自動判斷文件大小需不需要卷軸（預設值）【6】鎖住分割視窗的大小-noresizeframe noresize<noframe> </noframe> 不支持框架顯示。九、滾動條<marquee>.</marquee>普通卷動 <marquee behavior=slide>.</marquee>滑動

22、<marquee behavior=scroll>.</marquee>預設卷動 <marquee behavior=alternate>.</marquee>來回卷動 <marquee direction=down>.</marquee>向下卷動 <marquee direction=up>.</marquee>向上卷動 <marquee direction=right></marquee>向右卷動 <marquee direction=left></ma

23、rquee>向左卷動 <marquee loop=2>.</marquee>卷動次數(shù) <marquee width=180>.</marquee>設定寬度 <marquee height=30>.</marquee>設定高度 <marquee bgcolor=FF0000>.</marquee>設定背景顏色 <marquee scrollamount=30>.</marquee>設定滾動速度 <marquee scrolldelay=300>.</ma

24、rquee>設定卷動時間 <marquee onmouseover="this.stop()">.</marquee>鼠標經(jīng)過上面時停止?jié)L動 <marquee onmouseover="this.start()">.</marquee>鼠標離開時開始滾動 十、CSS（一）css結(jié)構(gòu) 例：tdfont-size:10.5pt;color:#666666 css樣式包含兩個基礎(chǔ)部分， 選擇符<td>和聲明font-size:10.5pt;color:#666666 聲明也有兩部分組成： 屬性f

25、ont-size,color和值10.5pt,#666666 選擇符分為6種 1、元素選擇符 當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開 例：td,p,li,input,selectfont-size:12px; 2、class(類)選擇符 3 、id選擇符 與class選擇附類似，只是把'.'換成'#' 4、偽元素選擇符首行偽元素（first-line）和首字符偽元素(first-letter)是用來實現(xiàn)首行大寫和首行下沉效果的（二）引入樣式表1、內(nèi)嵌式樣式表： 格式：<p style="font-size:10.

26、5pt"> 2、導入式樣式表 html> <head> <style type="text/css"> <!- import url(css/home.css); -> </style> <body> . </body> </html> 3外聯(lián)式樣式表 <link rel="stylesheet" href="/css/default.css" > （三）單位1 長度單位 數(shù)值可以是整數(shù)，小數(shù)，正數(shù)，負數(shù)，0，后加單位

27、（負值不要輕易使用） 換算關(guān)系： 1in(英寸)=6pc(派) 1in(英寸)=72pt(磅) 1in(英寸)=2.54(厘米) 1cm(厘米)=10mm(毫米) 1cm(厘米)=0.3937(英寸) 1pt(磅)=1/72in(英寸)=0.2478mm(毫米) 1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸 2 百分比單位 3 顏色單位 4 url單位div屬性color : #999999 文字顏色 font-family : 宋體 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜體育font-variant:small-caps 小字體letter-spacing : 1pt 文字間距l(xiāng)ine-height : 200% 設定行高font-weight:bold 文字粗體ve