第2章網(wǎng)頁制作基礎語言――HTML課件

上傳人：w*** IP屬地：貴州上傳時間：2022-12-12 格式：PPTX 頁數(shù)：130 大?。?73.55KB 積分：25 舉報 版權(quán)申訴

已閱讀5頁，還剩125頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第2章網(wǎng)頁制作基礎語言――HTML課件12.1HTML簡介 2.2HTML文檔的基本結(jié)構(gòu) 2.3網(wǎng)頁文件的創(chuàng)建過程 2.4段落標記 2.5文字標記 2.6超鏈接 2.7圖片 2.8列表 2.9表格 2.10字幕、音頻和視頻 2.11框架（多窗口頁面） 2.12表單

第2章網(wǎng)頁制作基礎語言——HTML2.1HTML簡介第2章網(wǎng)頁制作基礎語言——HTM2

HTML是HypertextMarkupLanguage（超文本標記語言）的縮寫，是一種為普通文件中某些字句加上標識的語言，其目的在于運用標記（tag）對文件達到預期的效果。它是構(gòu)成Web頁面（Page），用來表示W(wǎng)eb頁面的符號標記語言。通過HTML，將所需要表達的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件翻譯成可以識別的信息，就是所見到的網(wǎng)頁。

HTML語言是建立網(wǎng)頁的規(guī)范或標準，從它出現(xiàn)發(fā)展到現(xiàn)在，規(guī)范不斷完善，功能越來越強。但是依然有缺陷和不足，人們?nèi)栽诓粩嗟母倪M它，使它更加便于控制和有彈性，以適應網(wǎng)絡上的應用需求。2000年，W3C組織公布發(fā)行了XHTML1.0版本。XHTML1.0是一種在HTML4.0基礎上優(yōu)化和改進的新語言，目的是基于XML應用。XHTML是一種增強了的HTML，它的可擴展性和靈活性將適應未來網(wǎng)絡應用更多的需求。

2.1HTML簡介HTML是HypertextMark3

1.標記HTML文檔由標記和被標記的內(nèi)容組成。標記（tag）能產(chǎn)生所需的各種效果。格式為：<標記>受標記影響的內(nèi)容</標記>例如，標題標記<title>表示為：<title>我的第一個網(wǎng)頁</title>2.標記的屬性標記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標記后面加上相關的屬性來表示，每個標記有一系列的屬性。格式為：<標記屬性1="屬性值1"屬性2="屬性值2"…>受影響的內(nèi)容</標記>例如，字體標記<font>有屬性size和color等。<fontsize="3"color="red">屬性示例</font>2.2HTML文檔的基本結(jié)構(gòu)

2.2.1標記及其屬性2.2HTML文檔的基本結(jié)構(gòu)4

HTML文檔是一種純文本格式的文件，HTML文檔的基本結(jié)構(gòu)為：<html><head><title>網(wǎng)頁的標題</title></head><body>網(wǎng)頁的內(nèi)容</body></html>

2.2HTML文檔的基本結(jié)構(gòu)

2.2.2HTML的基本結(jié)構(gòu)HTML文檔是一種純文本格式的文件，51、HTML文檔標記<html>……</html>2、HTML文檔頭標記<head>……</head>這一標記在HTML文檔中不是必須的，若無，瀏覽器也能照常解釋文件。3、HTML文檔標題標記<title>……</title>這一標記定義的內(nèi)容不在瀏覽器窗口顯示，而是顯示在瀏覽器的標題欄中。4、HTML文檔主體標記<body>……</body>這一標記定義了網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個網(wǎng)頁的核心。Bgcolor網(wǎng)頁的背景色Text設置非可鏈接文字的顏色Link設置尚未被訪問過的超鏈接的顏色，默認為藍色Alink設置超鏈接被訪問瞬間的顏色，默認為藍色Vlink設置已被訪問過的超鏈接的顏色，默認為藍色Background設置網(wǎng)頁的背景圖像Leftmargin設置網(wǎng)頁左邊的空白，單位為像素值Topmargin設置網(wǎng)頁上方的空白，單位為像素值1、HTML文檔標記<html>……</html>6用最簡單的“記事本”來編輯網(wǎng)頁。①打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單中的“附件”子菜單中單擊“記事本”。②創(chuàng)建新文件，并按HTML語言規(guī)則編輯。在“記事本”窗口中輸入HTML語言，輸入的內(nèi)容。③保存網(wǎng)頁。打開“記事本”的“文件”菜單，選擇“保存”。此時將出現(xiàn)“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，如mypage1.html；在“保存類型”下拉列表框中選擇“文本文檔”。最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤中。

如果希望這一頁是網(wǎng)站的首頁（主頁），想讓瀏覽者輸入網(wǎng)址后，就顯示這一頁的內(nèi)容，可以把這個文件設為默認文檔，文件名為index.html或index.htm。2.3網(wǎng)頁文件的創(chuàng)建過程

2.3.1編輯和保存網(wǎng)頁

用最簡單的“記事本”來編輯網(wǎng)頁。2.3網(wǎng)頁7

通過編輯可以得到一個.html文件，要想使這個文檔顯示出網(wǎng)頁的樣子，就要使用瀏覽器進行預覽。有兩種方法可以打開.html網(wǎng)頁文件。1.用瀏覽器打開

