Web Development 網站開發 (1) - HTML 介紹
HTML 是網站開發裡最重要的元素之一。它定義了我們的頁面裡有哪些內容，譬如一個標題、一段文字、一個連結、一張圖片等等。瀏覽器會依據其內容去解析然後把結果顯示在網頁上。
HTML 是網站開發裡最重要的元素之一。它定義了我們的頁面裡有哪些內容，譬如一個標題、一段文字、一個連結、一張圖片等等。瀏覽器會依據其內容去解析然後把結果顯示在網頁上。
<!DOCTYPE html>
<html>
<head>
<title>Hello Website</title>
<meta charset="UTF-8" />
</head>
<body>
<div>Hello</div>
</body>
</html>
以上先來看一下 HTML 最基本的架構，整個 HTML 是由層層的標籤堆疊而成。開頭會是 <!DOCTYPE html> ，告訴瀏覽器它是一支 html5 的檔案。
所有標籤皆會有頭有尾，開頭 <xxx> 、結尾 </xxx> ，開頭結尾包住的東西就是它的內容，我們也稱為它的 children。由此看出上面的 html 內容中，第一層為 <html>， 裡面則有 <head> 與 <body> 兩個為它的 chilren。這樣的結構是在幾乎所有的 html 都會出現的。
<body>
在 body 裡的內容是會顯示在瀏覽器頁面上的內容，例如上面的 <div>Hello</div> 就會被渲染到頁面上，用戶可以在頁面上看到 Hello 的字樣。HTML 裡面定義了不同的標籤去顯示各種內容。顯示圖片可以用 <img>、顯示連結可以用 <a>、顯示標題可以用 <h1> <h2> <h3>.. 等等。
<head>
head 裡的內容會在 body 之前先被執行，但這些內容並不會出現在頁面上，可以把它想成是 "設定"。例如上面的 <title>Hello Website</title> 的用途就是定義頁面的標題，也就是瀏覽器上面的 tab 會看到的內容，也是搜尋引擎上出現的標題。
標籤種類有哪些
<!-- xxx --> 這個是註解，輔助開發者了解程式法的意思，會被瀏覽器給忽略
<h1> h1 - h6 都是 header，如果你今天再寫一篇網誌，那麼 h1 就可以用來當作網誌標題，h2 可能可以幫做你文章裡的子標題，以此類推。
<div> 與 <span> 本身是屬於沒有什麼意思的容器標籤，存粹是用來區隔不同的內容。因為彈性，所以通常也是網頁中最常用的標籤。至於 div/span 的差別還有用法之後會再提。
<p> 拿來代表段落。
<a> 連結：可以點擊然後導去其他網址。
<img> 用來顯示圖片。
<ul> + <li> 用 bullet point 顯示條列式的項目。
<ul> + <ol> 1, 2, 3, 4... 顯示條列式的項目。
<table> <tr> <th> <td> 組合起來可以表示表格。
比較完整的例子如下：
See the Pen html-example by Hua-Ying Tsai (@huaying) on CodePen.
這裡介紹了一些常用的標籤，實際上還有更多的標籤像是 <iframe> <blockquote> <b> 等等，從 html5 以後又有更多具有語意性質的標籤像是 <section> <footer> 等。
我們一開始學習網頁設計的時候只需要知道一些常用的標籤即可做出很棒的作品，隨著自己的熟練度提升再來了解更多細節。
如何讓你的網頁變好看
知道了這些標籤後，你可能會想為什麼弄出的頁面很醜對吧？一個好看的頁面是不是應該要有好看的排版、字體有不同顏色大小？下一步我們需要 CSS 來輔助我們對這些內容做一些修飾！
繼續閱讀：
Huaying Tsai
