3.-第二章-HTML語言(二)課件

1、HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)目 錄CONTENTS第一章 網(wǎng)頁設(shè)計(jì)綜述第二章 HTML語言第三章 CSS第四章 JavaScript第五章 網(wǎng)頁設(shè)計(jì)綜合案例02第二章 HTML語言HTML指的是超文本標(biāo)簽語言（HyperText Markup Language，簡稱HTML）是一種用于創(chuàng)建網(wǎng)頁（Web頁面）的標(biāo)簽式語言，HTML使用標(biāo)簽來描述網(wǎng)頁，可以用于構(gòu)建Web站點(diǎn)中的網(wǎng)頁，網(wǎng)頁中包含了HTML標(biāo)簽及文本內(nèi)容。HTML被用來對網(wǎng)頁的內(nèi)容（文字、圖片等）進(jìn)行結(jié)構(gòu)化處理，由瀏覽器來解釋執(zhí)行。2.1 HTML基本語法2.2 HTML文檔基本結(jié)構(gòu)2.3 HTML文檔頭部相關(guān)標(biāo)簽2

2、.4 段落與文本格式化2.5 列表2.6 超鏈接目 錄2.7 圖像與多媒體2.8 表單2.9 表格2.10 框架2.11 HTML 5結(jié)構(gòu)元素2.7 圖像與多媒體要構(gòu)建一個(gè)豐富多彩的網(wǎng)站，網(wǎng)頁中僅有文字和超鏈接是遠(yuǎn)遠(yuǎn)不夠的，圖像、音頻、視頻、Flash動(dòng)畫等多媒體資源可以豐富一個(gè)網(wǎng)站的內(nèi)容，能夠吸引更多的訪問者。2.7.1 圖像標(biāo)簽用來在網(wǎng)頁文件中插入圖像，通過設(shè)置該標(biāo)簽的相關(guān)屬性，可以設(shè)置所插入圖像的顯示大小、替換文字等。標(biāo)簽的基本語法格式為：標(biāo)簽的屬性比較多，使用起來有很大的靈活性，但在網(wǎng)頁設(shè)計(jì)當(dāng)中，這些屬性用的較多的是src、width、height和alt，其他的屬性所實(shí)現(xiàn)的效果通常使

3、用樣式表來進(jìn)行控制。幾個(gè)常用屬性是：1. src屬性：設(shè)定要顯示圖像的URL地址。2. width屬性：設(shè)置圖像在瀏覽器中顯示的寬度（像素單位）。 3. height屬性：設(shè)置圖像在瀏覽器中顯示的高度（像素單位）4. alt屬性：當(dāng)圖片在瀏覽器中無法顯示的時(shí)候，替代顯示的文字信息。5. border屬性：設(shè)置圖像周圍的邊框。標(biāo)簽還有align、hspace、vspace等圖像對齊方式和間距有關(guān)的屬性，在實(shí)際的網(wǎng)頁設(shè)計(jì)過程中，很少使用這幾個(gè)屬性進(jìn)行圖片和文字的混排，通常使用樣式表來控制圖文混排的效果。所以這幾個(gè)屬性就不做詳細(xì)介紹了。2.7.2 圖像映射圖像映射是指帶有可點(diǎn)擊區(qū)域的一幅圖像，要完成

4、圖像映射要用到三種標(biāo)簽： 標(biāo)簽、標(biāo)簽和標(biāo)簽。1. 標(biāo)簽與標(biāo)簽用于定于圖像中的映射區(qū)域，標(biāo)簽永遠(yuǎn)嵌套在 標(biāo)簽內(nèi)部，用于定義圖像的具體映射區(qū)域。（1）標(biāo)簽的基本語法格式為： 標(biāo)簽的name屬性所定義的名字，將被標(biāo)簽的usemap屬性引用。（2）標(biāo)簽的基本語法格式為： shape屬性的取值用于確定映射區(qū)域的形狀，映射區(qū)域的坐標(biāo)由coords屬性來具體指定。如果shape=rect，則映射區(qū)域?yàn)榫匦螀^(qū)域，coords屬性的值為x1,y1,x2,y2，用于定義矩形區(qū)域的左上角和右下角坐標(biāo)。如果shape=circle，則映射區(qū)域?yàn)閳A形，coords屬性的值為x,y,radius，用于定義圓形區(qū)域圓心的坐

