標籤：html5 css3
介紹網路時代已經到來。現在對人們來說，每天上網衝浪已經成為一種最為常見的行為。
在網頁瀏覽器中輸入一段文本地址，就像http://www.codeproject.com，等待一下，網頁就載入到瀏覽器視窗中。一個典型的網頁是由文本、映像和連結組成的。除去內容上的差異，不同網站的網頁也具有不同的外觀和感受，以實現在網路上建立自己的身份品牌的目的。
如果你也曾想要瞭解你螢幕上的這些網頁是如何被建立出並以各式各樣的方式渲染的，那麼這裡正是你可以瞭解到這些知識的地方。讓我們一起走進在瀏覽器中建立了這麼多網頁的兩項核心技術HTML、CSS。
簡單的說，HTML提供了頁面基本的架構，而CSS豐富了頁面的表現。俗話說：“一圖勝千言”。1中也很好的詮釋了應用CSS前後之間的差別。
應用CSS之前 應用CSS之後
650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120150417-962693823.png" style="border:0px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120203776-1913184530.png" style="border:0px;" />
很早之前HTML的誕生
時間回到1989年，一個CERN的年輕天才軟體工程師Tim Berners-Lee ，發明了全球資訊網。次年，他創作了奠定今天網路基礎的三項技術：
HTML：超文字標記語言 (HTML)。用於構建、發布和連結網路檔案的標準。
URL：統一資源識別項。分配給網路上每個資源一個獨特的“地址”，以便更容易的訪問。
HTTP：超文字傳輸通訊協定 (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和CSS3HTML5是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++。在這個階段，遠離那些承諾所見即所得 (WYSIWYG)的專業HTML編輯器，這些編輯器並非能幫你有效學習。
來吧，現在啟動你的文字編輯器。
步驟1 - 請真實的鍵入以2中到文字編輯器。我特意挑選了文字顯示的程式碼片段，請不要簡單的複製和粘貼。
650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120349714-1062633087.png" style="border:0px;" />
圖2：編寫HTML代碼
第2步 - 建立一個新的叫mysite的檔案夾。此檔案夾中，儲存你新建立的以.htm或.html為副檔名的HTML檔案。事實上，我建議你第一次建立這個檔案夾時，就開啟這個檔案夾並儲存你的檔案。我選擇將檔案命名為hello.html
第3步 - 雙擊你的HTML檔案，並在瀏覽器中查看你的第一個網頁（圖3）。恭喜！你剛剛成功地建立HTML網頁。
650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120439495-973992252.png" style="border:0px;" />
圖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初學者指南(1) – 編寫第一行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
