超文本標(biāo)記語言HTML2_第1頁
超文本標(biāo)記語言HTML2_第2頁
超文本標(biāo)記語言HTML2_第3頁
超文本標(biāo)記語言HTML2_第4頁
超文本標(biāo)記語言HTML2_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第2章

HTML基礎(chǔ)1第10課時HTMLHTML文檔是網(wǎng)頁文件在計算機(jī)系統(tǒng)內(nèi)的最終保存形式，使用其他的專用網(wǎng)頁編輯軟件制作的網(wǎng)頁最終也都應(yīng)保存為HTML文檔格式，即HTML文件的基本結(jié)構(gòu)。

2HTML標(biāo)記及其屬性．標(biāo)記HTML文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。HTML的標(biāo)記總是被封裝在“<”和“>”所構(gòu)成的一對尖括號之中。標(biāo)記能產(chǎn)生所需要的各種效果，就像一個排版程序，它將網(wǎng)頁的內(nèi)容排成理想的效果。這些標(biāo)記名稱大都為相對應(yīng)的英文單詞或單詞的首字母或單詞的縮寫，便于記憶。3.標(biāo)記標(biāo)記分為單標(biāo)記指令和雙標(biāo)記指令。單標(biāo)記指令單獨(dú)使用就能完整地表達(dá)意思，它的一般格式為：<標(biāo)記/>頁面內(nèi)容如換行<br/>，<img/>，<link/>，<input/>等雙標(biāo)記指令必須成對使用，它的一般格式為：<標(biāo)記>被標(biāo)記<／標(biāo)記>4HTML標(biāo)記及其屬性標(biāo)記的屬性標(biāo)記規(guī)定的是什么信息（文本、圖片等）內(nèi)容，怎樣顯示或控制這些信息，還需要在標(biāo)記后面加上相關(guān)的屬性。屬性的一般格式為：<標(biāo)記屬性1=屬性值屬性2=屬性值…>受標(biāo)記影響的內(nèi)容</標(biāo)記>例如文件主體標(biāo)記<body>，其屬性bgcolor可設(shè)置背景顏色。<bodybgcolor=red>屬性示例<／body>5．標(biāo)記的屬性注意：（1）標(biāo)記可以不用屬性。（2）屬性之間沒有先后順序,在使用時，根據(jù)需要可以使用標(biāo)記的所有屬性，也可以只選用需要的幾個屬性。（3）屬性和標(biāo)記一樣，都不區(qū)分大小寫。6第11課時HTML的基本構(gòu)成標(biāo)記

