1、HTML語(yǔ)言基本學(xué)習(xí)要點(diǎn)：HTML語(yǔ)言基本格式處理文本處理圖片修飾網(wǎng)頁(yè)表格和表單框架應(yīng)用多媒體第1頁(yè)，共38頁(yè)。2022/8/41海南大學(xué)信息學(xué)院 黎才茂1 什么是HTMLWWW（World Wide Web，萬(wàn)維網(wǎng)），它提供了一個(gè)圖形化的用戶界面，以瀏覽Internet上的文檔，這文檔以及它們之間的鏈接構(gòu)成一個(gè)龐大的信息樹。HTML（Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言）是一種用來(lái)制作Web上超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。它是在原來(lái)文本文件的基礎(chǔ)上，加上一系列的標(biāo)記描述其格式、顏色，再加上聲音、動(dòng)畫甚至視頻等等形成精彩的頁(yè)面。第2頁(yè)，共38頁(yè)。2022/8/42海

2、南大學(xué)信息學(xué)院 黎才茂2 HTML的基本格式2.1 HTML語(yǔ)言編寫的網(wǎng)頁(yè)代碼 第一個(gè)網(wǎng)頁(yè)歡迎進(jìn)入HTML世界！第3頁(yè)，共38頁(yè)。2022/8/43海南大學(xué)信息學(xué)院 黎才茂2 HTML的基本格式2.2 HTML的基本格式HTML文件都可以分成兩個(gè)部分：標(biāo)題和正文。用和標(biāo)識(shí)HTML文件的開始和結(jié)束用和標(biāo)識(shí)標(biāo)題部分用和標(biāo)識(shí)正文部分HTML的基本格式如下：標(biāo)題部分正文部分第4頁(yè)，共38頁(yè)。2022/8/44海南大學(xué)信息學(xué)院 黎才茂2 HTML的基本格式2.3 HTML的語(yǔ)法雙標(biāo)記內(nèi)容 如： 單標(biāo)記如：標(biāo)記屬性如：注釋語(yǔ)句 第5頁(yè)，共38頁(yè)。2022/8/45海南大學(xué)信息學(xué)院 黎才茂2 HTML的基本

3、格式2.4 HTML文檔的基本結(jié)構(gòu)版本信息HTML文件標(biāo)記頭部信息（HEAD）主體標(biāo)記（body）第6頁(yè)，共38頁(yè)。2022/8/46海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.1 段落在HTML文件中，用和表示段落的開始和結(jié)束。例如：段落標(biāo)記的使用這是第一段這是第二段這是第三段第7頁(yè)，共38頁(yè)。2022/8/47海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.2 分行在HTML文件中，用表示開始新的一行，而分段標(biāo)記將使不同段之間有空白行。例如：分行標(biāo)記的使用 這是第一行 這是第二行 這是第三行第8頁(yè)，共38頁(yè)。2022/8/48海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.3 文字對(duì)齊文字對(duì)齊的基本用法：，其

4、中#=left，center，right。標(biāo)記居中可以用和標(biāo)記。例如：文字對(duì)齊渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院第9頁(yè)，共38頁(yè)。2022/8/49海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.4 水平線在HTML文件中，用標(biāo)記在網(wǎng)頁(yè)中生成一個(gè)水平線。例如：預(yù)格式化文本 北京大學(xué)創(chuàng)于1898年，初名京師大學(xué)堂，是第一所國(guó)立綜合性大學(xué)，也是當(dāng)時(shí)中國(guó)的最高教育行政機(jī)關(guān)。辛亥革命后，于1912年改名。第10頁(yè)，共38頁(yè)。2022/8/410海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.5 列表在HTML中可以使用以下幾種類型的列表格式：無(wú)序列表 以標(biāo)記開始，以標(biāo)記結(jié)束。在每一個(gè)標(biāo)記處另起一行，并顯

