《《HTML語(yǔ)言基礎(chǔ)》PPT課件.ppt》由會(huì)員分享,可在線閱讀,更多相關(guān)《《HTML語(yǔ)言基礎(chǔ)》PPT課件.ppt(18頁(yè)珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、第一講 HTML語(yǔ)言基礎(chǔ),HTML即超文本標(biāo)識(shí)語(yǔ)言,它是一種用于編寫超文本文 檔的標(biāo)記語(yǔ)言。 自從1990年首次應(yīng)用于網(wǎng)頁(yè)編輯后,HTML迅速成為網(wǎng)頁(yè)編輯的主流語(yǔ)言。幾乎所有的網(wǎng)頁(yè)都是由HTML或以其他程序語(yǔ)言嵌套在HTML中編寫的。 HTML不是一種程序設(shè)計(jì)語(yǔ)言,而是一種結(jié)構(gòu)語(yǔ)言,與平臺(tái)無(wú)關(guān),只要有相應(yīng)的瀏覽器程序,就可以運(yùn)行HTML文檔。,一、HTML文檔的基本結(jié)構(gòu)(1),1Html的基本結(jié)構(gòu),標(biāo)志著html文檔開始 文檔標(biāo)題 文檔的主體部分 標(biāo)志著html文檔結(jié)束,一、HTML文檔的基本結(jié)構(gòu)(2),2標(biāo)簽,文檔標(biāo)識(shí)符,表示文檔是以超文本標(biāo)識(shí)語(yǔ)言(html)編寫的,不帶任何屬性。(常用的W
2、eb瀏覽器都可以自動(dòng)識(shí)別html文檔,并不要求有標(biāo)簽),3標(biāo)簽,文檔頭部分,規(guī)定該文檔的標(biāo)題,出現(xiàn)在瀏覽器的標(biāo)題欄中。,一、HTML文檔的基本結(jié)構(gòu)(3),標(biāo)簽:規(guī)定html的標(biāo)題。 標(biāo)簽:規(guī)定文檔的屬性,說(shuō)明該文檔是可以 按關(guān)鍵字索引的。,4標(biāo)簽,文檔主體部分,規(guī)定瀏覽器窗口用戶區(qū)顯示的內(nèi)容。,“bgcolor”屬性:規(guī)定html文檔的背景色。 “text”屬性:規(guī)定html文檔中文字的顏色。 “l(fā)ink”屬性:規(guī)定html文檔中待連接超鏈接對(duì)象的顏色。,一、HTML文檔的基本結(jié)構(gòu)(4),“alink”屬性:規(guī)定html文檔連接中超鏈接對(duì)象的顏色 “vlink”屬性:規(guī)定html文檔已連接超鏈
3、接對(duì)象的顏色。,在指定對(duì)象的顏色時(shí),可以使用該顏色的代碼或直接 使用該顏色對(duì)應(yīng)的英文單詞。如: 或者,二、文本(1),1標(biāo)簽,換行標(biāo)簽,單獨(dú)出現(xiàn),作用相當(dāng)于插入一個(gè)回車符。如果沒(méi)有換行標(biāo)簽,瀏覽器將根據(jù)瀏覽器窗口的寬度盡可能長(zhǎng)地顯示文本。,2標(biāo)簽(i=1,2,3,4,5,6 ),中間的文字是html文檔中的標(biāo)題,以黑體顯示,i的值越小,字體越大越粗。隱含有換行標(biāo)簽的作用。,二、文本(2),“color”屬性:規(guī)定標(biāo)題的顏色 “align”屬性:規(guī)定標(biāo)題的位置(left,center,right),3標(biāo)簽,段落標(biāo)簽,可單獨(dú)使用,也可以成對(duì)使用。作用是換行并插入一個(gè)空白行。 當(dāng)成對(duì)使用時(shí),可以添
4、加“align”屬性(left,center,right),規(guī)定段落在瀏覽器中的位置。,二、文本(3),4標(biāo)簽,水平線標(biāo)簽,單獨(dú)使用,作用是換行并在該行下面畫一條水平直線,直線的上下兩端都會(huì)留出一定的空白。,“size”屬性:規(guī)定水平線的高度 “width”屬性:規(guī)定水平線的寬度 “align”屬性:規(guī)定水平線在瀏覽器窗口的位置(left,center,right),二、文本(4),5標(biāo)簽,預(yù)格式化標(biāo)簽,瀏覽器將按編輯文檔時(shí)的字符位置將和標(biāo)簽之間的內(nèi)容一成不變地顯示出來(lái)。,6粗體標(biāo)簽,8 下劃線標(biāo)簽,7 斜體標(biāo)簽,9 地址標(biāo)簽,三、圖像(1),在html文檔中插入圖像是通過(guò)標(biāo)簽來(lái)實(shí)現(xiàn)的。,1S
5、rc屬性,用于指出被引用的圖像文件所在位置。 ,2Width、height屬性,圖像的寬度和高度屬性。,三、圖像(2),3align屬性,align屬性的參數(shù)值為top、middle、bottom之一,分別表示與圖像相鄰的文字位于圖像的左上方、左面中間和右下方。,4alt屬性,在原先顯示圖片的地方顯示一些有關(guān)圖像的信息。,5vspace屬性,指定圖像與其垂直方向上相鄰對(duì)象之間的距離。,三、圖像(3),6hspace屬性,指定圖像與其水平方向上相鄰對(duì)象之間的距離。,7border屬性,指定圖像邊框的寬度或取消邊框(border=0)。,四、列表元素(1),1無(wú)序列表,通過(guò)無(wú)序列表標(biāo)簽和項(xiàng)目標(biāo)簽來(lái)
6、實(shí)現(xiàn)的。,2排序列表,通過(guò)排序列表標(biāo)簽和項(xiàng)目標(biāo)簽來(lái)實(shí)現(xiàn)的??梢栽跇?biāo)簽中添加start屬性來(lái)指定序列的起始號(hào),缺省時(shí),序列的起始號(hào)為1。,四、列表元素(2),3目錄列表,通過(guò)目錄列表標(biāo)簽和項(xiàng)目標(biāo)簽來(lái)實(shí)現(xiàn)的。顯示效果與無(wú)序列表相同。,4菜單列表,通過(guò)排序列表標(biāo)簽和項(xiàng)目標(biāo)簽來(lái)實(shí)現(xiàn)的。顯示效果基本上與無(wú)序列表相同,只不過(guò)在排列上更加緊湊。,四、列表元素(3),5描述性列表,通過(guò)描述性列表標(biāo)簽和描述項(xiàng)標(biāo)簽、解釋項(xiàng)標(biāo)簽來(lái)實(shí)現(xiàn)的。在顯示時(shí),解釋項(xiàng)的內(nèi)容會(huì)自動(dòng)縮進(jìn)一定的距離。,五、表格元素(1),1標(biāo)簽,表格標(biāo)識(shí)符,成對(duì)出現(xiàn)。主要屬性有: (1)border屬性:表示表格邊框?qū)挾人嫉南袼攸c(diǎn)數(shù); 可以不帶參
7、數(shù)值,僅表示該表格是有邊框的。 (2)width和height屬性:規(guī)定表格的寬度和高度;可 以用數(shù)字、百分?jǐn)?shù)(占瀏覽器窗口的百分比)。 (3)align屬性:參數(shù)值為left、center或者right, 分別表示表格位于其相連文字的左側(cè)、表格水平 居中和表格位于與其相連的文字右側(cè)。,五、表格元素(2),(4)cellspancing屬性:指定表格各單元格之間的空 隙。 (5)cellpadding屬性:指定單元格內(nèi)容與單元格邊界 之間空白距離的大小。,五、表格元素(3),2標(biāo)簽,表格標(biāo)題標(biāo)簽,成對(duì)出現(xiàn)。主要屬性有: (1) align 屬性:參數(shù)值為left、center或者right, 分別表示表格標(biāo)題與表格的左沿對(duì)齊、位于表格 中間和與表格的右沿對(duì)齊。缺省時(shí),表格標(biāo)題位 于表格中間。 (2)valign屬性:參數(shù)值為top和bottom之一,分別表 示表格標(biāo)題位于表格的上方和下方。缺省時(shí),位 于上方。,