5、標(biāo)和半徑。如果shape=poly，則映射區(qū)域?yàn)槎噙呅?，coords的值為x1,y1,x2,y2,xn,yn，用于定義多邊形各個(gè)頂點(diǎn)的坐標(biāo)，如果最后一個(gè)坐標(biāo)和第一個(gè)不一致，瀏覽器會(huì)自動(dòng)添加最后坐標(biāo)，以實(shí)現(xiàn)圖形的封閉。2.7.3 音頻和視頻在網(wǎng)頁中，適當(dāng)?shù)牟迦胍纛l和視頻，可以讓一個(gè)網(wǎng)頁呈現(xiàn)出豐富多彩的展示效果，以吸引更多的用戶來訪問我們的網(wǎng)站。使用HTML 5的和標(biāo)簽，不需要第三方插件就能播放音頻和視頻，并且用同一的API接口控制，可以很方便的把所需的音頻和視頻插入到網(wǎng)頁當(dāng)中。 1. 音頻標(biāo)簽標(biāo)簽用于定義網(wǎng)頁中的聲音，如音樂或音頻流等，元素支持MP3、Wav、Ogg等三種常用的格式。該標(biāo)簽的基本

6、語法格式為： 標(biāo)簽的幾個(gè)屬性作用如下：（1）autoplay：如果出現(xiàn)該屬性，則音頻就緒后馬上自動(dòng)播放。若沒有該屬性，音頻就緒后需手動(dòng)播放音頻。（2）controls：音頻控件屬性，若出現(xiàn)該屬性，則向用戶顯示控件（靜音/播放/暫停音量）。若沒有該屬性，則控件是不顯示的。具體要播放的音頻，需要使用嵌套在標(biāo)簽中的標(biāo)簽來定義媒體資源。可以提供兩個(gè)音頻文件供瀏覽器根據(jù)瀏覽器本身對音頻文件類型或編解碼器的支持進(jìn)行選擇。該標(biāo)簽主要有以下幾個(gè)常用的屬性：（1）src：表示音頻文件的URL地址。（2）type：表示要播放媒體資源的MIME類型，常用音頻類型有audio/ogg、audio/mpeg等格式。 （

7、3）loop：表示音頻循環(huán)播放。若沒有該屬性，音頻播放結(jié)束后就暫停，若有該屬性，音頻播放結(jié)束后循環(huán)開始播放該音頻。（4）preload：確定當(dāng)頁面加載時(shí)，規(guī)定音頻是否加載以及如何加載。該屬性的取值為：none|auto|metadata，分別對應(yīng)不加載、自動(dòng)加載以及元數(shù)據(jù)。2.視頻標(biāo)簽標(biāo)簽用于定義網(wǎng)頁中的視頻，如電影片段或視頻流。支持MP4、Ogg、Webm等常用的視頻格式。標(biāo)簽與標(biāo)簽相類似的屬性有：autoplay、loop、muted、preload等。特有的屬性有：（1）width：定義視頻的顯示寬度。（2）height：定義視頻的顯示高度。（3）poster：該屬性可以指定在視頻開始播

