版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(rèn)領(lǐng)
文檔簡介
1、3、HTML基礎(chǔ)知識 3.1 HTML概念 3.2 語法結(jié)構(gòu) 3.3 格式修飾標(biāo)記 3.4 創(chuàng)建HTML文件3.1HTML概念 HTML是“Hypertext Marked Language”的縮寫,即超文本標(biāo)記語言,是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔,它能獨立于各種操作系統(tǒng)平臺,需要通過WEB瀏覽器顯示出效果。 所謂超文本,是因為它可以加入圖片、聲音、動畫、影視等內(nèi)容,HTML并不是一種程序語言,它只是一種排版網(wǎng)頁中資料顯示的結(jié)構(gòu)語言,易學(xué)易懂,非常簡單。 3.2HTML語法結(jié)構(gòu)3.3格式修飾標(biāo)記 HTML中有許多格式標(biāo)記,常用的有居中、換行、
2、色彩、大小、字體、鏈接等,利用它們可以有效地控制內(nèi)容的顯示。由于格式標(biāo)記多而復(fù)雜,一般很難完全記憶。Dreamweaver等開發(fā)工具能夠自動添加格式標(biāo)記,所以一般只需要了解這些格式標(biāo)記都是什么含義就可以了。 HTML的標(biāo)簽分單標(biāo)簽和成對標(biāo)簽兩種。 成對標(biāo)簽是由首標(biāo)簽 和尾標(biāo)簽組成的,成對標(biāo)簽的作用域只作用于這對標(biāo)簽中的文檔。單獨標(biāo)簽的格式,單獨標(biāo)簽在相應(yīng)的位置插入元素就可以了。 HTML文件的基本結(jié)構(gòu) HTML文件是一種純文本格式的文件,HTML文件包括頭部(head)和主體(body)。文件的基本結(jié)構(gòu)為: 網(wǎng)頁的標(biāo)題網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容網(wǎng)頁的內(nèi)容 大多數(shù)標(biāo)簽都有自己的一些屬性, 屬性要寫在
3、始標(biāo)簽內(nèi),屬性用于進一步改變顯示的效果, 各屬性之間無先后次序,屬性是可選的,屬性也可以省略而采用默認(rèn)值,其格式如下: 要設(shè)置的內(nèi)容 作為一般的原則,大多數(shù)屬性值不用加雙引號。但是如果包含空格、號,號等特殊字符的屬性值必須加入雙引號。為了養(yǎng)成良好的習(xí)慣,提倡全部對屬性值加雙引號。如:要設(shè)置字體的文本內(nèi)容 說明: HTML文件以開頭,以結(jié)尾。 :表示這是網(wǎng)頁的頭部,用來說明文件命名和與文件本身的相關(guān)信息??梢园ňW(wǎng)頁的標(biāo)題部分:。 :表示網(wǎng)頁的主體即正文部分。 HTML語言并不要求在書寫時縮進,但為了程序的易讀性,建議網(wǎng)頁設(shè)計制作者使標(biāo)記的首尾對齊,內(nèi)部的內(nèi)容向右縮進幾格?!纠?-1】簡單的HT
4、ML文件。 簡單的HTML文件 最簡單的網(wǎng)頁 圖2-1 例2-1的顯示效果 將文件以2_1.htm為文件名存盤,存放的位置是本機的工作目錄:ASP例(參見1.2.3)。有以下兩種方式可以執(zhí)行HTML文件2_1.htm:3.4創(chuàng)建HTML文件 創(chuàng)建HTML文件十分簡單,在普通的Windows記事本(如圖一)、寫字板中都可以進行編輯。目前,有許多圖形化的網(wǎng)頁開發(fā)工具,如Dreamweaver(如圖二)、FrontPage等。這些開發(fā)工具能夠采用“所見即所得”的方法,直接處理網(wǎng)頁,而不需要編寫繁瑣的標(biāo)記,這使得用戶在沒有HTML語言基礎(chǔ)的情況下,照樣可以編寫網(wǎng)頁。但這些工具在自動生成網(wǎng)頁時,往往會產(chǎn)
5、生一些垃圾代碼,從而降低了網(wǎng)頁的效率 。表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】使用網(wǎng)頁的背景色(bgc
6、olor)屬性,可以設(shè)定整個網(wǎng)頁的背景顏色;使用網(wǎng)頁的文本色(text)屬性,可以設(shè)定整個網(wǎng)頁文字的顏色。 這是主體之外的文本 試試BODY標(biāo)記的屬性 設(shè)置網(wǎng)頁的背景色屬性為黃綠色, 設(shè)置網(wǎng)頁的文本色屬性為藍色 顯示效果如圖2-2所示。圖2-2 使用網(wǎng)頁的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. 特殊符號設(shè)置文本1.輸入文本 應(yīng)用Dreamweaver編輯網(wǎng)頁時,在文檔窗口中光標(biāo)為默認(rèn)顯示狀態(tài)。要添加文本,首先應(yīng)將光標(biāo)移動到文檔窗口中的編輯區(qū)域,然后直接輸入文本,就像在其他
7、文本編輯器中一樣。打開一個文檔,在文檔中單擊鼠標(biāo)左鍵,將光標(biāo)置于其中,然后在光標(biāo)后面輸入文本。2.2.設(shè)置文本屬性設(shè)置文本屬性 利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方式等,以獲得預(yù)期的效果。選擇式等,以獲得預(yù)期的效果。選擇“窗口窗口 屬性屬性”命令,彈出命令,彈出“屬性屬性”面板。面板?!皩傩浴泵姘?.3.輸入連續(xù)的空格輸入連續(xù)的空格在默認(rèn)狀態(tài)下,在默認(rèn)狀態(tài)下,Dreamweaver Dreamweaver 只允許網(wǎng)站設(shè)計者輸入一個空格,要只允許網(wǎng)站設(shè)計者輸入一個空格,要輸入連續(xù)多個空格則需要進行設(shè)置或通過特定操
8、作才能實現(xiàn)。輸入連續(xù)多個空格則需要進行設(shè)置或通過特定操作才能實現(xiàn)。設(shè)置設(shè)置“首選參數(shù)首選參數(shù)”對話框?qū)υ捒蜻x擇選擇“編輯編輯 首選參數(shù)首選參數(shù)”命令,彈出命令,彈出“首選參數(shù)首選參數(shù)”對話框,在對話對話框,在對話框中選擇框中選擇“允許多個連續(xù)的空格允許多個連續(xù)的空格”復(fù)選框。復(fù)選框。直接插入多個連續(xù)空格直接插入多個連續(xù)空格在在Dreamweaver Dreamweaver 中插入多個連續(xù)空格,有以下幾種方法。中插入多個連續(xù)空格,有以下幾種方法。選擇選擇“插入插入”面板中的面板中的“文本文本”選項卡,單擊選項卡,單擊“字符字符”展開式按展開式按鈕鈕 ,選擇,選擇“不換行空格不換行空格”按鈕。按鈕
9、。選擇選擇“插入記錄插入記錄 HTML HTML 特殊字符特殊字符 不換行空格不換行空格”命令,或按命令,或按快捷鍵??旖萱I。將輸入法轉(zhuǎn)換到中文的全角狀態(tài)下。將輸入法轉(zhuǎn)換到中文的全角狀態(tài)下。【例3】使用標(biāo)題標(biāo)記設(shè)置標(biāo)題內(nèi)容的大小與對齊方式。 瀏覽器的顯示效果如圖2-3所示。文本文字標(biāo)記 在網(wǎng)頁中為了增強頁面的層次,其中的文字可以用不同的大小、字體、字型、顏色。文本文字標(biāo)記用來設(shè)定文字的字體、字號和顏色。其格式為: FONT size= 被設(shè)置的文字被設(shè)置的文字 說明:標(biāo)記的屬性包括:size、face、color。 size屬性用來設(shè)置文字的大小。數(shù)字的取值范圍從17,size取1時最小,取7
10、時最大。圖2-4 設(shè)置文本文字屬性 4.4.設(shè)置頁邊距設(shè)置頁邊距 按照文章的書寫規(guī)則,正文與紙的四周需要留有一定的距離,這個距按照文章的書寫規(guī)則,正文與紙的四周需要留有一定的距離,這個距離叫做頁邊距。網(wǎng)頁設(shè)計也如此,在默認(rèn)狀態(tài)下文檔的上、下、左、右邊離叫做頁邊距。網(wǎng)頁設(shè)計也如此,在默認(rèn)狀態(tài)下文檔的上、下、左、右邊距不為零。距不為零。 修改頁邊距的具體操作步驟如下。修改頁邊距的具體操作步驟如下。(1 1)選擇)選擇“修改修改 頁面屬性頁面屬性”命令,彈出命令,彈出“頁面屬性頁面屬性”對話框。對話框。(2 2)根據(jù)需要在對話框的)根據(jù)需要在對話框的“左邊距左邊距”、“右邊距右邊距”、“上邊距上邊距
11、”、“下邊距下邊距”、“邊距寬度邊距寬度”和和“邊距高度邊距高度”選項的數(shù)值框中輸入相應(yīng)的數(shù)選項的數(shù)值框中輸入相應(yīng)的數(shù)值。值。5.5.設(shè)置網(wǎng)頁的標(biāo)題設(shè)置網(wǎng)頁的標(biāo)題 HTML HTML頁面的標(biāo)題可以幫助站點瀏覽者理解所查看網(wǎng)頁的內(nèi)容,并在瀏覽頁面的標(biāo)題可以幫助站點瀏覽者理解所查看網(wǎng)頁的內(nèi)容,并在瀏覽者的歷史記錄和書簽列表中標(biāo)志頁面。文檔的文件名是通過保存文件命令者的歷史記錄和書簽列表中標(biāo)志頁面。文檔的文件名是通過保存文件命令保存的網(wǎng)頁文件名稱,而頁面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁時瀏覽器標(biāo)題欄中保存的網(wǎng)頁文件名稱,而頁面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁時瀏覽器標(biāo)題欄中顯示的信息。顯示的信息。 6.6.設(shè)置網(wǎng)頁的默
12、認(rèn)格式設(shè)置網(wǎng)頁的默認(rèn)格式 用戶在制作新網(wǎng)頁時,頁面都有一些默認(rèn)的屬性,如網(wǎng)頁的標(biāo)題、網(wǎng)頁用戶在制作新網(wǎng)頁時,頁面都有一些默認(rèn)的屬性,如網(wǎng)頁的標(biāo)題、網(wǎng)頁邊界、文字編碼、文字顏色、超鏈接的顏色等。若需要修改網(wǎng)頁的頁面屬邊界、文字編碼、文字顏色、超鏈接的顏色等。若需要修改網(wǎng)頁的頁面屬性,可選擇性,可選擇“修改修改 頁面屬性頁面屬性”命令,彈出命令,彈出“頁面屬性頁面屬性”對話框。對話框。頁面屬性對話框文本編輯1.1.改變文本的大小改變文本的大小 Dreamweaver Dreamweaver 提供了兩種改變文本大小的方法,一種是設(shè)置文本的默認(rèn)提供了兩種改變文本大小的方法,一種是設(shè)置文本的默認(rèn)大小,另
13、一種是設(shè)置選中文本的大小。大小,另一種是設(shè)置選中文本的大小。 設(shè)置文本的默認(rèn)大小設(shè)置文本的默認(rèn)大小設(shè)置選中文本的大小設(shè)置選中文本的大小文本的相對大小和絕對大小文本的相對大小和絕對大小2.2.改變文本的顏色改變文本的顏色 豐富的視覺色彩可以吸引用戶的注意,網(wǎng)頁中的文本不僅可以是黑色,還豐富的視覺色彩可以吸引用戶的注意,網(wǎng)頁中的文本不僅可以是黑色,還可以呈現(xiàn)為其他色彩,最多時可達到可以呈現(xiàn)為其他色彩,最多時可達到16 777 21616 777 216種顏色。顏色的種類與用種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關(guān),通常在戶顯示器的分辨率和顏色值有關(guān),通常在216216種網(wǎng)頁色彩中選擇文字
14、的顏色。種網(wǎng)頁色彩中選擇文字的顏色。在在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.改變文本的對齊方式改變文本的對齊方式 文本的對
15、齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的對文本的對齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的對齊方式。對齊方式按鈕有以下齊方式。對齊方式按鈕有以下4 4種。種?!白髮R左對齊”按鈕:使文本在瀏覽器窗口中左對齊。按鈕:使文本在瀏覽器窗口中左對齊?!熬又袑R居中對齊”按鈕:使文本在瀏覽器窗口中居中對齊。按鈕:使文本在瀏覽器窗口中居中對齊?!坝覍R右對齊”按鈕:使文本在瀏覽器窗口中右對齊。按鈕:使文本在瀏覽器窗口中右對齊?!皟啥藢R兩端對齊”按鈕:使文本在瀏覽器窗口中兩端對齊。按鈕:使文本在瀏覽器窗口中兩端對齊。5.5.設(shè)置文本樣式設(shè)置文本樣式 文本樣式是指字符的外觀顯示方式,
16、例如加粗文本、傾斜文本和文本文本樣式是指字符的外觀顯示方式,例如加粗文本、傾斜文本和文本加下劃線等。加下劃線等。標(biāo)記格式字體效果說明受影響的文字受影響的文字受影響的文字加粗受影響的文字受影響的文字斜體受影響的文字受影響的文字帶下劃線受影響的文字受影響的文字標(biāo)準(zhǔn)打印機字體受影響的文字受影響的文字帶刪除線受影響的文字下標(biāo)受影響的文字上標(biāo)受影響的文字大字體文本受影響的文字小字體文本【例5】使用字型標(biāo)記設(shè)置文字的風(fēng)格。圖2-5 設(shè)置文本的風(fēng)格6.6.段落文本段落文本 段落是指描述一個主題并且格式統(tǒng)一的一段文字。在文檔窗口中,輸入段落是指描述一個主題并且格式統(tǒng)一的一段文字。在文檔窗口中,輸入一段文字后按
17、一段文字后按EnterEnter鍵,這段文字就顯示在鍵,這段文字就顯示在標(biāo)簽中。標(biāo)簽中。 應(yīng)用段落格式應(yīng)用段落格式指定預(yù)格式指定預(yù)格式7.7.插入換行符插入換行符 為段落添加換行符有以下幾種方法。為段落添加換行符有以下幾種方法。 (1 1)選擇)選擇“插入插入”面板的面板的“文本文本”選項卡,單擊選項卡,單擊“字符字符”展開式工展開式工具按鈕,選擇具按鈕,選擇“換行符換行符”按鈕。按鈕。 (2 2)按)按組合鍵。組合鍵。 (3 3)選擇)選擇“插入記錄插入記錄 HTML HTML 特殊字符特殊字符 換行符換行符”命令。命令?!纠?-6】換行與換段標(biāo)記的使用。圖2-6 換行與換段標(biāo)記的使用水平線
18、1.1.水平線水平線 分割線又叫做水平線,可以將文字、圖像、表格等對象在視覺上分割開。分割線又叫做水平線,可以將文字、圖像、表格等對象在視覺上分割開。一篇內(nèi)容繁雜的文檔,如果合理地放置幾條水平線,就會變得層次分明,一篇內(nèi)容繁雜的文檔,如果合理地放置幾條水平線,就會變得層次分明,便于閱讀。便于閱讀。創(chuàng)建水平線創(chuàng)建水平線修改水平線修改水平線 列表列表”命令,彈出其子菜單,選擇命令,彈出其子菜單,選擇“項目列表項目列表”或或“編號列表編號列表”命令。命令。 練習(xí):2.2.修改項目符號或編號修改項目符號或編號(1 1)將插入點放在設(shè)置項目符號或編號的文本中。)將插入點放在設(shè)置項目符號或編號的文本中。(
19、2 2)通過以下幾種方法啟動)通過以下幾種方法啟動“列表屬性列表屬性”對話框。對話框。 單擊單擊“屬性屬性”面板中的面板中的“列表項目列表項目”按鈕。按鈕。 選擇選擇“文本文本 列表列表 屬性屬性”命令。命令。3.3.設(shè)置文本縮進格式設(shè)置文本縮進格式 設(shè)置文本縮進格式有以下幾種方法。設(shè)置文本縮進格式有以下幾種方法。 (1 1)在)在“屬性屬性”面板中單擊面板中單擊“文本縮進文本縮進”按鈕或按鈕或“文本凸出文本凸出”按鈕,按鈕,使段落向右移動或向左移動。使段落向右移動或向左移動。 (2 2)選擇)選擇“文本文本 縮進縮進”命令或命令或“文本文本 凸出凸出”命令,使段落向右命令,使段落向右移動或向左移動。移動或向左移動。 (3 3)按)按組合鍵或按組合鍵或按組合鍵
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 施工勞務(wù)合同簡易版2篇
- 攪拌機銷售合同范例3篇
- 新版視頻剪輯視頻合同3篇
- 新最完整房屋買賣合同范文3篇
- 教育培訓(xùn)服務(wù)合同協(xié)議書3篇
- 放牧合同書樣本全新版3篇
- 工業(yè)振動控制設(shè)備安裝工程合同書3篇
- 斷橋鋁門窗安裝招標(biāo)3篇
- 數(shù)量責(zé)任聲明3篇
- 撤銷委托決定3篇
- 2024-2030年中國金華火腿腌制項目可行性研究報告
- 2024-2030年中國家用小家電項目可行性研究報告
- 《隧道工程監(jiān)控量測》課件
- 環(huán)保項目荒山租賃協(xié)議模板
- xx單位政務(wù)云商用密碼應(yīng)用方案V2.0
- 2024年度校園體育設(shè)施維修保養(yǎng)合同
- 機電一體化項目職業(yè)技能大賽試題(SX-815Q)
- 電廠應(yīng)急物資培訓(xùn)
- 2025年春九年級語文下冊 第三單元綜合測試卷(人教陜西版)
- 吊裝起重作業(yè)安全培訓(xùn)課件
- 行政人員的培訓(xùn)
評論
0/150
提交評論