html 語法概念
html 是一種標籤式的文法，用前後標籤把所要表現的內容夾註起來，讓它有特別意義。比如 <font color="red">紅色字</font> 就可以讓文字變紅色。這個 <font> 就是一個標籤。
標 籤是成對出現。比如上面的 <font>。但也有一些是只有頭沒有尾。比如 <br> <hr> <img> 等等。在 html 4.0 規範裡，有頭無尾是可以接受的標籤。但是在 xhtml 1.0 規範裡，不能有這種有頭無尾，會被視為錯誤而沒作用。所以如果要在 xhtml 裡面使用，所有的標籤都必須有頭有尾，若是要用上述的無尾標籤，得寫成 <br /> <hr /> <img /> 才行。所以如果你看到有這種標籤，表示是寫給 xhtml 解釋器看的。什麼時候會用 xhtml？除非你編輯 html 的工具軟體特別讓你設定該網頁是xhtml，要不然只寫格子的話就不必管了。
既然標籤是成對出現，就會有巢狀套疊。比如像表格會是 <table><tr><td></td></tr></table> 這樣叫巢狀套疊。它不可以出現交錯，也就是如果變成 <table><tr><td></tr></td></table> 這樣就是交錯了，兩個交錯的標籤通常有一個會被判定無效，或者如果都有效，呈現的結果可能不是你想像中的那樣，要看瀏覽器怎麼解釋它了。沒有交錯，成對套疊正確的 html，術語稱為 well form。
有 些標籤規定要位於特定標籤之中。比如表格的 <tr> 就必須放在 <table> 內，<td>就必須放 <tr> 內，不能沒有 <table> 就開始寫 <tr>，沒有 <tr> 就開始寫 <td>。達到這種規定的 html，術語稱為 verified。
在目前的幾個知名瀏覽器，除非該網頁是使用 xhtml 制定，要不然就算不是 well form 或 verified，都能還算正常地把網頁內容呈現出來。除非實在有很嚴重的標籤交錯問題，否則應該都能顯示。
以上是標籤的重點。接下來是屬性。
屬 性 Properties，是放在標籤裡面，設定特定性質的參數。比如前面寫到的 <font color="red">，這個 color 就是屬性。屬性包括名稱跟它的值。color 是屬性、red 是值。如果值不包含空白，那麼引號可以省略。寫成 <font color=red> 也是正確的。不過建議還是寫引號比較好。
在 CSS 觀念帶入之後，慢慢不鼓勵寫屬性，全部寫成 CSS 比較好。這什麼意思，我舉個例。比如有一篇文章，裡面有某些關鍵字，想要用以下標籤來強調 <font color="red" face="標楷體" size="4"><b>關鍵字</b></font>。它的呈現是『顏色=紅色、字體=標楷體、字大小=16pt、效果=粗體字』，這麼一長串，如果關鍵字越多，那這一頁裡面，這個重覆的標籤也會越多。最重要的是，萬一你想把粗體改為斜體，那就慘了，你得一個一個慢慢改，生命就這麼浪費掉了。
好！知道問題點在哪了，我們先來用 style 來把所有的屬性集合成一個，變成是 <span style="color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold">關鍵字</span> ，這個效果與上面的 <font> 完全一模一樣。不過光是這樣改，雖然標籤兩個變一個，屬性三個變一個，但長度並沒少，反而還增多呢！稍安勿躁，請看下去。
如 果關鍵字有一百個，改成 style 當然看不出減肥效果，但是集合成一個 style 的用意，就是它可以放到 CSS 去。我們在網頁前面的 <head> 這一段裡面，放一對 <style> </style>，並且為上面這個特別屬性取一個名稱，比如叫 keyword ，那放進 <style> 就寫成如下：
<style>
.keyword { color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold }
</style>
原 本的引號改為前後大括號，請注意 keyword 前面有個 . 句點。這時再把所有的 <span style="..."> 改為 <span class="keyword"> 你就明白，所有的關鍵字效果還是一樣，但是屬性只寫了一次，而不是寫一百次。如果要把粗體改斜體，也只是改一次就全部通通都見效了。
看到 這邊，大致上重點就是把屬性改為 CSS 的寫法，等於原本要寫 xx 次的屬性，改為只寫一次。這是最常見的技巧。另外還有一個屬性是 id，是 identifier 『專屬名稱』的意思，class 是『類型』，一個網頁裡面可以好幾個標籤都用相同的類型，比如上面舉的關鍵字例子，就有 100 個 class="keyword" 的 <span>。但是如果我寫 <span id="abc"> 就表示 abc 是這個 <span> 的專屬名稱 (就像它的身份證號一樣)。abc 只能在這個網頁中出現一次，就算你寫多次，在定位時也只有第一個會被辨識到，其它的都會被忽略。
當我們要對這個 abc 設定特定屬性時，寫在 <style> 裡面就要寫成
<style>
.keyword { color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold }
#abc { color: blue; font-family: 標楷體; font-size: 18pt; font-weight: bold }
</style>
看到有什麼不同了嗎，class 名稱前面要加個句點，但 id 前則加個 # 號。這就表示 id="abc" 的那個標籤，要套用這裡所設定的屬性。
然後再提到，如果是相同的標籤都要設定一樣的 CSS，那可以不必幫它們加 class，直接在 <style> 寫：
<style>
.keyword { color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold }
#abc { color: blue; font-family: 標楷體; font-size: 18pt; font-weight: bold }
td { color: green; font-size: 12pt; }
</style>
這個 td 不必加句點也不必加井號，直接寫 td，意思就是這網頁所有的 <td> 都受這個 CSS 設定的影響。
所以，聰明的你看到這裡應該已經學到，標籤裡面，最好只有三種屬性：id, class, style，其它的都寫到 style 裡面，或放到 <style> 再以 id 或 class 或標籤名稱來取用。
最後提到一點，這 <style> 裡面寫的三種定位：.class、#id、還有標籤名稱，是可以有層級架構的。比如我寫成這樣：
<style>
#abc .keyword { color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold }
</style>
表示所有的 <span class="keyword"> 必須位在 <span id="abc"> 裡面，才會受到這個 CSS 影響。若寫成：
<style>
#abc td { color: red; font-family: 標楷體; font-size: 16pt; font-weight: bold }
</style>
就表示位在 <span id="abc"> 裡面的 <td> 才受這個 CSS 影響。這三個可以任意依照需要換位置。看你想要作用到哪個位置上都可以。
所以讀完本篇，你也可以看懂 Yahoo 的自定版面那一坨 CSS 到底在寫什麼了。
另外，如果你想知道 style, CSS 裡面的設定值有哪些，可以參考這裡。
http://tw.myblog.yahoo.com/pen-sword/article?mid=2849&prev=3083&next=2482&l=f&fid=7
