全部html語法說明_第1頁
全部html語法說明_第2頁
全部html語法說明_第3頁
全部html語法說明_第4頁
全部html語法說明_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第3章HTML簡介

1

3.1HTML概述3.1.1HTML的發(fā)展歷程1．HTML的誕生2．HTML的版本發(fā)展3．HTML的未來4．學(xué)習(xí)HTML的意義

23.1.2一個(gè)簡單的HTML實(shí)例

【例3-1】用HTML制作一個(gè)簡單的網(wǎng)頁。3.1.3HTML的基本概念要了解HTML語言，先來熟悉一下HTML中的一些基本概念。1．標(biāo)記在HTML中用于描述功能的符號稱為“標(biāo)記”，它是用來控制文字、圖像等顯示方式的符號。標(biāo)記在使用時(shí)必須用“<>”括起來，標(biāo)記有單標(biāo)記和雙標(biāo)記之分。1）單標(biāo)記所謂“單標(biāo)記”是指只需單獨(dú)使用就能完整地表達(dá)意思的標(biāo)記。這類標(biāo)記的語法是：<標(biāo)記名稱>。2）雙標(biāo)記所謂“雙標(biāo)記”是指由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對使用的標(biāo)記。其中始標(biāo)記告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)記告訴Web瀏覽器到這里結(jié)束該功能。始標(biāo)記前加一個(gè)斜杠（/）即成為尾標(biāo)記。雙標(biāo)記的語法是：<標(biāo)記>內(nèi)容</標(biāo)記>，其中“內(nèi)容”是指要被這對標(biāo)記施加作用的部分。

32．標(biāo)記屬性許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性，其語法是：<標(biāo)記名稱屬性1屬性2屬性3…>，各屬性之間無先后次序，屬性也可省略（即取默認(rèn)值）。例如單標(biāo)記<HR>表示在文檔當(dāng)前位置畫一條水平線，一般是從窗口中當(dāng)前行的最左端一直畫到最右端，它可以帶這么一些屬性：<HRsize="3"align="LEFT"width="75%">。其中，size屬性定義線的粗細(xì)，屬性值取整數(shù)，缺省值為1；align屬性表示對齊方式，可取LEFT（左對齊，默認(rèn)值），CENTER（居中），RIGHT（右對齊）；width屬性定義線的長度，可取相對值（由一對""號括起來的百分?jǐn)?shù)，表示相對于整個(gè)窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點(diǎn)的個(gè)數(shù)，如width="300"），默認(rèn)值是100%。43．注釋語句和其他計(jì)算機(jī)語言一樣，HTML語言也提供了注釋語句。注釋語句的格式為：<！--注釋文-->，“<！--”表示注釋開始，“-->”表示注釋結(jié)束，中間的所有內(nèi)容表示注釋文。注釋語句可以放在任何地方，注釋內(nèi)容不在瀏覽器中顯示出來，僅供設(shè)計(jì)人員閱讀方便。53.1.4HTML的基本結(jié)構(gòu)HTML網(wǎng)頁文件主要由文件頭和文件體兩部分內(nèi)容構(gòu)成。其中，文件頭是對文件進(jìn)行一些必要的定義，文件體是HTML網(wǎng)頁的主要部分，它包括文件所有的實(shí)際內(nèi)容。下面是HTML網(wǎng)頁的基本結(jié)構(gòu)。<HTML>HTML文件開始<HEAD>文件頭開始文件頭</HEAD>文件頭結(jié)束<BODY>文件體開始文件體</BODY>文體結(jié)束</HTML>HTML文件結(jié)束6在HTML網(wǎng)頁文件的基本結(jié)構(gòu)中主要包含以下幾種標(biāo)記。1．HTML文件標(biāo)記<HTML>和</HTML>標(biāo)記放在網(wǎng)頁文檔的最外層，表示這對標(biāo)記間的內(nèi)容是HTML文檔。<HTML>放在文件開頭，</HTML>放在文件結(jié)尾，中間嵌套其他標(biāo)記。2．HEAD文件頭部標(biāo)記文件頭用<HEAD>和</HEAD>標(biāo)記，該標(biāo)記出現(xiàn)在文件的起始部分，標(biāo)記內(nèi)的內(nèi)容不在瀏覽器中顯示，主要用來說明文件的有關(guān)信息，如文件標(biāo)題、作者、編寫時(shí)間、搜索引擎可用的關(guān)鍵詞等。在HEAD標(biāo)記內(nèi)最常用的標(biāo)記是網(wǎng)頁主題標(biāo)記——TITLE標(biāo)記，它的格式為：<TITLE>網(wǎng)頁標(biāo)題</TITLE>。網(wǎng)頁標(biāo)題是提示網(wǎng)頁內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標(biāo)題欄中，一個(gè)網(wǎng)頁只能有一個(gè)標(biāo)題，并且只能出現(xiàn)在文件的頭部。3．BODY文件主體標(biāo)記文件主體用<BODY>和</BODY>標(biāo)記，它是HTML文檔的主體部分，網(wǎng)頁正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動畫等都包含在這對標(biāo)記對之間。它的格式為：<BODYbackground=“image-URL”bgcolor=“color”text=“color”link=“color”alink=“color”vlink=“color”leftmargin=“value”topmargin=“value”>…</BODY>。7

3.1.5HTML的語法規(guī)則HTML語言應(yīng)遵循以下的語法規(guī)則。（1）HTML文件以純文本形式存放，擴(kuò)展名為“*.HTM”或“*.HTML”。（2）HTML標(biāo)記不區(qū)分大小寫。（3）多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。（4）HTML文件一行可以寫多個(gè)標(biāo)記，一個(gè)標(biāo)記也可以分多行書寫，不用任何續(xù)行符號。8