網(wǎng)頁在瀏覽后會有不滿意的地方，此時可重新在“記事本”中打開該.html文件修改；或者在瀏覽器中直接打開源文件（在IE中，從“查看”菜單中的“源文件”中打開）。修改后，單擊“文件”菜單中的“保存”命令。如果瀏覽器沒有關閉，要在瀏覽器中看到修改后的效果，不必重新打開該文件，直接單擊瀏覽器工具欄上的“刷新”按鈕。2.在“Windows資源管理器”或“我的電腦”中打開在“Windows資源管理器”或“我的電腦”中雙擊要打開的.html文件，這時將直接在默認的瀏覽器中打開該.html文件。

2.3網(wǎng)頁文件的創(chuàng)建過程

2.3.2預覽網(wǎng)頁

通過編輯可以得到一個.html文件，要想使8注釋標記的格式為：注釋并不局限于一行，長度不受限制。結(jié)束標記與開始標記可以不在一行上。

2.4.2強制換行和不換行標記<br>、<nobr>...</nobr>要用HTML的標記來強制換行、分段。<br>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。強制換行標記的格式為：文字<br>不換行標記可令文字不能因太長使瀏覽器無法顯示而換行，它對住址、數(shù)學公式、一行數(shù)字等尤其有用。其格式為：<nobr>文字</nobr>

【例2-2】

2.4段落標記2.4.1注釋標記

注釋標記的格式為：2.4段落標記9

段落標記放在一個段落的頭尾，用于定義一個段落。<p>...</p>標記不但能使后面的文字換到下一行，還可以使兩段之間多一空行，相當于兩個<br><br>標記。段落標記的格式為：<palign="left|center|right">文字</p>一個段落標記<p>可以看作是兩個<br>標記，即<br><br>。其中屬性align用來設置段落文字在網(wǎng)頁上的對齊方式：left（左對齊）、center（居中）和right（右對齊）。缺省時默認為left。格式中的“|”表示“或者”，即多中選一?！纠?-3】

2.4段落標記2.4.3段落標記<p>...</p>段落標記放在一個段落的頭尾，用10

設定文字、圖像、表格的擺放位置。當在許多段落中設置對齊方式時，常使用<div>…</div>標記。定位標記的格式為：<divalign="left|center|right">文本、圖像或表格</div>其中屬性align用來設置文本塊、一段文字或標題在網(wǎng)頁上的對齊方式：left、center和right。缺省時默認為left。【例2-4】2.4段落標記2.4.4定位標記<div>…</div><div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯(lián)。設定文字、圖像、表格的擺放位置。11

在頁面中插入一條水平標尺線，可以使不同功能的文字分隔開，看起來整齊、明了。當瀏覽器解釋到HTML文檔中的<hr>標記時，會在此處換行，并加入一條水平線段。線段的樣式由標記的參數(shù)決定。水平線標記的格式為：<hralign="left|center|right"size="橫線粗細"width="橫線長度"color="橫線色彩"noshade>

size設定線條粗細，以像素為單位，默認為2。width設定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當前窗口的百分比）。

color設定線條色彩，默認為黑色?？梢圆捎蒙实拿Q。色彩可以用相應英文單詞或以“#”引導的一個十六進制數(shù)代碼來表示?！纠?-5】

2.4段落標記2.4.5水平線標記<hr>

在頁面中插入一條水平標尺線，可以12

在頁面中，標題是一段文字內(nèi)容的核心，所以總是用加強的效果來表示。網(wǎng)頁中的信息可以分為主要點、次要點，可以通過設置不同大小的標題，為文章增加條理。標題文字標記的格式為：<h#align="left|center|right">標題文字</h#>#用來指定標題文字的大小，#取1～6的整數(shù)值，取1時文字最大，6時文字最小。屬性align設置標題在頁面中的對齊方式：left、center或right。缺省時默認為left。<h#>…</h#>標記缺省顯示宋體，在一個標題行中無法使用不同大小的字體。與用<title>…</title>定義的網(wǎng)頁標題不同，標題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標題欄中?！纠?-6】

2.5文字標記

2.5.1標題文字標記<h#>…</h#>

在頁面中，標題是一段文字內(nèi)容的核心，所以總13

在網(wǎng)頁中為了增強頁面的層次，其中的文字可以用不同的大小、字體、字型、色彩。用<font>標記設置字號（<font>被W3C列為不建議使用的標記，以后將學習用CSS來設定字體）。設置文字大小的格式為：<fontsize="數(shù)字"face="字體名"color="色彩">被設置的文字</font><font>標記可設定文字的字體、字號和色彩。size用來設置文字的大小。數(shù)字的取值范圍從1～7，size取1時最小，取7時最大。face用來設置字體。如黑體、宋體、楷體_GB2312、隸書、TimesNewRoman等。color用來設置文字色彩?！纠?-7】

【例2-8】

【例2-9】

【例2-10】

2.5文字標記

2.5.2字體標記<font>...</font>

在網(wǎng)頁中為了增強頁面的層次，其中的文字可14