1．HTML文檔標(biāo)記<HTML>2．HTML文件頭標(biāo)記<Head>3．HTML文件標(biāo)題標(biāo)記<Title>4．HTML文件主體標(biāo)記<Body>7．HTML文檔標(biāo)記<HTML>格式：<html>…<／html>功能：：<html>標(biāo)記位于HTML文檔的最前邊，用來標(biāo)識HTML文檔的開始；而<／html>標(biāo)記恰恰相反，它位于HTML文檔的最后邊，用來標(biāo)識HTML文檔的結(jié)束。 8HTML文件頭標(biāo)記<Head>格式：<Head>…</Head>功能：用于包含文件的基本信息（文檔標(biāo)題、文檔搜索關(guān)鍵字、文檔生成器等）。<Head>和</Head>構(gòu)成HTML文檔的開頭部分，在此標(biāo)記對之間可以使用<Title></Title>、<Script></Script>等標(biāo)記對，這些標(biāo)記對都是描述HTML文檔相關(guān)信息的標(biāo)記對，<Head></Head>標(biāo)記對之間的內(nèi)容是不會在瀏覽器顯示出來的。9HTML文件標(biāo)題標(biāo)記<Title>格式：<Title>…</Title>功能：定義文件標(biāo)題。使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的“主題”，要將網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單，只要在<Title></Title>標(biāo)記對之間加入要顯示的文本即可。 104．HTML文件主體標(biāo)記<Body>格式：<Body>…</Body>功能：<Body></Body>是HTML文檔的主體部分，在此標(biāo)記對之間可包含<p></p>、<H1></H1>、<Br>、<Hr>等眾多的標(biāo)記，它們所定義的文本、圖像等將會在瀏覽器的框內(nèi)顯示出來。<Body>標(biāo)記中的常用屬性見表2-1。11HTML文件主體標(biāo)記<Body>表2-1<Body>標(biāo)記中常用屬性表標(biāo)記屬性用途實(shí)例<Bodybgcolor=“#rrggbb”>設(shè)置背景顏色<Bodybgcolor=“red”>紅色背景<Bodytext=“#rrggbb”>設(shè)置文本顏色<Bodytext=“#0000ff”>藍(lán)色文本<Bodylink=“#rrggbb”>設(shè)置鏈接顏色<Bodylink=“#0000ff”>鏈接為藍(lán)色<Bodyvlink=“#rrggbb”>設(shè)置已使用的鏈接的顏色<Bodyvlink=“#ff0000”>已使用的鏈接的顏色為紅色<Bodyalink=“#rrggbb”>設(shè)置正被單擊的鏈接的顏色<Bodyalink=“yellow”>正被單擊的鏈接的為黃色12第12課時強(qiáng)制換行標(biāo)記、段落標(biāo)記強(qiáng)制換行標(biāo)記<br/><br/>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強(qiáng)制文本換行，多個<br>標(biāo)記可以創(chuàng)建多個空行。強(qiáng)制換行標(biāo)記的格式為：文字<br/>13．強(qiáng)制換行標(biāo)記<br>換行標(biāo)記可單獨(dú)使用。瀏覽器在解釋時，從該標(biāo)記處換行，可使頁面清晰、整齊。<br>標(biāo)記的clear屬性標(biāo)明下一行的情況，其格式為：<brclear=#>“#”可以是“l(fā)eft”、“right”、“all”之一，如“clear=left”，表示下一行從左邊界處開始。<nobr>是禁止分行標(biāo)記，其格式為：<nobr>…<／nobr>禁止換行標(biāo)記通知瀏覽器，當(dāng)其中的內(nèi)容在一行內(nèi)顯示不了時，超出部分不換行，通過滾動條可查看。14段落標(biāo)記段落標(biāo)記<p>由于HTML的瀏覽器是基于窗口的，其顯示大小可以隨意改變，所以HTML將多個空格以及回車等效為一個空格，HTML的分段完全依賴于分段標(biāo)記元素<p>。段落標(biāo)記的格式為：<p>文字</p>152．段落標(biāo)記<p>

