網(wǎng)頁(yè)設(shè)計(jì)與制作教程機(jī)械工業(yè)出版社同名教材配套電子教案2011.8網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第1頁(yè)!2.1HTML簡(jiǎn)介 2.2HTML文檔的基本結(jié)構(gòu) 2.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程 2.4段落標(biāo)記 2.5文字標(biāo)記 2.6超鏈接 2.7圖片 2.8列表 2.9表格 2.10字幕、音頻和視頻 2.11框架（多窗口頁(yè)面） 2.12表單

第2章網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第2頁(yè)!

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

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

2.1HTML簡(jiǎn)介網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第3頁(yè)!

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

2.2.1標(biāo)記及其屬性網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第4頁(yè)!用最簡(jiǎn)單的“記事本”來(lái)編輯網(wǎng)頁(yè)。①打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單中的“附件”子菜單中單擊“記事本”。②創(chuàng)建新文件，并按HTML語(yǔ)言規(guī)則編輯。在“記事本”窗口中輸入HTML語(yǔ)言，輸入的內(nèi)容。③保存網(wǎng)頁(yè)。打開“記事本”的“文件”菜單，選擇“保存”。此時(shí)將出現(xiàn)“另存為”對(duì)話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，如mypage1.html；在“保存類型”下拉列表框中選擇“文本文檔”。最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤中。

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

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

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第5頁(yè)!注釋標(biāo)記的格式為：<!--注釋內(nèi)容-->注釋并不局限于一行，長(zhǎng)度不受限制。結(jié)束標(biāo)記與開始標(biāo)記可以不在一行上。

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

【例2-2】

2.4段落標(biāo)記2.4.1注釋標(biāo)記<!--...-->

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第6頁(yè)!

設(shè)定文字、圖像、表格的擺放位置。當(dāng)在許多段落中設(shè)置對(duì)齊方式時(shí)，常使用<div>…</div>標(biāo)記。定位標(biāo)記的格式為：<divalign="left|center|right">文本、圖像或表格</div>其中屬性align用來(lái)設(shè)置文本塊、一段文字或標(biāo)題在網(wǎng)頁(yè)上的對(duì)齊方式：left、center和right。缺省時(shí)默認(rèn)為left?！纠?-4】2.4段落標(biāo)記2.4.4定位標(biāo)記<div>…</div>網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第7頁(yè)!

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

2.5文字標(biāo)記

2.5.1標(biāo)題文字標(biāo)記<h#>…</h#>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第8頁(yè)!

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

2.6超鏈接

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第9頁(yè)!1.

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

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

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

2.6超鏈接2.6.2指向其他頁(yè)面的鏈接網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第10頁(yè)!

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

2.6.5指向電子郵件的鏈接

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

例如，E-mail地址是goodlook@sohu.，建立如下鏈接：免費(fèi)電話:80012345678信箱:<ahref="mailto:goodlook@sohu.">goodlook@sohu.</a>2.6超鏈接2.6.4指向下載文件的鏈接網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第11頁(yè)!

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

如果不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示?？墒褂?lt;img>標(biāo)記的width和height屬性來(lái)設(shè)置圖片的大小。width和height屬性的屬性值可取像素?cái)?shù)，也可取百分?jǐn)?shù)?！纠?-15】

【例2-16】

2.7圖片2.7.2圖片標(biāo)記<img>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第12頁(yè)!

