- HTML5從入門到精通（第3版）
- 明日科技
- 12226字
- 2020-03-06 11:55:19
第1章 HTML基礎
（
視頻講解：25分鐘）
Internet的飛速發展推動了越來越多網站的創建，當我們瀏覽這些網站的時候，看到的是豐富的影像、文字、圖片，這些內容都是通過一種名為HTML的語言表現出來的。對于網頁設計和制作人員，尤其是開發動態網站的編程人員來講，制作網頁的時候，如果不涉及HTML語言，幾乎是不可能的。
通過閱讀本章，您可以：
了解HTML的基本概念以及發展史
掌握HTML的基本結構
掌握HTML文件的編寫方法
熟悉HTML文件的編寫方法
熟悉如何利用瀏覽器瀏覽HTML文件
1.1 HTML的基本概念
視頻講解
WWW（World Wide Web，萬維網）是一種建立在Internet上的、全球性的、交互的、多平臺的、分布式的信息資源網絡。它采用HTML語言描述超文本（Hypertext）文件。這里所說的超文本指的是包含有鏈接關系的文件，并且包含了多媒體對象的文件。
WWW有3個基本組成部分，分別是URL（統一資源定位器）、HTTP（超文本傳輸協議）和HTML（超文本標識語言）。
URL（Universal Resource Locators）提供在Web上進入資源的統一方法和路徑，使得用戶所要訪問的站點具有唯一性，這就相當于我們每個人只有一個身份證號一樣。它說明了鏈接所指向的每個文件的類型及其準確位置。
HTTP（Hypertext Transfer Protocol）超文本傳輸協議是一種網絡上傳輸數據的協議，專門用于傳輸以“超文本”（Hypertext）或“超媒體”（Hypermedia）的形式提供的信息。
HTML語言（Hypertext Markup Language，中文通常稱為超文本置標語言或超文本標記語言）是一種文本類、解釋執行的標記語言，它是Internet上用于編寫網頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。
要把信息發布到全球，就必須要使用能夠被大眾接受的語言，也就是使用一種大多數計算機能夠識別的出版語言。在WWW上，通常使用的發布語言是HTML，即超文本標識語言。
HTML語言是一種簡易的文件交換標準，有別于物理的文件結構，它旨在定義文件內的對象和描述文件的邏輯結構，而并不定義文件的顯示。由于HTML所描述的文件具有極高的適應性，所以特別適合于WWW的出版環境。
HTML是純文本類型的語言，使用HTML編寫的網頁文件也是標準的純文本文件。我們可以用任何文本編輯器，例如Windows的“記事本”程序打開它，查看其中的HTML源代碼，也可以在用瀏覽器打開網頁時，通過相應的“查看/源文件”命令查看網頁中的HTML代碼。HTML文件可以直接由瀏覽器解釋執行，而無須編譯。當用瀏覽器打開網頁時，瀏覽器讀取網頁中的HTML代碼，分析其語法結構，然后根據解釋的結果顯示網頁內容，正是因為如此，網頁顯示的速度同網頁代碼的質量有很大的關系，保持精簡和高效的HTML源代碼是十分重要的。
1.2 HTML發展史與HTML5
1.2.1 HTML的發展歷史
HTML的歷史可以追溯到很久以前。1993年HTML首次以因特網草案的形式發布。20世紀90年代的人見證了HTML的高速發展，從2.0版，到3.2版和4.0版，再到1999年的4.01版。隨著HTML的發展，W3C（萬維網聯盟）掌握了對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.2.2 HTML 4.01和XHTML
XHTML（extensible Hyper Text Markup Language，擴展的超文本標記語言），XHTML和HTML 4.01具有很好的兼容性，而且XHTML是更嚴格、更純凈的HTML代碼。
在早期的HTML發展歷史中，由于HTML從未執行嚴格的規范，而且各瀏覽器對各種錯誤的HTML極為寬容，這就導致了HTML顯得極為混亂。所以W3C組織制訂了XHTML，它的目標是逐步取代原有的HTML。簡單地說，XHTML就是最新版本的HTML規范。
我們習慣上認為HTML也是一種結構化文檔，但實際上HTML的語法非常自由，再加上各瀏覽器對各種HTML錯誤的寬容，所以才有如下HTML代碼。
上面代碼中的<html>、<head>、<body>和<h1>4個標簽都沒有正確結束，這顯然違背了結構化文檔的規則，但使用瀏覽器來瀏覽這個文檔時，依然可以看到瀏覽效果，這就是HTML不規范的地方。而XHTML致力于消除這種不規范，XHTML要求HTML文檔首先必須是一份XML文檔。
XML文檔是一種結構化文檔，它有如下4條基本規則。
- ? 整個文檔有且僅有一個根元素。
- ? 每個元素都由開始標簽和結束標簽組成（例如<a>和</a>就是開始標簽和結束標簽），除非使用空元素語法（例如<br/>就是空元素語法）。
- ? 元素與元素之間應該合理嵌套。例如<a><b>HTML5從入門到精通</b></a>，可以很明確地看出<b>元素是<a>元素的子元素，這就是合理嵌套；但<a><b>HTML5從入門到精通</a></b>這種寫法就比較混亂，也就是所謂的不合理嵌套。
- ? 元素的屬性必須有屬性值，而且屬性值應該用引號（單引號或雙引號）引起來。
通常，計算機里的瀏覽器可以應對各種不規范的HTML文檔，但現在很多瀏覽器運行在移動電話和手持設備上，它們就沒有能力來處理那些不規范的標記語言。
為此，W3C建議使用XML規范來約束HTML文檔，將HTML和XML的長處加以結合，從而得到現在和未來都能使用的標記語言：XHTML。
XHTML可以被所有的支持XML的設備讀取，在其余的瀏覽器升級至支持XML之前，XHTML強制HTML文檔具有更加良好的結構，保證這些文檔可以被所有的瀏覽器解釋。
1.2.3 從XHTML到HTML5
雖然W3C努力為HTML制訂規范，但由于絕大部分編寫HTML頁面的人并沒有接受過專業訓練，他們對HTML規范、XHTML規范也不是很了解，所以他們制作的HTML網頁絕大部分都沒有遵守HTML規范。大量調查表明，即使在一些比較正規的網站中，也很少有網站能通過驗證。例如2008年，一項Alexa關于全球500強網站的調查表明，僅有6.57%的網站能通過HTML規范驗證。如果把那些名不見經傳的小網站考慮在內，整個互聯網上就幾乎都是不符合規范的HTML頁面。
雖然互聯網上絕大部分HTML頁面都是不符合規范的，但各種瀏覽器卻可以正常解析并顯示這些頁面，在這樣的情況下，HTML頁面的設計制作者甚至感覺不到遵守HTML規范的意義。于是出現了一種非常尷尬的局面：一方面，W3C組織極力地呼吁大家應該制作遵守規范的HTML頁面；另一方面，HTML頁面制作者卻根本不太理會這種呼吁。
現有的HTML頁面大量存在如下4種不符合規范的內容。
- ? 元素的標簽名大小寫混雜的情況。比如<p>HTML5</P>，這個<p>元素的開始標簽和結束標簽采用了大小寫不匹配的字符。
- ? 元素沒有合理結束的情況。比如只有<p>標簽，沒有</p>結束標簽。
- ? 元素中使用了屬性，但沒有指定屬性值的情況。比如<input type="text" disabled>。
- ? 為元素的屬性指定屬性值時沒有使用引號的情況。比如<input type=text>。
可能是出于“存在即是合理”的考慮，WHATWG組織開始制訂一種“妥協式”的規范：HTML5。既然互聯網上大量存在上面4種不符合規范的內容，而且制作者從來也不打算改進這些頁面，因此HTML5干脆承認它們是符合規范的。
由于HTML5規范不嚴格，因此HTML5甚至不再提供文檔類型定義（DTD）。到2008年，WHATWG的努力終于被W3C認可，W3C已經制訂了HTML5草案。
雖然到目前為止，W3C依然沒有正式發布HTML5規范，但大量瀏覽器廠商和市場都已經開始承認HTML5，谷歌（Google）在很多地方都開始使用HTML5。
1.3 迎接新的Web時代
自從2010年HTML5正式推出以來，它就以一種驚人的速度被迅速地推廣，就連微軟也因此為下一代IE9瀏覽器做了標準上的改進，使其能夠支持HTML5。關于各主流瀏覽器對于HTML5所表現出來的歡迎和支持情況，以及為什么HTML5會如此受歡迎，我們將在后面幾節中做詳細介紹。目前業界全體都在朝著HTML5的方向邁進，HTML5的時代馬上就要到來了。
1.3.1 部分代替了原來的JavaScript
HTML5增加了一些非常實用的功能，這些功能可以部分代替JavaScript，而這些功能只要通過為標簽增加一些屬性即可。
例如，打開一個頁面后立即讓某個單行文本框獲得輸入焦點，在HTML5之前，可能需要通過JavaScript來實現。代碼如下。
上面的代碼片段通過JavaScript來完成這個功能，但在HTML5中則只需要設置一個屬性即可。如果使用HTML5，則可以把上面的代碼改為如下形式。
在這個示例中，我們可以看到，在HTML4中使用了一段JavaScript代碼，在HTML5中并沒有使用，取而代之的是一個在HTML5中新出現的屬性。
把兩個代碼片段放在一起進行對比，不難發現使用HTML5之后簡潔多了。除了這里示范的autofocus可用于自動獲得焦點之外，HTML5還支持其他一些屬性，比如一些輸入校驗的屬性，以前都必須通過JavaScript來完成，但現在都只要一個HTML5屬性即可。
1.3.2 更明確的語義支持
在HTML5之前，如果要表達一個文檔結構，可能只能通過<div>元素來實現。例如，我們來看一個在HTML4中的一種頁面結構，代碼如下。
在上面的頁面結構中，所有的頁面元素都采用<div>元素來實現，不同<div>元素的id不同，不同id的<div>元素代表不同含義，但這種采用<div>布局的方式導致缺乏明確的語義，因為所有內容都是<div>元素。
HTML5則為上面的頁面布局提供了更明確的語義元素，此時可以將上面的代碼片段改為如下形式。
在這個示例中，我們可以看到，在HTML4中常見的用div來劃分頁面結構的方法，到了HTML5中也被一種新出現的標簽替代了。這些標簽可以提供更加清晰的語義。
除此之外，以前的HTML可能會通過<em>這樣的元素來表示“被強調”的內容，但到底是哪一種強調，HTML卻無法表達；HTML5則提供了更多支持語義的強調元素，例如：
上面的第一個<time>元素用于強調被標記的內容是日期或時間，而<mark>元素則用于強調被標記的文本。HTML5新增的這兩個元素比<em>元素提供了更豐富的語義。
1.3.3 增強了Web應用程序功能
一直以來，HTML頁面的功能被嚴格地限制著：客戶端從服務器下載HTML頁面數據，瀏覽器負責呈現這些HTML頁面數據。出于對客戶機安全性的考慮，以前的HTML在安全性方面確實做得足夠安全。
當HTML頁面做得太安全之后，我們就需要通過JavaScript等其他方式來增加HTML的功能。換句話來說，HTML對Web程序而言功能太單一了，比如上傳文件時想同時選擇多個文件都不行，前端開發者不得不通過Flash、JavaScript等各種技術來克服這個困難。為了彌補這種不足，HTML5規范增加了不少新的API，而各種瀏覽器正在努力實現這些API功能，在未來的日子里，使用HTML5開發Web應用將會更加輕松。
1.3.4 HTML5的目標
HTML5的目標主要是為了能夠創建更簡單的程序，書寫出更簡潔的代碼。例如，為了使Web應用程序的開發變得更加容易，HTML5中提供了很多API。為了使HTML代碼變得更簡潔，在HTML5中開發出了新的屬性、新的元素等。總體來說，HTML5為下一代Web平臺提供了許許多多新的功能。
先來了解一下在HTML5中究竟提供了哪些革命性的新功能。
首先，在HTML5之前，有很多功能必須要使用JavaScript等腳本語言才能實現，比如前面例子中提到，在運行頁面時經常使用的讓文本框獲得光標焦點的功能。如果使用HTML5，同樣的功能只要使用元素的屬性標簽就可以實現了。這樣的話，整個頁面就變得非常清楚直觀，容易理解。因此，Web設計者可以放心大膽地使用這些HTML5中新增的屬性標簽。由于HTML5中提供了大量的這種可以替代腳本的屬性標簽，使得開發出來的界面語言也變得更加簡潔易懂。
不但如此，HTML5使頁面的結構也變得更加清楚。之前使用的div標簽也不再使用了，而是使用前面第二個示例中所提到的更加語義化的結構標簽。這樣，書寫出來的界面結構就會顯得非常清晰，頁面中的各個部分要展示什么內容也會讓人一目了然。
雖然HTML5宣稱的立場是“非革命性的發展”，但是它所帶來的功能是讓人渴望的，使用它所進行的設計也是很簡單的，因此，它深受Web設計者與開發者的歡迎。
1.4 各瀏覽器對HTML5的支持
HTML5被說成是劃時代也好，具有革命性也好，如果不能被業界承認并且大面積地推廣使用，這些都是沒有意義的。事實上，今后HTML5被正式地、大規模地投入應用的可能性是相當高的。
通過對IE、谷歌、Firefox、Safari、Opera等主流瀏覽器的發展策略的調査，發現它們都在支持HTML5上采取了一定的措施。
- ? 微軟
2010年3月16日，微軟公司在拉斯維加斯舉行的MIX10技術大會上宣布已推出IE9瀏覽器開發者預覽版。微軟稱，IE9開發完成后，將會更好地支持CSS3、SVG和HTML5等互聯網瀏覽通用標準。
- ? 谷歌
2010年2月19日，谷歌Gears項目經理伊安-費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以此重點開發HTML5項目。據費特表示，目前，在谷歌看來，Gears面臨的主要問題是，該應用與HTML5的諸多創新非常相似，而且谷歌一直積極發展HTML5項目。因此，只要谷歌不斷以加強新網絡標準的應用功能為工作重點，那么為Gears增加新功能就無太大意義了。目前，多種瀏覽器將會越來越多地為GMail及其他服務提供更多脫機功能方面的支持，因此Gears面臨的需求也在日益下降，這是谷歌做出上述調整的重要原因。
- ? Mozilla
2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測試版。在該版本中的Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多HTML5形式的控制等。從官方文檔來看，Firefox 4對HTML5是完全級別的支持，包括在線視頻、在線音頻等多種應用。
- ? 蘋果
2010年6月7日，蘋果公司在開發者大會的會后發布了Safari5，這款瀏覽器至少支持10個以上的HTML5新技術，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajax歷史和WebSocket字幕。
- ? Opera
2010年5月5日，Opera軟件公司首席技術官H?kon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體的采訪。號稱“CSS之父”的H?kon Wium Lie認為，HTML5與CSS3將是全球互聯網發展的未來趨勢，目前包括Opera在內的諸多瀏覽器廠商，紛紛在研發HTML5相關產品，Web的未來屬于HTML5。從Opera 10開始，Opera對HTML5的支持就十分出色。
以上證據表明，目前這些瀏覽器都紛紛地朝著支持HTML5、結合HTML5的方向邁進著，因此HTML5已經被廣泛地推行開來了。
在HTML5以前，各瀏覽器對HTML和JavaScript的支持很不統一，這樣就造成了同一個頁面在不同瀏覽器中的表現不同。HTML5的目標是詳細分析各瀏覽器所具有的功能，并以此為基礎制訂一個通用規范，要求各瀏覽器能支持這個通用標準。
就目前的形勢來看，各瀏覽器廠商對HTML5都抱著極大的熱情，尤其是微軟因為對HTML5的支持不夠積極，導致IE（Internet Explorer）市場份額下滑的事實，更成為各瀏覽器廠商的前車之鑒。如果各瀏覽器都能統一地遵守HTML5規范，以后前端程序員開發HTML+CSS+JavaScript頁面時將會變得更加輕松。
1.5 HTML5要解決的3個問題
HTML5的出現，對于Web來說意義是非常重大的。因為它的意圖是想要把目前存在的各種問題一并解決掉，它是一個企圖心比較強的HTML版本。那么，到底Web上存在哪些問題，HTML5又打算怎么解決呢？
- ? 瀏覽器之間的兼容性很低
首先要提到的就是，Web瀏覽器之間的兼容性是非常低的。在某個Web瀏覽器上可以正常運行的HTML/CSS/JavaScript等Web程序，在另一個Web瀏覽器上就不正常了的事情是非常常見的。
如果用一句話來描述這個問題的原因，可以說是“規范不統一”。規范不統一，沒有被標準化，是出現這個問題的主要原因。
在HTML5中，這個問題將得到解決。HTML5的使命是詳細分析各瀏覽器所具有的功能，然后以此為基礎，要求這些瀏覽器所有內部功能都要符合一個通用標準。
如果各瀏覽器都符合通用標準，然后以該標準為基礎來編寫程序，那么程序在各Web瀏覽器都能正常運行的可能性就大大提高了，這對于Web開發者和設計者都是一件令人可喜的事情。而且，今后開發者開發出來的Web功能只要符合通用標準，Web瀏覽器也都是很愿意封裝該功能的。
- ? 文檔結構不夠明確
第二個問題是，在之前的HTML版本中，文檔的結構不夠清晰和明確。例如，為了要表示“標題”“正文”，之前一般都是用div元素。但是，嚴格說來，div不是一個能把文檔結構表達得很清楚的元素，使用了過多的div元素的文章，閱讀時不仔細研究，是很難看出文檔結構的。而且，對于搜索引擎或屏幕閱讀器等程序來說，過多使用了div元素，那么這些程序就連“從哪到哪算是重要的正文”，“這個ul元素是表示導航菜單，還是表示項目列表”等對于結構分析來說最基本的問題的答案也都不知道。
在HTML5中，為了解決這個問題，追加了很多與結構相關的元素。不僅如此，還結合了包括微格式、無障礙應用在內的各種各樣的周邊技術。
- ? Web應用程序的功能受到了限制
最后一個問題是，HTML與Web應用程序的關系十分薄弱。Web應用程序的特征是先從網絡下載，然后忠實運行，因此應該對會威脅到用戶安全的功能進行限制。
目前安全性的保障方面已做到了，但對于Web應用程序來說，一直以來HTML真正所做出的貢獻是很少的，比如就連上傳文件時想同時選擇一個以上的文件都做不到。
為了彌補這方面的不足，HTML5已經開始提供各種各樣Web應用上的新API，各瀏覽器也在快速地封裝著這些API，HTML5已經使豐富Web應用的實現變成了可能。
1.6 HTML的基本結構
1.6.1 HTML文件的編寫方法
- ? HTML標簽
一個HTML文件是由一系列的元素和標簽組成的。元素是HTML文件的重要組成部分，例如title（文件標題）、img（圖像）及table（表格）等。元素名不區分大小寫。HTML用標簽來規定元素的屬性和它在文件中的位置。
HTML的標簽分單獨出現的標簽和成對出現的標簽兩種。
大多數標簽成對出現，是由首標簽和尾標簽組成的。首標簽的格式為<元素名稱>，尾標簽的格式為</元素名稱>。其完整語法如下。
成對標簽僅對包含在其中的文件部分發生作用，例如<title>和</title>標簽用于界定標題元素的范圍，也就是說，<title>和</title>標簽之間的部分是此HTML文件的標題。
單獨標簽的格式為<元素名稱>，其作用是在相應的位置插入元素，例如<br>標簽便是在該標簽所在位置插入一個換行符。
說明
在每個HTML標簽，大寫、小寫和混寫均可。例如<HTML>、<html>和<Html>，其結果都是一樣的。
在每個HTML標簽中，還可以設置一些屬性，控制HTML標簽所建立的元素。這些屬性將位于所建立元素的首標簽，因此，首標簽的基本語法如下。
而尾標簽的建立方式則為：
因此，在HTML文件中某個元素的完整定義語法如下。
說明
語法中，設置各屬性所使用的“"”可省略。
- ? 元素的概念
當用一組HTML標簽將一段文字包含在中間時，這段文字與包含文字的HTML標簽被稱之為一個元素。
由于在HTML語法中，每個由HTML標簽與文字所形成的元素內，還可以包含另一個元素。因此，整個HTML文件就像是一個大元素，包含了許多小元素。
在所有HTML文件，最外層的元素是由<html>標簽建立的。在<html>標簽所建立的元素中，包含了兩個主要的子元素，這兩個子元素是由<head>標簽與<body>標簽所建立的。<head>標簽所建立的元素的內容為文件標題，而<body>標簽所建立的元素內容為文件主體。
- ? HTML文件結構
在介紹HTML文件結構之前，先來看一個簡單的HTML文件及其在瀏覽器上的顯示結果。
下面開始編寫一個HTML文件，使用文件編輯器，例如Windows自帶的記事本。
運行效果如圖1.1所示。
從上述代碼中可以看出HTML文件的基本結構如圖1.2所示
圖1.1 HTML示例
圖1.2 HTML文件的基本結構
其中，<head>與</head>之間的部分是HTML文件的文件頭部分，用以說明文件的標題和整個文件的一些公共屬性。<body>與</body>之間的部分是HTML文件的主體部分，下面介紹的標簽，如果不加特別說明，均是嵌套在這一對標簽中使用的。
1.6.2 文件開始標簽<html>
在任何的一個HTML文件里，最先出現的HTML標簽就是<html>，它用于表示該文件是以超文本標識語言（HTML）編寫的。<html>是成對出現的，首標簽<html>和尾標簽</html>分別位于文件的最前面和最后面，文件中的所有文件和HTML標簽都包含在其中。例如：
該標簽不帶任何屬性。
事實上，現在常用的Web瀏覽器（例如IE）都可以自動識別HTML文件，并不要求有<html>標簽，也不對該標簽進行任何操作。但是，為了提高文件的適用性，使編寫的HTML文件能適應不斷變化的Web瀏覽器，還是應該養成使用這個標簽的習慣。
1.6.3 文件頭部標簽<head>
習慣上，把HTML文件分為文件頭和文件主體兩個部分。文件主體部分就是在Web瀏覽器窗口的用戶區內看到的內容，而文件頭部分用來規定該文件的標題（出現在Web瀏覽器窗口的標題欄中）和文件的一些屬性。
<head>是一個表示網頁頭部的標簽。在由<head>標簽所定義的元素中，并不放置網頁的任何內容，而是放置關于HTML文件的信息，也就是說它并不屬于HTML文件的主體。它包含文件的標題、編碼方式及URL等信息。這些信息大部分是用于提供索引、辨認或其他方面的應用。
寫在<head>與</head>中間的文本，如果又寫在<title>標簽中，表示該網頁的名稱，并作為窗口的名稱顯示在這個網頁窗口的最上方。
如果HTML文件并不需要提供相關信息時，可以省略<head>標簽。
1.6.4 文件標題標簽<title>
每個HTML文件都需要有一個文件名稱。在瀏覽器中，文件名稱作為窗口名稱顯示在該窗口的最上方。這對瀏覽器的收藏功能很有用。如果瀏覽者認為某個網頁對自己很有用，今后想經常閱讀，可以選擇IE瀏覽器“收藏”菜單中的“添加到收藏夾”命令將它保存起來，供以后調用。網頁的名稱要寫在<title>和</title>之間，并且<title>標簽應包含在<head>與</head>標簽之中。
HTML文件的標簽是可以嵌套的，即在一對標簽中可以嵌入另一對子標簽，用來規定母標簽所含范圍的屬性或其中某一部分內容，嵌套在<head>標簽中使用的主要有<title>標簽。
1.6.5 文件主體標簽<body>
<body>標簽是成對出現的。網頁中的主體內容應該寫在<body>和</body>之間，而<body>標簽包含在<html>標簽里面。
1.6.6 編寫文件的注意事項
在編寫文件時，要注意以下事項。
（1）“<”和“>”是任何標記的開始和結束。元素的標記要用這對尖括號括起來，并且結束的標記總是在開始的標記前加一個斜杠。
（2）標記與標記之間可以嵌套，如：
（3）在源代碼中不區分大小寫，如以下幾種寫法都是正確并且相同的標記。
（4）任何回車和空格在源代碼中不起作用。為了代碼清晰，建議不同的標記之間回車編寫。
（5）HTML標記中可以放置各種屬性，如：
其中align為屬性，center為屬性值，元素屬性出現元素的< >內，并且和元素名之間有一個空格分割，屬性值可以直接書寫，也可以使用""括起來。如下面的兩種寫法都是正確的。
（6）如果希望在源代碼中添加注釋，便于閱讀，可以以“<!--”開始，以“--!>”結束。如下代碼。
注釋語句只出現在源代碼中，而不會在瀏覽器中顯示。
1.7 編寫第一個HTML文件
視頻講解
1.7.1 HTML文件的編寫方法
編寫HTML文件主要有如下3種方法。
- ? 手工直接編寫
由于HTML語言編寫的文件是標準的ASCII文本文件，所以我們可以使用任何的文本編輯器來打開并編寫HTML文件，如Windows系統中自帶的記事本。
- ? 使用可視化軟件
Microsoft公司的Frontpage、Macromedia公司的Dreamweaver、Adobe公司的Golive等軟件均可以可視化的方式進行網頁的編輯制作。
- ? 由Web服務器一方實時動態生成
這需要進行后端的網頁編程來實現，如ASP、PHP等，一般情況下都需要數據庫的配合。
1.7.2 手工編寫頁面
下面先使用記事本來編寫第一個HTML文件。步驟如下。
（1）選擇“開始/程序/附件/記事本”命令，打開記事本程序，如圖1.3所示。
（2）在記事本中直接輸入下面的HTML代碼。
圖1.3 記事本
（3）輸入代碼后，記事本中顯示出代碼的內容，如圖1.4所示。
（4）選擇記事本菜單中的“文件/保存”命令，彈出如圖1.5所示的“另存為”對話框。
圖1.4 顯示了代碼的記事本
圖1.5 “另存為”對話框
（5）在對話框中選擇存盤的文件夾，然后在“保存類型”中選擇“所有文件”，在“編碼”中選擇ANSI，這里將“文件名”設置為1-2.htm，然后單擊“保存”按鈕。
（6）最后關閉記事本，回到存盤的文件夾，雙擊如圖1.6所示的1-2.htm文件，可以在IE瀏覽器中看到最終頁面效果，如圖1.7所示。
圖1.6 保存出的htm文件
圖1.7 頁面效果
1.7.3 使用Dreamwaver制作頁面
Adobe Dreamweaver CS5.5是一個全面的專業工具集，可用于設計并部署極具吸引力的網站和Web應用程度并提供強大的編輯環境以及功能強大且基于標準的WYSIWYG設計表面。Adobe Dreamweaver CS5.5新版本使用了最新的技術加入了多屏幕預覽、jQuery集成、CSS3/HTML5支持、尖端的實時視圖渲染、移動UI構件、FTPS支持、智能編碼協助集成FLV內容等全新功能。下面以Adobe Dreamweaver CS5.5中文版為例，說明使用可視化網頁編輯軟件制作頁面的方法。步驟如下。
（1）選擇“開始/所有程序/Adobe Dreamweaver CS5.5”命令，啟動軟件的主程序，其主界面如圖1.8所示。
（2）Dreamweaver工作區使讀者可以查看文檔和對象屬性。工作區還將許多常用操作放置于工具欄中，使讀者可以快速更改文檔。Dreamweaver CS5.5工作區布局如圖1.9所示。
圖1.8 Adobe Dreamweaver CS5.5主界面
圖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）。
（3）如圖1.10所示，單擊文檔工具欄中的“拆分”按鈕，在這種視圖下，編輯窗口被分割成左右兩部分，左側顯示的是源代碼視圖，右側是可視化視圖，這樣可以在選擇和編輯源代碼的時候及時地在可視化視圖中看到效果。這兩部分是互相聯系，密不可分的，在代碼視圖中所做的任何修改都會影響設計視圖，反之亦然。
圖1.10 代碼視圖和設計視圖
（4）在如圖1.11所示的位置輸入“讓我們一起體驗超炫的HTML旅程吧”作為頁面的正文。
圖1.11 輸入正文
（5）在如圖1.12所示的位置輸入“HTML初露端倪”作為頁面的標題。
圖1.12 輸入標題
（6）選擇“文件/保存”命令，在如圖1.13所示的對話框中選擇存儲位置，將文件命名成1-1.html，然后單擊“保存”按鈕。
圖1.13 保存頁面
（7）雙擊1-1.html文件，可以在瀏覽器中直接看到效果，如圖1.14所示。
圖1.14 1-1.html頁面效果
1.7.4 使用WebStorm制作頁面
WebStorm是Jetbrains公司旗下的一款JavaScript開發工具，軟件支持不同瀏覽器的提示，還包括所有用戶自定義的函數。代碼補全包含了所有流行的庫，如jQuery、YUI、Dojo等，并且使用WebStorm不止可以編輯JavaScript代碼，還可以編寫和修改HTML以及CSS代碼。正因如此，WebStorm受到廣大JavaScript開發者的喜愛。下面介紹WebStorm的下載和使用。
1．下載與安裝
（1）首先打開瀏覽器，在瀏覽器地址欄中輸入網址https://www.jetbrains.com/webstorm/進入WebStorm官方下載頁面，如圖1.15所示。在該頁面中，選擇符合自己電腦系統的WebStorm，然后單擊DOWNLOAD按鈕即可開始下載。
圖1.15 WebStorm官方下載頁面
（2）下載完成以后，頁面中會彈出對話框，詢問是否保留所下載的WebStorm，單擊“保留”按鈕即可將WebStorm安裝包保留至本地，如圖1.16所示。
（3）雙擊打開本地的WebStorm的安裝包，開始安裝WebStorm，如圖1.17所示，單擊Next按鈕進行下一步，進入如圖1.18所示的頁面，在該頁面中單擊Browse按鈕選擇安裝路徑，選擇完成以后，再次單擊Next按鈕進入下一項。
（4）如圖1.19所示為安裝選項頁面，為了方便以后打開WebStorm，可以在電腦桌面中新建快捷方式，新建時，只需在第一項中選擇符合自己電腦系統類型的快捷方式，然后單擊Next按鈕進行進入下一步，選擇開始菜單文件夾頁面，如圖1.20所示，選擇默認的JetBrains即可，單擊Install按鈕進行下一步。
圖1.16 保存WebStorm安裝包至本地
圖1.17 開始安裝WebStorm
圖1.18 選擇安裝路徑
圖1.19 添加快捷方式
圖1.20 選擇開始菜單文件夾
（5）選擇完開始菜單文件夾以后，進入WebStorm安裝頁面，如圖1.21所示。安裝完成以后，Next按鈕會變成可單擊的狀態，單擊該按鈕，進入如圖1.22所示的提示用戶安裝完成的頁面，單擊Finish按鈕即可。
圖1.21 安裝WebStorm
圖1.22 安裝完成
2．WebStorm的使用
（1）雙擊打開WebStorm，打開頁面如圖1.23所示，打開后的頁面如圖1.24所示，單擊第一項Create New Project按鈕可以新建一個項目。
圖1.23 打開WebStorm
圖1.24 創建新的項目文件
（2）如圖1.25所示為選擇新建項目文件的路徑的頁面，讀者也可以單擊右側文件夾的圖標選擇已有的文件夾，然后單擊Create按鈕即可成功創建一個項目，如圖1.26所示，接下來需要創建HTML文件，創建方法是，右擊項目名稱，然后在彈出的快捷菜單中選擇New/HTML File命令進入為HTML文件命名頁面。
（3）如圖1.27所示為新建的HTML5文件命名頁面，為文件命名時，其擴展名可以省略，輸入名稱以后，單擊OK按鈕，進入如圖1.28所示的頁面，在該頁面中，讀者可以在<title>標簽中修改網頁的標題，在<body>標簽中添加網頁的正文，例如本實例中，修改網頁的標題為“我的第一個HTML5頁面”，并且添加網頁正文內容為“明天你好”，代碼編寫完成以后，單擊右側Google chrome瀏覽器的圖標，即可在谷歌瀏覽器中運行本實例。
圖1.25 選擇新建項目文件路徑
圖1.26 創建HTML文件
圖1.27 為HTML文件命名
圖1.28 代碼編寫頁面
1.7.5 使用瀏覽器瀏覽HTML文件
不同公司有不同的瀏覽器，最著名的是微軟公司的IE瀏覽器。使用瀏覽器最核心的功能就是查看我們編寫的HTML文件效果，并可以查看其他網站頁面的源代碼。下面我們將以IE瀏覽器為例來講解使用IE瀏覽器瀏覽HTML的過程。
（1）啟動IE瀏覽器后，打開剛才所建立的HTML文件。
（2）選擇“文件/打開”命令，然后在彈出的“打開”對話框中單擊“瀏覽”按鈕，如圖1.29所示，找到硬盤中存放的網頁文件，然后單擊“打開”按鈕，如圖1.30所示。這樣，瀏覽器就能夠顯示編寫網頁的頁面效果了。
圖1.29 “打開”對話框
圖1.30 選擇要打開的文件
1.7.6 HTML開發的明日圖書網
明日圖書網的前臺網頁制作就是應用HTML編寫完成的。下面我們來具體看一下明日圖書網的前臺網頁實現的源文件。查看源文件的步驟如下。
（1）打開瀏覽器，在地址欄輸入http://www.mingribook.com，然后按Enter鍵。
（2）頁面顯示了明日圖書網的首頁面。
（3）選擇瀏覽器主菜單中的“查看/源文件”命令，如圖1.31所示
圖1.31 選擇“查看/源文件”命令
（4）這樣，就會自動打開記事本來顯示頁面的源文件，如圖1.32所示。
圖1.32 頁面的源文件
1.8 小結
本章主要介紹了HTML的基本概念以及其發展史，重點介紹了HTML的基本結構并詳細介紹了如何編寫HTML的代碼。
希望讀者能好好學習本章，有一個扎實的基礎，為以后的學習做一個好的鋪墊。
1.9 習題
選擇題
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>
5．如果站點服務器支持安全套接層（SSL），那么連接到安全站點上的所有URL開頭是（ ）。
A．HTTP
B．HTTPS
C．SHTTP
D．SSL
判斷題
6．HTML是HyperText Markup Language（超文本標記語言）的縮寫。超文本使網頁之間具有跳轉的能力，是一種信息組織的方式，使瀏覽者可以選擇閱讀的路徑，從而可以不需要順序閱讀。（ ）
7．在源代碼窗口可以看到html文件是標準的ASCII文件，它是包含了許多被稱為標簽（tag）的特殊字符串的普通文本文件。（ ）
填空題
8．HTML網頁文件的標記是<html></html>，網頁文件的主體標記是<body></body>，標記頁面標題的標記是______。
9．創建一個HTML文檔的開始標記符是________；結束標記符是_________。
10．嚴格來說，________并不是一種編程語言，而只是一些能讓瀏覽器看懂的標記。
- INSTANT Mock Testing with PowerMock
- 測試驅動開發：入門、實戰與進階
- .NET 4.0面向對象編程漫談：基礎篇
- Django Design Patterns and Best Practices
- 基于差分進化的優化方法及應用
- Cassandra Data Modeling and Analysis
- 鋒利的SQL（第2版）
- Magento 1.8 Development Cookbook
- C#實踐教程（第2版）
- Azure Serverless Computing Cookbook
- Visual Studio Code 權威指南
- Python趣味編程與精彩實例
- 深入淺出Python數據分析
- Mastering ASP.NET Web API
- 美麗洞察力：從化妝品行業看顧客需求洞察