HTML&CSS：構(gòu)建網(wǎng)站不能不說(shuō)的那些事兒

時(shí)間：2023-07-29 22:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-29 22:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML&CSS：構(gòu)建網(wǎng)站不能不說(shuō)的那些事兒：很高興你能看到這個(gè)專(zhuān)欄！俗話(huà)說(shuō)得好，相逢即是緣分，沒(méi)準(zhǔn)你和我在上一世也曾有過(guò)五百次的回眸，才得此一面。說(shuō)的有點(diǎn)惡心了，咱還是書(shū)歸正傳，說(shuō)說(shuō)這個(gè)專(zhuān)欄吧。

這個(gè)專(zhuān)欄主要講的是 HTML 和 CSS 的頁(yè)面開(kāi)發(fā)技術(shù)。在真正講中內(nèi)容之前，想先和你磨叨磨叨這個(gè)專(zhuān)欄是寫(xiě)給誰(shuí)的，為什么要寫(xiě)這個(gè)專(zhuān)欄，還有就是學(xué)完這個(gè)專(zhuān)欄之后你能得到什么。

如是有緣人，還請(qǐng)你慢下腳步，細(xì)聽(tīng)我慢慢與你道來(lái)。如你沒(méi)有興趣或是不需要這個(gè)專(zhuān)欄，也沒(méi)有關(guān)系，咱們也不耽誤彼此時(shí)間，各走各路，各找各媽。沒(méi)準(zhǔn)什么時(shí)候，兜兜轉(zhuǎn)轉(zhuǎn)地咱們又見(jiàn)面了，待那時(shí)你再駐下腳步來(lái)聽(tīng)聽(tīng)也不遲。

你適合學(xué)習(xí)這個(gè)專(zhuān)欄嗎

HTML 和 CSS 是作為前端程序員的入門(mén)內(nèi)容，所以顯而易見(jiàn)地這個(gè)專(zhuān)欄主要是寫(xiě)給前端小白的。希望可以作為前端小白在入門(mén)前端開(kāi)發(fā)的第一個(gè)學(xué)習(xí)資料，或者是輔助閱讀內(nèi)容的。

當(dāng)然了，如果你已經(jīng)是前端程序員，想拿這個(gè)專(zhuān)欄來(lái)進(jìn)行查漏補(bǔ)缺，也不是不可以的。隨便還可以給我提提建議和想法，讓我把這個(gè)專(zhuān)欄再進(jìn)一步的完善和優(yōu)化。也算是一件美事兒！

所以，總的來(lái)說(shuō)這個(gè)專(zhuān)欄算是針對(duì)兩類(lèi)朋友吧：

• 前端小白想入門(mén)前端開(kāi)發(fā)的
• 前端程序員想再查漏補(bǔ)缺的

如果是上面這兩類(lèi)朋友就請(qǐng)繼續(xù)往下看吧。如果不是，那就請(qǐng)你自己斟酌一下是不是要繼續(xù)往下看吧！

為什么要寫(xiě)這個(gè)專(zhuān)欄

其實(shí)呢，一說(shuō)到前端入門(mén)的 HTML 和 CSS 的教程、書(shū)籍和視頻基本上已經(jīng)爛大街了都。那為什么還要寫(xiě)這樣一個(gè)專(zhuān)欄呢？根據(jù)我將近十年的培訓(xùn)講師的經(jīng)歷，我可以很負(fù)責(zé)地告訴你，現(xiàn)在絕大多數(shù)的資料對(duì)小白來(lái)說(shuō)都不夠友好。

第一點(diǎn)，現(xiàn)在市面上基本都是大而全的內(nèi)容。其實(shí)很多內(nèi)容在實(shí)際工作里面根本就用不上，或者說(shuō)用的真的很少。然后，你會(huì)為了這些內(nèi)容花上更多的時(shí)間和精力來(lái)學(xué)習(xí)。但最后你會(huì)發(fā)現(xiàn)，如果將來(lái)你在工作中真的用到了這些內(nèi)容，現(xiàn)去學(xué)習(xí)也是沒(méi)有什么問(wèn)題，而且學(xué)習(xí)成本要比你入門(mén)的時(shí)候少了很多。

