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

下載本文檔

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

文檔簡介

第2章

超文本標(biāo)記語言（HTML）

本章主要講解：

超文本標(biāo)記語言HTML的概念

HTM文檔結(jié)構(gòu)特征，編寫一般網(wǎng)頁的HTM文檔

HTML各類標(biāo)記的使用方法網(wǎng)上商店實例中的基本網(wǎng)頁編寫方法

2.1HTML概述

HTML（超文本標(biāo)記語言）是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對WWW上的各種信息進行標(biāo)注。當(dāng)用戶通過網(wǎng)頁瀏覽WWW上的信息時，瀏覽器會自動解釋存在于網(wǎng)頁源代碼中的這些標(biāo)記的含義，并按照這些標(biāo)記約定的格式在屏幕上顯示這些被標(biāo)記的內(nèi)容，從而形成網(wǎng)頁。

2.1HTML概述HTML文件內(nèi)容實際上是由一系列的標(biāo)記段相互嵌套、或者相互并列形成，在每一個標(biāo)記段之中包含著網(wǎng)頁顯示時需要的文字、資源地址、腳本語言程序。因此，從文檔結(jié)構(gòu)上看，HTM文檔由標(biāo)記段組成，每一個標(biāo)記段稱為文檔元素。2.1HTML概述組成HTM文檔的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”，

即它有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始鏈接簽（StartTag），元素結(jié)束標(biāo)記叫做結(jié)尾鏈接簽（EndTag），在起始鏈接簽和結(jié)尾鏈接簽中間的部分是元素體。

每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。以下是一個簡單的HTM文檔“p2-1.htm”內(nèi)容，而將它在IE瀏覽器中打開顯示的結(jié)果如圖所示。

2.1HTML概述<HTML><HEAD><TITLE>武漢工業(yè)學(xué)院</TITLE></HEAD><BODYbgcolor=yellow><P>以此表示一份簡單HTM文檔的結(jié)構(gòu)以及網(wǎng)頁顯示形式</P></BODY></HTML>2.1HTML概述用于創(chuàng)建或者編輯HTM文檔的軟件工具很多，既可以選用具有簡單文本文件編輯功能的文字處理軟件，如MicrosoftNotePad（記事本）、MicrosoftWordPad（寫字板）、MicrosoftWord等等；也可以選用具有網(wǎng)頁文件編輯功能的專用軟件，如MicrosoftFrontPage、DreamWear等等。具有網(wǎng)頁文件編輯功能的專用軟件無疑是編輯HTM文檔最方便的工具。書中所有HTM文檔源代碼均采用MicrosoftNotePad（記事本）格式給出。

2.2HTM文檔結(jié)構(gòu)一個基本HTM文檔的結(jié)構(gòu)應(yīng)該如圖所示。2.2.1<HTML>標(biāo)記段在<HTML>…</HTML>標(biāo)記段中，應(yīng)該并列嵌套<HEAD>…</HEAD>標(biāo)記段和<BODY>…</BODY>標(biāo)記段，分別用以顯示網(wǎng)頁窗口標(biāo)題及其網(wǎng)頁正文。其最簡單的常用形式為：<HTML><HEAD><TITLE>

瀏覽器窗口標(biāo)題寫在這里</TITLE></HEAD><BODY>HTM文檔的正文寫在這里</BODY></HTML>2.2.2<HEAD>標(biāo)記段<HEAD>…</HEAD>標(biāo)記段用于標(biāo)記<HTML>…</HTML>標(biāo)記段首，其間可以包含若干個<META>標(biāo)記和一個<TITLE>…</TITLE>標(biāo)記段。<META>標(biāo)記的典型用法為：<METAhttp-equiv="Content-Language"content="zh-cn"><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">分別表示本HTM文檔使用中國語言、其文本字符集為“GB2312”。2.2.3<BODY>標(biāo)記段<BODY>…</BODY>標(biāo)記段用于標(biāo)記HTM文檔正文，即，瀏覽器窗口中顯示的所有內(nèi)容均應(yīng)該書寫在<BODY>…</BODY>標(biāo)記段中。凡是涉及整個網(wǎng)頁的屬性設(shè)置，包括網(wǎng)頁背景色彩或者背景圖案、網(wǎng)頁上的各類文本色彩等等，均可在<BODY>標(biāo)記中通過設(shè)置相關(guān)屬性來設(shè)定。<BODY>標(biāo)記的常用文法格式為：<BODYbgcolor=#text=#link=#alink=#vlink=#background=“imageURL”>2.3HTML的格式標(biāo)記

