介紹
網絡時代已經到來。現在對人們來說，每天上網衝浪已經成爲一種最爲常見的行爲。
在網頁瀏覽器中輸入一段文本地址，就像http://www.codeproject.com，等待一下，網頁就加載到瀏覽器窗口中。一個典型的網頁是由文本、圖像和鏈接組成的。除去內容上的差異，不同網站的網頁也具有不同的外觀和感受，以實現在網絡上建立自己的身份品牌的目的。
如果你也曾想要了解你屏幕上的這些網頁是如何被創建出並以各式各樣的方式渲染的，那麼這裏正是你可以瞭解到這些知識的地方。讓我們一起走進在瀏覽器中創建了這麼多網頁的兩項核心技術HTML、CSS。
簡單的說，HTML提供了頁面基本的框架，而CSS豐富了頁面的表現。俗話說：“一圖勝千言”。下圖1中也很好的詮釋了應用CSS前後之間的差別。
應用CSS之前 應用CSS之後
很早之前
HTML的誕生
時間回到1989年，一個CERN的年輕天才軟件工程師Tim Berners-Lee ，發明了萬維網。次年，他創作了奠定今天網絡基礎的三項技術：
-
HTML：超文本標記語言。用於構建、發佈和鏈接網絡文件的標準。
-
URL：統一資源標識符。分配給網絡上每個資源一個獨特的“地址”，以便更容易的訪問。
-
HTTP：超文本傳輸協議。一個用於網絡上定義網頁與消息的格式與傳輸的通信協議。
顧名思義，HTML通過將內容嵌入在某些預定義的標籤中，如<title>、<head>和<p>來標記網頁上的每一個文本。任何瀏覽器都知道如何正確地顯示括號標籤中文本。
在網絡迅速成長的同時，一些新的HTML標籤，如<image>和<TABLE>也增加了進來，以便提高用戶的網絡體驗。<table>標籤最初是以數據表格的目的被引進的，但後來被用於格式化網頁的佈局。然而，這種混合結構的呈現方式，後來被發現是災難性的。
混亂狀態
隨着網絡的普及，許多不同的瀏覽器出現了。一個接一個，馬賽克，網景，緊接着微軟也進軍瀏覽器市場，每一個都引入自己獨有風格的標籤來達到增加市場份額和迎合Web開發者需求的目的。HTML已經開始偏離原先作爲純粹的結構提供者的根本了。
20世紀90年代中期，瀏覽器戰爭爆發了，這也帶來了網絡的混亂，很多用戶感到不滿。網頁中專屬標籤展現不同內容或者在對立的瀏覽器中無法展示完全都是常見的抱怨。混亂的狀態也引起了瀏覽器的兼容性問題。
在90年代後期，這種混亂的狀態終於在萬維網聯盟（W3C）的控制下結束。他們決定清理HTML，以使其回到原有結構提供者的角色。同時引入一種新技術，起到網頁中展現的作用。這個明智的舉動，促成了CSS的引進。
CSS的黎明
CSS的全名是層疊樣式表。它是Web的展現語言。它通過向各個HTML標籤分配字體、顏色或佈局的值，來增加了網頁的樣式。然而，CSS是不只用於HTML，它也適用於任何基於XML標記的語言。
這種關注點的分離，帶來了很多好處。這也使得從一個單個CSS頁面將層疊樣式應用到一個網站的不同頁面成爲了可能，避免了要在網站中的每一個頁面艱難的編寫相同的信息代碼。換句話說，使用CSS極大的釋放了網站的維護。
此外，這也使得不同環境中，在相同文件應用不同的CSS成爲可能。例如大屏幕、小屏幕或者打印機，這些讓使用者感覺欣喜。
HTML5和CSS3
HTML5是HTML的最新標準，取代了以前的HTML 4.01。
HTML5誕生於W3C和Web超文本應用技術工作組（WHATWG）之間的合作。HTML5的創建，是以以下三點爲目標：
-
減少對插件的依賴（如Flash）
-
使用標記代替腳本
-
獨立的設備和平臺
讀取HTML設計原則，有助於更好地理解爲什麼HTML5就像是今天這個樣子。
說到CSS，它的最新標準是CSS3，這與早期版本是完全向後兼容的。CSS3的規範是由W3C 開發的，目前仍處於開發階段，其最新的版本是CSS Snapshot 2010。
HTML編輯器
要以原本的形式瞭解HTML的本質，我強烈建議使用文本編輯器如PC版的Notepad，Mac的TextEdit，或者任何開源文本編輯器如Notepad++。在這個階段，遠離那些承諾所見即所得的專業HTML編輯器，這些編輯器並非能幫你有效的學習。
來吧，現在啓動你的文本編輯器。
-
步驟1 - 請真實的鍵入以下圖2中到文本編輯器。我特意挑選了截圖文字顯示的代碼片段，請不要簡單的複製和粘貼。
圖2：編寫HTML代碼
-
第2步 - 創建一個新的叫mysite的文件夾。此文件夾中，保存你新創建的以.htm或.html爲文件擴展名的HTML文件。事實上，我建議你第一次創建這個文件夾時，就打開這個文件夾並保存你的文件。我選擇將文件命名爲hello.html
-
第3步 - 雙擊你的HTML文件，並在瀏覽器中查看你的第一個網頁（圖3）。恭喜！你剛剛成功地創建HTML網頁。
圖3：查看關於瀏覽器
-
第4步 - 將你的文本編輯器和瀏覽器並排放置，並交叉檢查它們。在一側你可以看到HTML源代碼，另一側可以看到瀏覽器是如何解釋和渲染它。你將看到封閉在各自的標籤內的內容顯示在瀏覽器中，而標籤並未顯示。看起來有一個問題。爲什麼你“真實”鍵入的空格和縮進，沒有顯示出來？“Hello HTML”的標題標籤顯示在哪裏？你能在瀏覽器頁面中找到它嗎？
請往下閱讀
HTML基礎
正如你所注意到的，HTML的內容都包含在標籤對中，如<title> </ title>，<h1> </ h1>和<p> </ p>。讓我們開始使用一些基本的HTML標籤來熟悉一下。
<!DOCTYPE>
任何HTML文檔都是以<!DOCTYPE>標籤開始的第一行代碼。這句代碼會告訴瀏覽器頁面中編寫HTML代碼的版本，以便瀏覽器能正確的渲染。從這個意義上來說，<!DOCTYPE>不是HTML標籤。
HTML 4.01版本的<!DOCTYPE>看起來是這樣的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
我們示例文件中聲明的<!DOCTYPE>爲HTML5，這是HTML的最新標準。它比前面的版本更加簡潔易讀。
在W3C上可以找到更多<!DOCTYPE>的信息。
<html>
<html>標籤意味着HTML文件的開始，同時在文件的最後一行必須以</ html>標籤的文標籤結束。
<head>
<head>開始標籤和</ head>結束標籤之間是作爲其他標籤的容器。例如<title>, <script>, <style> 和 <meta>。
<title>
開始標籤<title>和結束標籤</ title >之間的區域，用於放置HTML文檔標題的地方。<title>標籤的內容將會出現在瀏覽器的工具欄中。你也許已經注意到我們的例子中，“Hello HTML”出現在瀏覽器的工具欄中。當你收藏這個頁面時，<title>標籤的內容也會作爲標籤的名稱。
<body>
開始標籤<body>和結束標籤</ body>之間的區域服務於瀏覽器窗的網頁中的可視化內容部分，<body>標籤類似於其它的HTML標籤，如<h1>，<p>，<image>和<table>。
<h1>，<h2> ... <h6>
共有6個標題標籤，從<h1>，<h2>到<h6>。在我們的例子中，我們已經使用了其中的4個，即<h1>，<h2>，<h4>和<h6>。它們必須與對應的結束標記配合使用。瀏覽器會自動的分別爲每一行標題上面和下面添加額外的間距。
<p>
我們使用<p>標籤來將網頁內容分段，以便組織成段落的形式。每一個<p>標籤必須以</ p>標籤結束。我們的示例中有3個段落。就像標題標籤一樣，瀏覽器會自動添加爲每個段落上面和下面添加額外的間距。我特意爲段落添加了額外的空白，但是並未顯示在瀏覽器中。你也許已經注意到了，標籤之間的縮進和額外間距均沒有顯示出來。
結論是明確的：“額外的空白會被忽略。”
注意事項
下面總結一下這次學習的要點：
- 額外的空白會被忽略
- HTML的標籤被包裹在尖括號中，比如<HTML>
- HTML的標籤通常成對出現，除少數例外
- 每個結束標籤前面都有一個斜槓，就像</ HTML>
- HTML標籤不區分大小寫：<H1>和<h1>的含義相同。W3C建議小寫。
- 代碼排版上錯誤的情況是不常見的。我們可以通過適當的代碼縮進來避免這種代碼排版上的問題。
- 最後但同樣重要的：據我觀察，最常見的錯誤之一是忘記添加結束標籤。我的解決辦法是：寫開始標籤時，同時也寫上結束標籤，然後再花時間在兩個標籤之間添加內容。
第一次的學習就到這裏。
學習完第一屆HTML5和CSS3的基本知識，能夠幫助我們更好的進行前端開發。同時，還可以藉助一些前端開發工具。如Wijmo，這是一款大而全面的前端 HTML5 / JavaScript UI控件集，能爲企業應用提供更加靈活的操作體驗，現已全面支持Angular 2。
原文鏈接：https://www.codeproject.com/Articles/751771/Beginners-Guide-to-HTML-CSS-Writing-Your-First-Cod