本文內(nèi)容很簡(jiǎn)單,從零開(kāi)始操作一個(gè)bootstrap模板。
準(zhǔn)備工作
- 安裝visual studio code(或其他文本編輯器)
- 安裝Chrome瀏覽器,開(kāi)發(fā)者模式(windows: F12,mac:Option+Command+I)
- 登錄Github,注冊(cè)一個(gè)賬號(hào),并下載Github desktop
編碼
首先去找個(gè)Bootstrap模板,這個(gè)東西相當(dāng)于已經(jīng)做好的一個(gè)網(wǎng)站??梢栽?a target="_blank" rel="nofollow">這里找一個(gè)。
下載好一個(gè),解壓以后,就可以看到結(jié)構(gòu)了。
打開(kāi)目錄下的index.html,應(yīng)該可以在瀏覽器里看到樣子。
修改index.html里的內(nèi)容,保存之后,刷新瀏覽器就可以看到效果。
Tip:使用Ctrl+F可以快速定位你要找的部分。比如你要查找頁(yè)面上某段文字,可以在html文件中使用查找來(lái)定位。
常見(jiàn)html標(biāo)簽
超鏈接<a>
<a>標(biāo)簽就是常見(jiàn)的鏈接,它里面可以包含一段文字,使用href屬性可以鏈接到你想跳轉(zhuǎn)的地址。
舉例:
<a >點(diǎn)擊我可以跳轉(zhuǎn)到百度</a>
使用target="_blank"可以新開(kāi)標(biāo)簽頁(yè)。
鏈接地址可以使用相對(duì)地址,比如當(dāng)前的頁(yè)面是index.html,如果要鏈接到index.html文件的那個(gè)目錄下的about.html,那么就可以用:
<a href="about.html">點(diǎn)擊我可以跳轉(zhuǎn)about頁(yè)面</a>
圖片<img>
<img>標(biāo)簽將會(huì)在頁(yè)面上引入一張圖片,使用src屬性引入圖片鏈接即可:

這里的地址跟上面的a標(biāo)簽是一個(gè)意思。
分割標(biāo)簽<div>
當(dāng)你要在頁(yè)面上包含一系列內(nèi)容和其他標(biāo)簽,又想不到用什么標(biāo)簽時(shí),你可以用div標(biāo)簽。
<div>這是一段話</div>
<div>
<div>子內(nèi)容</div>

</div>
對(duì)于初學(xué)者來(lái)說(shuō),div標(biāo)簽最大的作用就是換行。
段落標(biāo)簽<p>
p標(biāo)簽表示一段話,用法也很簡(jiǎn)單:
<p>這是一段話,這是一個(gè)<a >鏈接</a></p>
CSS樣式知識(shí)
CSS可以有3種方式來(lái)影響頁(yè)面:
- 外部式:建立一個(gè)css文件,在
html文件中,在head標(biāo)簽中建立link標(biāo)簽來(lái)引用。 - 嵌入式:在
html文件中,使用style標(biāo)簽編寫。 - 內(nèi)聯(lián)式:在
html文件中,對(duì)某個(gè)標(biāo)簽,使用style屬性來(lái)編寫。
建議:初學(xué)者可以直接使用嵌入式來(lái)編寫css。
Github配置
可以參照活動(dòng)教程。