1、第2章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ),Teaching Objectives,通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： HTML文件結(jié)構(gòu) HTML語(yǔ)法規(guī)則 HTML基本標(biāo)記 HTML元素屬性,2.1 HTML語(yǔ)言基礎(chǔ),2.1.1 一個(gè)簡(jiǎn)單的HTML實(shí)例 2.1.2 標(biāo)準(zhǔn)HTML文件的結(jié)構(gòu) 2.1.3 HTML的語(yǔ)法規(guī)則,HTML實(shí)例,通過(guò)記事本創(chuàng)建HTML文件 【2_1.html】夜雨寄北,注意事項(xiàng) 文件后綴必須為.html或.htm 不要使用中文和帶空格的名稱 顯示所有文件的擴(kuò)展名后再保存HTML文件 標(biāo)簽屬性的值應(yīng)該用雙引號(hào),標(biāo)準(zhǔn)HTML文件的結(jié)構(gòu),標(biāo)記 頭部標(biāo)記 meta元素的屬性【metaequiv.ht

2、ml】 http-equiv屬性（Content-type/Refresh/Page-Enter） name屬性 （description/keywords/author） 主體標(biāo)記,HTML的語(yǔ)法規(guī)則,HTML文件以純文本形式存放，擴(kuò)展名為html或htm HTML標(biāo)記不區(qū)分大小寫(xiě)，即和是相同的 ，推薦小寫(xiě)標(biāo)簽 HTML標(biāo)記可以嵌套，但不允許交叉 一行可以寫(xiě)多個(gè)標(biāo)記，一個(gè)標(biāo)記也可以分多行寫(xiě)，但標(biāo)記中的一個(gè)單詞不能分兩行寫(xiě) HTML源文件中的換行、回車符和空格在顯示效果中是無(wú)效的,HTML常見(jiàn)特殊符號(hào)表示方法,2.2 HTML基本標(biāo)記與屬性,2.2.1 標(biāo)題標(biāo)記 2.2.2 換行標(biāo)記和水平線標(biāo)

3、記 2.2.3 字體標(biāo)記 2.2.4 列表標(biāo)記 2.2.5 和,標(biāo)題標(biāo)記,標(biāo)題標(biāo)記被定義在的范圍內(nèi)，用來(lái)設(shè)置正文標(biāo)題字體的大小 【2_2.html】標(biāo)題標(biāo)記,換行標(biāo)記和水平線標(biāo)記,標(biāo)記 新建一個(gè)段落并加上一個(gè)空行 標(biāo)記 只換行，單標(biāo)記 水平分割線標(biāo)記 將網(wǎng)頁(yè)中相同的部分分割成一組，單標(biāo)記 【2_3.html】,字體標(biāo)記,通過(guò)font屬性設(shè)置來(lái)調(diào)整文本的字體樣式、字體大小和字體顏色 【2_4.html】字體標(biāo)記,列表標(biāo)記,列表是一種以結(jié)構(gòu)化、易讀性的方式提供信息的方法 有序列表(Ordered List) 每個(gè)列表項(xiàng)前標(biāo)有符號(hào)標(biāo)識(shí)表示順序 和標(biāo)簽相互配合標(biāo)記 【 2_5.html 】 type屬

4、性設(shè)置排序方式（1、a、A、I、i） 無(wú)序列表(Unordered List) 列表中列表項(xiàng)的前導(dǎo)符號(hào)沒(méi)有一定的次序 和標(biāo)簽相互配合標(biāo)記 【 2_6.html 】 type屬性設(shè)置排序方式（disc、circle、square）,和, 通用的塊狀容器標(biāo)記 可容納各種HTML元素形成獨(dú)立對(duì)象 默認(rèn)的狀態(tài)是占據(jù)整個(gè)一行 行內(nèi)元素標(biāo)記 可容納各種HTML元素形成獨(dú)立對(duì)象 默認(rèn)狀態(tài)是行間的一部分，占據(jù)行的長(zhǎng)短由內(nèi)容決定 區(qū)別【 2_7.html 】,和（續(xù)）,【注意事項(xiàng)】 標(biāo)記沒(méi)有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用元素 標(biāo)記可以包含于標(biāo)記之中，成為它的子元素，而反過(guò)來(lái)則