8、放之前，首先顯示出來的一副圖片。標(biāo)簽的控件按鈕很簡單，如果想要有更加復(fù)雜的控件按鈕，則需結(jié)合后面學(xué)習(xí)的Javascript來實(shí)現(xiàn)。2.7.4 插入Flash文件、是HTML5新增加的用于音頻和視頻的標(biāo)簽，有效地代替了部分Flash的功能。如果要在網(wǎng)頁文件中插入一個(gè)Flash文件，可以使用標(biāo)簽來實(shí)現(xiàn)：也可以通過width、height等屬性來指定該Flash播放時(shí)的寬度和高度。2.8 表單在使用瀏覽器訪問網(wǎng)站過程當(dāng)中，一般都會(huì)遇到在線注冊、登錄等相關(guān)的網(wǎng)頁，例如我們經(jīng)常使用的百度搜索引擎，就有一個(gè)可以輸入要檢索信息的輸入框。要設(shè)計(jì)出這種類型的網(wǎng)頁都需要用到HTML語言中的表單相關(guān)標(biāo)簽，與后面要學(xué)

9、習(xí)的JavaScript相結(jié)合，可以設(shè)計(jì)出內(nèi)容自動(dòng)補(bǔ)齊、輸入格式檢查等動(dòng)態(tài)效果的網(wǎng)頁。表單是動(dòng)態(tài)網(wǎng)頁中的重要組成部分，是用戶與網(wǎng)站之間進(jìn)行交互的接口，用于收集用戶信息，或者向用戶展示所需要的數(shù)據(jù)。表單標(biāo)簽是HTML語言中較為復(fù)雜的內(nèi)容，利用表單標(biāo)簽可以在網(wǎng)頁中設(shè)計(jì)出文本框、單選按鈕、復(fù)選按鈕、下拉列表框等表單元素，實(shí)現(xiàn)豐富友好的用戶界面。 2.8.1 表單標(biāo)簽 標(biāo)簽用于定義一個(gè)表單，其他的表單元素都在和標(biāo)簽之間。表單的基本語法為： 足球 1. 一個(gè)表單中的文本框、按鈕等其他表單元素都要放在和標(biāo)簽之間。2. name屬性：用于設(shè)置表單的名稱，使用JavaScript代碼對表單元素進(jìn)行控制時(shí)，可以

10、通過該屬性設(shè)定的值找到指定的表單。3. action屬性：設(shè)定表單提交時(shí)，之間表單元素的數(shù)據(jù)信息提交到的URL地址。例如指定一個(gè)在網(wǎng)站服務(wù)器端的應(yīng)用程序，對提交的表單數(shù)據(jù)進(jìn)行處理。4. method屬性：該屬性取值為post|get。用于設(shè)定表單中的數(shù)據(jù)如何打包發(fā)送給action所指定的URL地址。5. enctype屬性：設(shè)定表單中的數(shù)據(jù)使用何種編碼方式進(jìn)行編碼。2.8.2 信息輸入標(biāo)簽表單的作用通常是收集訪問網(wǎng)頁用戶的相關(guān)信息，或者向用戶顯示所查詢的信息，很多信息的輸入或者輸出都要用到標(biāo)簽，這個(gè)標(biāo)簽也是所有表單元素中最復(fù)雜的一個(gè)，標(biāo)簽是個(gè)單標(biāo)簽，其基本語法格式為： type屬性用于設(shè)定該標(biāo)

11、簽的類型，該屬性的取值為text|password|radio|checkbox|file，分別表示文本框、密碼框、單選框、復(fù)選框、文件選擇框等表單元素。id屬性用于給該標(biāo)簽設(shè)定一個(gè)id值，通過id值找到該對象，以對其進(jìn)行樣式設(shè)置或者使用JavaScript來操作該對象。value 屬性用于規(guī)定輸入表單元素的初始值。name屬性用于給表單元素定義一個(gè)名字。該屬性通常用于與服務(wù)器端的應(yīng)用獲取客戶端表單所輸入的數(shù)據(jù)。1.文本框?qū)?biāo)簽的type屬性設(shè)置為“text”，可以實(shí)現(xiàn)一個(gè)單行的文本框。在該文本框中可以輸入、編輯任意類型的數(shù)據(jù)，但只能是單行顯示。2. 密碼框?qū)?biāo)簽的type屬性設(shè)置為“pass