超鏈接（Hyperlink）是網(wǎng)頁互相聯(lián)系的橋梁，超鏈接可以看作是一個“熱點”，它可以從當前網(wǎng)頁定義的位置跳轉(zhuǎn)到其他位置，包括當前頁的某個位置、Internet或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽網(wǎng)頁是超鏈接最普遍的一種應用，通過超鏈接還可以獲得不同形態(tài)的服務，如文件傳輸、資料查詢、電子郵件、遠程訪問等。當網(wǎng)頁包含超鏈接時，網(wǎng)頁中的外觀形式為彩色（一般為藍色）且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應位置。鼠標指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用錨點標記<a>來定義。

2.6超鏈接

超鏈接（Hyperlink）是網(wǎng)15

錨點（anchor）標記由<a>定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個詞、句或圖片，可從此處轉(zhuǎn)到另一個鏈接資源（目標資源），這個目標資源有惟一的地址（URL）。具有以上特點的詞、句或圖片就稱為熱點。<a>標記的格式為：<ahref="URL"target="打開窗口方式">熱點</a>

href屬性為超文本引用，它的值為一個URL，是目標資源的有效地址。如果要創(chuàng)建一個不鏈接到其他位置的空超鏈接，可用“#”代替URL，即<ahref="#">熱點</a>。

2.6超鏈接2.6.1錨點標記<a>...</a>錨點（anchor）標記由<a>16target屬性設定鏈接被單擊后結(jié)果所要打開窗口的方式?？蛇x值為：_blank，_parent，_self，_top。_blank-在一個新的未命名的窗口載入文檔_self-在相同的框架或窗口中載入目標文檔_parent-把文檔載入父窗口或包含了超鏈接引用的框架的框架集_top-把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架

target屬性設定鏈接被單擊后結(jié)果所要打開窗口的方式?？蛇x171.

鏈接到同一目錄內(nèi)的網(wǎng)頁文件鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為：<ahref="目標文件名.html">熱點文本</a>【例2-11】

2.鏈接到下一級目錄中的網(wǎng)頁文件鏈接到下一級目錄中網(wǎng)頁文件的格式為：

<ahref="子目錄名/目標文件名.html">熱點文本</a>3.鏈接到上一級目錄中的網(wǎng)頁文件鏈接到上一級目錄中網(wǎng)頁文件的格式為：<ahref="../目標文件名.html">熱點文本</a>其中“../表示退到上一級目錄中。4.鏈接到同級目錄中的網(wǎng)頁文件鏈接到同級目錄中網(wǎng)頁文件的格式為：<ahref="../子目錄名/目標文件名.html">熱點文本</a>

2.6超鏈接2.6.2指向其他頁面的鏈接1.鏈接到同一目錄內(nèi)的網(wǎng)頁文件2.618

要在當前頁面內(nèi)實現(xiàn)超鏈接，需要定義兩個標記：一個為超鏈接標記，另一個為書簽標記。超鏈接標記的格式為：<ahref="#記號名">熱點文本</a>書簽就是用<a>標記對該文本作一個記號。格式為：<aname="記號名">目標文本附近的字符串</a>【例2-12】

如果要建立指向其他頁面某處的文本，格式為：<ahref="URL#記號名">熱點文本</a>要在跳轉(zhuǎn)到的位置處加上鏈接標記：<aname="記號名">文字串</a>如果鏈接指向其他文件的某一部分，格式為：<ahref="目標文件路徑/文件名#記號名">熱點文本</a>2.6超鏈接2.6.3指向本頁中的鏈接要在當前頁面內(nèi)實現(xiàn)超鏈接，需要定義兩個標記19

如果鏈接到的文件不是HTML文件，則該文件將作為下載文件，其格式為：<ahref="下載文件名">熱點文本</a>【例2-13】

2.6.5指向電子郵件的鏈接

單擊指向電子郵件的鏈接，將打開缺省的電子郵件程序，如FoxMail、OutlookExpress，并自動填寫郵件地址。指向電子郵件鏈接的格式為：<ahref="mailto:E-mail地址">熱點文本</a>

例如，E-mail地址是goodlook@，建立如下鏈接：免費電話:80012345678信箱:<ahref="mailto:goodlook@">goodlook@</a>2.6超鏈接2.6.4指向下載文件的鏈接如果鏈接到的文件不是HTML文件，則該文件201.設置背景色格式為：<bodybgcolor="色彩值">“色彩值”可以為色彩的英文名或相應十六進制值。2.用圖片作為背景使用<body>標記的background屬性，可為網(wǎng)頁鋪上背景圖片。格式為：<bodybackground="圖片文件名">background取值為一個圖片文件名，并且要指出文件存放的路徑，可以是相對路徑，也可以是絕對路徑。圖片文件可為GIF格式或JPEG格式的文件。在瀏覽器中，作為背景的圖片將按原來的大小復制，重復鋪滿整個網(wǎng)頁?！纠?-14】

2.7圖片2.7.1網(wǎng)頁的背景1.設置背景色2.7圖片21

使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。用圖片標記還可以設置圖片的替代文本、尺寸、布局等屬性。圖片標記的格式為：<imgsrc="圖片文件名"alt="簡單說明"width="圖片寬度"height="圖片高度"border="邊框?qū)挾?hspace="水平方向空白"vspace="垂直方向空白"align="環(huán)繞方式|對齊方式">