5、不成立，即標(biāo)記不能包含標(biāo)記 通常情況下，對(duì)于頁(yè)面中大的區(qū)塊使用標(biāo)記，而標(biāo)記僅僅用于需要單獨(dú)設(shè)置樣式風(fēng)格的小元素，如一個(gè)單詞、一幅圖像或一個(gè)超鏈接等,2.3 圖片、背景和顏色,2.3.1 HTML圖片 2.3.2 圖片屬性與頁(yè)面背景 2.3.3 HTML顏色,HTML圖片,語(yǔ)法格式 【 2_8.html 】插入圖像 絕對(duì)路徑(Absolute path) 帶域名的文件的完整路徑 例 /news/index.html 例 e:web_design12imagepic4.jpg 相對(duì)路徑(Relative path) 從這個(gè)文件所在的位置出發(fā)找到其他文件或文件夾的

6、路徑 ，也就是自己相對(duì)于目標(biāo)的位置 【2_9.html】相對(duì)路徑,Relative path,相對(duì)路徑分三種情況 同一個(gè)目錄的文件引用方式 src=“*.*” 當(dāng)前目錄的下級(jí)目錄 src=“當(dāng)前文件夾名/*.*” 當(dāng)前目錄的上一級(jí)目錄 src=“ ./當(dāng)前文件夾名/*.*”,path,【注意事項(xiàng)】 在做網(wǎng)頁(yè)過(guò)程中使用到任何資源，建議都要先復(fù)制到網(wǎng)頁(yè)專用的文件夾中，盡量使用相對(duì)路徑，地址中不要出現(xiàn)本地驅(qū)動(dòng)器的盤符，如“D:wwwpic” 網(wǎng)頁(yè)中圖片無(wú)法顯示有多種原因，可能是文件路徑不對(duì)，或是文件名稱不正確（特別要注意擴(kuò)展名），也有可能在路徑中含有中文或非法字符導(dǎo)致服務(wù)器無(wú)法識(shí)別 在HTML中，標(biāo)

7、簽不需要結(jié)束標(biāo)簽，如，但在XHTML中，標(biāo)簽必須合理閉合，即 ,圖片屬性與頁(yè)面背景,用于控制網(wǎng)頁(yè)中圖片顯示效果的標(biāo)簽的屬性和功能說(shuō)明如下表,【2_10.html】圖像屬性,圖像背景,網(wǎng)頁(yè)背景的添加通過(guò)標(biāo)簽來(lái)設(shè)置，用來(lái)指明背景的屬性是background和bgcolor，分別利用圖片和顏色來(lái)設(shè)置背景 background【2_11.html】 【注意事項(xiàng)】 設(shè)置背景圖片還可以這樣寫(xiě)，這是利用CSS樣式的方式來(lái)設(shè)置圖片背景,HTML顏色,顏色是由紅、綠、藍(lán)三色光源混合而成 在HTML中顏色被定義成一套十六進(jìn)制的記號(hào)法，一種顏色的最低值為0(#00)，最高為255(#FF) 如值#FF0000為紅色

8、，用RGB表示為rgb(255,0,0) 利用標(biāo)簽設(shè)置背景顏色為綠色，可以采用如下方式： ,2.4 超鏈接,創(chuàng)建超鏈接的格式 文本或圖片 鏈接分類 外部鏈接和內(nèi)部鏈接 頁(yè)面鏈接、圖片鏈接、Email鏈接、下載鏈接和內(nèi)部錨記鏈接 【2_12.html】超鏈接,超鏈接（續(xù)）,【注意事項(xiàng)】 （1）外部鏈接的URL應(yīng)該寫(xiě)完整，如，不能忽略前面的http:/部分，否則容易出現(xiàn)鏈接錯(cuò)誤 （2）超鏈接若不能正確顯示，注意檢查鏈接路徑是否正確，是否出現(xiàn)鏈接后文件或文件名更名的情況，以及HTML文件的擴(kuò)展名是否正確等方面 （3）上述超鏈接若想實(shí)現(xiàn)在新窗口中打開(kāi)鏈接，直接在標(biāo)簽中添加屬性target=”_blan

9、k”即可,2.5 表格,2.5.1 表格基本標(biāo)簽 2.5.2 表格屬性,表格基本標(biāo)簽,表格基本標(biāo)簽,【2_13.html】簡(jiǎn)單表格,表格屬性,常用表格屬性 boder屬性：為表格添加邊框并設(shè)置邊框?qū)挾?align、valign屬性：設(shè)置水平、垂直對(duì)齊方式 cellspacing屬性：設(shè)置單元格的間距 cellpadding屬性：設(shè)置單元格的邊距 colspan屬性：當(dāng)前單元格跨越的列數(shù) rowspan屬性：當(dāng)前單元格跨越的行數(shù) 【2_14.html】 【2_15.html】,2.6 框架,框架技術(shù)可以在一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)網(wǎng)頁(yè)，而且每個(gè)網(wǎng)頁(yè)之間保持相對(duì)的獨(dú)立，同時(shí)各框架窗口內(nèi)的文檔之間

10、也能實(shí)現(xiàn)相互鏈接和跳轉(zhuǎn) 2.6.1 創(chuàng)建基本框架 2.6.2 嵌入式框架,框架頁(yè)面結(jié)構(gòu), ,分割窗口標(biāo)記，標(biāo)識(shí)頁(yè)面主體部分的起止位置，決定怎樣劃分窗口及每個(gè)窗口的位置和大小，通過(guò)cols和rows屬性劃分窗口,定義窗口標(biāo)記，用在標(biāo)記當(dāng)中，可以定義一個(gè)分窗口的各種屬性,【2_16.html】,嵌入式框架,又稱浮動(dòng)框架，通過(guò)標(biāo)簽建立 通過(guò)標(biāo)記可將frame窗口置入一個(gè)HTML文件的任何位置 該標(biāo)簽僅為IE 3.0以上版本所支持,【2_16.html】,【2_17.html】,2.7 表單,是HTML的一個(gè)重要組成部分，用來(lái)收集瀏覽者的信息，并將信息交給服務(wù)器處理。 是表單的標(biāo)記，是一個(gè)包含很多表單

11、控件的容器。 常用的表單控件包括單行文本輸入框、多行文本輸入框、下拉框、單選框、復(fù)選框、提交和重置按鈕等，所有控件在使用時(shí)必須放在和之間，不能單獨(dú)存在 【2_18.html】表單控件 表單和表格的正確嵌套順序 ,2.8 多媒體,在網(wǎng)頁(yè)中應(yīng)用的多媒體包括特效文字、音頻、視頻和Flash等 不同瀏覽器對(duì)多媒體元素標(biāo)簽的支持和處理過(guò)程有所不同，從而導(dǎo)致顯示效果也有所不同，本教材只考慮IE、FireFox、Opera三種瀏覽器效果 2.8.1 滾動(dòng)字幕 2.8.2 背景音樂(lè) 2.8.3 視頻和動(dòng)畫(huà),滾動(dòng)字幕,標(biāo)簽可以使文字在網(wǎng)頁(yè)中移動(dòng)，但并不是標(biāo)準(zhǔn)標(biāo)簽，只適用于IE瀏覽器 語(yǔ)法結(jié)構(gòu) 基本屬性 【2_19.html】,背景音樂(lè),IE瀏覽器自帶有一個(gè)內(nèi)置音頻解碼器，支持特殊的標(biāo)簽，該標(biāo)簽可以將聲音在后臺(tái)作為背景音樂(lè)播放。 【2_20.html】背景音樂(lè) 【注意】標(biāo)簽只能用在IE中，如果要在其它瀏覽器中播放背景音樂(lè)，可采用標(biāo)簽，代碼如下 Question: 如何