圖片也可作為熱點(diǎn)，單擊圖片則跳轉(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用圖片作為超鏈接

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第13頁(yè)!使用<OL>標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記仍為<li>。格式為：<oltype="符號(hào)類型"><litype="符號(hào)類型1">表項(xiàng)1<litype="符號(hào)類型2">表項(xiàng)2…</ol>有序列表整個(gè)表項(xiàng)與上下段文本之間各有一行空白；列表項(xiàng)目向右縮進(jìn)并左對(duì)齊；各表項(xiàng)前帶順序號(hào)?！纠?-19】

列表嵌套把主頁(yè)分為多個(gè)層次，例如書的目錄，給人以很強(qiáng)的層次感。有序列表和無(wú)序列表不僅可以自身嵌套，而且彼此可互相嵌套。【例2-20】

2.8列表

2.8.2有序列表標(biāo)記<ol><li>...</ol>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第14頁(yè)!

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

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

2.9表格

2.9.2表格內(nèi)文字的對(duì)齊方式網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第15頁(yè)!

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

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

2.9表格

2.9.4表格的色彩和圖片背景

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第16頁(yè)!

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

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

2.10.2音頻網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第17頁(yè)!

用瀏覽器可以播放的格式有：MOV格式、AVI格式。1.鏈接一個(gè)視頻文件<a>...</a>與鏈接音頻文件一樣，可將將將視頻文件做成一個(gè)鏈接。其格式為：<ahref="視頻文件地址">熱點(diǎn)文本</a>例如：播放一段視頻：<ahref="wele.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視頻

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第18頁(yè)!1.<frameset>標(biāo)記<frameset>標(biāo)記用來(lái)定義一個(gè)框架組的屬性，格式為：

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

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

2.11框架（多窗口頁(yè)面）網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第19頁(yè)!2.<frame>標(biāo)記<frame>標(biāo)記用于給各個(gè)框架指定頁(yè)面的內(nèi)容，也就是，它將各個(gè)框架和包含其內(nèi)容的那個(gè)文件聯(lián)系在一起。<frame>是一個(gè)單標(biāo)記，格式為：

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

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

【例2-29】

【例2-30】

2.11框架（多窗口頁(yè)面）網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第20頁(yè)!另外，“框架名”有4個(gè)特殊的值，分別實(shí)現(xiàn)4類特殊的操作：target="_blank"：鏈接的目標(biāo)文件被顯示在一個(gè)新的沒(méi)有名字的瀏覽器窗口中。target="_self"：鏈接的目標(biāo)文件被顯示在當(dāng)前框架窗口中，代替正在顯示的熱點(diǎn)文本所在的那個(gè)文件，是省略target屬性的默認(rèn)值。target="_top"：鏈接的目標(biāo)文件被顯示在整個(gè)瀏覽器窗口（取消了框架）。target=“_parent”：當(dāng)框架嵌套時(shí)，鏈接的目標(biāo)文件被顯示在父框架中；否則，被顯示在整個(gè)瀏覽器窗口中?！纠?-31】

2.11框架（多窗口頁(yè)面）2.11.2框架間的鏈接

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第21頁(yè)!

使用<input>標(biāo)記的type屬性，可以在表單中加入表項(xiàng)，并控制表項(xiàng)的風(fēng)格。type屬性值為text，則輸入的文本以標(biāo)準(zhǔn)的字符顯示；type屬性值為password，則輸入的文本顯示為“*”。在表項(xiàng)前應(yīng)加入表項(xiàng)的名稱，如“您的姓名”等，以告訴瀏覽者在隨后的表項(xiàng)中輸入的內(nèi)容?！纠?-32】

2.12表單

2.12.2文字和密碼的輸入網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第22頁(yè)!

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

【例2-33】

2.12表單

2.12.4復(fù)選框和單選鈕

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第23頁(yè)!其中：size 取數(shù)字，表示在帶滾動(dòng)條的選擇欄中一次可見的列表項(xiàng)數(shù)name 控制操作名multiple 不帶值，加上本項(xiàng)表示可選多個(gè)選項(xiàng)，否則只能單選<option>標(biāo)記的格式為：<optionselectvalue="可選擇的內(nèi)容">其中：select不帶值，加上本項(xiàng)表示該項(xiàng)是預(yù)置的value指定控制操作的初始值，缺省時(shí)初值為option中的內(nèi)容表示選項(xiàng)值

【例2-34】2.12表單

2.12.5選擇欄<select>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第24頁(yè)!

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

【例2-1】2.2HTML文檔的基本結(jié)構(gòu)

2.2.2HTML的基本結(jié)構(gòu)網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第25頁(yè)!

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

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

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

2.3.2預(yù)覽網(wǎng)頁(yè)

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第26頁(yè)!

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

2.4段落標(biāo)記2.4.3段落標(biāo)記<p>...</p>網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第27頁(yè)!

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

size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。width設(shè)定線段長(zhǎng)度，可以是絕對(duì)值（以像素為單位）或相對(duì)值（相對(duì)于當(dāng)前窗口的百分比）。

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

2.4段落標(biāo)記2.4.5水平線標(biāo)記<hr>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第28頁(yè)!

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

【例2-8】

【例2-9】

【例2-10】

2.5文字標(biāo)記

2.5.2字體標(biāo)記<font>...</font>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第29頁(yè)!

錨點(diǎn)（anchor）標(biāo)記由<a>定義，它在網(wǎng)頁(yè)上建立超文本鏈接。通過(guò)單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源（目標(biāo)資源），這個(gè)目標(biāo)資源有惟一的地址（URL）。具有以上特點(diǎn)的詞、句或圖片就稱為熱點(diǎn)。<a>標(biāo)記的格式為：<ahref="URL"target="打開窗口方式">熱點(diǎn)</a>href屬性為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。如果要?jiǎng)?chuàng)建一個(gè)不鏈接到其他位置的空超鏈接，可用“#”代替URL，即<ahref="#">熱點(diǎn)</a>。target屬性設(shè)定鏈接被單擊后結(jié)果所要開始窗口的方式?？蛇x值為：_blank，_parent，_self，_top。

2.6超鏈接2.6.1錨點(diǎn)標(biāo)記<a>...</a>網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第30頁(yè)!

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

