網(wǎng)頁設(shè)計HTML語言

1、1第第5章章 網(wǎng)頁設(shè)計語言HTML 學習目標 u HTML的概念u HTML的語法與結(jié)構(gòu) u 掌握HTML的各種標記符號及其屬性u 能夠制作簡單網(wǎng)頁 2第第5章章 網(wǎng)頁設(shè)計語言HTML 教學內(nèi)容 5.1 HTML概述 5.2 HTML的一般標記符 5.3 文本標記符 5.4 列表標記符 5.5 鏈接標記符 5.6 表格標記符 5.7 表單標記符 5.8 多媒體標記符本章小結(jié) 35.1 HTMLHTML概述概述 HTML（Hypertext Markup Language）是最基本的Web頁面開發(fā)語言，稱為文本文檔標記語言。它不需要編譯，由瀏覽器（如IE）解釋執(zhí)行。HTML是純文本文件，可采用W

2、indows中的記事本或?qū)懽职鍋砭庉?，也可以用DOS下的Edit等文本編輯器，保存時文件名的后綴為.htm或.html。 HTML的主要語法是元素和標簽。元素是符合文檔類型定義的文檔組成部分，如title（文檔標題）、img（圖像）、table（表格）等。元素名不區(qū)分大小寫。標簽用來規(guī)定元素的屬性和它在文檔中的位置。標簽分單獨出現(xiàn)和成對出現(xiàn)兩種情況。 例如：網(wǎng)頁設(shè)計教程 title是元素名，與之間的內(nèi)容都屬于元素title，是標簽，用來說明元素title。 45.2 HTMLHTML的一般標記符的一般標記符 一個簡單的網(wǎng)頁一個簡單的網(wǎng)頁 一個簡單網(wǎng)頁的制作一個簡單網(wǎng)頁的制作 第一步：打開Win

3、dows下的記事本。 第二步：輸入下面代碼 HTML網(wǎng)頁設(shè)計教程 你好! 歡迎瀏覽本網(wǎng)頁！ 第三步：以sample.htm為文件名保存文件并關(guān)閉該文件。 第四步：雙擊sample.htm文件，瀏覽器會自動執(zhí)行它。 55.2 HTMLHTML的一般標記符的一般標記符 HTMLHTML文件格式特點文件格式特點 1每一個HTML文件以開始，以結(jié)束，瀏覽器遇到標志時，會按照HTML的標準來解釋后面的文本，直到才停止解釋。和是成對出現(xiàn)的，所有的文本和命令都在它們之間。 2是網(wǎng)頁的頭部標記，通常緊跟之后。與之間的文本是整個文件的序言，不屬于HTML文件本體部分，不在瀏覽器屏幕中顯示。 3用來說明文件標題，

4、TITLE元素的格式為：文件題目 ，一個好的題目應(yīng)該使讀者能從中判斷出該文件的大概內(nèi)容。瀏覽時文件題目將顯示在IE瀏覽器標題欄上。中不包含其他標記。 4和之間是網(wǎng)頁主體內(nèi)容。在標簽中可以規(guī)定整個文檔的一些基本屬性，如：“bgcolor” 屬性，用于指定文檔的背景顏色,“text” 屬性用于指定文檔中文字的顏色。 5所有標記不得交叉，如與必須包含在與中間。 6HTML文件對書寫格式要求不太嚴格。65.3 文本標記符文本標記符 常用文本標記符常用文本標記符標 簽 作 用 是單獨出現(xiàn)的，作用相當于插入回車符。如果沒有換行標簽，Web瀏覽器窗口將根據(jù)瀏覽器窗口的寬度盡可能長的顯示文本。 標簽是成對出現(xiàn)

5、的，夾在和之間的文字是文檔中的標題。標題文字都用黑體顯示，上級標題總比下面各級標題更大些、更粗些。標簽共分六級，其中標簽括起的文字是第一級標題，最大最粗，而標簽括起的文字是最后一級標題，最小最細。 標簽是單獨出現(xiàn)的，作用是換行并在該行下面畫一條水平直線。它有三個屬性值：SIZE、WIDTH和ALIGN，分別用以規(guī)定水平線的高度、寬度和水平線在瀏覽器窗口中的位置。 P是paragraph的意思，它用于劃分段落，作用是換行并插入一個空白行，標簽可以單獨使用，也可以成對使用。成對使用時，可以添加ALIGN屬性，標出段落在瀏覽器中的位置。ALIGN屬性的參數(shù)值有l(wèi)eft、center和right，分別