5、示加重符號(hào)。全部列表會(huì)縮排。有序列表 以標(biāo)記開始，以標(biāo)記結(jié)束。在每一個(gè)標(biāo)記處另起一行，并顯示數(shù)字序號(hào)。定義型列表 以標(biāo)記開始，以標(biāo)記結(jié)束。在定義列表中包含一系列術(shù)語(yǔ)/定義對(duì)，標(biāo)記后為被定義的術(shù)語(yǔ)，標(biāo)記則出現(xiàn)在被定義的內(nèi)容前。列表自動(dòng)換行和縮排。3.6 注釋文本注釋標(biāo)記的格式：因?yàn)榉彩窃谧⑨寴?biāo)記符內(nèi)的文字都是隱性的，所以，注釋的信息內(nèi)容是不會(huì)顯示在網(wǎng)頁(yè)上的。第11頁(yè)，共38頁(yè)。2022/8/411海南大學(xué)信息學(xué)院 黎才茂列表和注釋示例：列表 海南大學(xué)渭南師范學(xué)院海南大學(xué)渭南師范學(xué)院海南大學(xué)海南大學(xué)是特區(qū)的高等學(xué)府北京大學(xué)北京大學(xué)是中國(guó)的超一流高等學(xué)府第12頁(yè)，共38頁(yè)。2022/8/412海南大

6、學(xué)信息學(xué)院 黎才茂3 處理文本3.7 鏈接鏈接也叫超連接，是指在Web中從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的鏈接關(guān)系。鏈接的目標(biāo)通常是一個(gè)Web頁(yè)面，也可以是圖片、多媒體、電子郵件以及程序文件。鏈接的格式：創(chuàng)建鏈接的文字例如：海南大學(xué)“URL”成為統(tǒng)一資源定位。URL有絕對(duì)URL和相對(duì)URL兩種類型。絕對(duì)URL包含有目標(biāo)的完整URL地址信息，而相對(duì)URL則包含相對(duì)于當(dāng)前URL頁(yè)面所在位置的目標(biāo)地址。第13頁(yè)，共38頁(yè)。2022/8/413海南大學(xué)信息學(xué)院 黎才茂超鏈接示例超連接海南大學(xué) 第一個(gè)網(wǎng)頁(yè)第14頁(yè)，共38頁(yè)。2022/8/414海南大學(xué)信息學(xué)院 黎才茂3 處理文本3.8 用超連接打開一個(gè)新的窗

7、口語(yǔ)法格式：熱點(diǎn)文字例如：超連接打開新窗口第一個(gè)網(wǎng)頁(yè)第15頁(yè)，共38頁(yè)。2022/8/415海南大學(xué)信息學(xué)院 黎才茂4 修飾網(wǎng)頁(yè)4.1 背景顏色網(wǎng)頁(yè)的背景顏色設(shè)置為：其中RRGGBB是指定的紅綠藍(lán)的顏色名稱或者十六進(jìn)制的RGB值。十六進(jìn)制數(shù)碼為0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F(xiàn)。例如：表示網(wǎng)頁(yè)的背景為白色5.2 背景圖片網(wǎng)頁(yè)的背景圖片設(shè)置為：第16頁(yè)，共38頁(yè)。2022/8/416海南大學(xué)信息學(xué)院 黎才茂4 修飾網(wǎng)頁(yè)4.3 字體顏色網(wǎng)頁(yè)中有關(guān)字體設(shè)置顏色的格式如下：設(shè)置字體顏色；設(shè)置鏈接顏色；設(shè)置已經(jīng)訪問(wèn)過(guò)的鏈接顏色；設(shè)置正單擊的鏈接顏色；更改字體顏色。例如:該網(wǎng)頁(yè)

8、的文字是綠色的，鏈接是紅色的，但當(dāng)點(diǎn)擊鏈接時(shí)會(huì)變成黑色，點(diǎn)擊之后又會(huì)變成紫色。第17頁(yè)，共38頁(yè)。2022/8/417海南大學(xué)信息學(xué)院 黎才茂4 修飾網(wǎng)頁(yè)4.4 字體大小在HTML語(yǔ)言中，用標(biāo)記來(lái)改變字體的大小，其格式為:文本內(nèi)容其中#表示字號(hào)大小，可以去值為17，默認(rèn)值為3例如字體大小渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院第18頁(yè)，共38頁(yè)。2022/8/418海南大學(xué)信息學(xué)院 黎才茂4 修飾網(wǎng)頁(yè)4.5 標(biāo)題大小在HTML語(yǔ)言中提供六級(jí)標(biāo)題字體格式，分別由H1H6表示，其格式為:標(biāo)題內(nèi)容 #=1,2,3,4,5,6例如標(biāo)題大小渭南師范學(xué)院渭南師范