（5）HTML源文件中的換行、回車符和空格在顯示效果中是無效的。顯示內(nèi)容如果要換行必須用<BR>標(biāo)記，換段用<P>標(biāo)記，<P>表示段落開始，</P>表示段落結(jié)束。頁面中的空格是通過代碼控制的，一個(gè)半角空格使用一個(gè) 表示，多個(gè)空格只需使用多次即可。與空格的表示方法有些相似，一些特殊符號是憑借特殊的符號碼來表現(xiàn)。通常由“&”前綴，加上字符對應(yīng)的名稱，再加上后綴“；”而組成。如書中表3-1所示列出了一些常見的HTML特殊符號的表示方法。（6）網(wǎng)頁中所有的顯示內(nèi)容都應(yīng)該受限于一個(gè)或多個(gè)標(biāo)記，不應(yīng)有游離于標(biāo)記之外的文字或圖像等，以免產(chǎn)生錯(cuò)誤。93.2HTML的文本格式標(biāo)記在“<BODY>…</BODY>”標(biāo)記對之間直接輸入文字就可以顯示在瀏覽器窗口中，但是要制作出真正實(shí)用的網(wǎng)頁，還必須對輸入的文字進(jìn)行適當(dāng)?shù)男揎棥?.2.1標(biāo)題格式標(biāo)記功能：用于定義文章內(nèi)章節(jié)標(biāo)題的顯示格式。格式：<Hnalign=“對齊方式”>標(biāo)題內(nèi)容</Hn>。屬性：n表示標(biāo)題字號的級別，可以是1～6之間的任意整數(shù)，數(shù)字越小，字號越大。align表示水平對齊方式，取值可以為LEFT（左對齊）、RIGHT（右對齊）、CENTER（居中對齊）、BOTTOM（位于底端）和TOP（位于頂部）。說明：用該標(biāo)記實(shí)現(xiàn)文章標(biāo)題的效果有限，通常用FONT標(biāo)記實(shí)現(xiàn)文章標(biāo)題豐富多彩的效果?！纠?-2】標(biāo)題格式標(biāo)記的應(yīng)用。103.2.2文字格式標(biāo)記功能：設(shè)置網(wǎng)頁中普通文字的顯示效果。格式：<FONTface=“字體”size=“字號”color=“顏色”>文字</FONT>。屬性：face表示文字的字體，如“黑體”表示黑體，“宋體”表示宋體。size表示字號，用來設(shè)定文字的大小，其值為1~7的整數(shù)，值越大，字越大；若數(shù)字前面加上“+”或“—”號，則表示相對基準(zhǔn)字號的大小，如基準(zhǔn)字號為3號，則+3表示6號字?；鶞?zhǔn)字號用如下標(biāo)記定義：<BASEFONTsize=“基準(zhǔn)字號”>，其中“基準(zhǔn)字號”也是1~7之間的整數(shù)。color用來設(shè)定文字的顏色，顏色的取值是十六進(jìn)制RGB顏色碼或HTML語言給定的顏色常量名。

【例3-3】文字格式標(biāo)記的應(yīng)用。11

3.2.3字型設(shè)置標(biāo)記功能：設(shè)置文字的風(fēng)格，如黑體、斜體、帶下劃線等，這是一組標(biāo)記，它們可以單獨(dú)使用，也可以混合使用產(chǎn)生復(fù)合修飾效果。常用的標(biāo)記有以下一些：<B>…</B>：文字以粗體顯示。<I>…</I>：文字顯示為斜體。<U>…</U>：顯示下劃線。<STRIKE>…</STRIKE>：刪除線。<BIG>…</BIG>：使文字大小相對于前面的文字增大一級。<SMALL>…</SMALL>：使文字大小相對于前面的文字減小一級。<SUP>…</SUP>：使文字成為前一個(gè)字符的上標(biāo)。<SUB>…</SUB>：使文字成為前一個(gè)字符的下標(biāo)。<BLINK>…</BLINK>：使文字顯示為閃爍效果。<TT>…</TT>：以等寬體顯示西文字符。<CITE>…</CITE>：輸出引用方式的字體，通常是斜體。<EM>…</EM>：強(qiáng)調(diào)文字，通常用斜體加黑體。<STRONG>…</STRONG>：特別強(qiáng)調(diào)的文字，通常也是斜體加黑體。注：有些標(biāo)記的效果必須在動態(tài)環(huán)境下才能顯示，例如<BLINK>標(biāo)記。

【例3-4】字型設(shè)置標(biāo)記的應(yīng)用。12

3.2.4段落標(biāo)記功能：設(shè)置文章段落的開始和結(jié)束。瀏覽器在解釋HTML文檔時(shí)，會自動忽略文檔中的回車、空格以及其他一些符號，所以在文檔中輸入回車，并不意味著在瀏覽器內(nèi)將看到一個(gè)不同的段落，當(dāng)需要在網(wǎng)頁中插入新的段落時(shí)，可以使用段落標(biāo)記，它可以將標(biāo)記后面的內(nèi)容另起一段。格式：<Palign=“水平對齊方式”>…</P>。屬性：align是水平對齊方式，取值可以為LEFT（左對齊）、RIGHT（右對齊）和CENTER（居中對齊）。13

3.2.5強(qiáng)制換行標(biāo)記功能：另起一行顯示文字。格式：<BR>說明：這是一個(gè)單標(biāo)記，與段落標(biāo)記在顯示效果上都是另起一行書寫，但它們的不同之處是：段落標(biāo)記的行距要寬。在<BR>使用上還有一定的技巧，如果把<BR>加在<P></P>標(biāo)記對的外邊，將創(chuàng)建一個(gè)大的回車換行，即<BR>前邊和后邊文本的行與行之間的距離比較大，若放在<P></P>的里邊則<BR>前邊和后邊文本的行與行之間的距離將比較小。

