本文內容很簡單，從零開始操作一個bootstrap模板。

準備工作

1. 安裝visual studio code(或其他文本編輯器)
2. 安裝Chrome瀏覽器，開發者模式（windows: F12，mac：Option+Command+I）
3. 登錄Github，注冊一個賬號，并下載Github desktop

編碼

首先去找個Bootstrap模板，這個東西相當于已經做好的一個網站。可以在這里找一個。

下載好一個，解壓以后，就可以看到結構了。

打開目錄下的index.html，應該可以在瀏覽器里看到樣子。

修改index.html里的內容，保存之后，刷新瀏覽器就可以看到效果。

Tip：使用Ctrl+F可以快速定位你要找的部分。比如你要查找頁面上某段文字，可以在html文件中使用查找來定位。

常見html標簽

超鏈接<a>

<a>標簽就是常見的鏈接，它里面可以包含一段文字，使用href屬性可以鏈接到你想跳轉的地址。

舉例：

<a >點擊我可以跳轉到百度</a>

使用target="_blank"可以新開標簽頁。

鏈接地址可以使用相對地址，比如當前的頁面是index.html，如果要鏈接到index.html文件的那個目錄下的about.html，那么就可以用：

<a href="about.html">點擊我可以跳轉about頁面</a>

更多詳細內容

圖片<img>

<img>標簽將會在頁面上引入一張圖片，使用src屬性引入圖片鏈接即可：

![](images/eg_tulip.jpg)

這里的地址跟上面的a標簽是一個意思。

更多詳細內容

分割標簽<div>

當你要在頁面上包含一系列內容和其他標簽，又想不到用什么標簽時，你可以用div標簽。

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

對于初學者來說，div標簽最大的作用就是換行。

更多詳細內容

段落標簽<p>

p標簽表示一段話，用法也很簡單：

<p>這是一段話，這是一個<a >鏈接</a></p>

更多詳細內容

CSS樣式知識

CSS可以有3種方式來影響頁面：

1. 外部式：建立一個css文件，在html文件中，在head標簽中建立link標簽來引用。
2. 嵌入式：在html文件中，使用style標簽編寫。
3. 內聯式：在html文件中，對某個標簽，使用style屬性來編寫。

建議：初學者可以直接使用嵌入式來編寫css。

css樣式列表

Github配置

可以參照活動教程。