HTML&CSS：構建網站不能不說的那些事兒

很高興你能看到這個專欄！俗話說得好，相逢便是緣分，沒準你和我在上一世也曾有過五百次的回眸，才得此一面。說的有點噁心了，咱仍是書歸正傳，說說這個專欄吧。

這個專欄主要講的是 HTML 和 CSS 的頁面開發技術。在真正講中內容以前，想先和你磨叨磨叨這個專欄是寫給誰的，爲何要寫這個專欄，還有就是學完這個專欄以後你能獲得什麼。

如是有緣人，還請你慢下腳步，細聽我慢慢與你道來。如你沒有興趣或是不須要這個專欄，也沒有關係，我們也不耽誤彼此時間，各走各路，各找各媽。沒準何時，兜兜轉轉地我們又見面了，待那時你再駐下腳步來聽聽也不遲。

你適合學習這個專欄嗎

HTML 和 CSS 是做爲前端程序員的入門內容，因此顯而易見地這個專欄主要是寫給前端小白的。但願能夠做爲前端小白在入門前端開發的第一個學習資料，或者是輔助閱讀內容的。

固然了，若是你已是前端程序員，想拿這個專欄來進行查漏補缺，也不是不能夠的。隨便還能夠給我提提建議和想法，讓我把這個專欄再進一步的完善和優化。也算是一件美事兒！

因此，總的來講這個專欄算是針對兩類朋友吧：

• 前端小白想入門前端開發的
• 前端程序員想再查漏補缺的

若是是上面這兩類朋友就請繼續往下看吧。若是不是，那就請你本身斟酌一下是否是要繼續往下看吧！

爲何要寫這個專欄

其實呢，一說到前端入門的 HTML 和 CSS 的教程、書籍和視頻基本上已經爛大街了都。那爲何還要寫這樣一個專欄呢？根據我將近十年的培訓講師的經歷，我能夠很負責地告訴你，如今絕大多數的資料對小白來講都不夠友好。

第一點，如今市面上基本都是大而全的內容。其實不少內容在實際工做裏面根本就用不上，或者說用的真的不多。而後，你會爲了這些內容花上更多的時間和精力來學習。但最後你會發現，若是未來你在工做中真的用到了這些內容，現去學習也是沒有什麼問題，並且學習成本要比你入門的時候少了不少。

第二點，不少書籍和視頻都是不多更新的，或者說更新的頻率是很低的。也就是說，基本上你學習的這些資料都是過期了的！雖然有些在線教程是比較新的，可是基本上也不多會進行持續更新的。可能這個時候你會問了，那你這個專欄不同的嗎？答案還真不是，我會一直更新這個專欄。即便不是更新版本、內容，也會不斷地完善和優化本來的內容的。說的大一點，我是但願能夠把這個專欄寫成像《JavaScript權威指南》這樣經典的前端學習資料的！

第三點，也是最後一點，也是最最重要的一點。做爲前端程序員和前端講師，我一直不理解一個事兒，就是爲何學習的時候要把 HTML 和 CSS 拆開來學習。即便有些書籍包含了 HTML 和 CSS 的內容，但仍是拆開分別來寫的。這也是我我的的一個想法，就是應該把 HTML 和 CSS 整合在一塊兒，按照應用場景來作。好比能夠有一章叫作「文本」，裏面包含了HTML元素和CSS樣式內容，但都是圍繞「文本」這個核心內容的。

基於上面的這些想法和思考，因而就有了這個專欄了！

學完這個專欄你能獲得什麼

一開始的時候，我就說了，這個專欄是專門講 HTML 和 CSS 的。因此，簡單來講，學完以後你會掌握 HTML 和 CSS 的技術知識點。

再有，我們都知道 HTML 和 CSS 是構建靜態頁面的核心，因此，你也會掌握構建靜態頁面的能力。

固然了，這裏須要說明白的是，在這個專欄裏面，咱不會講 HTML5 的一些高級新特性，好比 WebStorage、音視頻、Canvas 這些。也不會講 CSS3 的一些高級新特性，好比 transform、transition 這些屬性。爲啥？由於這些內容會在別的專欄裏面專門講。

還有的就是，在這個專欄裏面，可能我不會講案例。由於案例我有別的想法，可能會專門搞一個案例庫之類的。這樣你就能夠配合着這個專欄來進行學習了~ 固然，如今只是個想法！若是你以爲在這個專欄講案例是有必要的，我後期也能夠再進行補充。

還有一個事兒是想和你說的，就是等到這個專欄的內容基本不會大改動的時候，我會根據文字內容來製做視頻的。畢竟如今已經進入視頻時代了，咱也不能和時代違背不是？！

