第3講html-文本編輯

1、3、HTML基礎(chǔ)知識(shí) 3.1 HTML概念 3.2 語(yǔ)法結(jié)構(gòu) 3.3 格式修飾標(biāo)記 3.4 創(chuàng)建HTML文件3.1HTML概念 HTML是“Hypertext Marked Language”的縮寫，即超文本標(biāo)記語(yǔ)言，是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，需要通過(guò)WEB瀏覽器顯示出效果。 所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，HTML并不是一種程序語(yǔ)言，它只是一種排版網(wǎng)頁(yè)中資料顯示的結(jié)構(gòu)語(yǔ)言，易學(xué)易懂，非常簡(jiǎn)單。 3.2HTML語(yǔ)法結(jié)構(gòu)3.3格式修飾標(biāo)記 HTML中有許多格式標(biāo)記，常用的有居中、換行、

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

3、始標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果, 各屬性之間無(wú)先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值，其格式如下： 要設(shè)置的內(nèi)容 作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是如果包含空格、號(hào)，號(hào)等特殊字符的屬性值必須加入雙引號(hào)。為了養(yǎng)成良好的習(xí)慣，提倡全部對(duì)屬性值加雙引號(hào)。如：要設(shè)置字體的文本內(nèi)容 說(shuō)明： HTML文件以開頭，以結(jié)尾。 ：表示這是網(wǎng)頁(yè)的頭部，用來(lái)說(shuō)明文件命名和與文件本身的相關(guān)信息?？梢园ňW(wǎng)頁(yè)的標(biāo)題部分：。 ：表示網(wǎng)頁(yè)的主體即正文部分。 HTML語(yǔ)言并不要求在書寫時(shí)縮進(jìn)，但為了程序的易讀性，建議網(wǎng)頁(yè)設(shè)計(jì)制作者使標(biāo)記的首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格?！纠?-1】簡(jiǎn)單的HT

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

5、生一些垃圾代碼，從而降低了網(wǎng)頁(yè)的效率 。表2 顏色代碼表名稱英文顏色名16進(jìn)制代碼黑色black#000000藍(lán)色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水藍(lán)色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2】使用網(wǎng)頁(yè)的背景色（bgc

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

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

8、作才能實(shí)現(xiàn)。輸入連續(xù)多個(gè)空格則需要進(jìn)行設(shè)置或通過(guò)特定操作才能實(shí)現(xiàn)。設(shè)置設(shè)置“首選參數(shù)首選參數(shù)”對(duì)話框?qū)υ捒蜻x擇選擇“編輯編輯 首選參數(shù)首選參數(shù)”命令，彈出命令，彈出“首選參數(shù)首選參數(shù)”對(duì)話框，在對(duì)話對(duì)話框，在對(duì)話框中選擇框中選擇“允許多個(gè)連續(xù)的空格允許多個(gè)連續(xù)的空格”復(fù)選框。復(fù)選框。直接插入多個(gè)連續(xù)空格直接插入多個(gè)連續(xù)空格在在Dreamweaver Dreamweaver 中插入多個(gè)連續(xù)空格，有以下幾種方法。中插入多個(gè)連續(xù)空格，有以下幾種方法。選擇選擇“插入插入”面板中的面板中的“文本文本”選項(xiàng)卡，單擊選項(xiàng)卡，單擊“字符字符”展開式按展開式按鈕鈕 ，選擇，選擇“不換行空格不換行空格”按鈕。按鈕

9、。選擇選擇“插入記錄插入記錄 HTML HTML 特殊字符特殊字符 不換行空格不換行空格”命令，或按命令，或按快捷鍵?？旖萱I。將輸入法轉(zhuǎn)換到中文的全角狀態(tài)下。將輸入法轉(zhuǎn)換到中文的全角狀態(tài)下?！纠?】使用標(biāo)題標(biāo)記設(shè)置標(biāo)題內(nèi)容的大小與對(duì)齊方式。 瀏覽器的顯示效果如圖2-3所示。文本文字標(biāo)記 在網(wǎng)頁(yè)中為了增強(qiáng)頁(yè)面的層次，其中的文字可以用不同的大小、字體、字型、顏色。文本文字標(biāo)記用來(lái)設(shè)定文字的字體、字號(hào)和顏色。其格式為： FONT size= 被設(shè)置的文字被設(shè)置的文字 說(shuō)明：標(biāo)記的屬性包括：size、face、color。 size屬性用來(lái)設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時(shí)最小，取7

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