HTML的格式標(biāo)記分為文本格式標(biāo)記與圖像格式標(biāo)記兩類。其中，文本格式標(biāo)記用于指定網(wǎng)頁顯示時，網(wǎng)頁上文字的顯示字體、字型、字號以及背景、前景色彩等特征；圖像格式標(biāo)記則用于指定網(wǎng)頁顯示時，網(wǎng)頁上圖像的顯示位置、尺寸邊框、以及當(dāng)圖像無法顯示時的代替文字等特征。2.3.1文本格式標(biāo)記符

在網(wǎng)頁的文字顯示中，如何指定標(biāo)題文字，指定正文的顯示格式，指定換行，指定關(guān)鍵文字的斜體、加粗、下劃線，指定文字的字體、字型、字號和色彩，等等，就需要應(yīng)用HTML的文本格式標(biāo)記符號。1．標(biāo)題文字標(biāo)記<Hn>…</Hn><HTML><HEAD><TITLE>標(biāo)題文字標(biāo)記實例

</TITLE></HEAD><BODY><h1>第一級文字標(biāo)題</h1><h2>第二級文字標(biāo)題</h2><h3>第三級文字標(biāo)題</h3><h4>第四級文字標(biāo)題</h4><h5>第五級文字標(biāo)題</h5><h6>第六級文字標(biāo)題</h6></BODY></HTML>2．預(yù)格式化文本標(biāo)記<pre>…</pre><HTML><HEAD><TITLE>預(yù)格式化文本標(biāo)記實例</TITLE></HEAD><BODY>

段首預(yù)置的空格被取消了，且行尾的

回車符也被忽略了。<pre>段首預(yù)置的空格被保留著，且行尾的

回車符也被保留著。</pre></BODY></HTML>3．強制換行標(biāo)記<br>和段落標(biāo)記<p>…</p>段落標(biāo)記<p>…</p>的作用是通知瀏覽器：位于<p>…</p>標(biāo)記之間的文本形成一個段落，需要置于下一段落的開始處顯示。常用的段落標(biāo)記屬性是align，一般語法格式為：<palign=str>…</p>其中，str的取值可以為：“l(fā)eft”、“center”或“right”分別指定本段落顯示在頁面窗口的居左、居中或居右。

4．文本修飾標(biāo)記<HTML><HEAD><TITLE>換行標(biāo)記、段落標(biāo)記與文本修飾標(biāo)記實例</TITLE></HEAD><BODY><strong>位于strong標(biāo)記對之間的文字</strong>被<br>加重了!<u>由于br的作用</u>導(dǎo)致<palign="center">換了一行。p標(biāo)記導(dǎo)致此處自成一段且居中。</p><b>由于段落標(biāo)記</b><s>又換行了。</s><br><i>請注意幾種文字修飾</i>的效果。</BODY></HTML>

5．字體型號標(biāo)記<font>…</font>

<HTML><HEAD><TITLE>字體型號標(biāo)記實例</TITLE></HEAD><BODY><fontface="宋體"size=10color=#ff0000>10號紅色宋體文字</font><br><fontface="黑體"size=10color=#00ff00>10號綠色黑體文字</font><br><fontface="隸書"size=10color=#0000ff>10號藍色隸書文字</font><br><fontface="宋體"size=6color=#808000>6號橄欖色宋體文字</font><br>

默認文字顯示效果</BODY></HTML>2.3.2圖像格式標(biāo)記符<HTML><HEAD><TITLE>圖像格式標(biāo)記實例</TITLE></HEAD><BODY><imagesrc="fh.gif">

忽略其它屬性賦值，圖像顯示無邊框，以原始尺寸居左，同行文字居下。<br><imagesrc="fh.gif"border=5height=60width=110align=middle>

指定圖框、指定圖像顯示尺寸、指定同行文字居中。<br><imagealt="圖像無法顯示"src="fh.gif"border=5align=right>

