HTML5 入門經典
第一篇 基礎知識篇
本篇主要內容：
❑第1章 HTML5開發前奏
❑第2章 HTML5帶來的標記變化
❑第3章 HTML5網頁的基本要素
❑第4章 讓珍珠串起來——列表
❑第5章 在迷宮中尋找出口——超連結
❑第6章 如何顯示圖像
❑第7章 讓程式聽話——表格的應用
第1章 HTML5 開發前奏
Internet的飛速發展促進了越來越多的網站的創建，在我們流覽這些網站的時候，看到的是豐富的影像、文字、圖片，這些內容都是通過一種名為HTML的語言表現出來的。對於網頁設計和製作人員，尤其是開發動態網站的程式設計人員來講，製作網頁的時候，如果不涉及HTML語言，幾乎是不可能的。
通過學習本章，讀者可以達到以下學習目的：
❑瞭解HTML的基本概念及其發展史；
❑掌握HTML的基本結構；
❑掌握編寫HTML檔的編寫方法；
❑掌握資料的裝箱及拆箱操作原理；
❑熟悉如何利用流覽器流覽HTML檔。
1.1 為什麼選擇HTML5語言
World Wide Web（萬維網WWW）是一種建立在Internet上的、全球性的、交互的、多平臺的、分散式的資訊資源網路。它採用HTML語言描述超文字（Hypertext）檔。這裡所說的超文字指的是包含有連結元素的檔，並且包含了多媒體物件的檔。
WWW萬維網有3個基本組成部分，分別是URL（統一資源定位器）、HTTP（超文字傳輸協定）和HTML（超文字標記語言）。
URL（Universal Resource Locators）提供在Web上進入資源的統一方法和路徑，使得使用者所要訪問的網站具有唯一性，這就相當於我們每個人只有一個身份證號一樣。它說明了連結所指向的每個檔的類型及其準確位置。
HTTP（Hypertext Transfer Protocol）超文字傳輸協定是一種網路上傳輸資料的協定，是用於從Web伺服器傳輸超文字到本地流覽器的傳遞協定。它可以使流覽器更加高效。
HTML（Hypertext Markup Language，中文通常稱為超文字置標語言或超文字標記語言）是一種文本類、解釋執行的標記語言，它是Internet上用於編寫網頁的主要語言。而HTML5是下一代的HTML，它將會取代HTML4.0和XHTML1.1，成為新一代的Web語言。HTML5自從2010年正式推出以來，就以一種驚人的速度被迅速推廣，全球各知名流覽器廠商也對HTML5提供了很好的支援。例如，微軟就對下一代IE 9做了標準上的改進，使其能夠支援HTML5。而且HTML5還有一個特點，就是在老版本的流覽器上也可以正常運行。
要把資訊發佈到全球，就必須要使用能夠被大眾接受的語言，也就是使用一種大多數電腦能夠識別的發佈語言。在WWW上，通常使用的發佈語言是HTML，即超文字標記語言。
HTML是一種簡易的檔交換標準，用於物理的檔結構，它旨在定義檔內的物件和描述檔的邏輯結構，而並不定義檔的顯示。由於HTML所描述的檔具有極高的適應性，所以特別適合於WWW的發佈環境。
HTML是純文字類型的語言，使用HTML編寫的網頁檔也是標準的純文字檔。我們可以用任何文字編輯器例如Windows的“記事本”程式打開它，查看其中的HTML原始程式碼，也可以在用流覽器打開網頁時通過相應的“查看/原始檔案”命令查看網頁中的HTML代碼。HTML檔可以直接由流覽器解釋執行，而無需編譯。當用流覽器打開網頁時，流覽器讀取網頁中的HTML代碼，分析其語法結構，然後根據解釋的結果顯示網頁內容。正是因為如此，網頁顯示的速度同網頁代碼的品質有很大的關係，保持精簡和高效的HTML原始程式碼是十分重要的。
1.2 HTML發展歷程
HTML的歷史可以追溯到很久以前。1993年HTML首次以網際網路草案的形式發佈。20世紀90年代的人見證了HTML的高速發展，從2.0版，到3.2版和4.0版，再到1999年的4.01版，一直到現在正逐步普及的HTML5。隨著HTML的發展，W3C（萬維網聯盟）掌握了對HTML規範的控制權。
在快速發佈了HTML的前4個版本之後，業界普遍認為HTML已經“無路可走”了，對Web標準的焦點也開始轉移到了XML和XHTML，HTML被放在次要位置。不過在此期間，HTML體現了頑強的生命力，主要的網站內容還是基於HTML的。為能支援新的Web應用，同時克服現有的缺點，HTML迫切需要添加新功能，制定新規範。
為了將Web平臺提升到一個新的高度，在2004年成立了WHATWG（Web Hypertext Application
Technology Working Group，Web超文字應用技術工作組）。該工作組創立了HTML5規範，同時開始專門針對Web應用開發新功能——這被WHATWG認為是HTML中最薄弱的環節。Web2.0這個新詞也就是在那個時候被發明的。Web2.0實至名歸，開創了Web的第二個時代，舊的靜態網站逐漸讓位於需要更多特性的動態網站和社交網站——這其中的新功能多得數不勝數。
2006年，W3C又重新介入HTML，並於2008年發佈了HTML5的工作草案。2009年，XHTML2工作組停止工作。因為HTML5能解決非常實際的問題，所以在規範還沒有具體定下來的情況下，各大流覽器廠家就已經按捺不住了，開始對旗下產品進行升級，以支援HTML5的新功能。這樣，得益於各流覽器的實驗性回饋，HTML5規範也得到了持續的完善，HTML5以這種方式迅速融入了對Web平臺的實質性改進中。
1.3 誰在開發HTML5
我們都知道開發HTML5需要成立相應的組織，並且肯定需要有人來負責。這正是下面這3個重要組織的工作。
❑WHATWG：由來自Apple、Mozilla、Google、Opera等流覽器廠商的人組成，成立於2004年。WHATWG開發HTML和Web應用API，同時為各流覽器廠商以及其他有意向的組織提供開放式合作。
❑W3C：W3C下轄的HTML工作組目前負責發佈HTML5規範。
❑IETF（Internet Engineering Task Force，網際網路工程任務組）：這個任務組下轄HTTP等負責Internet協議的團隊。HTML5定義的一種新API（WebSocket API）依賴於新的WebSocket協議，IETF工作組正在開發這個協議。
1.4 HTML5的新認識
任何新鮮事物的出現，都會帶給人們驚喜，同時也會存在很多爭議。雖然Web開發者普遍認為有了HTML5是比較好的，但是還是會很擔心，例如：新的HTML5在老的流覽器上能否正常運行，會不會產生錯誤等。HTML5是基於各種各樣的理念進行設計的，這些設計理念體現了對可能性和可行性的新認識。
❑相容性。
❑實用性。
❑互通性。
1.4.1 相容性
雖然到了HTML5時代，但並不代表現在用HTML4創建出來的網站必須全部重建。HTML5並不是顛覆性的革新。相反，實際上HTML5的一個核心理念就是保持一切新特性平滑過渡。
儘管HTML5標準的一些特性非常具有革命性，但是HTML5旨在進化而非革命。這一點正是通過相容性體現出來的。正是因為保障了相容性才能讓人們毫不猶豫地選擇用HTML5開發網站。
1.4.2 實用性和用戶優先
HTML5規範是基於使用者優先準則編寫的，其宗旨是“用戶即上帝”，這意味著在遇到無法解決的衝突時，規範會把使用者放到第一位，其次是頁面的作者，再次是實現者（或流覽器），接著是規範制定者，最後才考慮理論的純粹實現。因此，HTML5的絕大部分功能是實用的，只是在有些情況下還不夠完美。實用性是指要能夠解決實際問題。HTML5內只封裝了切實有用的功能，不封裝複雜而沒有實際意義的功能。
1.4.3 化繁為簡
HTML5要的就是簡單，避免不必要的複雜性。HTML5的口號是“簡單至上，盡可能簡化”。因此，HTML5做了以下改進：
❑以流覽器原生能力替代複雜的JavaScript代碼。
❑新的簡化的DOCTYPE。
❑新的簡化的字元集聲明。
❑簡單而強大的HTML5 API。
1.5 無外掛程式範式
過去，很多功能只能通過外掛程式或者複雜的hack（本地繪圖API、本地socket等）來實現，但在HTML5中提供了對這些功能的原生支援。外掛程式的方式存在如下問題：
❑外掛程式安裝可能失敗。
❑外掛程式可能被禁用或者是遮罩。
❑外掛程式自身會成為被攻擊的對象。
❑外掛程式不容易與HTML文檔的其他部分集成（因為外掛程式邊界、剪裁和透明度等問題）。
雖然一些外掛程式的安裝率很高，但在控制嚴格的公司內部網路環境中經常會被封鎖。此外，由於外掛程式經常還會給用戶帶來煩人的廣告，一些用戶也會選擇遮罩此類外掛程式。一旦用戶禁用了外掛程式，就意味著依賴該外掛程式顯示的內容也無法表現出來了。
在已經設計好的頁面中，要想把外掛程式顯示的內容與頁面上其他元素集成也比較困難，因為會引起剪裁和透明度等問題。外掛程式使用的是自帶的模式，與普通Web頁面所使用的不一樣，所以當彈出的功能表或者其他視覺化元素與外掛程式重疊時，會特別麻煩。這時，需要HTML5應用原生功能來解決，它可以直接用CSS和JavaScript的方式控制頁面配置。實際上這也是HTML5的最大亮點，顯示了以前任何HTML版本都不具備的強大能力。HTML5不僅提供新元素支援新功能，更重要的是添加了對腳本和佈局之間的原生交互能力，使我們可以實現以前不能實現的效果。
以HTML5中的canvas元素為例，有很多非常底層的事情以前是沒辦法做到的（如在HTML4的頁面中很難畫出對角線），而有了canvas就可以很容易地實現了。更為重要的是新API釋放出來的潛能，以及僅需寥寥幾行CSS代碼就能完成佈局的能力。基於HTML5的各類API的優秀設計，我們可以輕鬆地對它們進行組合應用。HTML5的不同功能組合應用為Web開發注入了一股強大的新生力量。
1.6 探秘——HTML5新特性
HTML5給人們帶來了眾多驚喜，一些優點和新的特性如下：
❑新特性應該基於HTML、CSS、DOM和JavaScript。
❑減少了對外部外掛程式的需求（比如Flash）。
❑更優秀的錯誤處理。
❑更多取代腳本的標記。
❑HTML5應該獨立於設備。
❑用於繪畫的canvas元素。
❑用於媒介重播的video和audio元素。
❑對本地離線存儲的更好的支援。
❑新元素和表單控制項。
而這些新特性，正在如今的流覽器最新版本中得到越來越普遍的實現，越來越多的開發者開始學習和使用這些新特性。
1.7 HTML的標記構成
1.7.1 HTML標記的使用技巧
1.HTML標記
一個HTML檔是由一系列的元素和標記組成的。元素是HTML檔的重要組成部分，如title（檔標題）、img（圖像）及table（表格）等。元素名不區分大小寫。HTML用標記來規定元素的屬性和它在檔中的位置。
HTML的標記分單獨出現的標記和成對出現的標記兩種。
大多數標記成對出現，由首標記和尾標記組成。首標記的格式為＜元素名稱＞，尾標記的格式為＜/元素名稱＞。其語法如下：
＜元素名稱＞要控制的元素＜/元素名稱＞
成對標記僅對包含在其中的檔部分發生作用，例如＜title＞和＜/title＞標記用於界定標題元素的範圍，也就是說，＜title＞和＜/title＞標記之間的部分是此HTML檔的標題。
單獨標記的格式為＜元素名稱＞，其作用是在相應的位置插入元素，如＜br/＞標記便是在該標記所在位置插入一個分行符號。
說明 在每個HTML標記中，大、小寫混寫均可。例如＜HTML＞、＜html＞和＜Html＞，其結果都是一樣的。
在每個HTML標記中，還可以設置一些屬性，控制HTML標記所建立的元素。這些屬性將位於所建立元素的首標記。首標記的基本語法如下：
＜元素名稱屬性1="值1" 屬性2="值2"……＞
而尾標記的建立方式則為：
＜/元素名稱＞
因此，在HTML檔中某個元素的完整定義語法如下：
＜元素名稱屬性1="值1" 屬性2="值2"……＞元素資料＜/元素名稱＞
說明 語法中，設置各屬性所使用的""可省略。
2.元素的概念
當用一組HTML標記將一段文字包含在中間時，這段文字與包含文字的HTML標記被稱為一個元素。
由於在HTML語法中，每個由HTML標記與文字所形成的元素內，還可以包含另一個元素，因此，整個HTML檔就像是一個大元素，其中包含了許多小元素。
在所有HTML檔中，最外層的元素是由＜html＞標記建立的。在＜html＞標記所建立的元素中，包含了兩個主要的子元素，這兩個子元素是由＜head＞標記與＜body＞標記所建立的。＜head＞標記所建立的元素的內容為檔頭，而＜body＞標記所建立的元素的內容為檔主體。
3.HTML檔結構
在介紹HTML檔結構之前，先來看一個簡單的HTML檔及其在流覽器上的顯示結果。
下面開始編寫一個HTML檔，使用任一檔編輯器，例如Windows自帶的記事本。
＜html＞
＜head＞
＜title＞文件標題＜/title＞
＜/head＞
＜body＞
文件正文
＜/body＞
＜/html＞
運行效果如圖1.1所示。
圖 1.1 HTML示例
從上述代碼中可以看出，HTML檔的基本結構如圖1.2所示。
圖 1.2 HTML檔的基本結構
其中，＜head＞與＜/head＞之間的部分是HTML檔的檔頭部分，用以說明文件的標題和整個檔的一些公共屬性；＜body＞與＜/body＞之間的部分是HTML檔的主體部分。下面介紹的標記，如果不加特別說明，均是嵌套在這一對標記中使用的。
1.7.2 開始標記＜html＞
在任何一個HTML檔裡，最先出現的HTML標記就是＜html＞，它用於表示該檔是以超文字標記語言（HTML）編寫的。＜html＞是成對出現的，首標記＜html＞和尾標記＜/html＞分別位於檔的最前面和最後面，檔中的所有內容和其他HTML標記都包含在其中。例如：
＜html＞
檔的全部內容
＜/html＞
該標記不帶任何屬性。
事實上，現在常用的Web流覽器（例如IE）都可以自動識別HTML檔，並不要求有＜html＞標記，也不對該標記進行任何操作。但是，為了提高檔的適用性，使編寫的HTML檔能適應不斷變化的Web流覽器，還是應該養成使用這個標記的習慣。
1.7.3 頭部標記＜head＞
習慣上，把HTML檔分為檔頭和檔主體兩個部分。檔主體部分就是在Web流覽器視窗的使用者區內看到的內容，而檔頭部分用來規定該檔的標題（出現在Web流覽器視窗的標題列中）和檔的一些屬性。
＜head＞是一個表示網頁頭部的標記。在由＜head＞標記所定義的元素中，並不放置網頁的任何內容，而是放置關於HTML檔的資訊，也就是說它並不屬於HTML檔的主體。它包含檔的標題、編碼方式及URL等資訊。這些資訊大部分是用於提供索引、辨認或其他方面的用途。
寫在＜head＞與＜/head＞中間的文本，如果又寫在＜title＞標記中，表示該網頁的名稱，並作為視窗的名稱顯示在這個網頁視窗的最上方。
如果HTML檔並不需要提供相關資訊，則可以省略＜head＞標記。
1.7.4 標題標記＜title＞
每個HTML檔都需要有一個檔案名稱。在流覽器中，檔案名稱作為視窗名稱顯示在該視窗的最上方，這對流覽器的收藏功能很有用。如果流覽者認為某個網頁對自己很有用，今後想經常閱讀，可以選擇IE流覽器“收藏”功能表中的“添加到我的最愛”命令將它保存起來，供以後調用。網頁的名稱要寫在＜title＞和＜/title＞之間，並且＜title＞標記應包含在＜head＞與＜/head＞標記之內。
HTML檔的標記是可以嵌套的，即在一對標記中可以嵌入另一對子標記，用來規定母標記所含範圍的屬性或其中某一部分內容。嵌套在＜head＞標記中使用的主要就是＜title＞標記。
1.7.5 主體標記＜body＞
＜body＞標記是成對出現的。網頁中的主體內容應該寫在＜body＞和＜/body＞之間，而＜body＞標記包含在＜html＞標記裡面。
1.7.6 編寫文件時的注意事項
在編寫檔的時候，要注意以下事項：
1）“＜”和“＞”是任何標記的開始和結束。元素的標記要用這對尖括弧括起來，並且結束的標記總是由在開始的標記前加一個斜杠構成。
2）標記與標記之間可以嵌套，如：
＜H3＞＜CENTER＞HTML文件＜/CENTER＞＜/H3＞
3）在原始程式碼中不區分大小寫，如以下幾種寫法都是正確並且相同的標記：
＜HEAD＞
＜head＞
＜Head＞
4）任何回車和空格在原始程式碼中不起作用。為了使代碼清晰，建議在不同的標記之間加入回車。
5）HTML標記中可以放置各種屬性，如：
＜h3 align="center"＞HTML你好＜/h3＞
其中align為屬性，center為屬性值，元素屬性出現元素的＜＞內，並且和元素名之間由一個空格分隔，屬性值可以直接書寫，也可以使用""擴起來。如下面的兩種寫法都是正確的：
＜h3 align="center"＞HTML你好＜/h3＞
＜h3 align=center＞HTML你好＜/h3＞
6）如果希望在原始程式碼中添加注釋，可以以“＜!--”開始，編寫注釋內容，以“--!＞”結束。如下代碼：
＜!------------------------------------------------!＞
＜!--檔範例：1.2.htm--!＞
＜!--文件說明：第一個HTML文件--!＞
＜!--------------------------------------------!＞
注釋語句只出現在原始程式碼中，而不會在流覽器中顯示。
1.8 編寫第一個HTML檔
1.8.1 HTML檔的編寫方法
編寫HTML檔主要有如下3種方法:
❑手工直接編寫。由於HTML編寫的檔是標準的ASCII文字檔，所以我們可以使用任何文字編輯器來打開並編寫HTML檔，如Windows系統中自帶的記事本。
❑使用視覺化軟體。Microsoft公司的Frontpage、Macromedia公司的Dreamweaver、Adobe公司的Golive等軟體均可以視覺化的方式進行網頁的編輯製作。
❑由Web伺服器一方即時動態生成。這需要通過後端的網頁程式設計來實現，如ASP、PHP等。一般情況下都需要資料庫的配合。
1.8.2 手工編寫頁面
下面先使用記事本來編寫我們的第一個HTML檔。步驟如下：
Step 1 選擇“開始/程式/附件/記事本”命令，打開“記事本”程式，如圖1.3所示。
圖 1.3 “記事本”介面
Step 2 在“記事本”中直接鍵入下面的HTML代碼：
＜html＞
＜head＞
＜title＞簡單的HTML文件＜/title＞
＜/head＞
＜body text="blue"＞
＜h2 align="center"＞HTML你好＜/h2＞
＜hr＞
＜p＞讓我們認識HTML吧＜/p＞
＜/body＞
＜/html＞
Step 3 輸入代碼後，記事本中顯示出代碼的內容，如圖1.4所示。
圖 1.4 顯示了代碼的“記事本”
Step 4 選擇“記事本”功能表中的“檔/保存”命令，彈出如圖1.5所示的“另存為”對話方塊。
圖 1.5 “另存為”對話方塊
Step 5 在對話方塊中選擇存檔的資料夾，然後在“保存類型”中選擇“所有檔”，在“編碼”中選擇ANSI。這裡將“檔案名”設置為1-2.html，然後按一下“保存”按鈕。
Step 6 關閉“記事本”，回到存檔的資料夾，按兩下如圖1.6所示1-2.html檔，可以在IE流覽器中看到最終執行效果，如圖1.7所示。
圖 1.6 保存的html檔
圖 1.7 執行效果
1.8.3 使用視覺化軟體製作頁面
Adobe Dreamweaver CS5.5是一個全面的專業工具集，可用於設計並部署極具吸引力的網站和Web應用程式，並提供強大的編輯環境以及功能強大且基於標準的WYSIWYG設計介面。Adobe Dreamweaver CS5.5新版本使用了最新的技術，加入了多螢幕預覽、jQuery集成、CSS3/HTML5支援、尖端的即時視圖渲染、移動UI構件、FTPS支援、智慧編碼協助集成FLV內容等全新功能。下面以Adobe Dreamweaver CS5.5中文版為例，說明使用視覺化網頁編輯軟體製作頁面的方法。步驟如下：
Step 1 按一下“開始/所有程式/Adobe
Dreamweaver CS5.5”，啟動軟體的主程序，其主介面如圖1.8所示。
圖 1.8 Adobe Dreamweaver CS5.5主介面
Dreamweaver工作區使您可以查看文檔和物件屬性。工作區還將許多常用操作放置於工具列中，使您可以快速更改文檔。Dreamweaver CS5.5工作區佈局如圖1.9所示。
圖 1.9 Dreamweaver CS5.5工作區佈局
❑A應用程式欄：應用程式視窗頂部包含一個工作區切換器、幾個功能表（僅限Windows）以及其他應用程式控制項。
❑B文檔工具列：包含一些按鈕，它們提供各種“文檔”視窗視圖（如“設計”視圖和“代碼”視圖）的選項、各種查看選項和一些常用操作（如在流覽器中預覽）。
❑C文件視窗：顯示您當前創建和編輯的文檔。
❑D工作區切換器：通過下拉清單可以選擇不同的工作區，如：編輯器。
❑E面板組：幫助您監控和進行修改工作。例如，“插入”面板、“CSS樣式”面板和“文件”面板。若要展開某個面板，請按兩下其選項卡。
❑F CS Live：Adobe Dreamweaver CS5.5相關服務。
❑G標記選擇器：位於“文檔”窗口底部的狀態列中。顯示環繞當前選定內容的標記的層次結構。按一下該層次結構中的任何標記可以選擇該標記及其全部內容。
❑H屬性檢查器：用於查看和更改所選物件或文本的各種屬性。每個物件具有不同的屬性。在“編碼器”工作區佈局中，“屬性”檢查器預設是不展開的。
❑I文件面板：用於管理檔和資料夾，無論它們是Dreamweaver網站的一部分還是位於遠端伺服器上。“檔”面板還使您可以訪問本地磁片上的全部檔，非常類似于Windows資源管理器（Windows）或Finder（Macintosh）。
Step 2 如圖1.10所示，按一下文檔工具列中的“拆分”按鈕，在這種視圖下，編輯視窗被分割成左右兩部分，左側顯示的是原始程式碼視圖，右側是視覺化視圖，這樣可以在選擇和編輯原始程式碼的時候及時地在視覺化視圖中看到效果。這兩部分是互相聯繫、密不可分的，在代碼視圖中所做的任何修改都會影響設計檢視，反之亦然。
圖 1.10 代碼視圖和設計檢視
Step 3 在如圖1.11所示的位置輸入“讓我們一起體驗超炫的HTML旅程吧”作為頁面的正文。
圖 1.11 輸入正文
Step 4 在如圖1.12所示的位置輸入“HTML初露端倪”作為頁面的標題。
圖 1.12 輸入標題
Step 5 選擇“文件/保存”命令，在如圖1.13所示的“另存為”對話方塊中選擇存儲位置，將檔命名成1-1.html，然後按一下“保存”按鈕。
圖 1.13 保存頁面
Step 6 按兩下1-1.html檔，可以在流覽器中直接看到執行效果，如圖1.14所示。
圖 1.14 1-1.html執行效果
1.8.4 使用流覽器流覽HTML檔
不同公司有不同的流覽器，最著名的流覽器之一是微軟公司的Internet Explorer。使用流覽器最核心的功能就是查看我們編寫的HTML檔效果，並可以查看其他網站頁面的原始程式碼。下面我們將以Internet Explorer為例來講解一下使用Internet Explorer流覽器流覽HTML的過程。
啟動Internet
Explorer流覽器後，打開我們剛才所建立的HTML文件。
選擇“文件/打開”命令，然後按一下“流覽”按鈕，如圖1.15所示。找到硬碟中存放的網頁文件，如圖1.16所示，然後按一下“打開”按鈕。這樣，流覽器就能夠顯示編寫的網頁檔的頁面效果了。
圖 1.15 打開
圖 1.16 選擇要打開的文件
1.8.5 明日圖書網使用HTML開發
明日圖書網的前臺網頁製作就是應用HTML編寫完成的。下面我們來具體看一下明日圖書網的前臺網頁實現的原始檔案。查看原始檔案的步驟如下：
Step 1 打開流覽器，在位址欄輸入http://www.mingribook.com，然後回車。
Step 2 頁面顯示了明日圖書網的首頁面。
Step 3 選擇流覽器主功能表中的“查看/原始檔案”命令，如圖1.17所示。
圖 1.17 查看/原始檔案
Step 4 這樣就會自動打開記事本顯示頁面的原始檔案，如圖1.18所示。
圖 1.18 頁面的原始檔案
1.9 小結
本章主要介紹了HTML的基本概念及其發展史，重點介紹了HTML的基本結構，並詳細介紹了如何編寫HTML的軟體以及如何使用標記。
希望讀者通過學習本章，能為學習HTML打下一個扎實的基礎，為以後的學習做一個良好的鋪墊。
1.10 習題
選擇題
1.HTML文檔的樹狀結構中，（____）標記為文檔的開始，位於結構中的最頂層。
A.＜HTML＞
B.＜HEAD＞
C.＜BODY＞
D.＜TITLE＞
2.下面關於設計網站結構的說法中錯誤的是（____）。
A.按照模組功能的不同分別創建網頁，將相關的網頁放在一個資料夾中
B.必要時應建立子資料夾
C.儘量將圖像和動畫檔放在一個大資料夾中
D.當地網站和遠端網站最好不要使用相同的結構
3.下列關於CSS樣式和HTML樣式的不同之處說法正確的是（____）。
A.HTML樣式只影響應用它的文本和使用所選HTML樣式創建的文本
B.CSS樣式只可以設置文字字體樣式
C.HTML樣式可以設置背景樣式
D.HTML樣式和CSS樣式相同，沒有區別
4.為了標記一個HTML檔，應該使用的HTML標記是（____）。
A.＜p＞＜/p＞
B.＜boby＞＜/body＞
C.＜html＞＜/html＞
D.＜table＞＜/table＞
填空題
1.HTML網頁檔的標記是＜html＞＜/html＞，網頁檔的主體標記是＜body＞＜/body＞，標記頁面標題的標記是________。
2.創建一個HTML文檔的開始標記________；結束標記是________。
3.嚴格來說，________並不是一種程式設計語言，而只是一些能讓流覽器看懂的標記。
0 留言:
發佈留言