第二點(diǎn)，很多書(shū)籍和視頻都是很少更新的，或者說(shuō)更新的頻率是很低的。也就是說(shuō)，基本上你學(xué)習(xí)的這些資料都是過(guò)時(shí)了的！雖然有些在線(xiàn)教程是比較新的，但是基本上也很少會(huì)進(jìn)行持續(xù)更新的。可能這個(gè)時(shí)候你會(huì)問(wèn)了，那你這個(gè)專(zhuān)欄不一樣的嗎？答案還真不是，我會(huì)一直更新這個(gè)專(zhuān)欄。即使不是更新版本、內(nèi)容，也會(huì)不斷地完善和優(yōu)化原本的內(nèi)容的。說(shuō)的大一點(diǎn)，我是希望可以把這個(gè)專(zhuān)欄寫(xiě)成像《JavaScript權(quán)威指南》這樣經(jīng)典的前端學(xué)習(xí)資料的！

第三點(diǎn)，也是最后一點(diǎn)，也是最最重要的一點(diǎn)。作為前端程序員和前端講師，我一直不理解一個(gè)事兒，就是為什么學(xué)習(xí)的時(shí)候要把 HTML 和 CSS 拆開(kāi)來(lái)學(xué)習(xí)。即使有些書(shū)籍包含了 HTML 和 CSS 的內(nèi)容，但還是拆開(kāi)分別來(lái)寫(xiě)的。這也是我個(gè)人的一個(gè)想法，就是應(yīng)該把 HTML 和 CSS 整合在一起，按照應(yīng)用場(chǎng)景來(lái)做。比如可以有一章叫做“文本”，里面包含了HTML元素和CSS樣式內(nèi)容，但都是圍繞“文本”這個(gè)核心內(nèi)容的。

基于上面的這些想法和思考，于是就有了這個(gè)專(zhuān)欄了！

學(xué)完這個(gè)專(zhuān)欄你能得到什么

一開(kāi)始的時(shí)候，我就說(shuō)了，這個(gè)專(zhuān)欄是專(zhuān)門(mén)講 HTML 和 CSS 的。所以，簡(jiǎn)單來(lái)說(shuō)，學(xué)完之后你會(huì)掌握 HTML 和 CSS 的技術(shù)知識(shí)點(diǎn)。

再有，咱們都知道 HTML 和 CSS 是構(gòu)建靜態(tài)頁(yè)面的核心，所以，你也會(huì)掌握構(gòu)建靜態(tài)頁(yè)面的能力。

當(dāng)然了，這里需要說(shuō)明白的是，在這個(gè)專(zhuān)欄里面，咱不會(huì)講 HTML5 的一些高級(jí)新特性，比如 WebStorage、音視頻、Canvas 這些。也不會(huì)講 CSS3 的一些高級(jí)新特性，比如 transform、transition 這些屬性。為啥？因?yàn)檫@些內(nèi)容會(huì)在別的專(zhuān)欄里面專(zhuān)門(mén)講。

還有的就是，在這個(gè)專(zhuān)欄里面，可能我不會(huì)講案例。因?yàn)榘咐矣袆e的想法，可能會(huì)專(zhuān)門(mén)搞一個(gè)案例庫(kù)之類(lèi)的。這樣你就可以配合著這個(gè)專(zhuān)欄來(lái)進(jìn)行學(xué)習(xí)了~ 當(dāng)然，現(xiàn)在只是個(gè)想法！如果你覺(jué)得在這個(gè)專(zhuān)欄講案例是有必要的，我后期也可以再進(jìn)行補(bǔ)充。

還有一個(gè)事兒是想和你說(shuō)的，就是等到這個(gè)專(zhuān)欄的內(nèi)容基本不會(huì)大改動(dòng)的時(shí)候，我會(huì)根據(jù)文字內(nèi)容來(lái)制作視頻的。畢竟現(xiàn)在已經(jīng)進(jìn)入視頻時(shí)代了，咱也不能和時(shí)代違背不是？！

這個(gè)專(zhuān)欄都有哪些內(nèi)容

最后，咱們?cè)賮?lái)說(shuō)說(shuō)這個(gè)專(zhuān)欄的具體內(nèi)容吧！廢話(huà)不多說(shuō)，咱們直接上目錄和鏈接吧：

第一章 帶你先來(lái)入個(gè)門(mén)吧

1. HTML：初次見(jiàn)面，先做個(gè)自我介紹
2. 你還在用IDE？快來(lái)看看VSCode吧
3. HTML：你和我的第一次，就這樣簡(jiǎn)單嗎
4. CSS：一個(gè)HTML形影不離的閨蜜
5. 想搞定HTML，那就先搞定CSS吧

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

1. 選擇有很多種，CSS提供了哪些呢
2. 基本選擇器：樣式設(shè)計(jì)的必備工具
3. 層級(jí)選擇器：利用關(guān)系來(lái)達(dá)到目標(biāo)
4. 群組選擇器：人多肯定好辦事兒
5. 偽類(lèi)選擇器：可以預(yù)設(shè)未來(lái)某種狀態(tài)
6. 偽元素選擇器：真實(shí)與虛偽只隔一個(gè)選擇器

