本文內(nèi)容很簡(jiǎn)單，從零開(kāi)始操作一個(gè)bootstrap模板。

準(zhǔn)備工作

1. 安裝visual studio code(或其他文本編輯器)
2. 安裝Chrome瀏覽器，開(kāi)發(fā)者模式（windows: F12，mac：Option+Command+I）
3. 登錄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>

更多詳細(xì)內(nèi)容

圖片<img>

<img>標(biāo)簽將會(huì)在頁(yè)面上引入一張圖片，使用src屬性引入圖片鏈接即可：

![](images/eg_tulip.jpg)

這里的地址跟上面的a標(biāo)簽是一個(gè)意思。

更多詳細(xì)內(nèi)容

分割標(biāo)簽<div>

當(dāng)你要在頁(yè)面上包含一系列內(nèi)容和其他標(biāo)簽，又想不到用什么標(biāo)簽時(shí)，你可以用div標(biāo)簽。

<div>這是一段話</div>
<div>
  <div>子內(nèi)容</div>
  ![](images/eg_tulip.jpg)
</div>

對(duì)于初學(xué)者來(lái)說(shuō)，div標(biāo)簽最大的作用就是換行。

更多詳細(xì)內(nèi)容

段落標(biāo)簽<p>

p標(biāo)簽表示一段話，用法也很簡(jiǎn)單：

<p>這是一段話，這是一個(gè)<a >鏈接</a></p>

更多詳細(xì)內(nèi)容

CSS樣式知識(shí)

CSS可以有3種方式來(lái)影響頁(yè)面：

1. 外部式：建立一個(gè)css文件，在html文件中，在head標(biāo)簽中建立link標(biāo)簽來(lái)引用。
2. 嵌入式：在html文件中，使用style標(biāo)簽編寫。
3. 內(nèi)聯(lián)式：在html文件中，對(duì)某個(gè)標(biāo)簽，使用style屬性來(lái)編寫。

建議：初學(xué)者可以直接使用嵌入式來(lái)編寫css。

css樣式列表

Github配置

可以參照活動(dòng)教程。