指定替換文字、指定圖框、指定圖像居右顯示，由于能夠顯示圖像，替換文字不顯示。<br><imagealt="圖像無法顯示"src="fh.gtf"border=5>

由于圖像文件名拼寫錯誤，不能顯示圖像，因而顯示替換文字。<br></BODY></HTML>

2.3.3滾動對象標(biāo)記符

網(wǎng)頁上的滾動對象是指在網(wǎng)頁上左右移動的文字或者圖像，這些對象的存在增添了網(wǎng)頁的生動性。設(shè)定滾動對象的方法是，應(yīng)用<marquee>…</marquee>標(biāo)記段將需要滾動的對象括起來。

<marquee>…</marquee>標(biāo)記段的一般文法為：<marqueedirection=#bihavior=#loop=#scrollamount=#scrolldelay=#align=#bgcolor=#>…</marquee>

2.4HTML的超文本鏈接標(biāo)記符

所謂包含超文本鏈接是指，在HTM文檔中含有可直接轉(zhuǎn)移至網(wǎng)絡(luò)上任一指定資源的指針，而這個指針則稱為超文本鏈接指針。使用<a>…</a>標(biāo)記段即可在HTM文檔中設(shè)置超文本鏈接指針。

2.4.1統(tǒng)一資源定位器URL所有的網(wǎng)絡(luò)資源均具有唯一標(biāo)識，均可采用統(tǒng)一資源定位器（URL，UniformResourceLocator）予以定位。在網(wǎng)絡(luò)系統(tǒng)中，資源的唯一標(biāo)識須以如下形式確定：protocol://[:port]/directory/filename一個典型的URL為/，它表示武漢工業(yè)學(xué)院WWW服務(wù)器上的起始HTML文件。2.4.2在文本上設(shè)定超文本鏈接指針

超文本鏈接指針可以Web頁上任一對象作為載體，使得操作者通過鼠標(biāo)單擊著一載體來實現(xiàn)指定網(wǎng)絡(luò)資源的調(diào)用。在文本上設(shè)定超文本鏈接指針是指，將超文本鏈接指針的載體設(shè)定在Web頁中的文字上。

1．鏈接到其他HTM文檔在HTML文檔中設(shè)定超文本鏈接指針的標(biāo)記為：<a>…</a>。其基本文法格式為：<ahref=URLtarget=locate>text</a>其中，text可以是文字或其他媒體形式的信息，構(gòu)成超文本鏈接指針的載體。當(dāng)用戶鼠標(biāo)單擊text時，瀏覽器就會調(diào)用由href屬性值“URL”所定位的目標(biāo)。因此，href稱為<a>…</a>標(biāo)記的資源定位屬性。<a>…</a>標(biāo)記中的target屬性稱為目標(biāo)屬性，用于指定新引用的資源顯示在哪一個窗口中。2．鏈接到同一個文件中的其他文本處設(shè)定一個本地鏈接需要兩個步驟，首先為跳轉(zhuǎn)目的地設(shè)定標(biāo)識（Name），文法一般格式為：<aname=str>…</a>其中，str屬性取值為一個字符串，為跳轉(zhuǎn)目的地名稱。跳轉(zhuǎn)目的地可以是HTM文當(dāng)中的任一位置，參見本節(jié)HTM文檔源代碼第7行和第15行。在設(shè)定好跳轉(zhuǎn)目的地后，即可在跳轉(zhuǎn)起始處設(shè)定超文本鏈接指針，將<a>標(biāo)記中的href屬性值設(shè)定為需要跳轉(zhuǎn)的目的地址名稱，參見本節(jié)HTM文檔源代碼第11行。2.4.3在圖像上設(shè)定超文本鏈接指針在HTM文檔中，超文本鏈接指針還可以放置在圖像對象上。操作者可以通過在圖像上單擊鼠標(biāo)左鍵來實現(xiàn)網(wǎng)絡(luò)資源的引用。其一般文法格式為：<ahref=URL><imagesrc=imageURL></a>其中，<image>標(biāo)記設(shè)置承放超文本鏈接指針的圖像對象。關(guān)于各種常用超文本鏈接標(biāo)記應(yīng)用的實例，請閱讀以下HTM文檔源代碼“p2-7.htm”，對照圖所示的瀏覽器輸出效果領(lǐng)會<a>…</a>標(biāo)記設(shè)置的意義。

