第一部分 HTML基礎

第01章 HTML簡介

1.1 前端技術簡介

在學習HTML之前，我先來給小伙伴們講一下網站開發的基礎知識。了解這些知識，對于以后學習網站開發是非常重要的。同時，也能讓你少走彎路。

1.1.1 從“網頁制作”到“前端開發”

1. Web1.0時代的“網頁制作”

網頁制作是Web1.0時代（即2005年之前）的產物，那個時候的網頁主要是靜態頁面。所謂的靜態頁面，指的是僅僅供用戶瀏覽而沒有跟服務器進行數據交互的頁面，例如一篇博文網頁。

在Web1.0時代，用戶能夠做的唯一一件事就是瀏覽這個網頁中的文字和圖片。這種網頁僅僅供用戶瀏覽，卻不能像在現在大多數網頁中那樣進行評論交流（跟服務器進行數據交互）。當今，很多網站都具備評論功能，但是在Web1.0時代是做不到的。

圖1-1　網頁三劍客

估計很多小伙伴都聽說過“網頁三劍客”吧？其實，這個組合就是Web1.0時代的東西。網頁三劍客，指的是Dreamweaver、Fireworks和Flash。

2. Web2.0時代的“前端開發”

現在常說的“前端開發”是從“網頁制作”演變而來的。從2005年開始，互聯網進入了Web2.0時代，僅僅由文字和圖片組成的靜態頁面已經遠遠滿足不了用戶的需求了。在Web2.0時代，網頁可以分為兩種：一種是靜態頁面，另外一種是動態頁面。

從上文中我們已經得知，靜態頁面僅僅供用戶瀏覽，用戶無法與服務器交互，而動態頁面不僅可以供用戶瀏覽，還可以讓用戶與服務器進行交互。換句話來說，動態頁面是在靜態頁面的基礎上增加了與服務器交互的功能。舉個簡單的例子，如果你想登錄QQ郵箱，就得輸入賬號和密碼，單擊“登錄”按鈕后，服務器會對你的賬號和密碼進行驗證，成功后才可以登錄。

在Web2.0時代，如果僅僅用“網頁三劍客”來開發的話，那是遠遠不能滿足需求的。現在的頁面開發無論是從開發難度還是開發方式上，都更接近傳統的網站后臺開發。因此我們不再叫“網頁制作”，而是叫“前端開發”。對于處于Web2.0時代的你，如果要學習網站開發技術，就不要再相信所謂的“網頁三劍客”了，因為這個組合已經是上一個互聯網時代的產物了。此外，這個組合開發出來的網站也存在許多問題，例如代碼冗余、可讀性差、維護困難等。學到后面，小伙伴們就會知道為什么不用這個組合了。

1.1.2 從“前端開發”到“后端開發”

1. 前端開發

（1）前端核心技術

我們知道，所謂的“網頁三劍客”已經滿足不了現在的前端開發需求了。那么我們究竟要學習哪些技術呢？

對于前端開發來說，最核心的三個技術分別是：HTML、CSS和JavaScript，也叫“新三劍客”。

圖1-2　新三劍客

? HTML是什么？

HTML，全稱Hyper Text Markup Language（超文本標記語言）。HTML是一門描述性語言，也是非常容易入門的語言。

? CSS是什么？

CSS，全稱Cascading Style Sheet（層疊樣式表），是用來控制網頁外觀的一種技術。

? JavaScript是什么？

JavaScript，就是我們通常所說的JS，是一種嵌入到HTML頁面中的腳本語言，由瀏覽器一邊解釋一邊執行。

我們都知道前端最核心的三個技術是HTML、CSS和JavaScript。不過有些初學的小伙伴就會問了，這三個有什么區別呢？

"HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是網頁的行為。"

這不是等于沒說嗎？好吧，給大家打個比方。我們可以把“前端開發”看成是“建房子”，做一個網頁就像蓋一棟房子。建房子的時候，我們都是先把結構建好（HTML）。建好之后，再給房子裝修（CSS），例如給窗戶裝上窗簾、給地板鋪上瓷磚等。最后裝修好了，當夜幕降臨之時，我們要開燈（JavaScript）才能把屋子照亮。現在大家都懂了吧？

我們再回到實際例子中去，看一下綠葉學習網的導航條。“前端入門”這一欄目具有以下基本特點。

? 字體類型是“微軟雅黑”。

? 字體大小是14px。

? 背景顏色是淡綠色。

? 將鼠標移到上面，背景色變成藍色。

