1、第第 2 章章 HTML根底與文字版面設計根底與文字版面設計 本章知識技藝要點：本章知識技藝要點：HTML的根本構造組成簡單頁面的編排在HTML中顏色的運用掌握文字版面編輯的根本要領以及,和標簽的根本用法熟練掌握利用標簽設置各種字體款式的方法掌握各類列表的編排方法2.1 HTML根底根底2.1.1 HTML概述2. HTML2. HTML的歷史的歷史HTML 3.22019HTML 3.22019年年1 1月月1414日，日，W3CW3C引薦規引薦規范范 HTML 4.02019HTML 4.02019年年1212月月1818日，日，W3CW3C引薦引薦規范規范 HTML 4.01HTML 4

2、.01微小改良微小改良20192019年年1212月月2424日，日，W3CW3C引薦規范引薦規范 XHTML 1.0XHTML 1.0發布于發布于20002000年年1 1月月2626日，是日，是W3CW3C引薦規范，后來經過修訂于引薦規范，后來經過修訂于20192019年年8 8月月1 1日重新發布。日重新發布。 可以說是可以說是HTML4.01HTML4.01的修正版的修正版XHTML XHTML 是什么？是什么？ XHTML XHTML 指可擴展超文本標簽言語指可擴展超文本標簽言語EXtensible HyperText Markup EXtensible HyperText Mark

3、up LanguageLanguage。 XHTML XHTML 的目的是取代的目的是取代 HTML HTML。 XHTML XHTML 與與 HTML 4.01 HTML 4.01 幾乎是一樣的。幾乎是一樣的。 XHTML XHTML 是更嚴厲更純真的是更嚴厲更純真的 HTML HTML 版本。版本。XHTMLXHTML是一種加強了的是一種加強了的HTML,HTML,它的可擴它的可擴展性和靈敏性將順應未來網絡運用更展性和靈敏性將順應未來網絡運用更多的需求。目前通常說的多的需求。目前通常說的webweb規范普通規范普通指網站建立采用基于指網站建立采用基于XHTMLXHTML語語最主要的不同：最

4、主要的不同：XHTML XHTML 元素必需被正確地嵌套。元素必需被正確地嵌套。 XHTML XHTML 元素必需被封鎖。元素必需被封鎖。 標簽名必需用小寫字母。標簽名必需用小寫字母。 XHTML XHTML 文檔必需擁有根元素。文檔必需擁有根元素。n在在HTML中每個用來作標簽的符號都是一條命中每個用來作標簽的符號都是一條命令，它通知閱讀器如何顯示文本。這些標簽均令，它通知閱讀器如何顯示文本。這些標簽均由由“符號以及一個字符串組成。而符號以及一個字符串組成。而閱讀器的功能是對這些標簽進展解釋，顯示出閱讀器的功能是對這些標簽進展解釋，顯示出文字、圖像、動畫、播放聲音。文字、圖像、動畫、播放聲音

5、。nHTML的標簽由首標簽的標簽由首標簽 和尾標簽和尾標簽組成的組成的2.1 HTML根底根底2.1.4 HTML的根本構造2.1 HTML根底根底超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進展了一些必要超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進展了一些必要的定義，文檔體中才是要顯示的各種文檔信息。的定義，文檔體中才是要顯示的各種文檔信息。頭頭 部部 信信 息息文文 檔檔 主主 體，體， 正正 文文 部部 分分n例例2-1：以下是一個超文本文檔的源代碼：以下是一個超文本文檔的源代碼nn n 我的第一個網頁我的第一個網頁n n n n 學習學習HTML網頁制造網頁制

