第2章HTML基礎知識

1、第第2章章 HTML基礎知識基礎知識（一）（一）2.1 HTML基本結(jié)構(gòu)基本結(jié)構(gòu)在HTML文檔中，字符和數(shù)據(jù)的語法結(jié)構(gòu)是通過標記來表示的。標記是HTML語言的標記符號和用標記符號構(gòu)成的各種元素的統(tǒng)稱。標記是描述性的，用一對“”中間包含若干字符表示，通常成對出現(xiàn)，前一個是起始標記，后一個為結(jié)束標記。HTML文檔的基本結(jié)構(gòu)如下：文檔頭部分文檔主體部分基本的HTML頁面從標記開始，以標記結(jié)束，其他所有HTML代碼都位于這兩個標記之間。與之間是文檔頭部分，與之間是文檔主體部分。2.1.1 文檔頭文檔頭文檔頭部分處于與標記之間，在文檔頭部分一般可以使用以下幾種標記：和。這兩個標記指定網(wǎng)頁的標題。例如，“

2、主頁”表示該網(wǎng)頁的標題為“主頁”，在瀏覽器標題欄中顯示的文本即為“主頁”，通常Web搜索工具用它作為索引。和。指定文檔內(nèi)容的樣式表，如字體大小、格式等。在文檔頭部分定義了樣式表后，就可以在文檔主體部分引用樣式表，有關樣式表的具體定義會在2.3節(jié)介紹。注釋內(nèi)容，這兩個標記之間的內(nèi)容為HTML的注釋部分。描述標記，用于描述網(wǎng)頁文檔的屬性參數(shù)。描述標記的格式為，常用的屬性有name、content和為meta的名字；content為頁面的內(nèi)容；http-equiv為content屬性的類別，http-equiv取不同值時，content表示的內(nèi)容也不一樣。 http-e

3、quiv=Content-type時，content表示頁面內(nèi)容的類型，例如：表示meta的名稱為description，網(wǎng)頁是HTML類型，編碼規(guī)則是gb2312。 http-equiv=refresh時，content表示刷新頁面的時間，例如：表示10秒后進入xxx.php頁面，如果不加URL則表示10秒刷新一次本頁面。 http-equiv=Content-language時，content表示頁面使用的語言，例如：表示頁面使用的語言是美國英語。 http-equiv=pics-Label時，content表示頁面內(nèi)容的等級。 http-equiv=expires時，content表示頁

4、面過期的日期。和。在這兩個標記之間可以插入腳本語言程序，例如：alert(你好！);2.1.2 文檔正文文檔正文和是文檔正文標記，文檔的主體部分就處于這兩個標記之間。標記中還可以定義文檔主體的一些內(nèi)容，格式如下：標記常用的屬性如下。background。文檔背景圖片的URL地址。例如：表示文檔背景圖片名稱為back-ground.gif，上面代碼中沒有給出圖片所在的位置，則表示圖片和文檔文件在同一文件夾下，如果圖片和文檔文件不在同一位置，則需要給出圖片的路徑，例如：說明：在指定文件位置時，為防止與轉(zhuǎn)義符“”混淆，一般使用“/”來代替“”。bgcolor。文檔的背景顏色，例如：表示文檔的背景顏色

5、為紅色。系統(tǒng)的許多標記都會使用到顏色值，顏色值一般用顏色名稱或十六進制數(shù)值來表示，表2.1列出了16種標準顏色的名稱及其十六進制數(shù)值。顏 色名 稱十六進制數(shù)值顏 色名 稱十六進制數(shù)值淡藍aqua(cyan)#00FFFF海藍navy#000080黑black#000000橄欖色olive#808000藍blue#0000FF紫purple#800080紫紅fuchsia(magenta)#FF00FF紅red#FF0000灰gray#808080銀色silver#C0C0C0綠green#008000淡青teal#008080橙lime#00FF00白white#FFFFFF褐紅maroon#

6、800000黃yellow#FFFF00表2.1 16種標準顏色的名稱及其十六進制數(shù)值text。文檔中文本的顏色。例如：表示文檔中文字的顏色都為藍色。link。文檔中鏈接的顏色。vlink。文檔中已被訪問過的鏈接的顏色。alink。文檔中正在被選中的鏈接的顏色。2.2 格式化格式化HTML頁面頁面u2.2.1 設置文本格式設置文本格式文本是HTML網(wǎng)頁的重要內(nèi)容。編寫HTML文檔時，可以將文本放在標記之間來設置文本的格式。文本格式包括分段與換行、段落對齊方式、字體、字號、文本顏色及字符樣式等。1. 分段標記分段標記格式如下：段落是文檔的基本信息單位，利用段落標記可以忽略文檔中原有的回車和換行來

