姬小光前端興趣班【第002期】- HTML語言與常用標籤

在上一期“然並卵的 Hello World ！”（聊天介面回覆 001）發出之後，同學們的反應跟我的預期出奇的一致，那就是然！並！卵！

那麼從這一期起，讓我們接觸一些真正的程式碼吧！

HTML語言與常用標籤

與其說HTML（How To Make Love）是一門語言，不如說是一組標記，只要按照特定的格式書寫，就可以被你的瀏覽器識別，並顯示出來。

HTML標籤的寫法也很簡單，比如一級標題就是：

<h1>此非然並卵</h1>

其中 h 就是 heading 的意思，相當於 Microsoft Office Word 中的大綱標題。二級標題就是 h2，以此類推。

而段落（paragraph）就是：

<p>小紅，你就跟你媽說，今晚在同學家住。</p>

還有神奇的超連結（anchor）：

<a href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>

其中，寫在開始標籤中，以空格分隔的部分，稱為HTML的屬性，它可以定義HTML的一些行為。比如超連結的 href 屬性，就代表了這個連結指向的地址，當在網頁中點選該連結時，就會跳轉到對應的網址。

而 target 屬性則代表了指向這個地址的開啟方式，_blank 就代表新開一個空白頁，即新視窗開啟。

下面我們看看，如何把它們組合起來並應用到實際中。

右鍵點選上一課新建的 index.html，選擇“開啟方式”，選擇“記事本”開啟。也可以用記事本新建一個檔案。

把剛才的幾個標籤都貼進去：

然後儲存，注意如果是新建檔案，要選擇另存為，然後鍵入 index.html。

儲存完成後，再次雙擊 index.html，你可以看到一個設計風格極其簡潔的網頁誕生了：

你會發現，我們剛才寫的標籤在瀏覽器裡已經有了一些不一樣的樣式。比如，h1 的字型會變大變粗，a 的顏色會變成藍色，並且有下劃線，這是因為，你的瀏覽器會有一些內建的樣式，方便你瀏覽網頁。

So，下一節，我們來說說所謂“樣式”。