1、3、HTML基礎知識 3.1 HTML概念 3.2 語法結構 3.3 格式修飾標記 3.4 創建HTML文件3.1HTML概念 HTML是“Hypertext Marked Language”的縮寫，即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺，需要通過WEB瀏覽器顯示出效果。 所謂超文本，是因為它可以加入圖片、聲音、動畫、影視等內容，HTML并不是一種程序語言，它只是一種排版網頁中資料顯示的結構語言，易學易懂，非常簡單。 3.2HTML語法結構3.3格式修飾標記 HTML中有許多格式標記，常用的有居中、換行、

2、色彩、大小、字體、鏈接等，利用它們可以有效地控制內容的顯示。由于格式標記多而復雜，一般很難完全記憶。Dreamweaver等開發工具能夠自動添加格式標記，所以一般只需要了解這些格式標記都是什么含義就可以了。 HTML的標簽分單標簽和成對標簽兩種。 成對標簽是由首標簽 和尾標簽組成的，成對標簽的作用域只作用于這對標簽中的文檔。單獨標簽的格式，單獨標簽在相應的位置插入元素就可以了。 HTML文件的基本結構 HTML文件是一種純文本格式的文件，HTML文件包括頭部（head）和主體（body）。文件的基本結構為： 網頁的標題網頁的標題 網頁的內容網頁的內容 大多數標簽都有自己的一些屬性, 屬性要寫在

3、始標簽內，屬性用于進一步改變顯示的效果, 各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認值，其格式如下： 要設置的內容 作為一般的原則，大多數屬性值不用加雙引號。但是如果包含空格、號，號等特殊字符的屬性值必須加入雙引號。為了養成良好的習慣，提倡全部對屬性值加雙引號。如：要設置字體的文本內容 說明： HTML文件以開頭，以結尾。 ：表示這是網頁的頭部，用來說明文件命名和與文件本身的相關信息。可以包括網頁的標題部分：。 ：表示網頁的主體即正文部分。 HTML語言并不要求在書寫時縮進，但為了程序的易讀性，建議網頁設計制作者使標記的首尾對齊，內部的內容向右縮進幾格。【例2-1】簡單的HT

4、ML文件。 簡單的HTML文件 最簡單的網頁 圖2-1 例2-1的顯示效果 將文件以2_1.htm為文件名存盤，存放的位置是本機的工作目錄：ASP例（參見1.2.3）。有以下兩種方式可以執行HTML文件2_1.htm：3.4創建HTML文件 創建HTML文件十分簡單，在普通的Windows記事本（如圖一）、寫字板中都可以進行編輯。目前，有許多圖形化的網頁開發工具，如Dreamweaver（如圖二）、FrontPage等。這些開發工具能夠采用“所見即所得”的方法，直接處理網頁，而不需要編寫繁瑣的標記，這使得用戶在沒有HTML語言基礎的情況下，照樣可以編寫網頁。但這些工具在自動生成網頁時，往往會產

5、生一些垃圾代碼，從而降低了網頁的效率 。表2 顏色代碼表名稱英文顏色名16進制代碼黑色black#000000藍色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080綠色green#008000乳白色ivory#FFFFF0桔黃色orange#FFA500粉紅色pink#FFC0CB紅色red#FF0000白色white#FFFFFF黃色yellow#FFFF00深紅色crimson#CD061F黃綠色greenyellow#0B6EFF水藍色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2】使用網頁的背景色（bgc

6、olor）屬性，可以設定整個網頁的背景顏色；使用網頁的文本色（text）屬性，可以設定整個網頁文字的顏色。 這是主體之外的文本 試試BODY標記的屬性 設置網頁的背景色屬性為黃綠色, 設置網頁的文本色屬性為藍色 顯示效果如圖2-2所示。圖2-2 使用網頁的bgcolor屬性3.2.3 段落和文字標記 1. 標題文字標記 2. 文本文字標記 3. 設置字型 4. 換行、換段標記 5. 分區顯示標記 6. 水平線 7. 特殊符號設置文本1.輸入文本 應用Dreamweaver編輯網頁時，在文檔窗口中光標為默認顯示狀態。要添加文本，首先應將光標移動到文檔窗口中的編輯區域，然后直接輸入文本，就像在其他

7、文本編輯器中一樣。打開一個文檔，在文檔中單擊鼠標左鍵，將光標置于其中，然后在光標后面輸入文本。2.2.設置文本屬性設置文本屬性 利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方式等，以獲得預期的效果。選擇式等，以獲得預期的效果。選擇“窗口窗口 屬性屬性”命令，彈出命令，彈出“屬性屬性”面板。面板。“屬性”面板3.3.輸入連續的空格輸入連續的空格在默認狀態下，在默認狀態下，Dreamweaver Dreamweaver 只允許網站設計者輸入一個空格，要只允許網站設計者輸入一個空格，要輸入連續多個空格則需要進行設置或通過特定操