<p>有多種屬性，比較常用的屬性是align對齊方式，文字對齊的基本用法為：<palign=“屬性值”>…</p>屬性值可以是left（左對齊）、center（居中）和right（右對齊）。161.注釋標(biāo)記與許多計算機(jī)語言一樣，HTML語言也提供了注釋功能。瀏覽器遇到注釋標(biāo)記就會自動忽略此標(biāo)記中的內(nèi)容。為HTML文檔的不同部分加上說明，是為了便于日后的閱讀和修改。注釋標(biāo)記的格式為：<!--注釋內(nèi)容-->段落標(biāo)記17段落標(biāo)記2．分區(qū)顯示標(biāo)記<Div><Div>標(biāo)記常用來排版大塊的HTML段落，也可以用于格式化表，此標(biāo)記的用法與段落標(biāo)記<p>非常相似。3．插入水平線標(biāo)記<Hr>在網(wǎng)頁上插入水平線，可以將不同功能的文字、圖片、表格等進(jìn)行分隔，使網(wǎng)頁看起來更加整齊。18第13課時文本標(biāo)記1．標(biāo)題標(biāo)記<hn>格式：<H1>…</HI>，<H2>…</H2>，…，<H6>…</H6>功能：設(shè)置各種大小不同的標(biāo)題。HTML語言提供了一系列對文本中的標(biāo)題進(jìn)行操作的標(biāo)記對：<H1>…</H1>，<H2>…</H2>，…，<H6>…</H6>，即一共有6對標(biāo)題的標(biāo)記對。 19文本標(biāo)記2．字體設(shè)置標(biāo)記<Font>格式：<Font>…</Font>功能：設(shè)置字體格式。<Font>標(biāo)記符具有3個常用的屬性：size（大?。?、color（顏色）和face（字體20文本標(biāo)記3．其他字體標(biāo)記為了讓文字富有變化，或者為了特意強(qiáng)調(diào)某一部分，還有一些標(biāo)記可以用來改變字體的效果，標(biāo)記格式如表2-3所示。 標(biāo)記格式功能<b></b>使文本以粗體字的形式輸出<i></i>使文本以斜體字的形式輸出<u></u>使文本以加一下劃線的形式輸出<cite></cite>輸出引用方式的字體，通常是斜體<strong></strong>輸出加重文本，表示特別強(qiáng)調(diào)表2-3其他文本標(biāo)記格式表21文本標(biāo)記4．背景顏色改變背景的顏色可以得到各種顏色的背景。設(shè)置背景顏色的一般格式為：<bodybgcolor=#rrggbb>或<bodybgcolor=colorname> 設(shè)置顏色值，用6位16進(jìn)制的RGB值來表示，前兩位表示顏色中紅色的數(shù)量（從00到FF，即0～255），中間和后面兩位分別表示顏色中綠色和藍(lán)色的數(shù)量。22文本標(biāo)記5．背景音樂bgsound用來設(shè)定頁面載入時的背景音樂，可在瀏覽器中運(yùn)行，在NetScape任何版本的瀏覽器中都是無效的。在網(wǎng)頁中創(chuàng)建背景音樂使用<BGSOUND>標(biāo)記來實(shí)現(xiàn)，其格式為：<BGSOUNDSRC=“背景音樂文件名或URL”LOOP=“背景音樂重復(fù)的次數(shù)”>當(dāng)LOOP=－1時，背景音樂將會連續(xù)播放，23文本標(biāo)記6.移動的文字基本語法：<marquee>...</marquee>文字移動屬性的設(shè)置方向<direction=#>#=left或right方式<bihavior=#>#=scroll：一個方向不停地移動slide：移動一次就停止。Alternate：來回移動。循環(huán)<loop=#>#=次數(shù)；若未指定則循環(huán)不止(infinite)速度<scrollamount=#>時間用數(shù)值表示延時<scrolldelay=#>移動過程中每移一次停頓的時間24第14課時列表標(biāo)記1．有序列表標(biāo)記有序列表也稱數(shù)字式列表，它是一種在各項內(nèi)容前顯示有數(shù)字或字母的排列表格式：<OLType=“符號類型”><LIType=“符號類型”>列表項內(nèi)容<LIType=“符號類型”>列表項內(nèi)容</OL>功能：建立有序列表。251．有序列表標(biāo)記當(dāng)位于OL標(biāo)記符內(nèi)時，LI標(biāo)記符具有兩個常用的屬性：type和value。type屬性用于設(shè)置數(shù)字樣式，取值與OL的type屬性相同；value屬性用于指定一個新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。26列表標(biāo)記2．有序列表的嵌套如果用戶想用不同層次的編號列表來表示頁面內(nèi)容，那么可以使用嵌套的有序列表。命名用嵌套的有序列表時，只需將相關(guān)的列表標(biāo)記符嵌套使用即可。27列表標(biāo)記3．無序列表無序列表也稱強(qiáng)調(diào)式列表，它是一種在各項內(nèi)容前顯示有特殊項目符號的縮排列表。格式：<ULType=“符號類型”><LIType=“符號類型”>列表項內(nèi)容

<LIType=“符號類型”>列表項內(nèi)容</UL>283．無序列表以標(biāo)記<UL>開始，以標(biāo)記</UL>結(jié)束。在每一個<LI>標(biāo)記處另起一行，并在列表文本前顯示加重符號，全部列表會縮排。無序列表中type屬性的取值有三種：dics表示實(shí)心圓，為默認(rèn)值；circle表示為空心圓；square表示實(shí)心或空心的方塊（取決于瀏覽器）。在InternetExplorer中，type的值是區(qū)分大小寫的，也就是說將type指定為Circle是無法獲得空心圓項目符號的，必須指定為circle才可以。29第15課時層標(biāo)記和表單標(biāo)記所謂層，也就是網(wǎng)頁內(nèi)容的容器。層分為兩種類型：CSS和Netscape層。前者在HTML文件中的層標(biāo)記符使用Div和Span，被瀏覽器InternetExplorer4．0和Netscape4．0支持。后者使用Layer和Ilayer，被Netscape4．0支持。 30層標(biāo)記層的基本語句如下：<divid=“Layer1”style=“position:absolute；left：141px；top：58px；width：210px；height：137px；z-index：1”></div>在這里，id表示層的編號，style表示層的方式，left表示層左邊界距離瀏覽器窗口左邊界的距離，top表示層上邊界距離瀏覽器窗口上邊界的距離，width表示層的寬度，height表示層的高度，z-index表示在垂直平面的方向上層的順序號。31表單標(biāo)記本節(jié)主要介紹表單的基本概念，在DreamWeaver應(yīng)用中我們將進(jìn)一步的學(xué)習(xí)表單標(biāo)記符。表單是用于實(shí)現(xiàn)網(wǎng)頁瀏覽者（客戶端）與服務(wù)器（或者說網(wǎng)頁所有者）之間信息交互的一種頁面元素，在網(wǎng)絡(luò)上它被廣泛用于各種信息的搜集和反饋。32表單標(biāo)記表單的標(biāo)記符為<form>，如果要在網(wǎng)頁中添加表單，應(yīng)在文檔中添加form標(biāo)記符。格式如下：<formaction=“服務(wù)器端程序”method=“get|post”></form>其中，Action屬性提供處理表單的程序地址，其處理程序可以是由站點(diǎn)支持的任何語言來編寫，如CGI、ASP、JSP、PHP。Method屬性是用戶數(shù)據(jù)提交給服務(wù)器的方法。注意，一個表單中的其他所有表單對像都必須放在表單域標(biāo)記符之間。這與所有網(wǎng)頁源代碼必須包含在【<html>…</html>”標(biāo)記符之間類似。33表單標(biāo)記 下面介紹一些表單中的常用項： 1．發(fā)送與重置 2．文字輸入與密碼輸入 3．復(fù)選框和單選按鈕 4．選擇菜單框（selectablemenu）34．發(fā)送與重置