7、定義一個新段落，或換行并插入一個空格。單獨用標記時會空一行，使后續(xù)內(nèi)容隔行顯示。同時使用和標記則將段落包圍起來，表示一個分段的塊。分段標記常用屬性如下：align。段落的水平對齊方式。其取值可以是left（左對齊）、center（居中）、right（右對齊）和justify（兩端對齊）。其中l(wèi)eft是默認值，當該屬性省略時則使用默認值。例如：分段標記演示在下面的標記中也會經(jīng)常使用到align屬性。2.2.1 設置文本格式設置文本格式2. 2. 換行標記換行標記換行標記為，該標記將強行中斷當前行，使后續(xù)內(nèi)容在下一行顯示。3. 3. 標題標記標題標記格式如下：其中hn取值為h1、h2、h3、h4、

8、h5和h6，都表示黑體，h1表示字體最大，h6表示字體最小。標題標記的常用屬性也是align，與分段標記類似。4. 4. 對中標記對中標記格式如下：對中標記的作用是將標記中間的內(nèi)容全部居中。5. 5. 塊標記塊標記格式如下：塊標記的作用是定義文檔塊，常用的屬性也是align?！纠?.1】 應用前面提到的各種標記。在第1章新建的PHP項目Practice中新建EX2_1.php文件，輸入以下代碼：標記應用分段標記換行標記對中標記下面使用了div標記標題標記1標題標記2標題標記3運行EX2_1.php文件，在瀏覽器地址欄中輸入http:/localhost/Practice/EX2_1.php，運

9、行結(jié)果如圖2.1所示。圖2.1 EX2_1.php運行結(jié)果6. 水平線標記水平線標記水平線標記用于在文檔中添加一條水平線，可以分隔文檔。格式如下：該標記常用的屬性有align、color、noshade、size和width。color表示線的顏色；noshade沒有值，顯示一條無陰影的實線；size是線的寬度（以像素為單位）；width是線的長度（像素或百分比）。例如：7. 字體標記字體標記格式如下：字體標記用于設置文本的字符格式，主要包括字體、字號和顏色等。常用屬性如下：face。其值為一個或多個字體名，中間用逗號隔開。瀏覽器首先使用第1種字體顯示標記內(nèi)的文本。如果瀏覽器所在計算機中沒有安

10、裝第1種字體，則嘗試使用第2種字體，直到找到匹配的字體為止。如果face中列出的字體都不符合，則使用默認字體。例如：設置字體size。指定字體的大小，值為17，默認值為3。size值越大則字號就越大。也可以使用“+”或“”來指定相對字號，例如：這是6號字這也是6號字color。字體的顏色，顏色值在表2.1中已經(jīng)列出。8. 8.固定字體標記固定字體標記格式如下：粗體斜體大字體小字體固定寬度字體9. 9. 樣式標記樣式標記格式如下：上標下標下劃線刪除線刪除線 10. 10. 特殊標記特殊標記在網(wǎng)頁中一些特殊符號如多個空格和版權符號“”等，是不能直接輸入的，這時可以使用字符實體名稱或數(shù)字表示方式。例

11、如，要在網(wǎng)頁中輸入一個空格，可以輸入“ ”或“ ”。表2.2列出了一些常用的特殊符號和它們的實體名稱及數(shù)字表示。字 符說 明字符實體名稱數(shù)字表示字 符說 明字符實體名稱數(shù)字表示無斷行空格  ￥元符號¥¥美分符號¢¢節(jié)符號§§英鎊符號££版權符號©©注冊符號®®&“and”符號&&度°°大于符號>>立方符號³³歐元符號€€表2.2 常用的特殊符號和它們

12、的實體名稱及數(shù)字表示11. 11. 列表標記列表標記列表標記可以分為有序列表標記、無序列表標記和描述性列表標記。（1）有序列表標記有序列表是在各列表項前面顯示數(shù)字或字母的縮排列表，可以使用有序列表標記和列表項標記來創(chuàng)建。有序列表標記的格式如下：列表項1列表項2列表項n（2）無序列表標記無序列表是一種在各列表項前面顯示特殊項目符號的縮排列表，可以使用標記和來創(chuàng)建，格式如下：列表項1列表項2列表項n（3）描述性列表標記格式如下：列表描述項列表項列表項列表描述項列表項【例2.2】 創(chuàng)建一個有序列表，要求列表描述項字體為黑體，斜體，顏色為紅色，字號為4。列表項序列從B開始。新建EX2_2.php文件，

