本文內容很簡單,從零開始操作一個bootstrap模板。
準備工作
- 安裝visual studio code(或其他文本編輯器)
- 安裝Chrome瀏覽器,開發者模式(windows: F12,mac:Option+Command+I)
- 登錄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
屬性引入圖片鏈接即可:

這里的地址跟上面的a
標簽是一個意思。
分割標簽<div>
當你要在頁面上包含一系列內容和其他標簽,又想不到用什么標簽時,你可以用div
標簽。
<div>這是一段話</div>
<div>
<div>子內容</div>

</div>
對于初學者來說,div
標簽最大的作用就是換行。
段落標簽<p>
p
標簽表示一段話,用法也很簡單:
<p>這是一段話,這是一個<a >鏈接</a></p>
CSS樣式知識
CSS可以有3種方式來影響頁面:
- 外部式:建立一個css文件,在
html
文件中,在head
標簽中建立link
標簽來引用。 - 嵌入式:在
html
文件中,使用style
標簽編寫。 - 內聯式:在
html
文件中,對某個標簽,使用style
屬性來編寫。
建議:初學者可以直接使用嵌入式來編寫css。
Github配置
可以參照活動教程。