12、word”，可以實(shí)現(xiàn)一個(gè)單行的密碼輸入框。密碼輸入框只是無法看到所輸入的信息，其他的功能和文本框類似。3. 提交按鈕在設(shè)計(jì)表單的時(shí)候，通常需要有一個(gè)按鈕，當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，會(huì)把表單中的相關(guān)表單元素所填寫的數(shù)據(jù)提交給網(wǎng)站的后臺(tái)應(yīng)用進(jìn)行處理。將標(biāo)簽的type屬性設(shè)置為“submit”，即可將設(shè)計(jì)一個(gè)默認(rèn)的提交按鈕。4. 重置按鈕 將標(biāo)簽的type屬性設(shè)置為“reset”，可以得到一個(gè)重置按鈕，重置按鈕可以將一個(gè)表單中所有表單元素的值恢復(fù)成默認(rèn)狀態(tài)。5. 單選按鈕 將標(biāo)簽的type屬性設(shè)置為“radio”，即可得到一個(gè)單選按鈕。單選按鈕是指在一組選項(xiàng)中只能選擇一項(xiàng)的情況。要實(shí)現(xiàn)這種效果，同一組單

13、選按鈕的name屬性的值必須相同。 注意：單選按鈕有一個(gè)checked屬性，當(dāng)該屬性的值被設(shè)置為“checked”的時(shí)候，對應(yīng)的單選按鈕會(huì)被設(shè)置為選中狀態(tài)。6. 復(fù)選框 將標(biāo)簽的type屬性設(shè)置為“checkbox”，即可得到一個(gè)復(fù)選按鈕，復(fù)選按鈕通常用于可以有多種選項(xiàng)的情況。 復(fù)選框也有一個(gè)checked屬性，當(dāng)該屬性的值被設(shè)置為“checked”的時(shí)候，會(huì)被設(shè)置為選中狀態(tài)。7. 隱藏輸入框 將標(biāo)簽的type屬性設(shè)置為“hidden”，可以在表單中插入一個(gè)隱藏的輸入框。這個(gè)輸入框?qū)g覽網(wǎng)頁的用戶來說是不可見的。但是這個(gè)輸入框中的內(nèi)容會(huì)隨著表單其他信息一起提交到服務(wù)器端。這種類型的輸入框通常用

14、于設(shè)置一些客戶端和服務(wù)器端交互信息8. 文件選擇框 將標(biāo)簽的type屬性設(shè)置為“file”，可以得到一個(gè)文件選擇框，在瀏覽器中會(huì)顯示一個(gè)“瀏覽”按鈕，用于選擇要提交到服務(wù)器端的文件，以及一個(gè)顯示所選擇文件名的文本輸入框。2.8.3 HTML 5新增的表單輸入類型1. email類型 email類型的input元素是一種用來輸入郵箱地址的文本框。在該文本框中輸入的內(nèi)容必須符合郵件地址格式，否則表單將無法提交。注意：對于所有的新增表單元素，我們都可以通過設(shè)置placeholder屬性來定義提示信息2. url類型 將標(biāo)簽的type屬性設(shè)置為“url”，該文本框所輸入的內(nèi)容須符合url地址格式，否則

15、表單將無法提交。3. number類型 將標(biāo)簽的type屬性設(shè)置為“number”，可以得到一個(gè)包含數(shù)值的輸入框，可以使用min和max屬性來限制可以輸入的數(shù)據(jù)范圍。4. range類型 range類型的input元素，用于定義滑動(dòng)條方式顯示的數(shù)值輸入域。除了可以使用min和max屬性來定義數(shù)據(jù)輸入范圍之外，還可以通過step屬性來定義鼠標(biāo)每次拖動(dòng)的數(shù)值變化幅度。5. date類型和time類型date類型的input元素，可以定義一個(gè)供用戶選擇年、月、日信息的日期信息輸入框。2.8.4 下拉列表標(biāo)簽標(biāo)簽用于設(shè)計(jì)實(shí)現(xiàn)下拉菜單，其中的每個(gè)表項(xiàng)使用標(biāo)簽來定義。下拉列表的基本語法格式為： 菜單選項(xiàng)一