6、造n n n n HTML英語是：英語是：Hypertext Marked Language，即超文本標簽，即超文本標簽言語。言語。n n n n2.1 HTML根底根底圖2-1 例2-1的運轉效果2.2 頁面的整體編排頁面的整體編排2.2.1 頁面的頭標簽頁面的頭標簽和構成HTML文檔的開頭部分。頭部信息用以闡明文件的標題和整個文件的一些公用屬性。標題標簽 決議了顯示在頁面標題欄中的文字。運用過閱讀器的人能夠都會留意到閱讀器窗口最上邊藍色部分顯示的文本信息。頁面內容的格式該網頁的編碼言語2.2.3 主體標簽主體標簽標簽是標簽是HTML文檔的主體文檔的主體部分，其中放置的是頁面中一切的內容，如

7、部分，其中放置的是頁面中一切的內容，如圖片、文字、表格、表單、超鏈接等設置。圖片、文字、表格、表單、超鏈接等設置。在此標簽對之間可包含在此標簽對之間可包含、等等眾多等等眾多的標簽，它們所定義的文本、圖像等將會在的標簽，它們所定義的文本、圖像等將會在閱讀器的框內顯示出來。閱讀器的框內顯示出來。標簽有本人的屬性，設置標簽有本人的屬性，設置 標標簽內的屬性，可控制整個頁面的顯示方式。簽內的屬性，可控制整個頁面的顯示方式。2.2 頁面的整體編排頁面的整體編排表表2-1 標簽的主要屬性標簽的主要屬性 2.2 頁面的整體編排頁面的整體編排n仔細閱讀下面一個例子，便可以了解以上各個標志對在一個HTML文檔中

8、的規劃或所運用的位置。n例2-2：nnn顯示在閱讀器最標題欄中的文本nnn紅色背景、藍色文字nn2.2 頁面的整體編排頁面的整體編排n2.4.1 標題標簽標題標簽n 普通文章都有標題、副標題、章和節等普通文章都有標題、副標題、章和節等構造，構造，HTML中也提供了相應的標題標簽中也提供了相應的標題標簽,標簽用于設置網頁中的標題文標簽用于設置網頁中的標題文字，被設置的文字將以黑體或粗體的方式顯字，被設置的文字將以黑體或粗體的方式顯示在網頁中。其中示在網頁中。其中n為標題的等級。為標題的等級。HTML總總共提供六個等級的標題，共提供六個等級的標題，n越小，標題字號越小，標題字號就越大。就越大。2.

