HTML用於定義內容的含義，而CSS（Cascading Style Sheet，層疊樣式表）用於定義內容和網頁如何顯示。HTML頁面和CSS文件（樣式表，stylesheet）都是文本文件，因此很容易編輯。
漸進增強：那些只能訪問基本頁面的設備和瀏覽器會得到簡化的、默認的體驗，而那些能夠瀏覽更健壯的網站的設備和瀏覽器將看到增強的版本。不必要求網站對所有人來說體驗都是一樣的，關鍵是網站的內容是可訪問的。
一個網頁主要包括以下三種成分：
- 文本內容（text content）：在頁面上讓訪問者瞭解頁面內容的純文字；
- 對其他文件的引用（references to other files）：這些文件加載圖像、音頻、視頻、SVG1文件等，指向其他HTML頁面和資源，以及樣式表（用於控制頁面的佈局）和JavaScript文件（用於爲頁面增加行爲）；
- 標記（markup）：對文本內容進行描述並使引用正確地工作。
1.1 基本HTML頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Blue Flax (Linum lewisii)</title> </head> <body> <article> <h1>The Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about the Blue Flax">Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small>© Blue Flax Society.</small></p> </article> </body> </html>
<body>開始標記以上的代碼是爲瀏覽器和搜索引擎準備的指導信息。每個網頁都以DOCTYPE聲明開頭。無論如何，頁面一定要包含<!DOCTYPE html>。
從<!DOCTYPE html>一直到</head>之間的部分對用戶來說是不可見的，除了一處例外，即<title>和</title>之間的文字——Blue Flax(Linum lewisii)。這部分文字會作爲標題顯示在瀏覽器窗口頂端和標籤頁。
每行之間的回車符和代碼的縮進與其是否爲有效HTML毫無關係。也不會影響內容在瀏覽器中的顯示效果。
注：©是一個表示版權的符號©。這樣做可以確保無論以哪種編碼方式保存這份文檔，這個符號都會被正確地顯示。
1.2 語義化HTML：有含義的標記
瀏覽器的默認樣式表將標題（h1～h6元素）與普通文本區別開來，對em文本加上斜體樣式，對鏈接加上顏色和下劃線。
每個Web瀏覽器都有一個內置CSS文件（一張樣式表），它決定了每個HTML元素的默認樣式（你自己創建的CSS可以覆蓋這些樣式）。
1.2.1 塊級元素、行內元素以及HTML5
有些HTML元素（如article、h1和p）各自顯示爲單獨的一行，就像書裏的各個段落一樣，而另外一些元素（如a和em）則與其他內容顯示在同一行裏。
在HTML5之前，大多數元素都可以劃入塊級（block-level，顯示爲單獨的一行）或行內（inline，可以與其他內容在一行並排顯示）兩種類別。
1.2.2 HTML5強調語義
HTML5強調HTML的語義，把所有視覺樣式都扔給了CSS。
1.2.3 基本HTML頁面的語義
基本頁面的body，它包含article、h1、img、p、em和a元素以描述內容的含義。所有的內容都嵌套在article中。
用img在頁面中插入圖片很容易。如果圖片未能顯示，就會顯示alt屬性中的文字“Blue Flax(Linum lewisii)”。
em元素表示“強調”。
通過a元素定義一個鏈接。在這個例子中，文字“Blue Flax”是一個指向維基百科某頁面的鏈接。rel="external"指出鏈接指向的是另一個網站，這也增加了語義。
1.2.4 爲什麼語義很重要
- 提升可訪問性和互操作性；
- 改進了搜索引擎優化（SEO）；
- 使代碼更少，頁面更快；
- 使維護代碼和添加樣式變得容易。
改善SEO的效果，也就是說網頁在搜索引擎中的排名會靠前，因爲搜索引擎對用特殊方式標記的內容會賦予更高的權重。
1.3 標記：元素、屬性和值
1.3.1 元素
一個非空元素由開始標記、內容和結束標記組成。
空元素（emptyelement）看起來像開始標記和結束標記的結合，由左尖括號開頭，然後是元素的名稱和任何可能有的屬性，然後是一個可選的空格和一個可選的斜槓，最後是必須有的右尖括號，如：
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
空元素並不包圍任何文本內容。空元素只有一個標記，既作爲元素開始，又作爲元素結束。
1.3.2 屬性和值
屬性包含的是有關文檔內容的信息並非文檔內容本身。
屬性總是位於元素的開始標記裏面，通常用一對引號包圍屬性的值。屬性的順序並不重要。不同的屬性值對之間都用空格隔開。大多數屬性僅接受枚舉的或預定義的值，也就是說，必須從一個標準列表中選一個值。
1.3.3 父元素與子元素
如果一個元素包含另一個元素，它就是被包含元素的父元素，被包含元素稱爲子元素。實際上，可以創建網頁的家譜，顯示頁面上各元素之間的層次關係並唯一地標識每個元素。
當元素中包含其他元素時，每個元素都必須正確地嵌套，也就是子元素必須完全地包含在父元素中。使用結束標記的時候，它必須與最近的開始標記對應。
1.4 網頁的文本內容
瀏覽器呈現HTML時，會把多個空格或製表符壓縮成單個空格，並把回車和換行符轉換成單個空格，或者將它們一起忽略。
HTML過去只能使用ASCII字符。ASCII只包括英語字母、數字和少數幾個常用的符號。許多日常符號必須用特殊的字符引用來創建，如é（表示é）、©（表示©）等。
詳見：http://www.elizabethcastro.com/html/extras/entities.html
Unicode是ASCII的超集，大大減輕了特殊字符問題的負擔。用UTF-8對頁面進行編碼（，並用同樣的編碼保存HTML文件已成爲一種標準做法。
直接在head開始標記後面指明文檔的字符編碼。charset屬性用以設置編碼類型。
<head> <meta charset="utf-8" /> ... </head>
1.5 鏈接、圖像和其他非文本內容
外部文件（如圖片、視頻）實際上並沒有放在HTML文件中，而是單獨保存的，只是簡單地在頁面中引用了這些文件。
1.6 文件名
對網頁文件命名時要記住幾點，這些要點有助於對文件進行組織，使訪問者更容易找到並訪問你的頁面，確保他們的瀏覽器能正確地處理頁面，以及增強SEO。
文件名全部使用小寫字母，用短橫線‘-’（而不是下劃線‘_’）分隔單詞，用.html作爲擴展名。
1.7 URL
URL（Uniform Resource Locator，統一資源定位符）是地址的別名。它包含關於文件存儲位置和瀏覽器應如何處理它的信息。互聯網上的每個文件都有唯一的URL。
URL的第一個部分稱爲模式（scheme）。模式告訴瀏覽器如何處理需要打開的文件。最常見的模式是HTTP（Hypertext Transfer Protocol，超文本傳輸協議），用於訪問網頁。
第二個部分是文件所在服務器的名稱，緊接着是到達這個文件的路徑，以及文件自身的名稱。有時URL不以文件名結尾，而以一個路徑結尾，在這種情況下，URL指的是路徑中最後一個目錄中的默認文件（通常爲index.html）。
其他常見的模式有https（用於安全網頁）、ftp（File Transfer Protocol，文件傳輸協議，用於下載文件）、mailto（用於發電子郵件）、file（用於訪問本地硬盤或本地文件共享網絡上的文件）。
file模式後面跟着一個冒號和三個斜槓。
絕對URL&相對URL：
絕對顯示文件的完整路徑，無論是在哪個服務器上的網頁中，某一文件的絕對URL都是完全一樣的。
相對URL以包含URL本身的文件的位置爲參照點，描述目標文件的位置。
要引用當前文件夾的子文件夾中的文件，應在文件名之前加上子文件夾名稱和一個斜槓。要引用文件層次結構中更高層目錄中的文件，那麼應該使用兩個句點和一個斜槓（../），上升一級。可以組合和重複使用兩個句點和一個斜槓，引用當前文件所在服務器或硬盤上的任何文件。
總結
