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