9、4 文字版面的編輯文字版面的編輯 2.4.1 標題標簽標題標簽格式：格式：hn align=參數標題內容參數標題內容闡明：在闡明：在.之間的文字之間的文字就是第一級標題，是最大最粗的標就是第一級標題，是最大最粗的標題；題；.之間的文字是之間的文字是最后一級，是最小最細的標題文字。最后一級，是最小最細的標題文字。align屬性用于設置標題的對齊方式，屬性用于設置標題的對齊方式，其參數為其參數為 left靠左對齊，靠左對齊，enter居中對齊居中對齊)，right (靠右對齊?？坑覍R。2.4 文字版面的編輯文字版面的編輯 n例2-3：nnn設定各級標題nnn這是一行普通文字n一級標題文字n二級標

10、題文字n三級標題文字n四級標題文字n靠右對齊的五級標題文字n靠左對齊的六級標題文字nn 2.4 文字版面的編輯文字版面的編輯 圖2-2 例2-3的運轉效果2.4.2 段落標簽段落標簽標簽對是用來創建一個段落。標簽對是用來創建一個段落。段落的開場由段落的開場由來標簽，段落的終了來標簽，段落的終了由由來標簽。來標簽。標簽還有一個屬性標簽還有一個屬性align，它用來指，它用來指名對象顯示時的對齊方式，普通值有名對象顯示時的對齊方式，普通值有center、left、right三種。這三個參數三種。這三個參數設置段落文字的左設置段落文字的左,中中,右位置的對齊方式。右位置的對齊方式。 2.4 文字版面

11、的編輯文字版面的編輯 例2-4:測試分段控制標簽花兒什么也沒有。它們只需凋謝在風中的細微、凄楚而又無法的吟怨，就像那遭到了致命損傷的秋雁，悲痛無助地發出一聲聲垂死的鳴叫。或許，這便是花兒那短暫終身最凄涼、最傷感的歸宿。而美麗苦短的花期卻是那最后悲傷的秋風挽歌中的瞬間插曲。2.4 文字版面的編輯文字版面的編輯 2.4.3 換行標簽換行標簽需求斷行的地方，應加上需求斷行的地方，應加上標簽。標簽。2.4 文字版面的編輯文字版面的編輯 2.4.4 程度線段標簽程度線段標簽這個標簽可以在屏幕上顯示一條程度線，這個標簽可以在屏幕上顯示一條程度線，用以分割頁面中的不同部分，使文檔構用以分割頁面中的不同部分，

12、使文檔構造明晰明朗，使文字的編排更整齊。經造明晰明朗，使文字的編排更整齊。經過設置過設置標簽的屬性值，可以控制程標簽的屬性值，可以控制程度分隔線的款式。度分隔線的款式。的屬性見表的屬性見表2-3：2.4 文字版面的編輯文字版面的編輯 例例2-7：程度線的設定程度線的設定以下是第一條線段，運用默許的屬性來顯示以下是第一條線段，運用默許的屬性來顯示 以下是第二條線段，設置了粗細以下是第二條線段，設置了粗細=5 顏色為紅色的程度線顏色為紅色的程度線 以下是第三條線段，設置了程度線寬度以下是第三條線段，設置了程度線寬度width=50%(百分比如百分比如式式) 以下是第四條線段，設置了程度線對齊方式以

13、下是第四條線段，設置了程度線對齊方式align=left(向左對齊向左對齊) 2.4 文字版面的編輯文字版面的編輯 2.4 文字版面的編輯文字版面的編輯 例例2-7的運轉效果的運轉效果 2.4.7 注釋標簽注釋標簽 在在HTML文檔中可以參與相關的注釋標簽，便于文檔中可以參與相關的注釋標簽，便于查找和記憶有關的文件內容和標識查找和記憶有關的文件內容和標識2.4 文字版面的編輯文字版面的編輯 2.4.8 文字格式控制標簽文字格式控制標簽可以對網頁中文字的字可以對網頁中文字的字體、大小、顏色進展隨意地改動體、大小、顏色進展隨意地改動2.4 文字版面的編輯文字版面的編輯 3例例2-11：文字的屬性設

14、置文字的屬性設置設置文字的字體、顏色、大小設置文字的字體、顏色、大小歡迎光臨我的網站字號歡迎光臨我的網站字號size=5歡迎光歡迎光臨我的網站字號臨我的網站字號size=3歡迎歡迎光臨我的網站字號光臨我的網站字號size=+2 2.4 文字版面的編輯 2.4 文字版面的編輯 例例2-11的運轉效果的運轉效果 2.4 文字版面的編輯 例2-13：特殊字符<賦得古原草送別>離離原上草，一歲一枯榮。野火燒不盡，春風吹又生。白居易 ©2.4 文字版面的編輯文字版面的編輯 n在在HTML頁面中，運用列表標簽可以起到編排提綱和格式排序頁面中，運用列表標簽可以起

15、到編排提綱和格式排序文件的作用。對于強化文檔的條理性有很大的協助。文件的作用。對于強化文檔的條理性有很大的協助。nHTML有三種列表方式：無序列表有三種列表方式：無序列表(ul)；有序列表；有序列表(ol)；定義；定義列表列表(dl)。n無序列表就是工程各條列間并無順序關系，純粹只是利用條列無序列表就是工程各條列間并無順序關系，純粹只是利用條列來呈現資料而已，此種無序標簽，在各條列前面均有一符號以來呈現資料而已，此種無序標簽，在各條列前面均有一符號以示區隔；而有序條列就是指各條列之間是有順序的，比如從示區隔；而有序條列就是指各條列之間是有順序的，比如從1、2、3不斷延伸下去；定義列表那么用于對

16、一系列給定的術語不斷延伸下去；定義列表那么用于對一系列給定的術語給出解釋和闡明。表給出解釋和闡明。表2-7給出了創建列表時經常用到的主要標給出了創建列表時經常用到的主要標簽。簽。2.5.1無序列表無序列表無序列表運用無序列表運用標簽，每一個列表項前運標簽，每一個列表項前運用用標簽。無序列表不用數字標志每個列表項，標簽。無序列表不用數字標志每個列表項，而采用一個符號來標志每個列表項，比如圓黑點。而采用一個符號來標志每個列表項，比如圓黑點。在在和和中可運用屬性中可運用屬性type。type有三個取值：有三個取值：type=disc表示運用實心園作為列表的符號此為表示運用實心園作為列表的符號此為ty

17、pe的默許值的默許值type=circle表示運用空心園作為列表的符號表示運用空心園作為列表的符號type=square表示運用小方塊作為列表的符號表示運用小方塊作為列表的符號無序列表的根本格式如下無序列表的根本格式如下:第一項第一項第二項第二項第第N項項例例2-14：這是一個默許的無序列表：這是一個默許的無序列表：國際互聯網提供的效力有：國際互聯網提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力運用空心園作為列表符號的列表運用空心園作為列表符號的列表國際互聯網提供的效力有：國際互聯網提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力運用各

18、種符號作為列表符號的列表運用各種符號作為列表符號的列表國際互聯網提供的效力有：國際互聯網提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力例例2-14運轉效果運轉效果 2.5.2 有序列表有序列表順序編號的設置是由順序編號的設置是由的兩個屬性的兩個屬性type和和start來完成的。來完成的。type=用于編號的數字用于編號的數字,字母字母等的類型，如等的類型，如type=a，那么編號用小寫英文，那么編號用小寫英文字母排序。字母排序。start=編號開場的數字，如編號開場的數字，如start=2那么編號從那么編號從2開場。開場。也可以在也可以在標簽中設定標簽中設定va

19、luen改動列表改動列表行工程的特定編號，例如行工程的特定編號，例如，那么表示該列表項的序號為那么表示該列表項的序號為7。原始代碼原始代碼顯示結果顯示結果 靚仔靚仔 靚女靚女 靚世界靚世界 靚仔靚仔 靚女靚女 10.靚世靚世標簽的根本格式如下：標簽的根本格式如下：第第1項項第第2項項第第3項項例例2-15：有序列表有序列表默許的有序列表默許的有序列表國際互聯網提供的效力有：國際互聯網提供的效力有：www效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力用小寫英文字母標志序號，序號從用小寫英文字母標志序號，序號從c起始起始國際互聯網提供的效力有：國際互聯網提供的效力有： www效力效力 文

20、件傳輸效力文件傳輸效力 電子郵件效力電子郵件效力 遠程登錄效力遠程登錄效力用大寫羅馬字母標志序號，用大寫羅馬字母標志序號，其中改動了序號的列表其中改動了序號的列表 國際互聯網提供的效力有：國際互聯網提供的效力有：www效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力遠程登錄效力遠程登錄效力例例2-15的運轉效果的運轉效果 2.5.3 嵌套列表嵌套列表將一個列表嵌入到另一個列表中，作為另將一個列表嵌入到另一個列表中，作為另一個列表的一部分，叫嵌套列表。無論一個列表的一部分，叫嵌套列表。無論是有序列表和無序列表的嵌套，閱讀器是有序列表和無序列表的嵌套，閱讀器都可以自動地分別陳列。都可以自動地分別陳列。例例2-16： 嵌套列表嵌套列表目錄目錄動物肉類食物動物肉類食物水產品水產品 帶魚帶魚 螃蟹螃蟹 北極蝦北極蝦 家禽家禽三黃雞三黃雞湖鴨湖鴨烏雞烏雞植物類食物植物類食物蔬菜蔬菜番茄番茄青菜青菜黃瓜黃瓜水果水果蘋果蘋果葡萄葡萄香蕉香蕉谷物谷物大米大米 高梁高梁 玉米玉米 人工合成類食物人工合成類食物 例例2-16的運轉