6、表示標簽所括起的段落位于瀏覽器窗口的左側(cè)、中間、右側(cè)。 75.3 文本標記符文本標記符 常用文本標記符常用文本標記符 標 簽 作 用 是預格式化標簽，HTML的輸出是基于窗口的，因而HTML文件在輸出時都要重新排版，對確實不需要重新排版的內(nèi)容，可以用通知瀏覽器。瀏覽器在輸出時，對括起來的內(nèi)容幾乎不做修改地輸出。 字符格式標簽 HTML文檔的字符格式標簽主要有、和，它們都成對出現(xiàn)。和之間的內(nèi)容將顯示為黑體文字，和之間的內(nèi)容將顯示為斜體，和之間的內(nèi)容將顯示為帶下劃線的文字。 地址標簽，一般放在文檔體的首部或尾部。和之間的內(nèi)容通常是有關(guān)作者的信息，包括作者的姓名、身份等等。 85.3 文本標記符文本

7、標記符 常用文本標記符常用文本標記符 例常用文本標記符舉例例常用文本標記符舉例 有關(guān)文本標簽的使用 這一個段落我們分兩行顯示，需用到<BR>標簽，我們看如果我們不用<BR>標簽，而只是在形式上分行的效果， 該段落到此結(jié)束 下面是第二段。該段只有一行，在該行下面加一條綠色水平線。說明：<BR>將作為純文本符號而不是標記。95.3 文本標記符文本標記符 滾動字幕滾動字幕 滾動字幕能使網(wǎng)頁生動活潑，增加視覺效果。標簽為： 。標簽有這樣幾個常用屬性：1derection屬性，用于指定文字移動方向，屬性值有：left、r

8、ight。2behavior屬性，指定文字移動方式。屬性值有：scroll、 slide、 alternate，分別表示文字一圈一圈的繞著走、只走一次、來回走動。3loop屬性，用于指定循環(huán)次數(shù)，若不指定循環(huán)次數(shù)，則表示循環(huán)不止。4scrollamount屬性，用于指定文字移動的速度。5bgcolor屬性，用于指定文字背景色。105.3 文本標記符文本標記符 滾動字幕滾動字幕 例例5-3 滾動字幕舉例滾動字幕舉例 滾動字幕 請進入音樂休閑屋看我還會動呢,并且是從右向左移動 我從左向右一圈一圈的移動 我是不是移動的比較快？ 我的底色是黃的，我循環(huán)三次即停止移動 115.4 列表標記符列表標記符

9、有序列表有序列表 有序列表用于對網(wǎng)頁中的一些內(nèi)容進行編號排列，以便讀者清晰地了解其每行的順序。 在HTML中插入有序列表是通過標簽來實現(xiàn)的。首標簽和尾標簽之間的內(nèi)容是有序列表的內(nèi)容，排序列表的每一項必須用標簽標識。例有序列表舉例例有序列表舉例 有序列表 下面是有序列表 這是列表第一項 這是列表第二項 這是列表第三項 125.4 列表標記符列表標記符 無序列表無序列表 無序列表是指列表內(nèi)容可以按任意順序排列。每一列表項前不是用連續(xù)編號，而是用一個特定符號來標記，通常是在每一列表項前加上一個圓點兒。無序列表與有序列表的實現(xiàn)方法很相似，只是用標記來代替有序列表中的來代替列表中的。 例無序列表舉例例無

10、序列表舉例 無序列表 以下是娛樂休閑版的列表： 音樂影視游戲135.4 列表標記符列表標記符 定義列表定義列表 定義列表用于對清單條目進行簡短說明，首標簽和尾標簽之間的內(nèi)容就是定義列表的內(nèi)容，列表項目用引導，它的說明用引導。通常和是成對出現(xiàn)的，即一個列表項目對應(yīng)一個說明項，當然也可以一個列表項目對應(yīng)多個說明項。例定義列表舉例 定義列表 下面是一個定義性列表： 計算機硬件如軟驅(qū)、硬盤等計算機軟件如系統(tǒng)軟件、應(yīng)用軟件145.5 鏈接標記符鏈接標記符 在瀏覽網(wǎng)頁過程中，有時點擊某處的文字或圖像會跳轉(zhuǎn)到另一部分，這是因為在網(wǎng)頁中使用了超文本鏈接。使用超文本鏈接可以使順序存放的文件在一定程度上具有隨機訪