9、學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院渭南師范學(xué)院第19頁(yè)，共38頁(yè)。2022/8/419海南大學(xué)信息學(xué)院 黎才茂5 處理圖片5.1 插入圖片插入圖片使用標(biāo)記，其格式為：例如：網(wǎng)頁(yè)中插入圖片第20頁(yè)，共38頁(yè)。2022/8/420海南大學(xué)信息學(xué)院 黎才茂5 處理圖片5.2 改變圖片大小其格式為：例如：改變圖片大小第21頁(yè)，共38頁(yè)。2022/8/421海南大學(xué)信息學(xué)院 黎才茂5 處理圖片5.3 圖文混排將圖片放置在網(wǎng)頁(yè)文字的上方將圖片放置在網(wǎng)頁(yè)文字的左側(cè)將圖片放置在網(wǎng)頁(yè)文字的中間將圖片放置在網(wǎng)頁(yè)文字的右側(cè)將圖片放置在網(wǎng)頁(yè)文字的底端例如： 圖文混排 北京大學(xué)創(chuàng)于1898年，初名京師大學(xué)堂，是第

10、一所國(guó)立綜合性大 學(xué)，也是當(dāng)時(shí)中國(guó)的最高教育行政機(jī)關(guān)。辛亥革命后，于1912年改名。 第22頁(yè)，共38頁(yè)。2022/8/422海南大學(xué)信息學(xué)院 黎才茂6 表格在HTML中表格出現(xiàn)在標(biāo)記的部分，由和標(biāo)記表格的開始和結(jié)束。表格的邊框粗細(xì)用選項(xiàng)“border”來(lái)規(guī)定。其基本格式為： #=0,1,2,3表格內(nèi)容當(dāng)border=0時(shí)則瀏覽器將不顯示表格的邊框。在表格中：用和標(biāo)記表格中一行的開始和結(jié)束；用和標(biāo)記表格中一列的開始和結(jié)束；用和標(biāo)記表格中表頭開始和結(jié)束。第23頁(yè)，共38頁(yè)。2022/8/423海南大學(xué)信息學(xué)院 黎才茂基本表格示例 基本表格姓名工作單位聯(lián)系電話張三渭南師范學(xué)院6626068李四渭南

11、師范學(xué)院6626053第24頁(yè)，共38頁(yè)。2022/8/424海南大學(xué)信息學(xué)院 黎才茂6 表格表格標(biāo)記的相關(guān)屬性：表格的尺寸設(shè)置:其中#可以是以象素點(diǎn)為單位的定義方式，也可以用屏幕寬度的百分比來(lái)定義。表格的單元間隙設(shè)置：表格內(nèi)部單元邊緣于單元內(nèi)容之間的空白設(shè)置：第25頁(yè)，共38頁(yè)。2022/8/425海南大學(xué)信息學(xué)院 黎才茂6 表格表格內(nèi)文字的對(duì)齊/布局設(shè)置：水平方向?qū)R/布局 #=left, center, right #=left, center, right #=left, center, right垂直方向?qū)R/布局 #=top, middle, bottom, baseline #=

12、top, middle, bottom, baseline #=top, middle, bottom, baseline表格在頁(yè)面中的對(duì)齊/布局 #=left, center, right第26頁(yè)，共38頁(yè)。2022/8/426海南大學(xué)信息學(xué)院 黎才茂表格對(duì)齊/布局示例 表格對(duì)齊/布局姓名工作單位聯(lián)系電話張三渭南師范學(xué)院6626068李四渭南師范學(xué)院6626053第27頁(yè)，共38頁(yè)。2022/8/427海南大學(xué)信息學(xué)院 黎才茂7 表單表單在HTML頁(yè)面中是實(shí)現(xiàn)與用戶交互信息的主要手段。表單中主要包括下列元素：Button 普通按鈕Radio 單選按鈕Checkbox 復(fù)選按鈕Select 下

13、拉式菜單Text 單行文本框Textarea 多行文本框Submit 提交按鈕Reset 重填按鈕第28頁(yè)，共38頁(yè)。2022/8/428海南大學(xué)信息學(xué)院 黎才茂7 表單用HTML設(shè)計(jì)表單常用的標(biāo)記是：、和等標(biāo)記。表單標(biāo)記該標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的URL地址。其基本語(yǔ)法格式如下：其中，action用于設(shè)定處理表單數(shù)程序的URL地址；method指定數(shù)據(jù)傳送到服務(wù)器的方式，get方式將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器，post方式將輸入數(shù)據(jù)按照HTTP協(xié)議中的post傳輸方式傳送服務(wù)器；Name指定表單的名稱；Onreset和onsubmit