<HTML><HEAD><TITLE>超文本鏈接標(biāo)記實例</TITLE></HEAD><BODY><imagesrc="fh.gif"><aname="A1">跳轉(zhuǎn)目的地1。</a><br><br><br><br><br><br><br><imagesrc="fh.gif"border=2height=60width=110align=middle><ahref="p2-4.htm">在本窗口中引用“文本修飾標(biāo)記實例”。</a><br><ahref="p2-4.htm"target="_blank">在新窗口中引用“文本修飾標(biāo)記實例”。</a><br><ahref="#A1">向前跳轉(zhuǎn)至目的地1。</a>、<ahref="#A2">向后跳轉(zhuǎn)至目的地2。</a><ahref="p2-4.htm"target="_blank"><imagesrc="fh.gif"></a><br><br><br><br><br><br><imagealt="圖像無法顯示"src="fh.gtf"border=5><aname="A2">跳轉(zhuǎn)目的地2。</a><br></BODY></HTML>

2.5HTML的表格標(biāo)記符一般而言，表格總是成批具有相同結(jié)構(gòu)數(shù)據(jù)的最佳顯示形式。在網(wǎng)絡(luò)數(shù)據(jù)庫應(yīng)用系統(tǒng)中，諸如商店管理中的商品清單、客戶關(guān)系管理中的訂貨清單等等，都屬于這種成批的、具有相同結(jié)構(gòu)的數(shù)據(jù)集合，因此，適合于表格形式顯示。另外，網(wǎng)絡(luò)數(shù)據(jù)庫應(yīng)用系統(tǒng)常常采用關(guān)系數(shù)據(jù)庫管理系統(tǒng)進行數(shù)據(jù)庫管理，而關(guān)系數(shù)據(jù)庫本身即以二維表作為組織數(shù)據(jù)的基本單元。因此，在網(wǎng)絡(luò)數(shù)據(jù)庫應(yīng)用系統(tǒng)中采用表格形式提供數(shù)據(jù)的顯示與操作界面，也就最為順理成章了。

2.5.1<TABLE>標(biāo)記段<TABLE>…</TABLE>標(biāo)記段必須完整地嵌套在<BODY>…</BODY>標(biāo)記段中。不同于關(guān)系數(shù)據(jù)庫中的二維表，HTM文檔中的表格對象中可以包含表格。也就說，<TABLE>…</TABLE>標(biāo)記段可以嵌套著<TABLE>…</TABLE>標(biāo)記段。<TABLE>標(biāo)記的一般文法格式為：<TABLEborder=#cellpadding=#cellspacing=#align=#width=#height=#vspace=#hspace=#>

2.5.2表格元素標(biāo)記符1．表格行標(biāo)記<tr>…</tr><tr>標(biāo)記定義一個表格行的開始，</tr>標(biāo)記結(jié)束一個表格行的定義。<tr>標(biāo)記的一般文法格式為：<tralign=#valign=#>

2．表格單元標(biāo)記<th>…</th>和<td>…</td>（1）<th>…</th>標(biāo)記<th>…</th>標(biāo)記定義作為表格標(biāo)題欄的表頭單元，文法格式為：<thbgcolor=#width=#height=#align=#valign=#colspan=#rowspan=#>…</th>

（2）<td>…</td>標(biāo)記<td>…</td>標(biāo)記定義表格中的數(shù)據(jù)單元，文法格式為：<tdbgcolor=#width=#height=#align=#valign=#colspan=#rowspan=#>…</td>

2.5.3表格標(biāo)題標(biāo)記<caption>…</caption><caption>…</caption>標(biāo)記的一般文法格式為：<captionalign=#valign=#>標(biāo)題文字</caption>align屬性設(shè)定標(biāo)題文字相對表格對象的水平對齊方式，可以取值為：“l(fā)eft”定義標(biāo)題文字相對表格對象左對齊，“center”定義標(biāo)題文字相對表格對象居中對齊，“right”定義標(biāo)題文字相對表格對象右對齊。valign屬性設(shè)定標(biāo)題文字相對表格對象的垂直位置，可以取值為：“top”定義標(biāo)題文字位于表格對象之上，“bottom”定義標(biāo)題文字位于表格對象之下。請察看下一節(jié)中的HTM文檔源代碼。