【例3-5】段落標(biāo)記和強(qiáng)制換行標(biāo)記的應(yīng)用。143.2.6預(yù)排格式標(biāo)記功能：保留文字在純文字編輯器中的格式，原樣顯示，不受前面的文字格式和段落格式的影響。格式：<Pre>預(yù)排格式的文本</Pre>。說明：若用其他文本編輯器編好了一段文本，如果把它放進(jìn)網(wǎng)頁文件，常常需要加許多標(biāo)記才能達(dá)到原來的顯示效果，否則瀏覽器會自動忽略文檔中的回車、空格以及其他一些符號。如果在文本開頭加上<Pre>，在末尾加上</Pre>，那么中間就不用加其他標(biāo)記了，這時(shí)中間的回車換行符等就起作用了，可以原樣顯示。

【例3-6】預(yù)排格式標(biāo)記的應(yīng)用。15

3.2.7插入水平線標(biāo)記功能：在頁面上畫橫線，可用于頁面上內(nèi)容的分割。格式：<HRwidth=“value1”size=“value2”align=“value3”color=“color1”noshade>。屬性：width用來設(shè)置水平線的寬度長度，value1可以是點(diǎn)數(shù)，如50、100、200等，窗口改變時(shí)，橫線寬度不變；也可以是相對窗口的百分比，如50%、100%,默認(rèn)是100%。size用來設(shè)置水平線的厚度，value2的值可以是絕對點(diǎn)數(shù)，也可以是（相對長度的）百分比，默認(rèn)高度為1。align用來設(shè)置水平線的對齊方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默認(rèn)是居中。color用來設(shè)置水平線的顏色，顏色的取值是十六進(jìn)制RGB顏色碼或HTML語言給定的顏色常量名。noshade屬性不用賦值，而是直接加入標(biāo)記即可使用，它表示加入一條沒有陰影的水平線(不加入此屬性水平線將有陰影)。16

3.2.8文本縮排標(biāo)記功能：使用縮排標(biāo)記，可以實(shí)現(xiàn)頁面文字的段落縮排，實(shí)現(xiàn)多次縮排可以使用多次縮排標(biāo)記。格式：<Blockquote>文本</Blockquote>?！纠?-7】文本縮排標(biāo)記的應(yīng)用。173.2.9列表標(biāo)記分段排列出一組級別相同的項(xiàng)目稱為列表。如果在每段前面加上一個(gè)相同的符號，則稱為無序列表；如果每段前面加上一個(gè)序號，則稱為有序列表。1．無序列表功能：設(shè)置無序列表。格式：<ULtype=“加重符號類型”><LItype=“加重符號類型”>列表項(xiàng)目1<LItype=“加重符號類型”>列表項(xiàng)目2……</UL>。屬性：在無序列表的開始和結(jié)束處，分別是<UL>和</UL>標(biāo)記，每一項(xiàng)列表?xiàng)l目之前必須加上<LI>標(biāo)記。type屬性表示在每個(gè)項(xiàng)目前顯示加重符號的類型，共有三種選擇：type=“disc”時(shí)，列表符號為“●”（實(shí)信圓），type=“circle”時(shí)，列表符號為“○”（空心圓），type=“square”時(shí)，列表符號為“■”（實(shí)心方塊）。<UL>和<LI>標(biāo)記都可以定義type參數(shù)，使得在一個(gè)列表中，不同的列表項(xiàng)目可以用不同的列表符號，但一般情況下不要這樣設(shè)置。

【例3-8】無序列表標(biāo)記的應(yīng)用。182．有序列表功能：設(shè)置有序列表。格式：<OLtype=“序號類型”start=“起始號碼”><LItype=“序號類型”>列表項(xiàng)目1<LItype=“序號類型”>列表項(xiàng)目2……</OL>。屬性：在有序列表的開始和結(jié)束處，分別是<OL>和</OL>標(biāo)記，每一項(xiàng)列表?xiàng)l目之前必須加上<LI>標(biāo)記。type屬性表示在每個(gè)項(xiàng)目前顯示的序號類型，其值可以為1（阿拉伯?dāng)?shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）。start用于設(shè)置編號的開始值，默認(rèn)值為1，<LI>標(biāo)記設(shè)定該條目的編號，其后的條目將以此作起始數(shù)目逐漸遞增。說明：無序列表和有序列表可以嵌套，產(chǎn)生縮進(jìn)的、有層次的列表項(xiàng)目?！纠?-9】有序列表標(biāo)記的應(yīng)用?！纠?-10】無序列表和有序列表標(biāo)記的應(yīng)用對比。193．定義列表功能：用于需要對列表?xiàng)l目進(jìn)行簡短說明的場合。格式：<DL><DT>列表?xiàng)l目1<DD>條目1的說明<DT>列表?xiàng)l目2<DD>條目2的說明……</DL>。屬性：在定義列表的開始和結(jié)束處，分別是<DL>和</DL>標(biāo)記，每一項(xiàng)列表?xiàng)l目之前必須加上<DT>標(biāo)記，用<DD>標(biāo)記定義的條目說明文字自動向右縮進(jìn)?！纠?-11】定義列表標(biāo)記的應(yīng)用。20

