《《HTML語言基礎(chǔ)》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《HTML語言基礎(chǔ)》PPT課件.ppt（18頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第一講 HTML語言基礎(chǔ),HTML即超文本標(biāo)識語言，它是一種用于編寫超文本文 檔的標(biāo)記語言。 自從1990年首次應(yīng)用于網(wǎng)頁編輯后，HTML迅速成為網(wǎng)頁編輯的主流語言。幾乎所有的網(wǎng)頁都是由HTML或以其他程序語言嵌套在HTML中編寫的。 HTML不是一種程序設(shè)計語言，而是一種結(jié)構(gòu)語言，與平臺無關(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)識符，表示文檔是以超文本標(biāo)識語言（html）編寫的，不帶任何屬性。（常用的W

2、eb瀏覽器都可以自動識別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ī)定文檔的屬性，說明該文檔是可以 按關(guān)鍵字索引的。,4標(biāo)簽,文檔主體部分，規(guī)定瀏覽器窗口用戶區(qū)顯示的內(nèi)容。,“bgcolor”屬性：規(guī)定html文檔的背景色。 “text”屬性：規(guī)定html文檔中文字的顏色。 “l(fā)ink”屬性：規(guī)定html文檔中待連接超鏈接對象的顏色。,一、HTML文檔的基本結(jié)構(gòu)（4）,“alink”屬性：規(guī)定html文檔連接中超鏈接對象的顏色 “vlink”屬性：規(guī)定html文檔已連接超鏈

3、接對象的顏色。,在指定對象的顏色時，可以使用該顏色的代碼或直接 使用該顏色對應(yīng)的英文單詞。如： 或者,二、文本（1）,1標(biāo)簽,換行標(biāo)簽，單獨出現(xiàn)，作用相當(dāng)于插入一個回車符。如果沒有換行標(biāo)簽，瀏覽器將根據(jù)瀏覽器窗口的寬度盡可能長地顯示文本。,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āng)成對使用時，可以添

4、加“align”屬性（left,center,right），規(guī)定段落在瀏覽器中的位置。,二、文本（3）,4標(biāo)簽,水平線標(biāo)簽，單獨使用，作用是換行并在該行下面畫一條水平直線，直線的上下兩端都會留出一定的空白。,“size”屬性：規(guī)定水平線的高度 “width”屬性：規(guī)定水平線的寬度 “align”屬性：規(guī)定水平線在瀏覽器窗口的位置（left,center,right）,二、文本（4）,5標(biāo)簽,預(yù)格式化標(biāo)簽，瀏覽器將按編輯文檔時的字符位置將和標(biāo)簽之間的內(nèi)容一成不變地顯示出來。,6粗體標(biāo)簽,8 下劃線標(biāo)簽,7 斜體標(biāo)簽,9 地址標(biāo)簽,三、圖像（1）,在html文檔中插入圖像是通過標(biāo)簽來實現(xiàn)的。,1S

5、rc屬性,用于指出被引用的圖像文件所在位置。 ,2Width、height屬性,圖像的寬度和高度屬性。,三、圖像（2）,3align屬性,align屬性的參數(shù)值為top、middle、bottom之一，分別表示與圖像相鄰的文字位于圖像的左上方、左面中間和右下方。,4alt屬性,在原先顯示圖片的地方顯示一些有關(guān)圖像的信息。,5vspace屬性,指定圖像與其垂直方向上相鄰對象之間的距離。,三、圖像（3）,6hspace屬性,指定圖像與其水平方向上相鄰對象之間的距離。,7border屬性,指定圖像邊框的寬度或取消邊框（border=0）。,四、列表元素（1）,1無序列表,通過無序列表標(biāo)簽和項目標(biāo)簽來

6、實現(xiàn)的。,2排序列表,通過排序列表標(biāo)簽和項目標(biāo)簽來實現(xiàn)的。可以在標(biāo)簽中添加start屬性來指定序列的起始號，缺省時，序列的起始號為1。,四、列表元素（2）,3目錄列表,通過目錄列表標(biāo)簽和項目標(biāo)簽來實現(xiàn)的。顯示效果與無序列表相同。,4菜單列表,通過排序列表標(biāo)簽和項目標(biāo)簽來實現(xiàn)的。顯示效果基本上與無序列表相同，只不過在排列上更加緊湊。,四、列表元素（3）,5描述性列表,通過描述性列表標(biāo)簽和描述項標(biāo)簽、解釋項標(biāo)簽來實現(xiàn)的。在顯示時，解釋項的內(nèi)容會自動縮進(jìn)一定的距離。,五、表格元素（1）,1標(biāo)簽,表格標(biāo)識符，成對出現(xiàn)。主要屬性有： （1）border屬性：表示表格邊框?qū)挾人嫉南袼攸c數(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)簽，成對出現(xiàn)。主要屬性有： （1） align 屬性：參數(shù)值為left、center或者right， 分別表示表格標(biāo)題與表格的左沿對齊、位于表格 中間和與表格的右沿對齊。缺省時，表格標(biāo)題位 于表格中間。 （2）valign屬性：參數(shù)值為top和bottom之一，分別表 示表格標(biāo)題位于表格的上方和下方。缺省時，位 于上方。,