11、”、“下邊距下邊距”、“邊距寬度邊距寬度”和和“邊距高度邊距高度”選項(xiàng)的數(shù)值框中輸入相應(yīng)的數(shù)選項(xiàng)的數(shù)值框中輸入相應(yīng)的數(shù)值。值。5.5.設(shè)置網(wǎng)頁(yè)的標(biāo)題設(shè)置網(wǎng)頁(yè)的標(biāo)題 HTML HTML頁(yè)面的標(biāo)題可以幫助站點(diǎn)瀏覽者理解所查看網(wǎng)頁(yè)的內(nèi)容，并在瀏覽頁(yè)面的標(biāo)題可以幫助站點(diǎn)瀏覽者理解所查看網(wǎng)頁(yè)的內(nèi)容，并在瀏覽者的歷史記錄和書簽列表中標(biāo)志頁(yè)面。文檔的文件名是通過(guò)保存文件命令者的歷史記錄和書簽列表中標(biāo)志頁(yè)面。文檔的文件名是通過(guò)保存文件命令保存的網(wǎng)頁(yè)文件名稱，而頁(yè)面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)瀏覽器標(biāo)題欄中保存的網(wǎng)頁(yè)文件名稱，而頁(yè)面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)瀏覽器標(biāo)題欄中顯示的信息。顯示的信息。 6.6.設(shè)置網(wǎng)頁(yè)的默

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

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

14、的顏色。種網(wǎng)頁(yè)色彩中選擇文字的顏色。在在Dreamweaver Dreamweaver 中提供了兩種改變文本顏色的方法。中提供了兩種改變文本顏色的方法。設(shè)置文本的默認(rèn)顏色設(shè)置文本的默認(rèn)顏色設(shè)置選中文本的顏色設(shè)置選中文本的顏色3.3.改變文本的字體改變文本的字體 Dreamweaver Dreamweaver 提供了兩種改變文本字體的方法，一種是設(shè)置文本的默提供了兩種改變文本字體的方法，一種是設(shè)置文本的默認(rèn)字體，一種是設(shè)置選中文本的字體。認(rèn)字體，一種是設(shè)置選中文本的字體。設(shè)置文本的默認(rèn)字體設(shè)置文本的默認(rèn)字體設(shè)置選中文本的字體設(shè)置選中文本的字體4.4.改變文本的對(duì)齊方式改變文本的對(duì)齊方式 文本的對(duì)

15、齊方式是指文字相對(duì)于文檔窗口或?yàn)g覽器窗口在水平位置的對(duì)文本的對(duì)齊方式是指文字相對(duì)于文檔窗口或?yàn)g覽器窗口在水平位置的對(duì)齊方式。對(duì)齊方式按鈕有以下齊方式。對(duì)齊方式按鈕有以下4 4種。種?！白髮?duì)齊左對(duì)齊”按鈕：使文本在瀏覽器窗口中左對(duì)齊。按鈕：使文本在瀏覽器窗口中左對(duì)齊?！熬又袑?duì)齊居中對(duì)齊”按鈕：使文本在瀏覽器窗口中居中對(duì)齊。按鈕：使文本在瀏覽器窗口中居中對(duì)齊。“右對(duì)齊右對(duì)齊”按鈕：使文本在瀏覽器窗口中右對(duì)齊。按鈕：使文本在瀏覽器窗口中右對(duì)齊?！皟啥藢?duì)齊兩端對(duì)齊”按鈕：使文本在瀏覽器窗口中兩端對(duì)齊。按鈕：使文本在瀏覽器窗口中兩端對(duì)齊。5.5.設(shè)置文本樣式設(shè)置文本樣式 文本樣式是指字符的外觀顯示方式，

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

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

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

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