16、 菜單選項(xiàng)二 菜單選項(xiàng)三 菜單選項(xiàng)四 菜單選項(xiàng)五 標(biāo)簽的size屬性取值為數(shù)值，用于設(shè)定下拉菜單中可見的菜單項(xiàng)。標(biāo)簽的multiple屬性，如果被設(shè)定為“multiple”，則表示該下拉菜單可以同時(shí)選中多個(gè)菜單項(xiàng)。注意：要選中多個(gè)菜單項(xiàng)，需要按住鍵盤上的額“Ctrl”鍵后，再用鼠標(biāo)去點(diǎn)擊相應(yīng)的菜單項(xiàng)。標(biāo)簽的value屬性，用于向網(wǎng)站服務(wù)器端傳遞具體被選中的菜單項(xiàng)對應(yīng)的值。2.8.5 多行文本輸入標(biāo)簽在收集用戶相關(guān)信息或者反饋意見的網(wǎng)頁中，如果用戶需要輸入的信息較多，此時(shí)單行文本框就不能滿足用戶的需求，需要使用標(biāo)簽來設(shè)計(jì)一個(gè)多行文本輸入框來輸入較多的文字信息。標(biāo)簽的基本語法格式為：初始化文字信息

17、rows屬性：定義多行文本區(qū)內(nèi)最大可見行數(shù)cols：定義多行文本區(qū)的最大寬度。wrap屬性：用于設(shè)定多行文本區(qū)域中文字的換行效果，取值為wrap|virtual|physical|off，這幾種取值方式會(huì)影響到多行文本表單元素傳遞給服務(wù)器端的文字換行效果。2.8.6域和域標(biāo)題 當(dāng)表單中的內(nèi)容較多時(shí)，需要將不同的內(nèi)容分組顯示，可以使用標(biāo)簽將表單內(nèi)容打包在一組成為單獨(dú)顯示的域，然后再使用標(biāo)簽來定義域標(biāo)題。這兩個(gè)標(biāo)簽的基本語法為：域標(biāo)題 標(biāo)簽沒有屬性。如果要設(shè)置一個(gè)標(biāo)簽的寬度，需要使用樣式表的width屬性來實(shí)現(xiàn)。 標(biāo)簽必須放在標(biāo)簽中，標(biāo)簽的align屬性，用于設(shè)置域標(biāo)題的對齊方式。2.9 表格在網(wǎng)

18、頁設(shè)計(jì)中，表格發(fā)揮著重要的作用，在層疊樣式表（CSS）出現(xiàn)之前，要設(shè)計(jì)一個(gè)簡潔、排版規(guī)則的網(wǎng)頁，通常使用表格來實(shí)現(xiàn)。除了使用表格進(jìn)行網(wǎng)頁布局之外，通常還使用表格標(biāo)簽按照行、列等比較規(guī)則的方式顯示表格化的數(shù)據(jù)。2.9.1表格標(biāo)簽在HTML中，表格主要由、和這三個(gè)標(biāo)簽來定義。其中標(biāo)簽來定義表格的整體，表格中的每一行由標(biāo)簽來定義，每行又可以被分割成若干個(gè)單元格，每個(gè)單元格由標(biāo)簽來定義。單元格中可以包含文本、圖片、列表、段落、表單、超鏈接和多媒體等其他的HTML元素。一個(gè)基本的表格的語法格式如下： 第1行第1列 第1行第2列 第2行第1列 第2行第2列 第3行第1列 第3行第2列 標(biāo)簽的屬性比較復(fù)雜，

19、常用的屬性主要有以下幾個(gè)：1. border：以像素為單位定義的表格邊框?qū)挾取?. bgcolor：定義表格的背景顏色。 3.background屬性：定義表格的背景圖像。4. align：定義表格的對其方式，取值為：“l(fā)eft|center|right”，分別表示左對齊、居中和右對齊。 5. height：以像素為單位定義表格的高度。6. weight：以像素為單位定義表格的寬度。7. cellpadding：以像素為單位定義單元格邊緣與單元格內(nèi)容之間的空白大小。8. cellspacing：以像素為單位定義單元格之間的空白大小。9. rules：定義表格內(nèi)部邊框的顯示方式。取值為：“non