8、作才能實現。輸入連續多個空格則需要進行設置或通過特定操作才能實現。設置設置“首選參數首選參數”對話框對話框選擇選擇“編輯編輯 首選參數首選參數”命令，彈出命令，彈出“首選參數首選參數”對話框，在對話對話框，在對話框中選擇框中選擇“允許多個連續的空格允許多個連續的空格”復選框。復選框。直接插入多個連續空格直接插入多個連續空格在在Dreamweaver Dreamweaver 中插入多個連續空格，有以下幾種方法。中插入多個連續空格，有以下幾種方法。選擇選擇“插入插入”面板中的面板中的“文本文本”選項卡，單擊選項卡，單擊“字符字符”展開式按展開式按鈕鈕 ，選擇，選擇“不換行空格不換行空格”按鈕。按鈕

9、。選擇選擇“插入記錄插入記錄 HTML HTML 特殊字符特殊字符 不換行空格不換行空格”命令，或按命令，或按快捷鍵。快捷鍵。將輸入法轉換到中文的全角狀態下。將輸入法轉換到中文的全角狀態下。【例3】使用標題標記設置標題內容的大小與對齊方式。 瀏覽器的顯示效果如圖2-3所示。文本文字標記 在網頁中為了增強頁面的層次，其中的文字可以用不同的大小、字體、字型、顏色。文本文字標記用來設定文字的字體、字號和顏色。其格式為： FONT size= 被設置的文字被設置的文字 說明：標記的屬性包括：size、face、color。 size屬性用來設置文字的大小。數字的取值范圍從17，size取1時最小，取7

10、時最大。圖2-4 設置文本文字屬性 4.4.設置頁邊距設置頁邊距 按照文章的書寫規則，正文與紙的四周需要留有一定的距離，這個距按照文章的書寫規則，正文與紙的四周需要留有一定的距離，這個距離叫做頁邊距。網頁設計也如此，在默認狀態下文檔的上、下、左、右邊離叫做頁邊距。網頁設計也如此，在默認狀態下文檔的上、下、左、右邊距不為零。距不為零。 修改頁邊距的具體操作步驟如下。修改頁邊距的具體操作步驟如下。（1 1）選擇）選擇“修改修改 頁面屬性頁面屬性”命令，彈出命令，彈出“頁面屬性頁面屬性”對話框。對話框。（2 2）根據需要在對話框的）根據需要在對話框的“左邊距左邊距”、“右邊距右邊距”、“上邊距上邊距

11、”、“下邊距下邊距”、“邊距寬度邊距寬度”和和“邊距高度邊距高度”選項的數值框中輸入相應的數選項的數值框中輸入相應的數值。值。5.5.設置網頁的標題設置網頁的標題 HTML HTML頁面的標題可以幫助站點瀏覽者理解所查看網頁的內容，并在瀏覽頁面的標題可以幫助站點瀏覽者理解所查看網頁的內容，并在瀏覽者的歷史記錄和書簽列表中標志頁面。文檔的文件名是通過保存文件命令者的歷史記錄和書簽列表中標志頁面。文檔的文件名是通過保存文件命令保存的網頁文件名稱，而頁面標題是瀏覽者在瀏覽網頁時瀏覽器標題欄中保存的網頁文件名稱，而頁面標題是瀏覽者在瀏覽網頁時瀏覽器標題欄中顯示的信息。顯示的信息。 6.6.設置網頁的默

12、認格式設置網頁的默認格式 用戶在制作新網頁時，頁面都有一些默認的屬性，如網頁的標題、網頁用戶在制作新網頁時，頁面都有一些默認的屬性，如網頁的標題、網頁邊界、文字編碼、文字顏色、超鏈接的顏色等。若需要修改網頁的頁面屬邊界、文字編碼、文字顏色、超鏈接的顏色等。若需要修改網頁的頁面屬性，可選擇性，可選擇“修改修改 頁面屬性頁面屬性”命令，彈出命令，彈出“頁面屬性頁面屬性”對話框。對話框。頁面屬性對話框文本編輯1.1.改變文本的大小改變文本的大小 Dreamweaver Dreamweaver 提供了兩種改變文本大小的方法，一種是設置文本的默認提供了兩種改變文本大小的方法，一種是設置文本的默認大小，另

13、一種是設置選中文本的大小。大小，另一種是設置選中文本的大小。 設置文本的默認大小設置文本的默認大小設置選中文本的大小設置選中文本的大小文本的相對大小和絕對大小文本的相對大小和絕對大小2.2.改變文本的顏色改變文本的顏色 豐富的視覺色彩可以吸引用戶的注意，網頁中的文本不僅可以是黑色，還豐富的視覺色彩可以吸引用戶的注意，網頁中的文本不僅可以是黑色，還可以呈現為其他色彩，最多時可達到可以呈現為其他色彩，最多時可達到16 777 21616 777 216種顏色。顏色的種類與用種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關，通常在戶顯示器的分辨率和顏色值有關，通常在216216種網頁色彩中選擇文字