如果不設定圖片的尺寸，圖片將按照其本身的大小顯示。可使用<img>標記的width和height屬性來設置圖片的大小。width和height屬性的屬性值可取像素數(shù)，也可取百分數(shù)。【例2-15】

【例2-16】

2.7圖片2.7.2圖片標記<img>

使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。用22

如果不設置文本對圖片的環(huán)繞，圖片在頁面會占一片空白。利用<img>標記的屬性，可以使文本環(huán)繞圖片。使用該標記設置文本環(huán)繞方式后，將一直有效，直到遇到下一個設置標記。如果想取消文本環(huán)繞圖片，可使用<brclear>標記，其后的文本將不再環(huán)繞圖片。格式為：<brclear="left|right|all">其中clear的取值可為：left（解除在圖片左側(cè)放置的文本）、right（解除在圖片右側(cè)放置的文本）或all（解除在圖片左、右側(cè)放置的文本）。

【例2-17】

2.7圖片2.7.2圖片標記<img>

如果不設置文本對圖片的環(huán)繞，圖片在頁面會占23

圖片也可作為熱點，單擊圖片則跳轉(zhuǎn)到被鏈接的文本或其他文件。格式為：<ahref="URL"><imgsrc="圖片文件名"></a>例如，下面代碼：<ahref="vb_book.html"><imgsrc="vb.jpg"alt="VB封面"width="140"height="190"hspace="10"vspace="5"></a>2.7圖片2.7.3用圖片作為超鏈接

圖片也可作為熱點，單擊圖片則跳轉(zhuǎn)到被鏈接的24

無序列表中每一個表項的前面是項目符號（如●、■等符號）。建立無序列表使用<UL>標記和<li>表項標記。格式為：<ultype="符號類型"><litype="符號類型1">第一個列表項<litype="符號類型2">第二個列表項…</ul>值得注意的是，<li>標記是單標記。即一個表項的開始，就是前一個表項的結(jié)束。disc（實心圓點）、circle（空心圓點）、square（方塊），也可自己設置圖片?！纠?-18】

2.8列表

2.8.1無序列表標記<ul><li>...</ul>

無序列表中每一個表項的前面是項目符號（如●、25使用<OL>標記可以建立有序列表，表項的標記仍為<li>。格式為：<oltype="符號類型"><litype="符號類型1">表項1<litype="符號類型2">表項2…</ol>有序列表整個表項與上下段文本之間各有一行空白；列表項目向右縮進并左對齊；各表項前帶順序號?！纠?-19】

列表嵌套把主頁分為多個層次，例如書的目錄，給人以很強的層次感。有序列表和無序列表不僅可以自身嵌套，而且彼此可互相嵌套?！纠?-20】

2.8列表

2.8.2有序列表標記<ol><li>...</ol>

使用<OL>標記可以建立有序列表，表項的標記26

最簡單的表格僅包括行和列。表格的標記為<table>，行的標記為<tr>，表項的標記為<td>。格式為：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th><tr><td>表項1</td><td>表項2</td><td>…</td><td>表項n</td>…<tr><td>表項1</td><td>表項2</td><td>…</td><td>表項n</td></table>【例2-21】

【例2-22】

2.9表格

2.9.1簡單表格

最簡單的表格僅包括行和列。表格的標記為<tab27

在缺省下，表項居于單元格的左端?？捎昧?、行的屬性設置表項數(shù)據(jù)在單元格中的位置。1.水平對齊表項數(shù)據(jù)的水平對齊用標記<th>、<td>和<tr>的align屬性。align的屬性值分別為：center（表項數(shù)據(jù)的居中）、left（左對齊）、right（右對齊）或justify（左右調(diào)整）?！纠?-23】2.垂直對齊

表項數(shù)據(jù)的垂直對齊用標記<th>、<td>和<tr>的valign屬性。valign的屬性值分別為：top（靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項位置一致）?！纠?-24】

2.9表格

2.9.2表格內(nèi)文字的對齊方式在缺省下，表項居于單元格的左端。可用列、行28

前面介紹的是表格中的各個單元格的屬性?，F(xiàn)在，把表格作為一個整體，介紹表格在頁面中的位置及背景的設置。與圖片一樣，表格在瀏覽器窗口中的位置也有三種：居左、居中和居右。使用<table>標記的align屬性。格式為：<tablealign="left|center|right">當表格位于頁面的左側(cè)或右側(cè)時，文本填充在另一側(cè)。當表格居中時，表格兩邊沒有文本。當align屬性缺省時，文本在表格的下面?！纠?-25】

2.9表格

2.9.3表格在頁面中的對齊方式

前面介紹的是表格中的各個單元格的屬性?，F(xiàn)在29

在<table>、<th>、<tr>、<td>標記中，使用下面屬性可以改變表格的背景和邊框的色彩、添加背景圖片，也可以為行和單元格改變色彩、添加背景圖片。

bgcolor=""色彩或色彩值" 設置背景色彩background="圖片文件名" 設置背景圖片bordercolor="色彩" 設置表格邊框的色彩bordercolorlight="色彩" 設置表格邊框亮部的色彩rules="row,cols或none" 設置表內(nèi)線的顯示方法，none為無內(nèi)線如果把屬性放到<table>中，其作用范圍為整個表格，如果把屬性放到<th>中，則作用范圍為整個行，如果把屬性放到<tr>、<td>中，則作用范圍為該單元格。