第三章 顏色：這個(gè)世界的色彩是怎樣構(gòu)成的

1. 你真的了解顏色嗎？可不一定哦
2. CSS中的顏色其實(shí)很簡(jiǎn)單，不信你看
3. 表示一個(gè)顏色居然有這么多種方式
4. 你是否能看清這個(gè)世界，取決于透明度

第四章 單位：相對(duì)與絕對(duì)之間的博弈

1. 你知道長(zhǎng)度是取決于值和單位的嗎
2. 像素：一個(gè)構(gòu)成圖像的最小單位
3. 百分比：一個(gè)有參考對(duì)象的單位
4. em與rem：一字之差，卻相差千里

第五章 文本：呈現(xiàn)信息的最簡(jiǎn)形式

1. 結(jié)構(gòu)化元素：構(gòu)建頁(yè)面的最基本元素
2. 字體樣式：文字也是可以繽紛多彩的
3. 文本樣式：文字也是可以很優(yōu)美的

第六章 鏈接：兩個(gè)平行世界之間的通道

1. 鏈接元素：通往另一個(gè)頁(yè)面的大門(mén)
2. 一個(gè)頁(yè)面中也可以進(jìn)行定位傳送
3. 動(dòng)態(tài)偽類(lèi)選擇器：未來(lái)的一切都是安排好的
4. 目標(biāo)偽類(lèi)選擇器：讓你的目標(biāo)變得不一樣

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

1. 圖像元素：引入一張圖片竟如此之簡(jiǎn)單
2. 背景不僅可以顯示顏色，也可以顯示圖像
3. 雪碧圖：一種偷懶并且很好用的小技巧

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

1. 列表元素：簡(jiǎn)約而不簡(jiǎn)單的清單
2. 列表樣式：清單也可以很美觀(guān)的
3. 計(jì)數(shù)器：制作復(fù)雜清單的手段

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

1. 表格元素：結(jié)構(gòu)化的方式展示信息
2. 表格樣式：讓表格變得更多樣化
3. 結(jié)構(gòu)偽類(lèi)選擇器：快速查找手段

第十章 盒子：將簡(jiǎn)單應(yīng)用到極致

1. 掌握HTML頁(yè)面中元素的本質(zhì)
2. 邊框也可以玩出花樣嗎？可以的
3. 邊距：作用與問(wèn)題并存
4. 一個(gè)盒子還要分這么多情況

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

1. display屬性：一個(gè)身兼數(shù)職的CSS屬性
2. visibility屬性：一個(gè)專(zhuān)一且長(zhǎng)情的CSS屬性

第十二章 內(nèi)容溢出：這是個(gè)問(wèn)題嗎？是嗎？

1. overflow屬性：一個(gè)自帶隱藏作用的CSS屬性
2. text-overflow屬性：只為解決文本溢出情況

第十三章 定位：將HTML頁(yè)面變成一個(gè)坐標(biāo)軸

1. 理解HTML頁(yè)面默認(rèn)的排序規(guī)則很重要
2. 浮動(dòng)：一個(gè)讓元素漂浮起來(lái)的技術(shù)
3. 定位：使用坐標(biāo)軸確定位置的方式

第十四章 繼承與層疊：接近CSS規(guī)則的本質(zhì)

1. 繼承與非繼承：一個(gè)值得討論的問(wèn)題
2. 層疊：理解CSS到底是怎么玩出來(lái)的

第十五章 布局：就像蓋樓時(shí)的設(shè)計(jì)圖紙一樣

1. 居中布局：怎么讓元素到中間來(lái)
2. 多列布局：實(shí)際沒(méi)有你想的那么簡(jiǎn)單（上）
3. 多列布局：實(shí)際沒(méi)有你想的那么簡(jiǎn)單（中）
4. 多列布局：實(shí)際沒(méi)有你想的那么簡(jiǎn)單（下）
5. 全屏布局：設(shè)計(jì)思路遠(yuǎn)比實(shí)現(xiàn)重要的多

第十六章 表單：只進(jìn)不出？那豈不是貔恘

1. 表單很重要，但組件更重要
2. <input>元素：給你意想不到多的功能
3. <textarea>元素：再?gòu)?fù)雜的功能都源于它
4. <select>元素：可以選擇一個(gè)，也可以選擇多個(gè)
5. <form>元素：看不到的，往往更重要
6. 表單驗(yàn)證：讓它來(lái)告訴你應(yīng)該輸入什么