11、問的能力，更加符合人類的思維方式。支持文檔的超連接是HTML最吸引人優(yōu)點之一。 一個超文本鏈接指針由兩部分組成：被指向的目標和是錨點。目標可以是同一文件的另一部分，也可以是另一個文件，還可以是動畫或音樂。而當用戶把鼠標移到錨點時，鼠標的形狀會變成小手狀，這時點擊鼠標，就會跳轉(zhuǎn)到鏈接的目標。155.5 鏈接標記符鏈接標記符不同文件間的鏈接不同文件間的鏈接 HTML文件用文字作錨點的格式是：字符串。 HTML文件用圖像作錨點的格式是：。用圖像作錨點實際上是用取代了用文字作錨點中“字符串”的位置。 HREF是鏈接中最常用的屬性，該屬性用來指出所要鏈接文件的名稱或URL。URL是統(tǒng)一資源定位器(Uni

12、form Resource Locator)。 對于自己主機內(nèi)的文件，它的URL可以根據(jù)該文件的實際情況決定。對于因特網(wǎng)上的資源，在用瀏覽器觀看時它的URL會在瀏覽器的“地址”欄中顯示出來，把它抄下來寫到你的HTML文件中即可。這個“字符串”就是錨點。用鼠標點這個字符串時，瀏覽器就會將URL處的資源顯示在屏幕上。 用來指明作為錨點的圖像。 例如：點此處看相片 網(wǎng)頁上會顯示字符串“點此處看相片”，當把鼠標移到這個字符串上時，鼠標會變成小手形狀，點擊字符串就會顯示文件“mypicture.gif”的內(nèi)容。165.5 鏈接標記符鏈接標記符同一文件間的鏈接同一文件間的鏈接 鏈接指針可以使讀者在整個因特

13、網(wǎng)網(wǎng)上方便的跳躍瀏覽，當一個HTML較長時，還可以在文件中建立一些鏈接，實現(xiàn)同一文件中內(nèi)容的跳躍瀏覽。對于一個完整的文件，可以用URL來唯一地標識被指向的目標，但對于同一文件的不同部分，被指向的目標是通過標記的NAME屬性來定義的。 格式：text 說明：NAME屬性用來給被鏈接的部分起名字并加標記，text是可選項。 給被鏈接的部分起名字并加標記后，可以用text 指向它。其中的URL是放置標記的HTML文件的URL，name是標記名，對于同一個文件，可以寫為text 。這時就可以點取text跳轉(zhuǎn)到標記名為name的部分了。 例如：這里白雪飄飄 點此進入白雪飄飄 這段代碼，為“這里白雪飄飄”

14、作了標記“白雪飄飄”。點擊“點此進入白雪飄飄”字符串可鏈接到“這里白雪飄飄”。175.5 鏈接標記符鏈接標記符在新窗口中顯示被指向的目標在新窗口中顯示被指向的目標 如果希望在一個新的窗口中顯示被指向的目標，可以使用target屬性。 格式： 字符串 它能將URL代表的資源顯示在一個新的窗口中，該窗口的名字叫“新窗口名”。 185.5 鏈接標記符鏈接標記符鏈接地圖鏈接地圖 圖像鏈接中每幅圖只能指向一個地點，而圖像地圖可以把圖像分成多個區(qū)域，每個區(qū)域指向不同的目標文檔。例鏈接地圖舉例例鏈接地圖舉例 鏈接地圖 下面定義的是一個鏈接地圖 195.5 鏈接標記符鏈接標記符鏈接地圖鏈接地圖 在定義鏈接地圖

15、時，首先要為鏈接源點的圖像添加ismap屬性，將圖像定義為地圖。然后必須使用usemap屬性說明該圖像是遵循哪個地圖定義的。usemap屬性的參數(shù)值為“#地圖名”。HTML是通過標簽和標簽來定義地圖的。標簽有一個不可缺省的屬性name，參數(shù)值是地圖名字，比如上例中的name=JY，其中“JY”是地圖名。地圖的區(qū)域劃分是通過標簽來實現(xiàn)的。標簽有三個屬性，就是上例中用到的shape、coords、href，分別表示該區(qū)域的形狀、范圍和所鏈接到的目標文檔。上例中用到的rect用于指定一個矩形區(qū)域，該區(qū)域的位置由左上角坐標和右下角坐標說明。poly 指定一個多邊形區(qū)域， 該區(qū)域的位置由各頂點坐標說明。