2.9表格

2.9.4表格的色彩和圖片背景

在<table>、<th>、<tr>、<t30

流動字幕標記的格式為：

【例2-26】

2.10字幕、音頻和視頻

2.10.1字幕標記<marquee>

流動字幕標記的格式為：2.10字幕、音頻31

用瀏覽器可以播放的音頻格式有：MIDI音樂、WAV音樂、AU格式。1.點播音樂<a>...</a>將音樂做成一個鏈接，只需單擊該鏈接，就可以聽到音樂了。其格式為：

<ahref="音頻文件地址">熱點文本</a>例如：播放一段MIDI音樂：<ahref="ourlove.mid">我們的愛</a>2.10字幕、音頻和視頻

2.10.2音頻用瀏覽器可以播放的音頻格式有：MIDI音樂32

【例2-27】

3.IE中的背景音樂

可以插入背景音樂格式，不過只有在IE瀏覽器中才可以聽到。其格式為：

<bgsoundsrc="聲音文件地址"loop="播放次數(shù)">播放次數(shù)取-1或infinte時，聲音將一直播放直到關閉該網(wǎng)頁為止。

2.10字幕、音頻和視頻

2.10.2音頻2.內(nèi)嵌音頻播放插件<embed>2.133

用瀏覽器可以播放的格式有：MOV格式、AVI格式。1.鏈接一個視頻文件<a>...</a>與鏈接音頻文件一樣，可將將將視頻文件做成一個鏈接。其格式為：<ahref="視頻文件地址">熱點文本</a>例如：播放一段視頻：<ahref="welcome.avi">歡迎光臨</a>2.內(nèi)嵌視頻播放插件<embed>格式為：<embedsrc="視頻文件地址"autostart="true|false"loop="true|false|n"startime="分:秒"volume="0~100"width="x|x%"height="y|y%"hidden=truecontrols="console|smallconsole">【例2-28】

2.10字幕、音頻和視頻

2.10.3視頻

用瀏覽器可以播放的格式有：MOV格式、AVI格34

框架（Frames）也稱多窗口頁面或幀，是在同一瀏覽器窗口中顯示多個相互隔離的HTML頁的結(jié)構(gòu)，每個區(qū)域顯示一個HTML文件。2.11.1建立框架

框架的建立使用<frameset>、<frame>兩個標記。<frameset>用來劃分窗格，<frame>標記用來聲明其中框架頁面的內(nèi)容。框架的基本結(jié)構(gòu)為：<html><head>...</head><frameset><framesrc="url"><framesrc="url">…</frameset></html>2.11框架（多窗口頁面）框架（Frames）也稱多窗口頁面或幀，是在351.<frameset>標記<frameset>標記用來定義一個框架組的屬性，格式為：

<framesetrow="橫向框架數(shù)"cols="縱向框架數(shù)"border="像素值"bordercolor="色彩值"frameborder="yes|no"framespacing="像素值">…</frameset>其中屬性：

row 設定橫向分割的框架數(shù)目cols 設定縱向分割的框架數(shù)目border 設定邊框的寬度bordercolor 設定邊框的色彩frameborder 設定有∕無邊框framespacing 設置各窗格間的空白

2.11框架（多窗口頁面）1.<frameset>標記2.11框架（36框架有橫向和縱向之分。對一個框架來說，其大小是很重要的。<frameset>的rows和cols屬性用于設定橫向分割和縱向分割的框架數(shù)目。例如，要建立有三個橫向框架的頁面，可寫為：

<framesetrow="x1|y1%|z1*,x2|y2%|z2*,x3|y3%|z3*">2.11框架（多窗口頁面）框架有橫向和縱向之分。對一個框架來說，其大小372.<frame>標記<frame>標記用于給各個框架指定頁面的內(nèi)容，也就是，它將各個框架和包含其內(nèi)容的那個文件聯(lián)系在一起。<frame>是一個單標記，格式為：

<framesrc="源文件名.html"name="框架名"border="像素值"bordercolor="色彩值"frameborder="yes|no"marginwidth="像素值"marginheight="像素值"scrolling="yes|no|auto"noresize>

<frame>標記的個數(shù)應等于在<frameset>標記中所定義的框架數(shù)，并按在文件中出現(xiàn)的次序按先行后列對框架進行初始化。如果<frame>標記數(shù)目少于<frameset>中定義的框架數(shù)量，則多余的框架為空。

【例2-29】

【例2-30】

2.11框架（多窗口頁面）2.<frame>標記2.11框架（多窗38

在很多網(wǎng)頁中，常在一個框架中顯示一個所有網(wǎng)頁內(nèi)容的目錄，而通過單擊其中的某項，在另一個框架中顯示相應內(nèi)容。這些目錄是熱點文本，需要在框架之間建立超鏈接，并指明顯示的目標文件的框架。使用<a>的target屬性就可以控制目標文件在那個框架內(nèi)顯示。當單擊熱點文本時，目標文件就會出現(xiàn)在有target指定的框架內(nèi)。target屬性的值可以為框架名，使用格式為：<ahref="目標文件名.html"target="框架名">熱點文本</a>

2.11框架（多窗口頁面）2.11.2框架間的鏈接

