HTML常用標(biāo)記

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

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

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

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

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

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

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

8、的內(nèi)容與dd的內(nèi)容在同一行，僅以數(shù)格空白相隔而不換行，但若dt的文字超過(guò)一定的長(zhǎng)度后，compact的作用就消失了！四、超鏈接1、連結(jié)至其他文件a href="/URL"說(shuō)明文字或圖片/a2、連結(jié)至文件內(nèi)之某一處（外部連結(jié)）1起點(diǎn)a href="檔名#名稱"./a2終點(diǎn)a name="名稱"3、frame框架的超鏈接【1】開啟新的瀏覽器來(lái)顯示連結(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】設(shè)定邊框的厚度-bordertable border=點(diǎn)數(shù)【2】設(shè)定格線的寬度-cellspacingtable cellspacing=點(diǎn)數(shù)【3】設(shè)定資料與格

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

11、表標(biāo)題置于表格下方4.定義列tr5.定義欄位1td：靠左對(duì)齊2th：靠中對(duì)齊、粗體【1】水平位置-alignth align="#" #號(hào)可為left：向左對(duì)齊 center：向中對(duì)齊right：向右對(duì)齊【2】垂直位置-alignth align="#"#號(hào)可為 top：向上對(duì)齊middle：向中對(duì)齊 bottom：向下對(duì)齊【3】欄位寬度-width th width=點(diǎn)數(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=#號(hào)可為text：文字輸入password：密碼checkbox：多選鈕radio：?jiǎn)芜x鈕submit：接受按鈕reset：重設(shè)按鈕image：圖形鈕hidden：隱藏欄位【2】欄位名稱-nameinput name="資料欄名"P.S.若ty

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

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

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

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

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

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

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

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

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

22、<marquee behavior=scroll>.</marquee>預(yù)設(shè)卷動(dòng) <marquee behavior=alternate>.</marquee>來(lái)回卷動(dòng) <marquee direction=down>.</marquee>向下卷動(dòng) <marquee direction=up>.</marquee>向上卷動(dòng) <marquee direction=right></marquee>向右卷動(dòng) <marquee direction=left></ma

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

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

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

26、5pt"> 2、導(dǎo)入式樣式表 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 長(zhǎng)度單位 數(shù)值可以是整數(shù)，小數(shù)，正數(shù)，負(fù)數(shù)，0，后加單位

27、（負(fù)值不要輕易使用） 換算關(guān)系： 1in(英寸)=6pc(派) 1in(英寸)=72pt(磅) 1in(英寸)=2.54(厘米) 1cm(厘米)=10mm(毫米) 1cm(厘米)=0.3937(英寸) 1pt(磅)=1/72in(英寸)=0.2478mm(毫米) 1pc(派)=1/6in(英寸)=我國(guó)新四號(hào)鉛字的尺寸 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% 設(shè)定行高font-weight:bold 文字粗體ve