16、circle 指定一個圓形區(qū)域，該區(qū)域的位置由垂直通過圓心的直徑與該圓的交點坐標說明。上例中語句定義了一個矩形區(qū)域，矩形的左上角坐標為（100，80），右下角的坐標為（130，120）。在該區(qū)域的任何位置點擊都可以鏈接到目標文檔“WATER.HTML”。205.6 表格標記符表格標記符 表格能將HTML的內(nèi)容按行或列的方式組織，使網(wǎng)頁的組織井然有序。 標記是定義表格的總標記，HTML要求一個表格的全部內(nèi)容包含在和標記之中。標記中最常用屬性是border屬性，它的值表示以像素點為單位的邊框?qū)挾?，如border=2表示邊框為2個像素點（像素點是位圖的基本單位），如果不包含border屬性則默認無邊

17、框。此外，標記還有align屬性，取值為left、right、center，分別表示將表格定義在網(wǎng)頁的左端、右端或使表格居中。 表是由行和列內(nèi)的單元格組成的。表格的定義順序是首先定義表的一行，行標記用，是成對標簽。然后依此是行的單元格，單元格用標記，如果一個表格中某個單元格的內(nèi)容很長，可以使用標記強制內(nèi)容折行。再定義第二行，依次定義第二行的單元格。表的列由每行包含的單元格數(shù)目自動計算得到。標志用來設(shè)置表格頭，文字通常是黑體居中顯示。為確保表中每列對齊，應(yīng)在每行包含相同單元格。 215.6 表格標記符表格標記符 此外，還有align和valign屬性。align屬性定義水平對齊方式，與標記的該屬

18、性相同。valign屬性定義垂直對齊方式，取值為top（頂端對齊）、middle（居中間對齊）或bottom（底部對齊）。具有width、colspan、rowspan和nowrap屬性。width是格的寬度，單位用絕對像素值或總寬度的百分比，colspan設(shè)置一個表格格子跨占的列數(shù)（缺省值為1），rowspan設(shè)置一個表格格子跨占的行數(shù)（缺省值為1），nowrap禁止單元格內(nèi)的內(nèi)容自動換行。 表的標題使用標記，一般放在表中第一行的前面， 的屬性包括對齊屬性align，取值為top、bottom、right、left、middle。225.6 表格標記符表格標記符 例例 表格的制作表格的制作

19、表格標志的綜合示例 姓名 性別 分數(shù) 周 女 90 王 男 98 235.7 表單標記符表單標記符 我們上網(wǎng)時經(jīng)常需要填寫一些用戶信息，在HTML中是通過表單實現(xiàn)的。表單使網(wǎng)頁具有交互功能，在Web頁中提供表單讓訪問者填寫，從而獲得用戶信息。一個表單至少應(yīng)該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內(nèi)容。當用戶填寫完信息做提交（submit）操作后，表單內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的 ASP 或 CGI 等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器，網(wǎng)頁便有了交互性。設(shè)計表單常用標記是：、和等。245.7 表單標記符表單標記符表單輸入標記表單輸入標記 此標

20、記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標記。語法如下：各項含義說明如下：255.7 表單標記符表單標記符表單輸入標記表單輸入標記 1align用于設(shè)定表單的位置，參數(shù)有：left、right、middle、top、bottom。 2name是單行文字盒名稱。比如我們要在該文本框中填寫姓名，可給文本框起名：YOUR-NAME. 3type決定了輸入數(shù)據(jù)的類型。 4value用于設(shè)定默認值，如果用戶不輸入的話，就采用此默認值； 5src是針對type=image的情況來說的，設(shè)定圖像文件的地址； 6checked指定復選項的初始狀態(tài)，表示該復選項在初始時是被選中的； 7maxlength表示