這個專欄都有哪些內容

最後，我們再來講說這個專欄的具體內容吧！廢話很少說，我們直接上目錄和連接吧：

第一章 帶你先來入個門吧

1. HTML：初次見面，先作個自我介紹
2. 你還在用IDE？快來看看VSCode吧
3. HTML：你和個人第一次，就這樣簡單嗎
4. CSS：一個HTML如影隨行的閨蜜
5. 想搞定HTML，那就先搞定CSS吧

第二章 選擇器：CSS和HTML的紐帶

1. 選擇有不少種，CSS提供了哪些呢
2. 基本選擇器：樣式設計的必備工具
3. 層級選擇器：利用關係來達到目標
4. [組合選擇器：人多確定好辦事兒]()
5. [僞類選擇器：能夠預設將來某種狀態]()
6. [僞元素選擇器：真實與虛僞只隔一個選擇器]()

第三章 顏色：這個世界的色彩是怎樣構成的

1. [你真的瞭解顏色嗎？可不必定哦]()
2. [CSS中的顏色其實很簡單，不信你看]()
3. [表示一個顏色竟然有這麼多種方式]()
4. [你是否能看清這個世界，取決於透明度]()

第四章 單位：相對與絕對之間的博弈

1. [你知道長度是取決於值和單位的嗎]()
2. [像素：一個構成圖像的最小單位]()
3. [百分比：一個有參考對象的單位]()
4. [em與rem：一字之差，卻相差千里]()

第五章 文本：呈現信息的最簡形式

1. [結構化元素：構建頁面的最基本元素]()
2. [字體樣式：文字也是能夠繽紛多彩的]()
3. [文本樣式：文字也是能夠很優美的]()

第六章 連接：兩個平行世界之間的通道

1. [連接元素：通往另外一個頁面的大門]()
2. [一個頁面中也能夠進行定位傳送]()
3. [動態僞類選擇器：將來的一切都是安排好的]()
4. [目標僞類選擇器：讓你的目標變得不同]()

第七章 圖像：正所謂一圖勝千言

1. [圖像元素：引入一張圖片竟如此之簡單]()
2. [背景不只能夠顯示顏色，也能夠顯示圖像]()
3. [雪碧圖：一種偷懶而且很好用的小技巧]()

第八章 列表：讓一切變得有序

1. [列表元素：簡約而不簡單的清單]()
2. [列表樣式：清單也能夠很美觀的]()
3. [計數器：製做複雜清單的手段]()

第九章 表格：讓信息的展現清晰易懂

1. [表格元素：結構化的方式展現信息]()
2. [表格樣式：讓表格變得更多樣化]()
3. [結構僞類選擇器：快速查找手段]()

第十章 盒子：將簡單應用到極致

1. [掌握HTML頁面中元素的本質]()
2. [邊框也能夠玩出花樣嗎？能夠的]()
3. [邊距：做用與問題並存]()
4. [一個盒子還要分這麼多狀況]()

第十一章 顯示與隱藏：就像白天與黑夜

1. [display屬性：一個身兼數職的CSS屬性]()
2. [visibility屬性：一個專注且長情的CSS屬性]()

第十二章 內容溢出：這是個問題嗎？是嗎？

1. [overflow屬性：一個自帶隱藏做用的CSS屬性]()
2. [text-overflow屬性：只爲解決文本溢出狀況]()

第十三章 定位：將HTML頁面變成一個座標軸

1. [理解HTML頁面默認的排序規則很重要]()
2. [浮動：一個讓元素漂浮起來的技術]()
3. [定位：使用座標軸肯定位置的方式]()

第十四章 繼承與層疊：接近CSS規則的本質

1. [繼承與非繼承：一個值得討論的問題]()
2. [層疊：理解CSS究竟是怎麼玩出來的]()

第十五章 佈局：就像蓋樓時的設計圖紙同樣

1. [居中佈局：怎麼讓元素到中間來]()
2. [多列布局：實際沒有你想的那麼簡單（上）]()
3. [多列布局：實際沒有你想的那麼簡單（中）]()
4. [多列布局：實際沒有你想的那麼簡單（下）]()
5. [全屏佈局：設計思路遠比實現重要的多]()

第十六章 表單：只進不出？那豈不是貔恘

1. [表單很重要，但組件更重要]()
2. [<input>元素：給你意想不到多的功能]()
3. [<textarea>元素：再複雜的功能都源於它]()
4. [<select>元素：能夠選擇一個，也能夠選擇多個]()
5. [<form>元素：看不到的，每每更重要]()
6. [表單驗證：讓它來告訴你應該輸入什麼]()