在很多網(wǎng)頁中，常在一個框架中顯示一個所有網(wǎng)頁39另外，“框架名”有4個特殊的值，分別實現(xiàn)4類特殊的操作：target="_blank"：鏈接的目標文件被顯示在一個新的沒有名字的瀏覽器窗口中。target="_self"：鏈接的目標文件被顯示在當前框架窗口中，代替正在顯示的熱點文本所在的那個文件，是省略target屬性的默認值。target="_top"：鏈接的目標文件被顯示在整個瀏覽器窗口（取消了框架）。target=“_parent”：當框架嵌套時，鏈接的目標文件被顯示在父框架中；否則，被顯示在整個瀏覽器窗口中。【例2-31】

2.11框架（多窗口頁面）2.11.2框架間的鏈接

另外，“框架名”有4個特殊的值，分別實現(xiàn)4類特40

網(wǎng)頁上具有可輸入表項及項目選擇等控制所組成的欄目稱為表單。在網(wǎng)頁中，通過表單交流和反饋信息。格式為：

<formname="表單名"action="URL"method="get|post"><inputtype="表項類型"name="表項名"value="缺省值"size="x"maxlength="y">…</form>name屬性:表單的名字，在一個網(wǎng)頁中用于惟一識別一個表單action屬性:表單處理的方式，往往是E-mail地址或網(wǎng)址method屬性:表單數(shù)據(jù)的傳送方向，是獲得（GET）表單還是送出（POST）表單2.12表單

2.12.1表單的標記<form>...</form>

網(wǎng)頁上具有可輸入表項及項目選擇等控制所組成41

使用<input>標記的type屬性，可以在表單中加入表項，并控制表項的風格。type屬性值為text，則輸入的文本以標準的字符顯示；type屬性值為password，則輸入的文本顯示為“*”。在表項前應加入表項的名稱，如“您的姓名”等，以告訴瀏覽者在隨后的表項中輸入的內(nèi)容。【例2-32】

2.12表單

2.12.2文字和密碼的輸入使用<input>標記的type屬性，可以在表42

如果瀏覽者想清除輸入到表單中的全部內(nèi)容，可以使用<input>標記中的type屬性所設的重置（reset）按鈕，當瀏覽者完成表單的填寫，想要發(fā)送時，可使用<input>標記的屬性type所設的提交（submit）按鈕，將表單內(nèi)容送給action中的網(wǎng)址或函件信箱。格式為：

<inputtype="reset"value="按鈕名"><inputtype="submit"value="按鈕名">當缺省value的設置值時，重置和提交的按鈕分別顯示為“重置”和“提交查詢內(nèi)容”。例如：<form><inputtype="text"name="a01"size="40"><br><inputtype="text"name="a02"maxlength="5"><br><inputtype="submit"><inputtype="reset"></form>2.12表單

2.12.3重置和提交

如果瀏覽者想清除輸入到表單中的全部內(nèi)容，可以43

在頁面中有些地方需要列出幾個項目，讓瀏覽者通過選擇鈕選擇項目。選擇鈕可以是復選框（checkbox）或單選鈕（radio）。用<input>標記的type屬性可設置選擇鈕的類型，屬性value可設置該選擇鈕的控制初值，用以告訴表單制作者選擇結(jié)果。用checked表示是否為缺省選中項。name屬性是控制名，同一組的選擇鈕的控制名是一樣的。

【例2-33】

2.12表單

2.12.4復選框和單選鈕

在頁面中有些地方需要列出幾個項目，讓瀏覽者44

當瀏覽者選擇的項目較多時，如果用選擇鈕來選擇，占頁面的區(qū)域就會較多?？梢杂?lt;select>標記和<option>標記來設置選擇欄。選擇欄可分為兩種，即彈出式和字段式。<select>標記的格式為：<selectsize="x"name="控制操作名"multiple><option…><option…>…</select>

2.12表單

2.12.5選擇欄<select>

當瀏覽者選擇的項目較多時，如果用選擇鈕來45其中：size 取數(shù)字，表示在帶滾動條的選擇欄中一次可見的列表項數(shù)name 控制操作名multiple 不帶值，加上本項表示可選多個選項，否則只能單選<option>標記的格式為：<optionselectvalue="可選擇的內(nèi)容">其中：select不帶值，加上本項表示該項是預置的value指定控制操作的初始值，缺省時初值為option中的內(nèi)容表示選項值

【例2-34】2.12表單

2.12.5選擇欄<select>

其中：2.12表單46

在意見反饋欄中往往需要瀏覽者發(fā)表意見和建議，提供的輸入?yún)^(qū)域一般較大，可以輸入較多的文字。使用<TEXTAREA>標記可以設置允許成段文字的輸入。格式為：

<textareaname="控制操作名"rows="行數(shù)"cols="列數(shù)">多行文本</textarea>其中的行數(shù)和列數(shù)是指不用滾動條就可看到的部分。

2.12表單

2.12.6多行文字的輸入textarea>...</textarea>

在意見反饋欄中往往需要瀏覽者發(fā)表意見和建議，472.12表單