21、在輸入單行文本的時候，最大輸入字符個數(shù)； 8size用于設(shè)定在輸入多行文本時的最大輸入字符數(shù)； 9onclick表示在按下按鈕時調(diào)用指定的子程序； 10onselect表示當前項被選擇時調(diào)用指定的子程序。265.7 表單標記符表單標記符表單輸入標記表單輸入標記 例制作一個表單例制作一個表單表單實例請選擇您喜歡的娛樂節(jié)目：非常六加一開心辭典快樂大本營275.7 表單標記符表單標記符 和和標簽標簽 用標簽和標簽可以在表單中插入一個下拉列表框。首標簽和尾標簽之間的內(nèi)容就是一個列表框的內(nèi)容。標簽必須和標簽聯(lián)合使用，因為下拉菜單中的每個選項要用標簽定義。 標簽和標簽語法如下： 請單擊該圖標看請單擊該圖標

22、看 下拉列表框舉例下拉列表框舉例說明： 1name設(shè)定下拉列表框的名稱； 2size設(shè)定列表框高度，即一次顯示幾個菜單項，一般取默認值（size=1）； 3multiple設(shè)定可以進行多選。 4標簽定義下拉列表框中的一個選項，其中selected表示當前項被默認選中，value表示該項對應(yīng)的值，當該項被選中之后，該項的值會被送到服務(wù)器進行處理 。285.7 表單標記符表單標記符多行文本輸入多行文本輸入標簽標簽 建立多行文本輸入框的專用標簽，其語法如下： 各參數(shù)含義： name：文本框名稱，cols：寬度，rows：高度（行數(shù)），wrap：換行控制，有三個屬性值：off表示不自動換行；hard表

23、示自動硬回車換行，換行標記一同被傳送到服務(wù)器中去；soft表示自動軟回車換行，換行標記不會傳送到服務(wù)器中去。 表單所涉及的標記很多，參數(shù)也比較復雜，但一般的表單不可能涉及所有參數(shù)，實際制作表單時通常是組合應(yīng)用這些標記。我們在制作表單時要遵循一個原則：能用默認值的盡量用默認值，絕不設(shè)定一個不用的參數(shù)。295.8 多媒體標記符多媒體標記符文本中插入圖像文本中插入圖像 超文本支持的圖像格式一般有X Bitmap(XBM)、GIF、JPEG三種，所以我們對圖片處理后要保存為這三種格式中的任何一種，才可以在瀏覽器中看到。插入圖像的標簽是，格式為：。 src屬性指明了所要鏈接的圖像文件所在地址，這個圖像文

24、件可以在本地機器上，也可以位于遠端主機上。地址的表示方法可以沿用3.4節(jié)“鏈接標記符”中URL地址表示方法。img還有兩個屬性是height和width，分別表示圖形的高度和寬度。 網(wǎng)頁上不僅有圖形還有文字，文字與圖形之間有各種不同的對齊方式，用align屬性定義對齊方式。align的取值可以是 top|middle|bottom|right|left。圖文之間的距離用屬性hspace和vspace來規(guī)定，分別表示文字與圖像的水平距離和垂直距離。305.8 多媒體標記符多媒體標記符插入背景音樂插入背景音樂 標簽用以插入背景音樂，但只在 IE中才能聽到。其格式如下： src用來指出音樂文件地址；

25、autostart 用來指出在音樂下載傳送完之后是否自動播放，默認false（否），選true（是）則自動播放；Loop用來指出播放的次數(shù)。Loop=3表示重復三次，Infinite 表示重復多次。 315.8 多媒體標記符多媒體標記符插入背景音樂插入背景音樂 要在瀏覽網(wǎng)頁時聽音樂，可將音樂做成一個鏈接，只需用鼠標在錨點上單擊，就可以聽到動人的音樂了。其基本格式與前面講的鏈接標記符相同： 樂曲名 除了借助鏈接實現(xiàn)網(wǎng)上播放音樂的功能，我們還可以讓音樂自動載入，讓它出現(xiàn)控制面板或當背景音樂來使用?；菊Z法：325.8 多媒體標記符多媒體標記符多行文本輸入框多行文本輸入框 src=“音樂文件地址” :用于設(shè)定音樂文件的路徑 autostart=true/false :音樂文件傳送完后是否自動播放，true是要，false是不要，默認為false。 loop=循環(huán)次數(shù):設(shè)定播放重復次數(shù)，loop=3為重復3次，true為無限次播放，false播放一次即停止。 startime=“分:秒”:設(shè)定樂曲的開始播放時間，若30秒后播放可寫為 :startime=00:30。 volume=0-100:設(shè)定音量的大小。如果沒設(shè)定的話，就用系統(tǒng)的音量。 wi