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. 表單驗證：讓它來告訴你應該輸入什麼