3.2.10文字滾動標(biāo)記功能：在頁面中制作文字滾動的效果。格式：<MARQUEEbehavior=“value”bgcolor=“color”direction=“value”height=“value”width=“value”loop=“value”scrollamount=“value”scrolldelay=“value”hspace=“value”vspace=“value”>滾動文字</MARQUEE>。屬性如下。（1）behavior：設(shè)置文字滾動方式。共有三種滾動方式供選擇：behavior=“alternate”時(shí)，文字將交替進(jìn)行滾動；behavior=“scroll”時(shí)，文字將循環(huán)往復(fù)滾動；behavior=“slide”時(shí)，文字將只進(jìn)行一次滾動。（2）bgcolor：為滾動文字添加背景顏色。（3）direction：設(shè)置文字滾動的方向，value的取值可以為up、down、left和right四種，分別表示滾動文字的方向向上、向下、向左和向右。（4）height和width：設(shè)置文字滾動的區(qū)域，取值為點(diǎn)數(shù)或相對于窗口的百分比。（5）loop：設(shè)置文字滾動的循環(huán)次數(shù)。默認(rèn)值為-1，-1表示無限次循環(huán)次數(shù)。（6）scrollamount：調(diào)整文字滾動的速度，數(shù)值越大速度越快。（7）scrolldelay：設(shè)置在每一次滾動的間隔產(chǎn)生一段時(shí)間的延遲，數(shù)值越大延遲越長。（8）hspace和vspace：設(shè)置文字滾動的水平垂直空間?！纠?-12】文字滾動標(biāo)記的應(yīng)用。

21

3.3HTML的表格標(biāo)記表格可以將文本和圖像按一定的行和列規(guī)則進(jìn)行排列，以便更好地表示長信息，有利于快速查找信息。表格內(nèi)的格子稱為單元格。表格標(biāo)記對于制作網(wǎng)頁是很重要的，現(xiàn)在很多網(wǎng)頁都使用多重表格，主要是因?yàn)楸砀癫坏梢怨潭ㄎ谋净驁D像的輸出，而且還可以任意的進(jìn)行背景和前景顏色的設(shè)置，使頁面有很多意想不到的效果，使頁面更加整齊美觀。表格標(biāo)記的構(gòu)成如下：功能：建立基本表格。格式：<TABLEsummary=“文字”bgcolor=“color1”background=“Image-URL”border=“n”bordercolor=“color2”width=“x或x%”height=“x或x%”align=“LEFT/RIGHT/CENTER”><CAPTIONalign=“TOP/BOTTOM/LEFT/RIGHT”>表題（表格說明）</CAPTION><TR><TH>表頭1</TH><TH>表頭2</TH>……….<TH>表頭n</TH></TR><TR><TD>表項(xiàng)1</TD><TD>表項(xiàng)2</TD>……….<TD>表項(xiàng)n</TD></TR><TR><TD>表項(xiàng)1</TD><TD>表項(xiàng)2</TD>……….<TD>表項(xiàng)n</TD></TR>……</TABLE>。22屬性如下。（1）<TABLE></TABLE>標(biāo)記對用來創(chuàng)建一個(gè)表格。①summary：對表格格式或內(nèi)容的簡要說明，它不在網(wǎng)頁上顯示，相當(dāng)于表格的注釋。②bgcolor：設(shè)置表格的背景顏色，取值同BODY標(biāo)記中的顏色屬性。③background：設(shè)置表格的背景圖像，取值為圖像的URL地址。④border：設(shè)置表格線的寬度（粗細(xì)），n取整數(shù)，單位為像素?cái)?shù)，n=0表示無線。⑤bordercolor：設(shè)置表格線的顏色，取值同BODY標(biāo)記中的顏色屬性。⑥width：設(shè)置表格寬度，取值為點(diǎn)數(shù)或相對于窗口的百分比。⑦h(yuǎn)eight：設(shè)置表格高度，取值為點(diǎn)數(shù)或相對于寬度的百分比。⑧align：設(shè)置表格在頁面中的相對位置，取值為LEFT、RIGHT或CENTER，分別表示居左、居右或居中。（2）<CAPTION>…</CAPTION>表示對表格標(biāo)題的說明，如“奧運(yùn)會男子足球比賽時(shí)間表”等。align表示標(biāo)題相對表格的位置，取值為LEFT、RIGHT、CENTER、TOP或BOTTOM分別表示標(biāo)題在表格上部左邊、表格上部右邊、表格上部居中、表格上面或表格底部。（3）<TR>…</TR>定義行，該標(biāo)記中的內(nèi)容顯示在一行，此標(biāo)記對只能放在<TABLE></TABLE>標(biāo)記對之間使用，而在此標(biāo)記對之間加入文本將是無用的，因?yàn)樵?lt;TR></TR>之間只能緊跟<TD></TD>標(biāo)記對才是有效的語法；<TD></TD>標(biāo)記對用來創(chuàng)建表格中一行中的每一個(gè)格子，此標(biāo)記對也只有放在<TR></TR>標(biāo)記對之間才是有效的，輸入的文本也只有放在<TD></TD>標(biāo)記對中才有效。（4）<TH>…</TH>用來設(shè)置表格頭，表頭的每一列需用一個(gè)<TH>標(biāo)記，通常是黑體居中文字。（5）<TD>…</TD>用來定義表格內(nèi)容的一列，與<TH>的區(qū)別是內(nèi)容不加黑顯示。23

說明：（1）<TABLE>中bgcolor、background、align、height、width等屬性可以放在TD標(biāo)記中，作為單元格的屬性。（2）一行的開始表示前一行的結(jié)束，一列的開始表示前一列的結(jié)束，所以<TR>、<TH>、<TD>均可以作單標(biāo)記使用。（3）<TH>標(biāo)記還可以用于每行的第一列，設(shè)置列標(biāo)題。（4）<CAPTION>、<TH>、<TD>標(biāo)記之間可以嵌套其他格式標(biāo)記，如<P>、<FONT>等。（5）單元格內(nèi)容可以是文字，也可以是圖像。（6）表格可以嵌套，通過表格嵌套可以產(chǎn)生復(fù)雜的表格。（7）<TR>還有align和valign屬性。align是水平對齊方式，取值為LEFT(左對齊)、CENTER(居中)、RIGHT(右對齊)；而valign是垂直對齊方式，取值為TOP(靠頂端對齊)、MIDDLE(居中間對齊)或BOTTOM(靠底部對齊)。<TD>還有width和nowrap屬性，width是單元格的寬度，單位用絕對像素值或總寬度的百分比；nowrap表示禁止表格單元格內(nèi)的內(nèi)容自動換行。另<TR>、<TH>、<TD>中還可以使用rowspan和colspan屬性實(shí)現(xiàn)單元格的合并，rowspan設(shè)置一個(gè)表格單元格跨占的行數(shù)(缺省值為1)，rowspan=n表示將n行作為一行；colspan設(shè)置一個(gè)表格單元格跨占的列數(shù)(缺省值為1)，colspan=n表示將n列作為一列。