13、輸入以下代碼：有序列表計算機課程計算機導論操作系統(tǒng)計算機原理數(shù)據(jù)結(jié)構(gòu)運行EX2_2.php文件，結(jié)果如圖2.2所示。圖2.2 EX2_2.php運行結(jié)果2.2.2 多媒體標記多媒體標記1. 1. 圖像標記圖像標記利用圖像標記可以向網(wǎng)頁中插入圖像或在網(wǎng)頁中播放視頻文件。格式如下：圖像標記的屬性如下：src。圖像文件的URL地址，圖像可以是jpeg、gif或png文件。alt。圖像的簡單說明，在瀏覽器不能顯示圖像或加載時間過長時顯示。height。所顯示圖像的高度（像素或百分比）。width。所顯示圖像的寬度。hspace。與左右相鄰對象的間隔。vspace。與上下相鄰對象的間隔。align。圖像

14、達不到顯示區(qū)域大小時的對齊方式，當頁面中有圖像與文本混排時，可以使用此屬性。border。圖像邊框像素數(shù)。controls。指定該選項后，若有多媒體文件則顯示一套視頻控件。dynsrc。指定要播放的多媒體文件。在標記中dynsrc屬性要優(yōu)先于src屬性，如果計算機具有多媒體功能，且指定的多媒體文件存在，則播放該文件，否則顯示src指定的圖像。start。指定何時開始播放多媒體文件。loop。指定多媒體文件播放次數(shù)。loopdealy。指定多媒體文件播放之間的延遲（以ms為單位）。例如：2. 字幕標記字幕標記在HTML語言中，可以在頁面中插入字幕，水平或垂直滾動顯示文本信息。字幕標記格式如下：滾

15、動的文本信息說明：標記的主要屬性如下：align。指定字幕與周圍主要屬性的對齊方式。取值是top、middle、bottom。behavior。指定文本動畫的類型。取值是scroll（滾動）、slide（滑行）、alternate（交替）。bgcolor。指定字幕的背景顏色。direction。指定文本的移動方向。取值是down、left、right、up。height。指定字幕的高度。hspace。指定字幕的外部邊緣與瀏覽器窗口之間的左右邊距。vspace。指定字幕的外部邊緣與瀏覽器窗口之間的上下邊距。loop。指定字幕的滾動次數(shù)，其值是整數(shù)，默認為infinite，即重復顯示。scroll

16、amount。指定字幕文本每次移動的距離。scrolldealy。指定前段字幕文本延遲多少毫秒后重新開始移動文本。例如：滾動字幕3. 背景音樂標記背景音樂標記背景音樂標記只能放在文檔頭部分，也就是與標記之間，格式如下：背景音樂標記的主要屬性如下：balance。指定將聲音分成左聲道和右聲道，取值為1000010000，默認值為0。loop。指定聲音播放的次數(shù)。設置為0，表示播放一次；設置為大于0的整數(shù)，則播放指定的次數(shù)；設置為1表示反復播放。src。指定播放的聲音文件的URL。volume。指定音量高低，取值為100000，默認值為0。2.2.3 表格的設置表格的設置一個表格由表頭、行和單元格

17、組成，常用于組織、顯示信息或安排頁面布局。一個表格通常由標記開始，到標記結(jié)束。表格的內(nèi)容由、和標記定義。說明表的一個行，說明表的列數(shù)和相應欄目的名稱，用來填充由和標記組成的表格。表格格式如下：表格標題文字第1個列表頭 第2個列表頭 第n個列表頭第1行第1列數(shù)據(jù) 第1行第2列數(shù)據(jù)第1行第n列數(shù)據(jù)第n行第1列數(shù)據(jù) 第n行第2列數(shù)據(jù)第n行第n列數(shù)據(jù)1. 1. 標記的屬性標記的屬性用標記創(chuàng)建表格時可以設置如下屬性：align。指定表格的對齊方式，取值為left（左對齊）、right（右對齊）、center（居中對齊），默認值為left。background。指定表格背景圖片的URL地址。bgcolor

18、。指定表格的背景顏色。border。指定表格邊框的寬度（像素），默認值為0。bordercolor。指定表格邊框的顏色，border不等于0時起作用。bordercolordark。指定3D邊框的陰影顏色。bordercolorlight。指定3D邊框的高亮顯示顏色。cellpadding。指定單元格內(nèi)數(shù)據(jù)與單元格邊框之間的間距。cellspacing。指定單元格之間的間距。width。指定表格的寬度。2. 2. 標記的屬性標記的屬性表格中的每一行都是由標記來定義的，它有如下屬性：align。指定行中單元格的水平對齊方式。background。指定行的背景圖像文件的URL地址。bgcolor。指定行的背景顏色。bordercolor。指定行的邊框顏色，只有標記的border屬性不等于0時起作用。bordercolordark。指定行的3D邊框的陰影顏色。bordercolorlight。