HTML标记
注釋:紅色字體為標(biāo)記和其必不可少的屬性;
綠色字體為標(biāo)記中的屬性,可任意選取所需要的屬性;
天藍(lán)色字體為自由填充的屬性值;
黑色字體為補充內(nèi)容及對標(biāo)識和描述內(nèi)容的注解
1、HTML標(biāo)記的語法是:<標(biāo)記名稱 屬性1名=屬性1值 屬性2名=屬性2值 …>
標(biāo)記在表示HTML文檔內(nèi)容結(jié)構(gòu)和含義的時候,通常有兩種方式,我們分別稱單標(biāo)記和雙標(biāo)記。
表1:
|
HTML定義的用于描述頁面整體結(jié)構(gòu)的四種標(biāo)記 |
<HTML> <HEAD> <TITLE> (加入網(wǎng)頁的標(biāo)題)</TITLE> </HEAD> <BODY> </BODY> </HTML> |
2、<BODY>的屬性
BGCOLOR=" 顏色" (設(shè)置背景顏色)
BACKGROUND=" 圖片名" (設(shè)置背景圖片)
BGPROPERTIES="FIXED" (設(shè)置背景圖片固定不變)
TEXT="顏色 " (設(shè)置文本顏色)
LINK="顏色" (默認(rèn)鏈接) VLINK="顏色" (當(dāng)鼠標(biāo)按下時的鏈接) ALINK="鏈接按鈕" (當(dāng)鼠標(biāo)松開后的鏈接)
TOPMARGIN=距離 (文本距頂部的距離) LEFTMARGIN=距離 (文本距左邊的距離)
3、設(shè)置播放器,必須在BODY的雙標(biāo)記中存在
<BGSOUND SRC="地址" (歌名或視頻名)>
<EMBDE SRC="地址" (歌名或視頻名) WIDTH=寬度 HEIGHT=高度 (調(diào)整播放器的寬度和高度) HIDDEN="TRUE"(隱藏播放器)>
4、如何使網(wǎng)頁在網(wǎng)站的排名靠前,其必須在HEAD中存在
<META NAME="KEYWORD" CONTENT="描述網(wǎng)站內(nèi)容 "> (用于標(biāo)記搜索引擎在搜索該頁面時所取出的關(guān)鍵詞)
<META COUNT="描述內(nèi)容"NAME="DESCRIPTION">(用來標(biāo)記描述內(nèi)容)
<META NAME="AUTHOR" CONTENT="作者名稱" >(用來標(biāo)記文檔的作者)
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT = "TEXT/HTML; CHARSET =GB2312">(用來標(biāo)記你的頁面的解碼方式)
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL= Http://www.baidu .com">(用來自動刷新網(wǎng)頁)
5、標(biāo)題字體
表2:
|
語法: |
<H*ALIGN=“對齊位置”> </H*> |
|
說明: |
其中*可以選擇1-6,且按順序字體從大到小顯示;ALIGN屬性值可以選擇“left”、“center”、“right”三個中間的一個。 一個標(biāo)題占一個獨立段,字體自動顯示為黑體且不容不同大小的字體 |
6、文章字體
表3:
|
語法: |
<FONT SIZE=“大小”COLOR=“顏色”> </FONT> |
|
說明: |
其中SIZE屬性可以選擇1-7; COLOR屬性值可以選擇RGB值或者預(yù)定義顏色名稱。常用的顏色名稱有:black(黑),white(白),red(紅),green(綠),blue(藍(lán)),yellow(黃),aqua(淺綠),fuchsia(紫紅),gray(灰),Lime(橙),maroon(栗色),purple(紫),olive(橄欖),silver(銀色) |
7、物理字體
表4:
|
語法: |
<B> </B> |
<I> </I> |
<U> </U> |
|
說明: |
B標(biāo)記用來指示以粗體字顯示文本 |
I標(biāo)記用來指示以斜體字顯示文本 |
U標(biāo)記用來指示為文本加上下劃線 |
表5:
|
語法: |
<SUP> </SUP> |
<SUB></SUB> |
<STRIKE> </STRIKE> |
|
說明: |
SUP標(biāo)記指示以上標(biāo)方式顯示文本 |
SUB標(biāo)記指示以下標(biāo)方式顯示文本 |
STRIKE標(biāo)記用來指示在文本的正中央畫一條刪去線 |
8、字符實體
在往HTML文檔中寫入特殊字符,如“〈”、“〉”、“&”、“ ”等要使用特殊的代碼,瀏覽器會用HTML命令對這些特殊代碼進(jìn)行翻譯。往網(wǎng)頁中輸入特殊字符,需在HTML代碼中加入以&開頭的字母組合或以&#開頭的數(shù)字。
9、對齊方式
表6:
|
語法: |
<DIV ALIGN=“對齊位置”> </DIV> |
<CENTER> </CENTER> |
|
說明: |
ALIGN屬性可以用“left”、“center”、“right”,分別對應(yīng)于將標(biāo)記中間的字符塊按照左、中、右對齊。 |
這個標(biāo)記沒有屬性,其作用是將標(biāo)記中間的字符居中對齊,其作用和<DIV ALIGN=“center”></DIV>一樣。 |
表7:
|
語法: |
<P ALIGN=“對齊位置”> </P> |
|
說明: |
<P>用于換行,意同于回車兩次。<P>和<DIV>中的ALIGN屬性的屬性值一樣,也是取“left”、“center”、“right”三個值,分別對應(yīng)將中間的字體左、中、右對齊。 |
10、文字移動
表8:
|
語法: |
<MARQUEE DIRECTION=“移動方向” BEHAVIOR=“移動方式” LOOP=“移動次數(shù)” SCROLLAMOUNT=“字體循環(huán)移動的速度” SCROLLDELAY=“字體循環(huán)移動的延時” HEIGHT=“高度” WIDTH=“寬度” BGCOLOR=“背景顏色”> </MARQUEE> |
|
說明: |
其中的DIRECTION屬性的屬性值是取“left”、“right”, “up”, “down”四個值,分別對應(yīng)將中間的字體向左、右、上、下移動; BEHAVIOR屬性的屬性值是取“scroll”、“slide”、“alternate”三個值,分別對應(yīng)將中間的字體循環(huán)移動、只移動一次、在屏幕中間來回移動; LOOP屬性的屬性值是取一個數(shù)值,表示將中間的字體循環(huán)移動的次數(shù); SCROLLAMOUNT屬性的屬性值是取數(shù)字值,對應(yīng)將中間的字體循環(huán)移動的速度,數(shù)值越大,表示速度越快; SCROLLDELAY屬性的屬性值是取數(shù)字值,對應(yīng)將中間的字體循環(huán)移動的延時,設(shè)置這個參數(shù)也會影響到文字移動的速度; HEIGHT屬性的屬性值是取數(shù)字值,這個屬性控制了文字移動面積的高度; WIDTH屬性的屬性值是取數(shù)字值,這個屬性控制了文字移動面積的寬度; BGCOLOR屬性的屬性值可以取RGB值,或者用預(yù)定義值,它控制了移動文字的背景顏色; |
11、文字中行的控制
表9:
|
語法: |
<P ALIGN=“對齊位置”> </P> |
|
說明: |
其中ALIGN屬性的屬性值可以取“left”、“center”、“right”三個值中的值,這個屬性控制了段落中的文字在Web頁面中的對齊方式。需要注意的是有些瀏覽器不支持右對齊方式。 |
表10:
|
語法: |
<BR> |
|
說明: |
這個標(biāo)記是單標(biāo)記。換行標(biāo)記,意同于回車一次。 |
12、列表
l 無序列表
表11:
|
語法: |
<UL TYPE=“強調(diào)符類型” COMPACT> </UL> |
|
說明: |
TYPE屬性可以分別取三個值“disc”、“square”、“circle”,(在某些瀏覽器中,TYPE屬性的值必須使用小寫瀏覽器才可以識別)它是用來控制強調(diào)符風(fēng)格的屬性,三個值分別對應(yīng)實心圓點,實心方塊,空心圓圈。需要說明的是有些瀏覽器不支持該屬性。 COMPACT屬性是個無值屬性(名稱標(biāo)記),用來使列表的表項用緊湊格式顯示。 |
l 有序列表
表12:
|
語法: |
<OL TYPE=“強調(diào)符類型” START=“” COMPACT> </OL> |
|
說明: |
TYPE屬性可以分別取五個值“1”、“a”、“A”、“i”、“I”,用來控制強調(diào)符風(fēng)格的屬性,五個值分別對應(yīng)數(shù)字、小寫字母、大寫字母、小寫羅馬數(shù)字、大寫羅馬數(shù)字。 START屬性是一個數(shù)字,表示從第幾個數(shù)字(字母)開始計數(shù)。 COMPACT屬性是個無值屬性(名稱標(biāo)記),用來使列表的表項用緊湊格式顯示。 |
表13:
|
語法: |
<LI TYPE=“強調(diào)符類型”> </LI> |
|
說明: |
TYPE屬性是可選的,一般情況下是不需要的,因為在整體列表定義時應(yīng)該已經(jīng)定義完畢,只有在極少數(shù)情況下,需要使不同表項的強調(diào)符不同,才有必要在這里定義這個屬性。屬性值的選擇和前面列表的屬性選項一致。 |
l 定義列表:
表14:
|
語法: |
<DL COMPACT> </DL> |
|
說明: |
COMPACT屬性是個無值屬性(名稱標(biāo)記),用來使列表的表項用緊湊格式顯示。 |
表15:
|
語法: |
<DT> </DT> |
|
說明: |
<DT>標(biāo)記用于標(biāo)注需要定義的術(shù)語 |
表16:
|
語法: |
<DD> </DD> |
|
說明: |
<DD>標(biāo)記用于標(biāo)注該術(shù)語的定義 |
表17:
|
無序列表 |
有序列表 |
定義列表 |
|
<UL TYPE=“強調(diào)符類型” > <LI TYPE=“強調(diào)符類型”> </LI> <LI> </LI> … <LI > </LI> </UL> |
<OL TYPE=“強調(diào)符類型” START=“從哪開始計數(shù)” > <LI TYPE=“強調(diào)符類型”> </LI> <LI> </LI> … <LI > </LI> </OL> |
<DL> <DT> <DD> </DD> </DT> </DL> |
13、預(yù)格式化
表18:
|
語法: |
<PRE> </PRE> |
|
說明: |
<PRE>標(biāo)記用于使瀏覽器原封不動地顯示預(yù)先編排好格式的一段文本 |
14、鏈接
超鏈接是WWW的基礎(chǔ),也是其核心。
表19:
|
語法: |
<A HREF=“url#name” TARGET=“鏈接打開的位置”></A> |
|
說明: |
HREF部分中url后邊跟的“name”部分是指定頁面的指定部分的標(biāo)識,用“#”分割url和指定部分標(biāo)識。TARGET參數(shù)定義了鏈接打開的位置。 |
A、相對地址:描述了從一個頁面到另一個頁面的路徑,而不是Internet的完整地址。
B、絕對地址:描述的不是兩個文件相對的路徑關(guān)系,它描述的是兩個文件相對于根的關(guān)系
C、物理地址:是使用文件存放在硬盤上的位置的路徑來描述文件的方式。
15、加入圖片
大多數(shù)的瀏覽器都支持兩種圖形格式:GIF(圖形互換格式)和JPEG(聯(lián)合圖像專家組)。
表20:
|
語法: |
<IMG SRC=“圖片來源” ALIGN=“對齊方式” BORDER=“邊框線寬度” ALT=“鼠標(biāo)放在圖片上時,框內(nèi)顯示的內(nèi)容”> |
|
說明: |
SRC表示圖片的來源(存放路徑); ALIGN屬性標(biāo)識了圖片在頁面中的對齊方式; BORDER屬性標(biāo)識了圖片的邊框線的寬度; ALT屬性是在圖片顯示后,對圖片的一段描述。 |
16、水平線
表21:
|
語法: |
<HR ALIGN=“對齊方式” WIDTH=“寬度” SIZE=“粗細(xì)” NOSHADE> |
|
說明: |
ALIGN屬性用來設(shè)置水平標(biāo)尺線的對齊方式,WIDTH屬性用來設(shè)置水平標(biāo)尺線在水平方向上的寬度,SIZE屬性設(shè)置水平標(biāo)尺線的粗細(xì),單位是像素數(shù),NOSHADE屬性是一個名稱記號,用于取消水平標(biāo)尺線的陰影。 |
17、表格
表格中由行和列分隔成的格子稱為表元(cell),是矩形區(qū)域,它可以包含文本,圖像和HTML標(biāo)記。用以分隔表元的行列線則稱為表格的邊框線(border),表元的內(nèi)容分成兩類,一類是表頭,一類是表數(shù)據(jù)。
l 表格的定義
表22:
|
語法: |
<TABLE BORDER=“邊框的粗細(xì)” BORDERCOLOR=“邊框線的顏色” BGCOLOR=“背景顏色” BACKGROUND=“背景圖片” ALIGN=“位置” WIDTH=“寬度” HEIGHT=“高度” CELLSPACING=“表元間距” CELLPADDING=“表元內(nèi)容與邊框的距離”> </TABLE> |
|
說明: |
TABLE標(biāo)記定義了一個表格的開始,表格的所有內(nèi)容,都在這一對雙標(biāo)記中間。BORDER屬性設(shè)置表格的邊框的粗細(xì);BORDERCOLOR屬性表示邊框線的顏色;BGCOLOR屬性控制表格的背景顏色;BACKGROUND屬性定義了表格的背景圖片;ALIGN屬性控制表格在頁面中的位置;WIDTH和HEIGHT屬性表示表格的寬度和高度;CELLSPACING表示的是表元和表元之間的距離;CELLPADDING表示表元內(nèi)部內(nèi)容和這個表元邊框之間的距離。 |
l 標(biāo)題的定義
表23:
|
語法: |
<CAPTION ALIGN=“水平對齊方式” VALIGN=“垂直對齊方式”></CAPTION> |
|
說明: |
CAPTION標(biāo)記定義了一個表格的標(biāo)題,ALIGN屬性設(shè)置表格標(biāo)題的水平對齊,取值有l(wèi)eft、right、center;VALIGN屬性設(shè)置表格標(biāo)題的垂直對齊,取值有top、bottom,分別是將標(biāo)題設(shè)置在表格的上部和下部。 |
l 表行定義
表24:
|
語法: |
<TR ALIGN=“水平對齊方式” WIDTH=“寬度” HEIGHT=“高度”> </TR> |
|
說明: |
TR標(biāo)記定義了一個表行,這行表的內(nèi)容都寫在這對雙標(biāo)記中間。 |
l 表頭的定義
表25:
|
語法: |
<TH WIDTH=“寬度” HEIGHT=“高度” BACKGROUND=“背景圖片” BGCOLOR=“背景顏色” ALIGN=“水平對齊方式” VALIGN=“垂直對齊方式” COLSPAN=“行合并格數(shù)” ROWSPAN=“列合并格數(shù)”> </TH> |
|
說明: |
TH標(biāo)記定義了一個表頭,表頭的內(nèi)容都寫在這對雙標(biāo)記中間。表頭可以看作是行或列的標(biāo)題。標(biāo)記中的WIDTH和HEIGHT屬性分別設(shè)置了表頭的寬度和高度;BACKGROUND和BGCOLOR屬性定義了表頭的背景圖形和背景顏色;ALIGN、VALIGN屬性表示表頭內(nèi)容在本表頭中的水平和垂直對齊方式;COLSPAN和ROWSPAN兩個屬性定義了和表頭相鄰的表頭(表元)的合并方法,在需合并的表頭的最左上角的表頭的<TH>標(biāo)記中定義。 |
l 表單元的定義
表26:
|
語法: |
<TD WIDTH=“寬度” HEIGHT=“高度” BACKGROUND=“背景圖片” BGCOLOR=“背景顏色” ALIGN=“水平對齊方式” VALIGN=“垂直對方式” COLSPAN=“行合并格數(shù)” ROWSPAN=“列合并格數(shù)”> </TD> |
|
說明: |
TD標(biāo)記定義了一個表數(shù)據(jù),表數(shù)據(jù)的內(nèi)容都寫在這對雙標(biāo)記中間。標(biāo)記中的WIDTH和HEIGHT屬性分別設(shè)置了表數(shù)據(jù)的寬度和高度,BACKGROUND和BGCOLOR屬性定義了表數(shù)據(jù)的背景圖形和背景顏色,ALIGN、VALIGN屬性表示表數(shù)據(jù)內(nèi)容在本表數(shù)據(jù)中的水平對齊方式和垂直對齊方式。COLSPAN和ROWSPAN兩個屬性定義了和表數(shù)據(jù)相鄰的表數(shù)據(jù)(表元)的合并方法。 |
l 列表的基本結(jié)構(gòu)
表27:
|
列表的基本結(jié)構(gòu)
|
<TABLE> <TR> <TH> </TH>或者<TD></TD> </TR> ……….. <TR> <TH> </TH>或者<TD> </TD> </TR> </TABLE> |
18、表單
l 表單定義
表28:
|
語法: |
<FORM NAME=“命名” ACTION=“提交路徑” METHOD=“傳遞方式”> </FORM> |
|
說明: |
FORM標(biāo)記定義一個頁面中的一個表單。NAME用于命名; ACTION屬性用來指定當(dāng)表單被提交時要接受的文件的路徑; METHOD屬性用于指定提交表單的方法,其取值為GET或POST,默認(rèn)為GET,GET為地址傳值,將數(shù)據(jù)放在URL后面?zhèn)鬟f,長度有限,但會自動保存數(shù)據(jù),POST傳輸數(shù)據(jù)安全,但不能保存數(shù)據(jù)。 |
l 表單域定義
表29:
|
語法: |
<INPUT TYPE=“類型” NAME=“命名” VALUE=“取值” SIZE=“表單框的長度”> |
|
說明: |
INPUT是表單中功能最為豐富的一個標(biāo)記,使用INPUT標(biāo)記可以創(chuàng)建按鈕、文本輸入框、選擇框等各種類型的輸入字段。 NAME屬性標(biāo)識表單域的名稱;TYPE屬性標(biāo)識表單域的類型,它可以是文本TEXT、口令PASSWORD、復(fù)選框CHECKBOX、單選框RADIO、隱藏表單HIDDEN、提交表單SUBMIT和復(fù)位鍵RESET; VALUE屬性定義表單域的值,其他屬性根據(jù)TYPE的不同而有所變化。 |
注:TYPE的最終目的是將寫好的的數(shù)據(jù)傳遞出去;
文本TEXT為一行,不可換行;
要想使單選和復(fù)選可以選擇其中的部分選項,再做相應(yīng)的選項標(biāo)記時,同一選擇中,各選項的標(biāo)記相對應(yīng)的那么也必須完全相同;
VALUE的值最好與INPUT雙標(biāo)記中間的內(nèi)容相同
表30:
|
語法: |
<SELECT NAME=“命名” SIZE=“選項個數(shù)” MULTIPLE> </SELECT> |
|
說明: |
SELECT標(biāo)記用來在表單內(nèi)生成一個選擇列表,用戶從這個列表中可以選擇一個或多個選項。NAME屬性是必須的,它用作SELECT單元選擇列表的名稱,SIZE屬性用來設(shè)置列表窗口中可見的選項的個數(shù),MULTIPLE是一個名稱記號,設(shè)置了這一屬性,可以在選項列表中選擇多個選擇項,默認(rèn)為單選。 |
表31:
|
語法: |
<OPTION VALUE=“命名” SELECTED></OPTION> |
|
說明: |
OPTION標(biāo)記定義列表中的內(nèi)容,且只能用在SELECT單元內(nèi)部,其內(nèi)容只 能是普通文本。<OPTION>單元有兩個可選的屬性:VALUE和SELECTED。VALUE屬性是選項的值,其取值是唯一的,其默認(rèn)取值為OPTION雙標(biāo)記間的描述內(nèi)容;SELECTED屬性表示這一項為缺省的(即默認(rèn)選項)。 |
注:要實現(xiàn)下拉菜單至少要有SELECT和POTION這兩個雙標(biāo)記;
下拉單的寬度有VALUE的最長取值決定
表32:
|
語法: |
<TEXTAREA NAME=“命名” COLS=“高度” ROWS=“寬度”></TEXTAREA> |
|
說明: |
TEXTAREA標(biāo)記用來在表單中建立一個文本輸入窗口,用戶可以在其中輸入多行文本。NAME屬性用來設(shè)置文本輸入表單域的名稱,ROWS屬性和COLS屬性用來設(shè)置文本輸入窗口的高度和寬度,單位是字符。 |
19、幀集和幀
有時我們需要在瀏覽窗口中同時顯示多個頁面,即將整個瀏覽的頁面劃分為多個獨立的窗口,每個窗口就稱為一幀,這些窗口的集合就成為幀集。
表33:
|
語法: |
<FRAMESET COLS=“” ROWS=“” FRAMEBORDER=“” BORDERCOLOR=“” FRAMESPACING=“”></FRAMESET> |
|
說明: |
FRAMESET標(biāo)記定義一個幀集。屬性COLS設(shè)置縱向排列多個幀窗口,屬性ROWS設(shè)置橫向排列多個幀窗口,F(xiàn)RAMEBORDER代表是否有邊框,BORDERCOLOR設(shè)置邊框顏色,F(xiàn)RAMESPACING屬性取值為數(shù)字,表示邊框的寬度。 |
表34:
|
語法: |
<FRAME SRC=“” NAME=“” MARGINWIDTH=“” MARGINHEIGHT=“” SCROLLING=“”> 單標(biāo)記 |
|
說明: |
FRAME標(biāo)記定義幀,用來說明顯示在每一幀中的HTML文檔。SRC屬性用來定義幀的來源,NAME屬性表示這個幀的名稱,MARGINWIDTH和MARGINHEIGHT屬性用來控制當(dāng)前幀左右邊界處和上下邊界處的空白,其取值單位是象素,SCROLLING標(biāo)記可設(shè)置窗口的滾動條。 |
表35:
|
窗口顯示 |
橫排多個窗口 |
縱排多個窗口 |
縱橫排多個窗口 |
內(nèi)含窗口 |
|
實例 |
<frameset rows=#>橫排多個窗口 <frameset rows=30%,20%,*> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> |
<frameset cols=#>縱向排列多個窗口 <frameset cols=30%,20%,*> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> |
COLS & ROWS:縱橫排列多個窗口 <frameset cols=137,*> <frame src="A.htm"> <frameset rows=82,*> <frame src="B.htm"> <frame src="C.htm"> </frameset> </frameset> |
<iframe src=# name=##>... </iframe> #=初始頁面的 URL ##=框架名稱(Frame Name) |
|
排列方式 |
A B C |
A B C |
B A C |
無 |
總結(jié)
- 上一篇: 中药桔梗的功效与作用 桔梗的药用价值_中
- 下一篇: 高速充电桩2.98元1度电 车主:现在充