前端是一個(gè)非常大的模塊，所以我可能在PHP的教程中不能細(xì)講，我只能帶著你快速入門，花最少的時(shí)間掌握最基本的HTML+CSS使用。
上篇文章中我們已經(jīng)介紹過(guò)了HTML，并且把HTML比作人的身體，那么CSS是什么呢？我們把它比作人的衣服，所謂“佛靠金裝，人靠衣裝”，好看的HTML頁(yè)面是使用CSS來(lái)包裝的，下面我們來(lái)看一下今天的DEMO。
第一步：我們先新建一個(gè)Demo01.html的HTML文檔，并用編輯器打開
第二步：我們來(lái)看一下今天的代碼
這部分代碼大家看一下，想一下我們昨天講的標(biāo)簽與標(biāo)簽嵌套。
這里面出現(xiàn)了新的標(biāo)簽有哪些：
（1）<article></article>這個(gè)是語(yǔ)義化標(biāo)簽，沒什么實(shí)際意義，就是說(shuō)這個(gè)標(biāo)簽就是用來(lái)包裹一篇文章的。
（2）<i></i>標(biāo)簽中出現(xiàn)的文字，在網(wǎng)頁(yè)中是斜體。
（3）<section></section>你也可以把它理解成段落<p></p>實(shí)際上它和p的效果是一樣的，我是為了給大家擴(kuò)充標(biāo)簽所以用上了。
（4）<img/>這個(gè)標(biāo)簽是要放進(jìn)去一張圖片，你可以注意到它是單個(gè)存在的，而不像其他標(biāo)簽似的成對(duì)存在，它的內(nèi)部有一個(gè)src=" ?"這里面是放的圖片的路徑和名稱，引入圖片,alt = " ?"是用了解釋圖片的，就是你鼠標(biāo)放上去之后，出現(xiàn)的字。
（5）細(xì)心的你可能注意到了在上面<li></li>標(biāo)簽中有一個(gè)style="......"它是干嘛的呢？這里面可以承載樣式，比如字體顏色color="#ccc"; ? #ccc是灰色，background-color:#....是背景顏色。
第三步：現(xiàn)在來(lái)看一下幾乎沒有加樣式的頁(yè)面是什么樣子的
大家可以看到，沒有“穿衣服”也就是沒有加樣式的頁(yè)面是比較丑陋的。
第四步：我們來(lái)分析一下樣式
我們可以看到在<title></title>與</head>結(jié)尾標(biāo)簽的中間使用<style></style>標(biāo)簽包裹了一大串的代碼，這里面就是樣式。每個(gè)樣式的作用我都寫到上面，大家根據(jù)提示與代碼的英文意思仔細(xì)看一下。
這些東西沒有辦法再幫你一個(gè)個(gè)梳理了，我認(rèn)為這是一個(gè)大量使用與模仿的過(guò)程，你寫的多了，不需要刻意去背，你也會(huì)記住。
我們挑其中一個(gè)再看一下
ul li{.......xxxxx.......}
很明顯這個(gè)結(jié)構(gòu)是為ul中的li標(biāo)簽來(lái)加樣式的，如果你直接寫li也行，不過(guò)這樣層次關(guān)系更加明顯，ul是父,li是子。
px是像素的意思，margin：表示外邊距，margin-left表示左邊距，就是與左邊標(biāo)簽的距離，你可以看到我們頁(yè)面效果上多個(gè)li之間是有距離的。padding與margin是相反的，一個(gè)是對(duì)外，一個(gè)是對(duì)內(nèi)，不過(guò)用法是一致的。
如果有不懂的地方可以去網(wǎng)上查一下這個(gè)標(biāo)簽，立馬就出來(lái)了，也可以給我留言，很樂意幫助你。