小伙伴們可能會疑惑：這些效果是怎么做出來的呢？其實思路跟“建房子”是一樣的。我們先用HTML來搭建網頁的結構，此時默認字體類型、字體大小、背景顏色如圖1-3所示。

圖1-3　默認外觀

然后，我們使用CSS來修飾一下，改變字體類型、字體大小、背景顏色，如圖1-4所示。

圖1-4　加入CSS

最后，再使用JavaScript為鼠標定義一個行為。當鼠標移到上面時，背景顏色會變成藍色，最終效果如圖1-5所示。

圖1-5　加入JavaScript

到這里，大家應該都知道一個繽紛絢麗的網頁是怎么做出來的了。理解這個過程，對于后續學習是非常重要的。

（2）其他前端技術

前端最核心的技術是HTML、CSS和JavaScript。但是對于前端開發來說，哪怕你精通這三個，也稱不上一位真正的前端工程師。除了這三個技術之外，我們還得學習一些其他技術，例如jQuery、Vue.js、SEO、性能優化等。對于這些技術，我們可以先把HTML、CSS和JavaScript這三個學好了，再慢慢去接觸。

2. 后端開發

如果只學習前端技術，其實也差不多可以開發一個屬于自己的網站了。不過這個時候做出來的是一個靜態網站，唯一的功能是供用戶瀏覽而不能與服務器進行交互。在靜態網站中，用戶能做的事情是非常少的。因此，如果想開發一個用戶體驗更好、功能更強大的網站，我們就有必要去學習一些后端技術。

那后端技術又是怎樣的一門技術呢？舉個簡單例子，很多網站都有注冊功能，只有注冊了之后才具有某些權限，如果你要使用QQ空間，就得注冊一個QQ才能使用。這個注冊登錄功能就是用后端技術做的。再有，淘寶上面不是有很多商家嗎？這些商家有各種各樣的寶貝，背后龐大的數據只能依靠后端技術處理才能實現。

（1）PHP

PHP是一種通用開源腳本語言，其語法吸收了C語言、Java和Perl的特點，易于學習，使用廣泛，主要適用于Web開發領域。

（2）JSP

JSP技術有點類似ASP技術，它在傳統的網頁HTML文件中插入Java程序段（Scriptlet）和JSP標記（tag），從而形成JSP文件。用JSP開發的Web應用是跨平臺的，既可以在Windows系統中運行，也能在其他操作系統（如Linux）中運行。

（3）ASP.NET

ASP.NET的前身就是我們常說的ASP技術，綠葉學習網就是使用ASP.NET開發的。

此外，很多人認為“網站就是很多網頁的集合”，其實這個理解是不太恰當的。準確來說，網站是前端與后端的結合。

1.1.3 學習路線

圖1-6　前端技術

Web技術實在是太多了，很多小伙伴完全不知道怎么入手，上網問別人，回答又五花八門。下面是我推薦的學習順序。

HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue.js

這是一條比較理想的前端開發學習路線。除了掌握這些技術，后期我們可能還需要學習一些前端構建工具的使用，例如webpack、gulp、babel、express等。學完之后才算一位真正意義上的前端工程師。

在HTML剛入門的時候，你不一定要把HTML學到精通了再去學CSS（這也不可能），這是一種最笨也是最浪費時間的學習模式。對于初學者來說，千萬別想著精通了一門技術，再去精通另一門技術。在Web領域，不少技術之間都有著交叉關系，只有“通”十行才可能做到“精”一行。

如果你走別的路線，可能會走很多的彎路。這條路線是我從初學前端，到開發了綠葉學習網、各種類型網站以及寫了10多個在線技術教程和多本書籍的心血總結。當然，這條路線是一個建議，并非強制。

接下來，就讓我們邁出前端開發的第一步——學習HTML。

1.2 什么是HTML

HTML全稱是Hyper Text Markup Language（超文本標記語言），它是網頁的標準語言。HTML并不是一門編程語言，而是一門描述性的標記語言。

語法

<標簽符>內容</標簽符>

說明

標簽符一般都是成對出現的，有一個“開始符號”和一個“結束符號”。結束符號只是比開始符號多加上了一個斜杠“/”。當瀏覽器收到HTML文本后，就會解析里面的標簽符，然后把標簽符對應的功能表達出來。

舉個例子，我們一般用“<em>綠葉學習網</em>”來定義文字為斜體。當瀏覽器遇到標簽對時，就會把標簽中的文字用斜體顯示出來。

<em>綠葉學習網</em>

當瀏覽器遇到上面這行代碼時，就會得到如圖1-7所示的斜體文字效果。