【例3-13】表格標(biāo)記單元格合并屬性的應(yīng)用?！纠?-14】表格標(biāo)記的簡單應(yīng)用?！纠?-15】表格標(biāo)記的復(fù)雜應(yīng)用。243.4HTML的圖像與多媒體標(biāo)記在網(wǎng)頁中加入圖像和多媒體元素可以使網(wǎng)頁更加生動活潑。3.4.1圖像標(biāo)記再簡單樸素的網(wǎng)頁如果只有文字而沒有圖像將失去許多活力，圖像在網(wǎng)頁制作中是非常重要的元素，HTML語言提供了<IMG>標(biāo)記來處理圖像的輸出，當(dāng)然用<IMG>標(biāo)記還可以播放視頻，下面也順便介紹一下。1．<IMG>的圖像標(biāo)記功能功能：在當(dāng)前位置插入圖像。格式：<IMGsrc=“image-URL”alt=“簡單說明”longdesc=“詳細(xì)說明”width=“x”height=“y”border=“邊框長度”hspace=“x”vspace=“y”align=“對齊方式”>。25屬性如下。（1）src：設(shè)置要加入的圖像文件的URL地址，通常圖像格式為gif或jpg。（2）alt：設(shè)置圖像文件的替代說明，當(dāng)圖像無法顯示時(shí)，顯示“簡單說明”。（3）longdesc：設(shè)置圖像的詳細(xì)說明。（4）width：設(shè)置圖像的寬度，可以為點(diǎn)數(shù)或相對窗口寬度的百分比。（5）height：設(shè)置圖像的高度，可以為點(diǎn)數(shù)或相對窗口高度的百分比。（6）border：設(shè)置圖像外圍邊框?qū)挾?，其值為正整?shù)。（7）hspace：設(shè)置水平方向空白（圖像左右留多少空白）。（8）vspace：設(shè)置垂直方向空白（圖像上下留多少空白）。（9）align：設(shè)置在頁面中的位置，可以為LEFT，RIGHT或CENTER。26說明：圖像的寬度和高度指圖像顯示時(shí)的大小，與圖像的真實(shí)大小無關(guān)。<IMG>標(biāo)記并不是真正地把圖像加入到HTML文檔中，而是給標(biāo)記對的src屬性賦值，這個(gè)值是圖像文件的文件名，當(dāng)然包括路徑，這個(gè)路徑可以是相對路徑，也可以是網(wǎng)址。實(shí)際上就是通過路徑將圖像文件嵌入到HTML文檔中。設(shè)置圖像文件地址時(shí)用到的路徑一般建議使用相對路徑，所謂相對路徑是指所要鏈接或嵌入到當(dāng)前HTML文檔的文件與當(dāng)前文件的相對位置所形成的路徑。假如HTML文件與圖像文件(文件名假設(shè)是logo.gif)在同一個(gè)目錄下，則可以將代碼寫成<IMGsrc=“l(fā)ogo.gif”>；假如圖像文件放在當(dāng)前的HTML文檔所在目錄的一個(gè)子目錄(子目錄名假設(shè)是images)下，則代碼應(yīng)為<IMGsrc=“images/logo.gif”>；假如圖像文件放在當(dāng)前的HTML文檔所在目錄的上層目錄(目錄名假設(shè)是home)下，則相對路徑就必須是準(zhǔn)網(wǎng)址了，即用“../”表示網(wǎng)站，然后在后邊緊跟文件在網(wǎng)站中的路徑，假設(shè)home是網(wǎng)站下的一個(gè)目錄，則代碼應(yīng)為<IMGsrc=“../home/logo.gif”>，若home是網(wǎng)站下的目錄king下的一個(gè)子目錄，則代碼應(yīng)該變?yōu)?lt;IMGsrc=“../king/home/logo.gif”>了?！纠?-16】圖像標(biāo)記的應(yīng)用。272．<IMG>的視頻標(biāo)記功能利用<IMG>還可以變相的插入視頻，下面簡單介紹一下該功能。功能：在網(wǎng)頁中加入視頻信息，格式一般為*.AVI。格式：<IMGsrc=“image-URL”dynsrc=“avi-URL”loop=“n”start=“開始時(shí)間”controlsloopdelay=“時(shí)間間隔”>。屬性如下。（1）scr：設(shè)置一幅靜態(tài)圖像的URL地址，在未載入.AVI文件時(shí)，先在.AVI的播放區(qū)域顯示該圖像。（2）dynsrc：設(shè)置視頻文件存放的路徑和文件名。（3）loop：設(shè)置視頻文件播放的次數(shù)，如果其值為INFINITE，則表示反復(fù)播放直到瀏覽者離開該網(wǎng)頁。（4）start：設(shè)置何時(shí)開始播放視頻文件，它有兩個(gè)屬性值fileopen和mouseover。fileopen是指在鏈接到含本標(biāo)記的頁面時(shí)開始播放，mouseover是指將鼠標(biāo)移動到.AVI播放區(qū)時(shí)開始播放，默認(rèn)值為fileopen。另外，當(dāng)鼠標(biāo)在AVI播放區(qū)單擊時(shí)，也可使瀏覽器開始播放。（5）controls：在視頻窗口下附加Windows的AVI文件播放控制條。（6）loopdelay：設(shè)置兩次播放的間隔時(shí)間，單位是毫秒。此外，還有IMG的常見屬性，如width、height、align等，也可以使用。28