20、e|rows|cols|all”,分別表示不顯示邊框、只顯示行邊框、只顯示列邊框、顯示行列邊框。將rules屬性設(shè)置為“all”和未設(shè)置rules屬性的表格，在顯示效果上差別還是比較大的。cellspacing:30cellpadding:202.9.2 行標(biāo)簽標(biāo)簽嵌套在標(biāo)簽之中，每一對標(biāo)簽會(huì)定義表格的一行。標(biāo)簽常用的屬性有：1. align屬性：設(shè)置行內(nèi)容的水平對齊方式，取值為“l(fā)eft|center|right”，分別表示當(dāng)前行的水平對齊方式為左對齊、居中和右對齊，默認(rèn)為左對齊。2. valign屬性：設(shè)置行內(nèi)容的垂直對齊方式，取值為“top|middle|bottom”，分別表示當(dāng)前行的

21、垂直對齊方式為靠上對齊、居中和靠下對齊，默認(rèn)為垂直居中。3. bgcolor屬性：設(shè)置當(dāng)前行的背景顏色。2.9.3 單元格標(biāo)簽標(biāo)簽嵌套在標(biāo)簽中定義單元格，每一對標(biāo)簽都會(huì)定義一個(gè)單元格。標(biāo)簽也有align、valign、bgcolor、width、height等屬性，這些屬性的含義和作用和標(biāo)簽、標(biāo)簽的相應(yīng)屬性相同，在此不再贅述。標(biāo)簽有兩個(gè)比較特殊的屬性和分別用于實(shí)現(xiàn)單元格的跨行和跨列效果。1. rowspan屬性：設(shè)置單元格跨越的行數(shù)。2. colspan屬性：設(shè)置單元格跨越的列數(shù)。2.10 框架框架是一種頁面布局技術(shù)，可以將瀏覽器窗口分割成不同區(qū)域的，在不同的區(qū)域中顯示不同的HTML文件。但是

22、定義框架的標(biāo)簽在不同的瀏覽器之間兼容性不好，所以在網(wǎng)頁布局設(shè)計(jì)中，使用框架技術(shù)的網(wǎng)站越來越少，通常使用DIV和樣式表相結(jié)合的方式來設(shè)計(jì)兼容性和靈活性兼?zhèn)涞木W(wǎng)頁布局。 2.10.1 框架集標(biāo)簽框架集是指在一個(gè)網(wǎng)頁文件中定義包括框架個(gè)數(shù)、框架尺寸以及框架中要載入的網(wǎng)頁文件等信息的框架結(jié)構(gòu)信息。其基本的語法格式為： 標(biāo)簽的屬性主要有以下幾個(gè)：1.frameborder：定義框架集是否顯示邊框，取值為“0|1”，“0”表示不顯示框架邊框，“1”表示顯示框架邊框。2.framespacing：定義框架之間邊框的寬度。3.bordercolor：定義邊框的顏色4.rows：定義框架水平分割的方式，可以采用百分比或者指定的像素。5.cols：定義框架垂直分割的方式，可以采用百分比或者指定的像素。6.border：以像素為單位定義框架邊框的寬度2.10.2 框架定義標(biāo)簽定義的框架只能作為框架集的子元素出現(xiàn)，不能單獨(dú)出現(xiàn)在其他的HTML標(biāo)簽之中?？蚣芗某Ｓ脤傩允莕ame，用于定義一個(gè)框架的名稱，使用該屬性，可以將框架名稱作為超鏈接的跳轉(zhuǎn)目標(biāo)，即將標(biāo)簽的target屬性設(shè)置為框架的name屬性值，則點(diǎn)擊該