標(biāo)記格式為：<inputtype=“submit”value=“#”><inputtype=“reset”value=“#”>其中，type表示按鈕的動作屬性。前者為提交表單按鈕，#號代表按鈕上顯示的文本，如“發(fā)送表單”或“填好了”等；后者為重置按鈕，#號代表按鈕上顯示的文本，如“重新填寫”等。352．文字輸入與密碼輸入標(biāo)記格式為：<inputtype=*value=#size=n1maxlength=n2>其中，*為text或password；#為文本框中的初始值；n1為文本框的長度；n2為文本框的最大長度。363．復(fù)選框和單選按鈕（1）復(fù)選框（Checkbox）標(biāo)記格式：<inputtype=checkbox><inputtype=checkboxchecked>其中，加入checked表示該復(fù)選框在網(wǎng)頁下載之后呈選中狀態(tài)。（2）單選按鈕（RadioButton）標(biāo)記格式為：<inputtype=radio><inputtype=radiochecked>同樣，加入checked表示該復(fù)選框在網(wǎng)頁下載之后呈選中狀態(tài)。374．選擇列表框（selectablemenu）標(biāo)記格式為：<selectname=*><option>……</option></select>若<option>標(biāo)記變?yōu)?lt;optionselected>則表示該項被默認(rèn)選中。38第16課時框架的應(yīng)用使用框架結(jié)構(gòu)可以在同一瀏覽器窗口中顯示多個網(wǎng)頁?？蚣軐g覽器窗口劃分為不同的部分，每部分中裝載不同的同的網(wǎng)頁，從而獲得一種特殊的效果。此外，通過為超鏈接指定目標(biāo)框架，可以為框架之間建立起內(nèi)容之間的聯(lián)系，因而實(shí)現(xiàn)頁面導(dǎo)航的功能。一幅Web頁面分為幾個部分，每一個部分都可以獨(dú)立地顯示一個HTML文件，形成多個窗體。多窗口頁面也稱為框架頁面?；菊Z法格式：<frameset>…<／frameset>

39最常見的框架結(jié)構(gòu)是Web型的聯(lián)機(jī)幫助系統(tǒng)（其本質(zhì)也就是網(wǎng)頁），它們通常都采用一種目錄式結(jié)構(gòu)，左邊是幫助主題，右邊是幫助內(nèi)容，當(dāng)單擊左邊的超鏈接時，相應(yīng)內(nèi)容顯示在右邊的框架中。例如，圖2--23顯示了Photopshop7.0的幫助頁面所應(yīng)用的框架效果。框架的應(yīng)用40框架的應(yīng)用例如，圖2-23就顯示了photopshop7.0的幫助頁面所應(yīng)用的框架效果。圖2-23photopshop7.0幫助頁面的框架效果41框架的應(yīng)用框架結(jié)構(gòu)可在頁面縱向排列多個窗口、橫向排列多個窗口或混合排列多個窗口。要創(chuàng)建框架結(jié)構(gòu)的網(wǎng)頁，首先必須有一個網(wǎng)頁用于指定整個瀏覽器窗口如何劃分，也就是所謂的框架集網(wǎng)頁。在框架集網(wǎng)頁中，除了基本的HTML、HEAD等標(biāo)記符以外，主要包括框架集標(biāo)記符<FRAMESET>（必須有結(jié)束標(biāo)記符</FRAMESET>）和框架標(biāo)記符<FRAME>（沒有結(jié)束標(biāo)記符）。42框架的應(yīng)用注意：在框架集中沒有用到標(biāo)記符<body>和</bo

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論