3.4.2背景音樂標(biāo)記功能：在網(wǎng)頁中加入聲音，聲音文件格式可以為*.wav或*.mid。格式：<BGSOUNDsrc=“聲音文件的URL地址”loop=“value”>。屬性：src指明聲音文件的URL地址。loop控制播放次數(shù)，取-1或INFINITE時(shí)，聲音將一直播放到瀏覽者離開該網(wǎng)頁為止。293.4.3多媒體標(biāo)記功能：在頁面中放置如SWF動畫（即Flash動畫）、MP3音樂、電影等多種多媒體內(nèi)容。格式：<EMBEDsrc=“file_URL”height=“value”width=“value”hidden=“hidden_value”autostart=“auto_value”loop=“l(fā)oop_value”></EMBED>屬性如下。（1）src：指明多媒體文件所在的路徑，可以插入的常見的多媒體文件包括SWF動畫、MP3音樂、MPEG格式的視頻和AVI格式的視頻。（2）height和width：設(shè)置多媒體播放的區(qū)域，取值為點(diǎn)數(shù)或相對于窗口的百分比。（3）hidden：用于控制播放面板的顯示和隱藏。當(dāng)hidden=“True”時(shí)，隱藏面板；當(dāng)hidden=“False”時(shí)，顯示面板。（4）autostart：用于控制多媒體內(nèi)容是否自動播放。當(dāng)auto=“True”時(shí)，自動播放；當(dāng)auto=“False”時(shí)，不自動播放。（5）loop：用于控制多媒體內(nèi)容是否循環(huán)播放。當(dāng)loop=“True”時(shí)，無限次循環(huán)次數(shù)；當(dāng)loop=“False”時(shí)，僅播放一次。30

3.5HTML的超鏈接標(biāo)記超鏈接是網(wǎng)頁頁面中最重要的元素之一，是一個(gè)網(wǎng)站的靈魂。一個(gè)網(wǎng)站是由多個(gè)頁面組成的，頁面之間依靠超鏈接確定相互的導(dǎo)航關(guān)系，超鏈接使得網(wǎng)頁的瀏覽非常方便。功能：建立超鏈接。格式：<Ahref=“file-URL”target=“value”>顯示的文本或圖像</A>。屬性如下。（1）href：設(shè)置要鏈接到的目標(biāo)的URL地址。（2）target：指定打開鏈接的目標(biāo)窗口。當(dāng)target=“＿self”時(shí)，表示在原窗口顯示鏈接頁面；當(dāng)target=“＿blank”時(shí)，表示在新開窗口顯示鏈接頁面；target=“＿parent”時(shí)，表示在上一級窗口中打開，一般使用分幀的框架會經(jīng)常使用；當(dāng)target=“＿top”時(shí)，表示在瀏覽器的整個(gè)窗口中打開，忽略任何框架。默認(rèn)時(shí)指在原窗口中打開鏈接?！纠?-17】超鏈接標(biāo)記的應(yīng)用。313.6HTML的表單標(biāo)記表單是實(shí)現(xiàn)動態(tài)網(wǎng)頁的一種主要的外在形式，是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。表單的主要功能是收集信息，具體說是收集瀏覽者的信息。例如在網(wǎng)上要申請一個(gè)電子信箱，就必須按要求填寫完成網(wǎng)站提供的表單頁面，其主要內(nèi)容是姓名、年齡、聯(lián)系方式等個(gè)人信息。表單信息處理的過程為：當(dāng)單擊表單中的提交按紐時(shí)，輸入在表單中的信息就會從客戶端的瀏覽器上傳到服務(wù)器中，然后由服務(wù)器中的有關(guān)表單處理程序（ASP、CGI等程序）進(jìn)行處理，處理后或者將用戶提交的信息儲存在服務(wù)器端的數(shù)據(jù)庫中，或者將有關(guān)的信息返回到客戶端瀏覽器中，這樣網(wǎng)頁就具有了交互性。這里只介紹如何使用HTML的表單標(biāo)記來設(shè)計(jì)表單。32

1．表單標(biāo)記<FORM>表單是網(wǎng)頁上的一個(gè)特定區(qū)域，這個(gè)區(qū)域由<FORM></FORM>標(biāo)記對來定義，這一步有兩方面的作用。第一，限定表單的范圍。其他的表單對象，都要插入到<FORM></FORM>表單標(biāo)記對之中才有效。單擊提交按鈕時(shí)，提交的也是表單范圍之內(nèi)的內(nèi)容。第二，攜帶表單的相關(guān)信息，例如處理表單的腳本程序的位置、提交表單的方法等。這些信息對于瀏覽者是不可見的，但對于處理表單卻有著決定性的作用。格式：<FORMname="form＿name"method="method"action="url"enctype="value"target="target＿win">…</FORM>。屬性如下。（1）name：設(shè)置表單的名稱。（2）method：定義處理程序從表單中獲得信息的方式，其取值為GET或POST。GET方式表示處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù)，但通過這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。POST方式與GET方式相反，它表示當(dāng)前的HTML文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式的大的多。（3）action：用來定義表單處理程序（ASP、CGI等程序）的位置（相對地址或絕對地址）。如：<FORMaction=“/counter.cgi”>，當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址/上的名為counter.cgi的CGI程序。（4）enctype：設(shè)置表單資料的編碼方式。（5）target：設(shè)置返回信息的顯示窗口。33