14、是針對(duì)“reset”和“submit”按鈕來(lái)說(shuō)的，分別設(shè)定在按下按鈕后要執(zhí)行的程序。第29頁(yè)，共38頁(yè)。2022/8/429海南大學(xué)信息學(xué)院 黎才茂7 表單表單輸入標(biāo)記其語(yǔ)法格式如下：其中，align用于設(shè)定表單的位置，靠左(left)、靠右(right)、居中(middle)、靠上(top)和靠底(bottom)；Name設(shè)定當(dāng)前變量的名稱；Type設(shè)定輸入數(shù)據(jù)的類型，其類型分別為text、textarea、password、checkbox、radio、submit、file、hidden、image和button 。Value用于設(shè)定如果用戶不輸入數(shù)據(jù)時(shí)的輸入默認(rèn)值；Src是針對(duì)type

15、=image的情況來(lái)說(shuō)的，設(shè)定圖像文件的地址；第30頁(yè)，共38頁(yè)。2022/8/430海南大學(xué)信息學(xué)院 黎才茂7 表單和標(biāo)記在HTML中用和標(biāo)記實(shí)現(xiàn)下拉菜單，它們的格式為：其中，name設(shè)定下拉菜單的名稱；Size設(shè)定菜單框的高度，也就是一次顯示幾個(gè)菜單項(xiàng)；Multiple設(shè)定為可以進(jìn)行多選；Selected表示當(dāng)前項(xiàng)被默認(rèn)選中；Value表示該項(xiàng)對(duì)應(yīng)的值。第31頁(yè)，共38頁(yè)。2022/8/431海南大學(xué)信息學(xué)院 黎才茂7 表單多行文本輸入標(biāo)記格式為：其中，name是文本框名；cols是寬度；rows是高度（行數(shù)）；wrap標(biāo)識(shí)換行控制：off表示不自動(dòng)換行；hard表示自動(dòng)硬回車換行，換行標(biāo)

16、記一同被傳送到服務(wù)器中；soft表示自動(dòng)軟回車換行，換行標(biāo)記不會(huì)傳送到服務(wù)器中。第32頁(yè)，共38頁(yè)。2022/8/432海南大學(xué)信息學(xué)院 黎才茂7 表單HTML表單請(qǐng)?zhí)顚懸韵抡{(diào)查內(nèi)容您的姓名：電子郵件：所在城市：北京上海?？谀暇┠矏鄣倪\(yùn)動(dòng)是：足球乒乓球游泳網(wǎng)球歡迎您提出寶貴的建議：第33頁(yè)，共38頁(yè)。2022/8/433海南大學(xué)信息學(xué)院 黎才茂8 框架一個(gè)Web頁(yè)面可以分為多個(gè)部分，每一個(gè)部分都可以獨(dú)立地顯示一個(gè)HTML文件，形成多個(gè)窗體?？蚣茉谝粋€(gè)瀏覽器的頁(yè)面中顯示多個(gè)窗口的頁(yè)面就成為框架頁(yè)面。在HTML中用和標(biāo)記框架的開始和結(jié)束。用標(biāo)記窗口內(nèi)的HTML文件。第34頁(yè)，共38頁(yè)。2022/8/434海南大學(xué)信息學(xué)院 黎才茂8 框架框架 第35頁(yè)，共38頁(yè)。2022/8/435海南大學(xué)信息學(xué)院 黎才茂9 網(wǎng)頁(yè)中多媒體的應(yīng)用9.1 網(wǎng)頁(yè)中加入聲音自動(dòng)播放背景音樂（音樂文件為.wav或.mid文件）訪問(wèn)者控制聲音的播放播放音樂示例：播放音樂正在播放背景音樂一遍！播放音樂第36頁(yè)，共38頁(yè)。2022/8/436海南大學(xué)信息學(xué)院 黎才茂9 網(wǎng)頁(yè)中多媒體的應(yīng)用9.2 網(wǎng)頁(yè)中加入電影Dynxrc:電影文件