2.12.7<fieldset>標簽fieldset元素可將表單內(nèi)的相關元素分組。<fieldset>標簽將表單內(nèi)容的一部分打包，生成一組相關表單的字段。當一組表單元素放到<fieldset>標簽內(nèi)時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果，或者甚至可創(chuàng)建一個子表單來處理這些元素。<fieldset>標簽沒有必需的或唯一的屬性。<legend>標簽為fieldset元素定義標題。2.12表單

2.12.7<fieldset>標簽48<form><fieldset><legend>healthinformation</legend>height:<inputtype="text"/>weight:<inputtype="text"/></fieldset></form><form>49最常用的字符實體最常用的字符實體50其他一些常用的字符實體

其他一些常用的字符實體

51根據(jù)HTML標準，僅有幾個標簽在HTML的頭部分是合法的根據(jù)HTML標準，僅有幾個標簽在HTML的頭部分是合52Meta標簽META標簽是HEAD區(qū)的一個輔助性標簽，提供用戶不可見的信息。通常用來為搜索引擎定義頁面主題，定義用戶瀏覽器上的cookie，鑒別作者，設定頁面格式，標注內(nèi)容提要和關鍵字。一個好的MTEA標簽設計可以大大提高個人網(wǎng)站被搜索到的可能性。Meta標簽META標簽是HEAD區(qū)的一個輔助性標簽，提供用53Meta標簽可分為:HTTP標題信息和頁面描述信息

HTTP—EQUIV：類似于HTTP的頭部協(xié)議，它回應給瀏覽器一些有用的信息，以幫助正確和精確的顯示網(wǎng)頁內(nèi)容。主要類型有：1、顯示字符集的設置Content-Type和Content-Language<Metahttp-equiv=“Content-Type”Content=“text/html;Charset=gb2312”>Meta標簽可分為:HTTP標題信息和頁面描述信息

HTTP542、刷新(Refresh)讓網(wǎng)頁多長時間刷新自己，或在多長時間后網(wǎng)頁自動鏈接到其它網(wǎng)頁。<Metahttp-equiv=“Refresh”Content=“30”><Metahttp-equiv=“Refresh”Content=“10;Url=”>2、刷新(Refresh)553、期限(Expires)指定網(wǎng)頁在緩存中的過期時間，一旦網(wǎng)頁過期，必須到服務器上重新調(diào)閱。<Metahttp-equiv=“expires”content=“wed,26feb201010:10:10GMT”>4、cach模式(Pragma)禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容<Metahttp-equiv=“pragma”content=“no-cach”>3、期限(Expires)565、Set-Cookie瀏覽器訪問某個頁面時會將它存在緩存中，下次訪問時就可以從緩存中讀取，以提高速度。通常HTML文件沒有必要禁用緩存，對于ASP等頁面，就可以使用禁用緩存，因為每次看到的頁面都是在服務器動態(tài)生成的。如果網(wǎng)頁過期，那么Cookie將被刪除。<Metahttp-equiv=“Set-Cookie”content=“cookievalue=xxx”>5、Set-Cookie576、顯示窗口的設置（Window-target）強制頁面在當前窗口以獨立頁面顯示。<Metahttp-equiv=“Window-target”,content=“_top”>6、顯示窗口的設置（Window-target）58<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="author"content=""><metaname="revised"content="DavidYang,8/1/07">

<metaname="generator"content="Dreamweaver8.0en"></head><body><p>本文檔的meta屬性標識了創(chuàng)作者和編輯軟件。</p></body></html><html>59Name變量描述網(wǎng)頁，對應于網(wǎng)頁內(nèi)容，以便于搜索引擎機器人查找、分類。Name的Value值，指定所提供信息的類型。1、Keywords為搜索引擎提供關鍵字列表<Metaname=“keywords”content=“關鍵字1，……”>Name變量602、簡介(Description)告訴搜索引擎你的網(wǎng)站主要內(nèi)容<Metaname=“Description”content=“我的個人簡歷”>3、機器人向?qū)?Robots)告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引，默認為ALL。4、作者(Auhor)標注網(wǎng)頁的作者或制作組<Metaname=“Auhor”content=“xx,abc@>2、簡介(Description)61Base（基鏈接）插入網(wǎng)頁基鏈接屬性<basehref=target=“_blank”>網(wǎng)頁上的所有相對路徑在鏈接時都將在前面加上href=/Base（基鏈接）插入網(wǎng)頁基鏈接屬性62<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="HTMLexamples"><metaname="keywords"content="HTML,DHTML,CSS,XML,XHTML,JavaScript,VBScript"></head><body><p>本文檔的meta屬性描述了該文檔和它的關鍵詞。</p></body></html><html>63結(jié)束語當你盡了自己的最大努力時，失敗也是偉大的，所以不要放棄，堅持就是正確的。WhenYouDoYourBest,FailureIsGreat,SoDon'TGiveUp,StickToTheEnd結(jié)束語64謝謝大家榮幸這一路，與你同行It'SAnHonorToWalkWithYouAllTheWay演講人：XXXXXX時間：XX年XX月XX日

謝謝大家演講人：XXXXXX65第2章網(wǎng)頁制作基礎語言――HTML課件662.1HTML簡介 2.2HTML文檔的基本結(jié)構(gòu) 2.3網(wǎng)頁文件的創(chuàng)建過程 2.4段落標記 2.5文字標記 2.6超鏈接 2.7圖片 2.8列表 2.9表格 2.10字幕、音頻和視頻 2.11框架（多窗口頁面） 2.12表單