2．輸入標(biāo)記<INPUT>輸入標(biāo)記<INPUT>是表單中最常用的標(biāo)記之一。該標(biāo)記用來定義一個(gè)輸入?yún)^(qū)，可在其中輸入信息，此標(biāo)記必須放在<FORM></FORM>標(biāo)記對之間。格式：<INPUTname="field＿name"type="type＿name">。屬性如下。（1）name：設(shè)置輸入?yún)^(qū)域的名稱。服務(wù)器就是通過調(diào)用某一輸入?yún)^(qū)域名字來獲得該區(qū)域數(shù)據(jù)的。（2）type：設(shè)置輸入?yún)^(qū)域的類型。常用的type屬性值有10種，下面分別介紹。①文本域TextText用來設(shè)定單行的輸入文本區(qū)域。格式：<INPUTtype=“Text”maxlength=“value”size=“value”value=“field＿value”>其中：maxlength為文本域的最大輸入字符數(shù)；size為文本域的寬度（以字符為單位）；value設(shè)置文本域的初始默認(rèn)值。②密碼域Password在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號“*”或圓點(diǎn)顯示。格式：<INPUTtype="Password"maxlength="value"size="value">其中：maxlength為密碼域的最大輸入字符數(shù)；size為密碼域的寬度。34

③文件域File文件域可以讓用戶在域的內(nèi)部填寫自己硬盤中的文件路徑，然后通過表單上傳，這是文件域的基本功能。如在線發(fā)送E-mail時(shí)常見的附件功能。文件域的外觀是一個(gè)文本框加一個(gè)瀏覽按鈕，用戶既可以直接將要上傳給網(wǎng)站的文件的路徑寫在文本框內(nèi)，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。格式：<INPUTtype="File">④復(fù)選框Checkbox復(fù)選框能夠讓瀏覽者進(jìn)行項(xiàng)目的多項(xiàng)選擇，一般以一個(gè)方框表示。格式：<INPUTtype=“Checkbox”checkedvalue=“value”>其中：checked表示此項(xiàng)被默認(rèn)選中；value表示選中項(xiàng)目后傳送到服務(wù)器端的值。⑤單選框Radio單選框能夠讓瀏覽者進(jìn)行項(xiàng)目的單項(xiàng)選擇，以一個(gè)圓框選擇。格式：<INPUTtype=“Radio”checkedvalue=“value”>其中：checked表示此項(xiàng)被默認(rèn)選中；value表示選中項(xiàng)目后傳送到服務(wù)器端的值。⑥普通按鈕Button普通按鈕主要是用來配合程序（如JavaScript腳本）的需要來進(jìn)行表單處理的。格式：<INPUTtype=“Button”value=“Button＿text”>其中：value值代表顯示在按鈕上面的文字。⑦提交按鈕Submit單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交。格式：<INPUTtype="Submit"value="Button＿text">35⑧重置按鈕Reset單擊重置按鈕后,可以清除表單的內(nèi)容,恢復(fù)默認(rèn)的表單內(nèi)容設(shè)定。格式：<INPUTtype=“Reset”value=“Button＿text”>其中：value值代表顯示在按鈕上面的文字。⑨圖像域IMAGE圖像域是指可以用在提交按鈕上的圖片，這幅圖片具有按鈕的功能。如果網(wǎng)頁使用了較為豐富的色彩，或稍微復(fù)雜的設(shè)計(jì)，再使用表單默認(rèn)的按鈕形式往往會讓人覺得單調(diào)，甚至?xí)茐恼w的美感。這時(shí)，就可以使用圖像域來創(chuàng)建和網(wǎng)頁整體效果相統(tǒng)一的圖像提交按鈕。格式：<INPUTtype=“IMAGE”src=“Image＿URL”>其中：src設(shè)置圖片的路徑。⑩隱藏域Hidden隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到瀏覽器。格式：<INPUTtype="Hidden">【例3-18】表單輸入標(biāo)記的綜合應(yīng)用。36

