當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

HTML标记

發(fā)布時間：2024/8/26 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了 HTML标记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

注釋：紅色字體為標(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>

<frameset cols=#>縱向排列多個窗口

</frameset>

COLS & ROWS：縱橫排列多個窗口

</frameset>

<iframe src=# name=##>... </iframe>

#=初始頁面的 URL

##=框架名稱(Frame Name)

排列方式

A B C

無

總結(jié)

以上是生活随笔為你收集整理的HTML标记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

标记
html

上一篇：中药桔梗的功效与作用桔梗的药用价值_中
下一篇：高速充电桩2.98元1度电车主：现在充