HTML5&CSS3初學者指南(1) – 編寫第一行代碼

時間 2021-01-19

標籤 css html 前端瀏覽器網絡框架編輯器 ide 工具佈局欄目 HTML 简体版

原文原文鏈接

介紹

網絡時代已經到來。如今對人們來講，天天上網衝浪已經成爲一種最爲常見的行爲。css

在網頁瀏覽器中輸入一段文本地址，就像http://www.codeproject.com，等待一下，網頁就加載到瀏覽器窗口中。一個典型的網頁是由文本、圖像和連接組成的。除去內容上的差別，不一樣網站的網頁也具備不一樣的外觀和感覺，以實如今網絡上創建本身的身份品牌的目的。html

若是你也曾想要了解你屏幕上的這些網頁是如何被建立出並以各式各樣的方式渲染的，那麼這裏正是你能夠了解到這些知識的地方。讓咱們一塊兒走進在瀏覽器中建立了這麼多網頁的兩項核心技術HTML、CSS。前端

簡單的說，HTML提供了頁面基本的框架，而CSS豐富了頁面的表現。俗話說：「一圖勝千言」。下圖1中也很好的詮釋了應用CSS先後之間的差異。瀏覽器

應用CSS以前應用CSS以後網絡

很早以前

HTML的誕生框架

時間回到1989年，一個CERN的年輕天才軟件工程師Tim Berners-Lee ，發明了萬維網。次年，他創做了奠基今天網絡基礎的三項技術：編輯器

HTML：超文本標記語言。用於構建、發佈和連接網絡文件的標準。ide
URL：統一資源標識符。分配給網絡上每一個資源一個獨特的「地址」，以便更容易的訪問。工具
HTTP：超文本傳輸協議。一個用於網絡上定義網頁與消息的格式與傳輸的通訊協議。佈局

顧名思義，HTML經過將內容嵌入在某些預約義的標籤中，如<title>、<head>和<p>來標記網頁上的每個文本。任何瀏覽器都知道如何正確地顯示括號標籤中文本。

在網絡迅速成長的同時，一些新的HTML標籤，如<p_w_picpath>和<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>，<p_w_picpath>和<table>。

<h1>，<h2> ... <h6>

共有6個標題標籤，從<h1>，<h2>到<h6>。在咱們的例子中，咱們已經使用了其中的4個，即<h1>，<h2>，<h4>和<h6>。它們必須與對應的結束標記配合使用。瀏覽器會自動的分別爲每一行標題上面和下面添加額外的間距。

<p>

咱們使用<p>標籤來將網頁內容分段，以便組織成段落的形式。每個<p>標籤必須以</ p>標籤結束。咱們的示例中有3個段落。就像標題標籤同樣，瀏覽器會自動添加爲每一個段落上面和下面添加額外的間距。我特地爲段落添加了額外的空白，可是並未顯示在瀏覽器中。你也許已經注意到了，標籤之間的縮進和額外間距均沒有顯示出來。

結論是明確的：「額外的空白會被忽略。」