????????“小白，HTML標(biāo)簽看完了么？文檔對(duì)象模型看了么？”

????????“看了，我終于知道你昨天問(wèn)我的那個(gè)關(guān)于網(wǎng)頁(yè)結(jié)構(gòu)的問(wèn)題了，原來(lái)根據(jù)文檔對(duì)象模型，網(wǎng)頁(yè)就是一個(gè)對(duì)象嵌套的結(jié)構(gòu)，最外層是html標(biāo)簽，里面是head和body標(biāo)簽，head和body里面又有各自的子標(biāo)簽，可以一直嵌套。”

????????“嗯，大概就是這個(gè)意思，好了現(xiàn)在你打開WebStorm軟件，新建一個(gè)項(xiàng)目，項(xiàng)目的位置你看著設(shè)定就可以了，創(chuàng)建好項(xiàng)目以后我告你第一步怎么做。”

????????“我創(chuàng)建了一個(gè)mylearn項(xiàng)目，現(xiàn)在我該怎么做呢？”

????????“在mylearn上面點(diǎn)右鍵，新建一個(gè)html頁(yè)面”

“創(chuàng)建好以后，看一下HTML文檔的結(jié)構(gòu)，是不是跟你之前看的DOM模型一致？”

“這里面的幾個(gè)標(biāo)簽?zāi)銘?yīng)該都認(rèn)識(shí)吧？”，老朱說(shuō)到。

“認(rèn)識(shí)，head是網(wǎng)頁(yè)的頭部對(duì)象，body是網(wǎng)頁(yè)的主體部分。title是網(wǎng)頁(yè)的標(biāo)題。”

“好了，給title設(shè)定一個(gè)標(biāo)題吧！比如‘我的H5第一課’，設(shè)定好標(biāo)題以后在當(dāng)前頁(yè)面里面放一個(gè)div層上去，并且給他一個(gè)id號(hào)main”。

“好嘞，馬上去辦~”，小白興奮的開始了他的第一次動(dòng)手學(xué)習(xí)。

小白做完以后找到老朱，“朱哥，做好了！”

老朱看完以后對(duì)小白說(shuō)：“我說(shuō)的要求你已經(jīng)實(shí)現(xiàn)了，可是你有沒(méi)有注意在你創(chuàng)建的頁(yè)面中，默認(rèn)的meta和title標(biāo)簽都跟他們的父標(biāo)簽有一定的縮進(jìn)？在我們寫標(biāo)簽的時(shí)候一定要注意這個(gè)問(wèn)題，每個(gè)級(jí)別的標(biāo)簽縮進(jìn)距離都要有區(qū)分。你把光標(biāo)移到div前面，點(diǎn)一下Tab鍵就可以了。”

“好了，在你的html頁(yè)面上點(diǎn)右鍵，選擇瀏覽器中查看，然后選擇chrome瀏覽器，看看效果吧！”

“網(wǎng)頁(yè)打開了，除了網(wǎng)頁(yè)標(biāo)題是我的H5第一課，整個(gè)網(wǎng)頁(yè)都是空的！”

“好的，今天就這樣吧！”

小白很驚訝，“怎么今天就讓我做了一個(gè)空的頁(yè)面啊，我感覺什么都沒(méi)干啊~”

“小白，你今天已經(jīng)學(xué)不少東西了，你用WebStorm創(chuàng)建了項(xiàng)目、在項(xiàng)目中創(chuàng)建了Html頁(yè)面、了解了HTML標(biāo)簽的縮進(jìn)、還在瀏覽器中查看了這個(gè)頁(yè)面，看上去沒(méi)有什么技術(shù)含量，可這些都是你以后會(huì)經(jīng)常碰到的事情，我希望你能把今天學(xué)的這點(diǎn)東西好好練習(xí)一下，另外下午有時(shí)間把CSS看一下，不用記住CSS每個(gè)屬性怎么寫，你了解一下CSS能控制什么樣式，可以用在頁(yè)面中什么地方就可以了。”

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白H5成長(zhǎng)之路》的動(dòng)力！