2.5.4表格對象應(yīng)用舉例2.6HTML的框架標(biāo)記符

HTML的框架標(biāo)記符用于將一個Web頁設(shè)定為若干個框架，允許每一個框架內(nèi)顯示一個HTM文檔。

<HTML>

<HEAD><TITLE>框架結(jié)構(gòu)實例</TITLE></HEAD><FRAMESETcols=280,*><noframes>此處為左部框架</noframes><framesrc=p2-7.htm><FRAMESETrows=40%,*><noframes>此處為右上框架</noframes><framesrc=p2-9.htm><noframes>此處為右下框架</noframes><framesrc=p2-5.htmname=right_down></FRMASET></FRAMESET></HTML>“p2-10.htm”文檔代碼在瀏覽器窗口中的運行效果2.6.1<FRAMESET>標(biāo)記段定義框架必須首先定義框架集合，使用的標(biāo)記符為：<FRAMESET>…</FRAMESET>。<FRAMESET>…</FRAMESET>標(biāo)記段的一般結(jié)構(gòu)形式為：<FRAMESET><noframes>…</noframes><framesrc=“URL”>…</FRAMESET>

2.6.1<FRAMESET>標(biāo)記段

其中，<FRAMESET>標(biāo)記的一般文法格式有兩種：（1）<FRAMESETcols=#framespacing=#bordercolor=#>…</FRAMESET>（2）<FRAMESETrows=#framespacing=#bordercolor=#>…</FRAMESET>

1．Cols屬性說明

文法格式（1）含有cols屬性，用于將頁面垂直劃分為若干個框架，其框架個數(shù)由cols屬性的參數(shù)個數(shù)確定，各個框架尺寸從左至右由cols屬性的相關(guān)參數(shù)值確定。

2．Rows屬性說明文法格式（2）含有rows屬性，用于將頁面水平劃分為若干個框架，其框架個數(shù)由rows屬性的參數(shù)個數(shù)確定，各個框架尺寸從上至下由rows屬性的相關(guān)參數(shù)值確定。

3．framespacing和bordercolor屬性說明

在文法格式（1）和文法格式（2）中都含有framespacing和bordercolor屬性，且其含義與作用都是相同的。framespacing屬性用于定義框架集中各個框架之間的間距。最小間距為0，若為framespacing屬性賦值小于0，則相鄰兩個框架會產(chǎn)生部分重疊。bordercolor屬性用于定義框架集中各框架間距的顏色。顏色值的設(shè)定，采用RGB方式完成。若框架間距≤0，則不會出現(xiàn)設(shè)定的顏色。

2.6.2<frame>標(biāo)記和<noframes>…</noframes>標(biāo)記段1．<frame>標(biāo)記<frame>標(biāo)記的一般文法格式為：<framesrc=#name=#noresizeframeborder=#marginwidth=#marginheight=#scrolling=#>

2．<noframes>…</noframes>標(biāo)記段頁面框架的概念出現(xiàn)在較晚一些時候，因此，至今仍有瀏覽器不予支持。于是，那些使用不支持頁面框架瀏覽器的操作者在遇到帶有框架的Web頁面時，可能什么也看不到。

2.7HTML的表單標(biāo)記段在HTML中，接受網(wǎng)頁上傳信息的主要對象是表單對象，網(wǎng)頁上的表單對象采用<FORM>…</FORM>標(biāo)記段定義。

2.7.1表單標(biāo)記段<FORM>…</FORM>表單標(biāo)記段的一般結(jié)構(gòu)形式為：<FORMaction="url"method=*><selectname=*><option>...</select><textarea>...</textarea><inputtype=*></FORM>

2.7.2表單標(biāo)記段中使用的標(biāo)記1．<input>標(biāo)記HTML中的INPUT標(biāo)記用于在表單中設(shè)置文本框、復(fù)選框、單選框、圖像對象和命令按鈕等控件。一般文法格式如下：<inputtype=#name=#value=#size=#maxlengt

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論