圖1-7　瀏覽器解析后的效果

那么學習HTML究竟要學些什么呢？用一句簡單的話來說，就是記住各種標簽，以便搭建網頁的“骨架”。在HTML中，標簽有很多種，如文字標簽、圖片標簽、表單標簽等。由于HTML是一門描述性的語言，就是用標簽來說話。舉個例子，如果你要在瀏覽器中顯示一段文字，就應該使用段落標簽p；如果要在瀏覽器中顯示一張圖片，就應該使用圖片標簽img。針對你想顯示東西的不同，使用的標簽也會不同。

總而言之，學習HTML就是學習各種各樣的標簽，然后針對你想顯示什么東西，再相應地使用正確的標簽，非常簡單。

此外，很多時候我們也把“標簽”說成“元素”，例如將p標簽說成p元素。標簽和元素，其實說的是一個意思，僅僅是叫法不同罷了。不過“標簽”的叫法更加形象地說明了HTML用來“標記”的，來標記這是一段文字還是一張圖片，從而讓瀏覽器將代碼解釋成頁面效果來展示給用戶看。

1.3 教程介紹

1.3.1 教程簡介

前面我們學習了前端開發的一些必備知識（很重要喔），并且也了解到前端的學習路線大致如下。

HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue.js

這本書是我多年開發經驗的心血總結，在編寫的時候甚至字斟句酌。從一開始接觸HTML，我就在記錄自己遇到的各種問題，因此我很了解初學者的心態，也非常清楚怎樣才能快速而無阻礙地學習。我是站在初學者的角度而不是站在已經學會的角度來編寫這個教程的。有一句話說得好：“如果你已經站在山頂上了，當初在爬山時沒有仔細體會的話，這個時候你就已經忘記了曾經作為攀巖者艱苦攀登的心情了。”

本系列教程中的每一句話，我都精心編寫，反復審閱，盡量把精華呈現給大家。所以大家在學習的過程中，不要圖速度快，盡量放慢一點，盡量把每一個概念都理解清楚，千萬別指望什么“48 小時精通HTML+CSS”。

有一種學習模式是值得推薦的：“學技術，泛讀十本書不如精讀一本書十遍。”這句話適用于任何領域的學習。挑一本最精華的書，把這本書當做主體，然后用其他書輔助從而來彌補這本書的缺陷。這本書源于我在綠葉學習網中分享的三個在線教程的升級版。相信本書會是你前端入門的最好選擇之一。

小伙伴們在學習過程中遇到任何困難，都可以到綠葉學習網上面多多提問、交流。如果大家發現教程中有任何錯漏，可以發郵件給我（lvyestudy@foxmail.com），以便筆者把教程做得更加完善。

1.3.2 初學者比較關心的問題

? HTML入門有門檻嗎？

學習HTML不需要任何編程基礎，小學生也可以學。當年我讀大學的時候，計算機網絡教授就說，他見過有些小學生都會做網頁了！

后來自己接觸了前端開發，學到一定程度才知道大學課程為什么不會涉及HTML、CSS這些內容，因為這些東西是非常簡單易學的。不要抱怨自己學不會，那是你沒有足夠用心。

圖1-8　讓人不得不服的《寶寶的網頁設計》

? 基本掌握HTML后，能達到什么程度？

可以把一個簡單網頁做出來，例如一篇博文。不過使用HTML做出來的頁面很單調，我們還需要學習CSS以及JavaScript的知識。

? HTML入門，要花多少時間？

不多，即使沒有基礎，認真學的話，最多一周就可以了。當然僅僅學完這個教程，也只是入門程度。小伙伴們一定要去學習一下HTML進階的內容，不然你是不具備實際開發能力的。

? 這本書每一章后面的習題有必要做嗎？

這本書中每一章后面的練習題都是我跟其他幾個前端工程師精心挑選出來的，許多問題直接跟真正的前端開發工作掛鉤，甚至不少還是面試題。希望小伙伴們認真地把每一道題都做一遍。

? 現在都是HTML5的時代了，HTML不是被淘汰了嗎，為什么還要學HTML呢？

HTML是從HTML4.01升級到HTML5的。其中我們常說的HTML指的是HTML4.01，而HTML5一般指的是相對于HTML4.01“新增加的內容”，并不是說HTML4.01被淘汰了。準確來說，你要學的HTML其實等于HTML4.01加上HTML5。

之前好多小伙伴以為只要學HTML5就行了，沒必要再去學HTML。殊不知如果你沒有HTML基礎是學不來HTML5的。這種錯誤的認識曾經誤導了大量的初學者。