14、的顏色。種網頁色彩中選擇文字的顏色。在在Dreamweaver Dreamweaver 中提供了兩種改變文本顏色的方法。中提供了兩種改變文本顏色的方法。設置文本的默認顏色設置文本的默認顏色設置選中文本的顏色設置選中文本的顏色3.3.改變文本的字體改變文本的字體 Dreamweaver Dreamweaver 提供了兩種改變文本字體的方法，一種是設置文本的默提供了兩種改變文本字體的方法，一種是設置文本的默認字體，一種是設置選中文本的字體。認字體，一種是設置選中文本的字體。設置文本的默認字體設置文本的默認字體設置選中文本的字體設置選中文本的字體4.4.改變文本的對齊方式改變文本的對齊方式 文本的對

15、齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的對文本的對齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的對齊方式。對齊方式按鈕有以下齊方式。對齊方式按鈕有以下4 4種。種。“左對齊左對齊”按鈕：使文本在瀏覽器窗口中左對齊。按鈕：使文本在瀏覽器窗口中左對齊。“居中對齊居中對齊”按鈕：使文本在瀏覽器窗口中居中對齊。按鈕：使文本在瀏覽器窗口中居中對齊。“右對齊右對齊”按鈕：使文本在瀏覽器窗口中右對齊。按鈕：使文本在瀏覽器窗口中右對齊。“兩端對齊兩端對齊”按鈕：使文本在瀏覽器窗口中兩端對齊。按鈕：使文本在瀏覽器窗口中兩端對齊。5.5.設置文本樣式設置文本樣式 文本樣式是指字符的外觀顯示方式，

16、例如加粗文本、傾斜文本和文本文本樣式是指字符的外觀顯示方式，例如加粗文本、傾斜文本和文本加下劃線等。加下劃線等。標記格式字體效果說明受影響的文字受影響的文字受影響的文字加粗受影響的文字受影響的文字斜體受影響的文字受影響的文字帶下劃線受影響的文字受影響的文字標準打印機字體受影響的文字受影響的文字帶刪除線受影響的文字下標受影響的文字上標受影響的文字大字體文本受影響的文字小字體文本【例5】使用字型標記設置文字的風格。圖2-5 設置文本的風格6.6.段落文本段落文本 段落是指描述一個主題并且格式統一的一段文字。在文檔窗口中，輸入段落是指描述一個主題并且格式統一的一段文字。在文檔窗口中，輸入一段文字后按

17、一段文字后按EnterEnter鍵，這段文字就顯示在鍵，這段文字就顯示在標簽中。標簽中。 應用段落格式應用段落格式指定預格式指定預格式7.7.插入換行符插入換行符 為段落添加換行符有以下幾種方法。為段落添加換行符有以下幾種方法。 （1 1）選擇）選擇“插入插入”面板的面板的“文本文本”選項卡，單擊選項卡，單擊“字符字符”展開式工展開式工具按鈕，選擇具按鈕，選擇“換行符換行符”按鈕。按鈕。 （2 2）按）按組合鍵。組合鍵。 （3 3）選擇）選擇“插入記錄插入記錄 HTML HTML 特殊字符特殊字符 換行符換行符”命令。命令。【例2-6】換行與換段標記的使用。圖2-6 換行與換段標記的使用水平線

18、1.1.水平線水平線 分割線又叫做水平線，可以將文字、圖像、表格等對象在視覺上分割開。分割線又叫做水平線，可以將文字、圖像、表格等對象在視覺上分割開。一篇內容繁雜的文檔，如果合理地放置幾條水平線，就會變得層次分明，一篇內容繁雜的文檔，如果合理地放置幾條水平線，就會變得層次分明，便于閱讀。便于閱讀。創建水平線創建水平線修改水平線修改水平線 列表列表”命令，彈出其子菜單，選擇命令，彈出其子菜單，選擇“項目列表項目列表”或或“編號列表編號列表”命令。命令。 練習：2.2.修改項目符號或編號修改項目符號或編號（1 1）將插入點放在設置項目符號或編號的文本中。）將插入點放在設置項目符號或編號的文本中。（

19、2 2）通過以下幾種方法啟動）通過以下幾種方法啟動“列表屬性列表屬性”對話框。對話框。 單擊單擊“屬性屬性”面板中的面板中的“列表項目列表項目”按鈕。按鈕。 選擇選擇“文本文本 列表列表 屬性屬性”命令。命令。3.3.設置文本縮進格式設置文本縮進格式 設置文本縮進格式有以下幾種方法。設置文本縮進格式有以下幾種方法。 （1 1）在）在“屬性屬性”面板中單擊面板中單擊“文本縮進文本縮進”按鈕或按鈕或“文本凸出文本凸出”按鈕，按鈕，使段落向右移動或向左移動。使段落向右移動或向左移動。 （2 2）選擇）選擇“文本文本 縮進縮進”命令或命令或“文本文本 凸出凸出”命令，使段落向右命令，使段落向右移動或向左移動。移動或向左移動。 （3 3）按）按組合鍵或按組合鍵或按組合鍵