3．菜單和列表標(biāo)記<SELECT>和<OPTION>假設(shè)現(xiàn)在要在表單中添加這樣一項(xiàng)內(nèi)容：瀏覽所在的城市。這里不說全國的城市，只說省會以上的城市，就有幾十個(gè)。如果按上面講過的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁上，將是一件不堪設(shè)想的事情。于是，在表單的對象中出現(xiàn)了菜單和列表。說到底，菜單和列表主要是為了節(jié)省網(wǎng)頁的空間而產(chǎn)生的。菜單是一種最節(jié)省空間的方式，正常狀態(tài)下只能看到一個(gè)選項(xiàng)，單擊按鈕打開菜單后才能看到全部的選項(xiàng)；列表可以顯示一定數(shù)量的選項(xiàng)，如果超出了這個(gè)數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來觀看各選項(xiàng)。通過<SELECT>和<OPTION>標(biāo)記可以設(shè)計(jì)頁面中的菜單和列表效果，此標(biāo)記對必須放在<FORM></FORM>標(biāo)記對之間。格式：<SELECTname="name"size="value"multiple><OPTIONvalue="value"selected>選項(xiàng)一<optionvalue="value">選項(xiàng)二…</select>。37<SELECT>標(biāo)記用來定義菜單和列表，屬性如下。（1）name：設(shè)置菜單和列表的名稱。（2）size：設(shè)置顯示的選項(xiàng)數(shù)目。（3）multiple：該屬性不用賦值可直接加入到標(biāo)記中，加入此屬性后列表框就成了可多選的了。若沒有加入multiple屬性，顯示的將是一個(gè)彈出式的列表框。<OPTION>標(biāo)記用來指定菜單和列表中的一個(gè)選項(xiàng)，它放在<SELECT></SELECT>標(biāo)記對之間。屬性如下。（1）value：該屬性用來給<OPTION>指定的那一個(gè)選項(xiàng)賦值，這個(gè)值是要傳送到服務(wù)器上的，服務(wù)器正是通過調(diào)用<SELECT>區(qū)域名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)。（2）selected：指定初始默認(rèn)的選項(xiàng)?！纠?-19】表單菜單和列表標(biāo)記的應(yīng)用。384．文本框標(biāo)記<TEXTAREA><TEXTAREA></TEXTAREA>表示創(chuàng)建一個(gè)可以輸入多行的文本框，可以在其中輸入更多的文本，此標(biāo)記對放在<FORM></FORM>標(biāo)記對之間。格式：<TEXTAREAname="name"rows="value"cols="value"></TEXTAREA>。屬性如下。（1）name：設(shè)置文本框的名稱。（2）rows：設(shè)置文本框的行數(shù)，以字符數(shù)為單位。（3）cols：設(shè)置文本框的列數(shù)，以字符數(shù)為單位?！纠?-20】表單文本框標(biāo)記的應(yīng)用。393.7HTML的框架標(biāo)記框架的運(yùn)用就是把瀏覽器窗口劃分成幾個(gè)子窗口，每個(gè)子窗口可以調(diào)入各自的HTML文檔形成不同的頁面，也可以按照一定的方式組合在一起完成特殊的效果?？蚣芡ǔ５氖褂梅椒ㄊ窃谝粋€(gè)框架中放置目錄并設(shè)置鏈接，點(diǎn)擊鏈接，內(nèi)容顯示在另一個(gè)框架中；或者有時(shí)一個(gè)網(wǎng)頁的不同部分由不同的人員制作，可以每人完成一個(gè)子窗口，然后利用框架技術(shù)將它們合并在一起形成一個(gè)完整的頁面。1．框架集標(biāo)記<FRAMESET>框架主要包括兩個(gè)部分，一個(gè)是框架集，另一個(gè)就是框架?？蚣芗窃谝粋€(gè)文檔內(nèi)定義的一組框架結(jié)構(gòu)的HTML網(wǎng)頁?？蚣芗x了在一個(gè)窗口中顯示的框架數(shù)、框架的尺寸、載入到框架的網(wǎng)頁等。而框架則是指在網(wǎng)頁上定義的一個(gè)顯示區(qū)域。在使用了框架集的頁面中，頁面的<BODY>標(biāo)記被<FRAMESET>標(biāo)記所取代，然后通過<FRAME>標(biāo)記定義每一個(gè)框架。功能：定義分割窗口，用來定義主文檔中有幾個(gè)框架并且各個(gè)框架是如何排列的。格式：<FRAMESETcols="value，value，…"rows="value，value，…"framespacing="value"bordercolor="Color＿value">…</FRAMESET>。40屬性如下。（1）cols：左右分割窗口（用“，”分割，value為定義各個(gè)框架的寬度值，單位可以是百分?jǐn)?shù)、絕對像素值或星號(“*”)，其中星號表示剩余部分）。（2）rows：上下分割窗口（用“，”分割，value為定義各個(gè)框架的寬度值，單位可以是百分?jǐn)?shù)、絕對像素值或星號(“*”)，其中星號表示剩余部分）。（3）framespacing：設(shè)定框架集的邊框?qū)挾?。?）bordercolor：設(shè)定框架集邊框顏色?？蚣芗瘶?biāo)記應(yīng)用如書上的表3-2所示。

412．框架標(biāo)記<FRAME>每一個(gè)框架都有一個(gè)顯示的頁面，這個(gè)頁面文件稱為框架頁面。通過<FRAME>標(biāo)記可以定義框架頁面的內(nèi)容，<FRAME>標(biāo)記放在<FRAMESET></FRAMESET>之間。功能：定義某一個(gè)具體的框架。格式：<FRAMEsrc=“File＿NAME”name=“Frame＿NAME”scrolling=“value”noresize>…</FRAME>。屬性如下。（1）src：設(shè)置框架顯示的文件路徑。（2）name：定義此框架的名字，這個(gè)名字是供超文本鏈接標(biāo)記<Ahref=“”target=“”>中的target屬性用來指定鏈接的目標(biāo)HTML文件將顯示在哪一個(gè)框架中?？蚣艿拿幸欢ǖ囊?guī)則，框架名稱必須是單個(gè)單詞，可以使用下劃線（＿），但不允許使用連字符（-）、句號（。）和空格?？蚣苊Q必須以字母開始。框架名稱區(qū)分大小寫。（3）scrolling：設(shè)定滾動條是否顯示，值可以是yes(顯示)、no(不顯示)或auto(若需要則會自動顯示,不需要則自動不顯示)。（4）noresize：禁止改變框架的尺寸大小。42

3．不支持框架標(biāo)記<NOFRAMES>格式：<NOFRAMES>…</NOFRAMES>功能：<NOFRAMES></NOFRAMES>標(biāo)記對放在<FRAMESET></FRAMESET>標(biāo)記對之間，用來在那些不支持框架的瀏覽器中顯示文本或圖像信息?！纠?-21】框架標(biāo)記的綜合應(yīng)用。433.8CSS3.8.1CSS概述CSS是英文CascadingStyleSheet的縮寫，稱為“層疊樣式表”或“級聯(lián)樣式表”，它是用來控制一個(gè)文檔中某一文本區(qū)域外觀的一組格式屬性。CSS樣式可以定義在HTML文檔中的標(biāo)記里，也可以在外部附加文檔作為外加文檔。這樣，一個(gè)樣式表就可以用于多個(gè)頁面，甚至整個(gè)站點(diǎn)，當(dāng)CSS樣式有所更新或被修改之后，所有應(yīng)用了該樣式表的文檔都會被自動更新，所以CSS具有更好的易用性和擴(kuò)展性。概括一下，CSS有以下特點(diǎn)：（1）可以將格式和結(jié)構(gòu)分離；（2）可以以前所未有的能力控制頁面布局；（3）可以制作體積更小、下載更快的網(wǎng)頁；（4）可以將許多網(wǎng)頁同時(shí)更新，比以前更快更容易；（5）瀏覽器的界面更友好。443.8.2CSS的基本語法CSS樣式表的基本語法為：HTML標(biāo)志{標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；……}。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論