如果要建立指向其他頁(yè)面某處的文本，格式為：<ahref="URL#記號(hào)名">熱點(diǎn)文本</a>要在跳轉(zhuǎn)到的位置處加上鏈接標(biāo)記：<aname="記號(hào)名">文字串</a>如果鏈接指向其他文件的某一部分，格式為：<ahref="目標(biāo)文件路徑/文件名#記號(hào)名">熱點(diǎn)文本</a>2.6超鏈接2.6.3指向本頁(yè)中的鏈接網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第31頁(yè)!1.設(shè)置背景色格式為：<bodybgcolor="色彩值">“色彩值”可以為色彩的英文名或相應(yīng)十六進(jìn)制值。2.用圖片作為背景使用<body>標(biāo)記的background屬性，可為網(wǎng)頁(yè)鋪上背景圖片。格式為：<bodybackground="圖片文件名">background取值為一個(gè)圖片文件名，并且要指出文件存放的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。圖片文件可為GIF格式或JPEG格式的文件。在瀏覽器中，作為背景的圖片將按原來(lái)的大小復(fù)制，重復(fù)鋪滿整個(gè)網(wǎng)頁(yè)?！纠?-14】

2.7圖片2.7.1網(wǎng)頁(yè)的背景網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第32頁(yè)!

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

【例2-17】

2.7圖片2.7.2圖片標(biāo)記<img>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第33頁(yè)!

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

2.8列表

2.8.1無(wú)序列表標(biāo)記<ul><li>...</ul>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第34頁(yè)!

最簡(jiǎn)單的表格僅包括行和列。表格的標(biāo)記為<table>，行的標(biāo)記為<tr>，表項(xiàng)的標(biāo)記為<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>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td>…<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></table>【例2-21】

【例2-22】

2.9表格

2.9.1簡(jiǎn)單表格

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第35頁(yè)!

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

2.9表格

2.9.3表格在頁(yè)面中的對(duì)齊方式

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第36頁(yè)!

流動(dòng)字幕標(biāo)記的格式為：

<marqueedirection="left|right|up|down"behavior="scroll|slide|alternate"loop="i|-1|infinite"hspace="m"vspace="n"scrollamount="i"scrolldelay="j"align="top|middle|bottom"bgcolor="色彩"width="x|x%"height="y">流動(dòng)文字或（和）圖片</marquee>

【例2-26】

2.10字幕、音頻和視頻

2.10.1字幕標(biāo)記<marquee>

網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第37頁(yè)!

2.內(nèi)嵌音頻播放插件<embed>通過(guò)內(nèi)嵌音頻播放插件可以在瀏覽器中出現(xiàn)控制面板，也可作為背景音樂(lè)。其格式為：<embedsrc="音樂(lè)文件地址"autostart="true|false"loop="true|false|n"startime="分:秒"volume="0~100"width="x|x%"height="y|y%"hidden="true"controls="console|smallconsole">

【例2-27】

3.IE中的背景音樂(lè)

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

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

2.10字幕、音頻和視頻

2.10.2音頻網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第38頁(yè)!

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

框架的建立使用<frameset>、<frame>兩個(gè)標(biāo)記。<frameset>用來(lái)劃分窗格，<frame>標(biāo)記用來(lái)聲明其中框架頁(yè)面的內(nèi)容?？蚣艿幕窘Y(jié)構(gòu)為：<html><head>...</head><frameset><!--劃分窗格--><framesrc="url"><!--定義第1個(gè)窗格--><framesrc="url"><!--定義第2個(gè)窗格-->…</frameset></html>2.11框架（多窗口頁(yè)面）網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第39頁(yè)!框架有橫向和縱向之分。對(duì)一個(gè)框架來(lái)說(shuō)，其大小是很重要的。<frameset>的rows和cols屬性用于設(shè)定橫向分割和縱向分割的框架數(shù)目。例如，要建立有三個(gè)橫向框架的頁(yè)面，可寫為：

<framesetrows="x1|y1%|z1*,x2|y2%|z2*,x3|y3%|z3*">2.11框架（多窗口頁(yè)面）網(wǎng)頁(yè)制作基礎(chǔ)語(yǔ)言——HTML共45頁(yè)，您現(xiàn)在瀏覽的是第40頁(yè)!

在很多網(wǎng)頁(yè)中，常在一個(gè)框架中顯示一個(gè)所有網(wǎng)頁(yè)內(nèi)容的目錄，而通過(guò)單擊其中的某項(xiàng)，在另一個(gè)框架中顯示相應(yīng)內(nèi)容。這些目錄是熱點(diǎn)文本，需要在框架之間建立超鏈接，并指明顯示的目標(biāo)文件的框架。使用<a>的target屬性就可以控制目標(biāo)文