《Web前端開發精品課HTML與CSS進階教程》——第一部分　HTML進階第01章　HTML基礎知識1.1　HTML和CSS進階簡介

本節書摘來自非同步社群《Web前端開發精品課 HTML與CSS進階教程》一書中的第1章，第1.1節，作者： 莫振杰 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

第一部分　HTML進階

第01章　HTML基礎知識

1.1　HTML和CSS進階簡介

1.1.1　你真的精通HTML和CSS嗎
我們都知道，前端技術最核心的三大技術是HTML、CSS和JavaScript。HTML定義網頁的結構，CSS定義網頁的外觀，而JavaScript定義頁面的行為。其中HTML和CSS是前端技術中最基礎的東西。

HTML和CSS入門容易，精通卻很難，特別是CSS。“什麼？精通很難？我很確定我已經精通CSS了啊！”這種話往往是出自學習三兩個月、技術剛入門的人之口。我就曾經碰到不少這樣的人。對於HTML來說，確實沒有多少東西可以深入的，但是CSS卻不一樣。

如果你認為自己精通HTML和CSS了，那你可以思考一下下面這些問題。

（1）什麼是HTML語義化？對於標題、圖片、表格、表單，如何更好地實現這些方面的語義化？

（2）什麼是外邊距疊加？出現外邊距疊加的根本原因是什麼？

（3）在CSS中，關於命名、書寫以及註釋都有哪些好的規範（便於團隊開發和後期維護）？

（4）說一下display這幾個屬性值的區別：block、inline、inline-block、table-cell。

（5）你深入瞭解過text-indent、text-align、line-height以及vertical-align這幾個屬性麼？它們都有哪些高階技巧。

（6）為什麼overflow:hidden可以清除浮動？

（7）CSS都有哪些效能優化技巧？如何使用更高效能的選擇器？

（8）如何使用CSS實現各種圖形效果，例如三角形、圓、橢圓等？

（9）解釋一下這幾個概念：包含塊、BFC和IFC、層疊上下文。

……

如果你有一半答不上來，說明你連“熟悉CSS”都算不上，更別說“精通CSS”了。因此大家不要學了幾個標籤就認為自己精通HTML，也不要學了幾個屬性就覺得自己精通CSS了。不管是哪門技術，自己都應該深入地去學習，自我滿足只會讓自己滯留不前。

1.1.2　進階教程簡介
HTML進階的內容只針對HTML 4.01，而CSS進階的內容只針對CSS 2.1。對於HTML 5和CSS 3的內容，可以關注綠葉學習網。

本書是《Web前端開發精品課HTML和CSS基礎教程》的姊妹篇，兩者具有很強的連貫性。本書並不適合沒有基礎的人學習，對於HTML和CSS入門的相關知識，可以參考本書的姊妹篇，不然在學習本書的過程中可能對有些東西無法理解。

本書雖然涉及的東西很多，但濃縮的都是精華。有一句話說得好：“干擾因素越少，越容易專注一件事”，因此對於書中的技巧我們也會以最簡單的例子來講解。筆者在編寫本書的時候也是字斟句酌，該展開的會詳細展開，沒用的東西一定會一筆帶過。希望大家在學習中不要跳躍性地學習。

此外，本書裡很多東西比較複雜，一時半會兒可能消化不了，應該多回來翻幾遍，並且結合自己的實踐來理解。“書讀百遍，其義自見。”古人有些話還是說得蠻好的。HTML和CSS這些進階知識在本書中已經梳理得比較完善了，學習中可以來回翻一番，想當年我們連“翻”的份都沒有，因為壓根兒就沒有這樣的一個系統化的學習教程。