第2章網(wǎng)頁制作基礎語言——HTML2.1HTML簡介第2章網(wǎng)頁制作基礎語言——HTM67

2.1HTML簡介HTML是HypertextMark68

2.2.1標記及其屬性2.2HTML文檔的基本結(jié)構(gòu)69

HTML文檔是一種純文本格式的文件，HTML文檔的基本結(jié)構(gòu)為：<html><head><title>網(wǎng)頁的標題</title></head><body>網(wǎng)頁的內(nèi)容</body></html>

2.2HTML文檔的基本結(jié)構(gòu)

2.2.2HTML的基本結(jié)構(gòu)HTML文檔是一種純文本格式的文件，701、HTML文檔標記<html>……</html>2、HTML文檔頭標記<head>……</head>這一標記在HTML文檔中不是必須的，若無，瀏覽器也能照常解釋文件。3、HTML文檔標題標記<title>……</title>這一標記定義的內(nèi)容不在瀏覽器窗口顯示，而是顯示在瀏覽器的標題欄中。4、HTML文檔主體標記<body>……</body>這一標記定義了網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個網(wǎng)頁的核心。Bgcolor網(wǎng)頁的背景色Text設置非可鏈接文字的顏色Link設置尚未被訪問過的超鏈接的顏色，默認為藍色Alink設置超鏈接被訪問瞬間的顏色，默認為藍色Vlink設置已被訪問過的超鏈接的顏色，默認為藍色Background設置網(wǎng)頁的背景圖像Leftmargin設置網(wǎng)頁左邊的空白，單位為像素值Topmargin設置網(wǎng)頁上方的空白，單位為像素值1、HTML文檔標記<html>……</html>71用最簡單的“記事本”來編輯網(wǎng)頁。①打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單中的“附件”子菜單中單擊“記事本”。②創(chuàng)建新文件，并按HTML語言規(guī)則編輯。在“記事本”窗口中輸入HTML語言，輸入的內(nèi)容。③保存網(wǎng)頁。打開“記事本”的“文件”菜單，選擇“保存”。此時將出現(xiàn)“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，如mypage1.html；在“保存類型”下拉列表框中選擇“文本文檔”。最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤中。

2.3.1編輯和保存網(wǎng)頁

用最簡單的“記事本”來編輯網(wǎng)頁。2.3網(wǎng)頁72

2.3網(wǎng)頁文件的創(chuàng)建過程

2.3.2預覽網(wǎng)頁

通過編輯可以得到一個.html文件，要想使73注釋標記的格式為：注釋并不局限于一行，長度不受限制。結(jié)束標記與開始標記可以不在一行上。

【例2-2】

2.4段落標記2.4.1注釋標記

注釋標記的格式為：2.4段落標記74

2.4段落標記2.4.3段落標記<p>...</p>段落標記放在一個段落的頭尾，用75

size設定線條粗細，以像素為單位，默認為2。width設定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當前窗口的百分比）。

color設定線條色彩，默認為黑色?？梢圆捎蒙实拿Q。色彩可以用相應英文單詞或以“#”引導的一個十六進制數(shù)代碼來表示?！纠?-5】

2.4段落標記2.4.5水平線標記<hr>

在頁面中插入一條水平標尺線，可以77

2.5文字標記

2.5.1標題文字標記<h#>…</h#>

在頁面中，標題是一段文字內(nèi)容的核心，所以總78

【例2-8】

【例2-9】

【例2-10】

2.5文字標記

2.5.2字體標記<font>...</font>

在網(wǎng)頁中為了增強頁面的層次，其中的文字可79

2.6超鏈接

超鏈接（Hyperlink）是網(wǎng)80

2.6超鏈接2.6.1錨點標記<a>...</a>錨點（anchor）標記由<a>81target屬性設定鏈接被單擊后結(jié)果所要打開窗口的方式。可選值為：_blank，_parent，_self，_top。_blank-在一個新的未命名的窗口載入文檔_self-在相同的框架或窗口中載入目標文檔_parent-把文檔載入父窗口或包含了超鏈接引用的框架的框架集_top-把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架

target屬性設定鏈接被單擊后結(jié)果所要打開窗口的方式?？蛇x821.

鏈接到同一目錄內(nèi)的網(wǎng)頁文件鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為：<ahref="目標文件名.html">熱點文本</a>【例2-11】

2.鏈接到下一級目錄中的網(wǎng)頁文件鏈接到下一級目錄中網(wǎng)頁文件的格式為：

2.6超鏈接2.6.2指向其他頁面的鏈接1.鏈接到同一目錄內(nèi)的網(wǎng)頁文件2.683

如果要建立指向其他頁面某處的文本，格式為：<ahref="URL#記號名">熱點文本</a>要在跳轉(zhuǎn)到的位置處加上鏈

人人文庫> 全部分類> 教育資料 > 輔導培訓

溫馨提示

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

第2章網(wǎng)頁制作基礎語言――HTML課件

文檔簡介

溫馨提示

最新文檔

評論

第2章網(wǎng)頁制作基礎語言――HTML課件

文檔簡介

溫馨提示

最新文檔

評論

相關文檔