我們知道字體 這個東西，就是font-family。世界上有很多的字體，但是並不是所有的操作系統就擁有世界上全部的字體。比如，我寫一個font-family:"微軟雅黑"，這個字體只有微軟雅黑纔有，到了ubuntu下面就沒這個字體，那瀏覽器用什麼字體顯示呢？是不是就像顯示亂碼一樣顯示呢？
這個時候，瀏覽器想了一個方法，就是指定一種所有用戶指定的字體都失效後最終代用的字體，叫通用字體族，就是sans-serif和serif。serif是襯線的意思，sans是沒有的意思。關於襯線字體和非襯線字體，我這裏就不多贅述了，在小字體時serif看得更加舒服清楚，但是serif由於襯線的緣故其藝術感和圓滑感不強，所以不適合做大字體的標題。而倒是sans－serif適合大字體顯示。
以下爲襯線字體
I love web design I love web design
以下爲非襯線字體
I love web design I love web design
但是呢，通用字體族具體對應哪一個字體其實是由瀏覽器自己決定的。我們在寫font-family時，需要寫出儘可能多的我們期望的字體，而不能依賴於通用字體族，因爲誰也不知道到底那是什麼字體。
而有關中文的字體問題也是存在的，比如 font-family："Comic San MS",黑體,sans-serif。
當我們打"我愛網頁設計"時，會首先在Comic San MS中查找有沒有那些漢字，結果得到的是一個缺字符就是沒找到的意思，於是就又去黑體裏找，找到了，就用黑體來顯示。但是呢，在ie和opera下，當在Comic San MS中得到缺字符時，就直接調到最後一個通用字體族了，也就是黑體被安靜地忽略了，這就是一個bug的地方。
而如果我們用英文字體來顯示中文字體時會出現什麼呢？在ubuntu下，所有的默認中文字符會被顯示成幼圓，而在buuntu下可能就是仿宋。當瀏覽器得到缺字符時就去搜索操作系統默認的字體。
接下來我要討論一個html 結構的問題
我們平時在寫html，如果專業一點，我們在寫xhtml的時候我們腦子裏都在想些什麼呢？我們是想着哦，這個div應該放在右邊，那個div放在左邊，於是應該先寫左邊的div，再寫右邊的div，然後再起一個#left_column的id，這簡直就是一個2b行爲。爲什麼，因爲我們已經在佈局了，而xhtml是沒有佈局的。我們考慮的應該是數據結構，比如網速比較慢的時候，瀏覽器會按照流的順序加載html的dom，這個時候是按照你寫html的順序來加載的，如果你把比較重要的結構放在了最後，那麼這個內容就會延遲很多才顯示，我們完全可以把重要的放在前面寫，然後再用css技巧比如說float或是別的手段來調節佈局。我們在寫html時千萬不要想着佈局，而是要想數據結構。
還有一個我們在網上看到的xhtml還有xml。這裏的x是指什麼？前者指的是html更加有xml的寫法規範，更像一個xml。而xml的x指標記是可擴展的，一個<table>在xhtml裏就是一個表格，而在xml裏可能是一張桌子或是一個滑板這都有可能，所以是可擴展的，換句話說xhtml就是不怎麼能擴展的。這裏有一個雙刃劍，可擴展的當然好，但是這會造成語義不明確，而xhtml語義就很明確，畢竟我們寫給瀏覽器的代碼不能是亂七八糟的一大堆我們隨意意淫出來的標記，用xhtml還是比較靠譜的，這是一個折衷的方案。但是呢，有一個新的技術叫做xml+xsl我覺得這裏的意思是把完全可擴展的數據結構轉換成有特殊需要的語義標記。有興趣的話可以看一下xml+xsl，xml可以轉換成html或是wml或是其他的標記語言，但是我不喜歡用這個，這個太過於麻煩和死板了。
視覺元素不一定要對應一個xhtml中一個實實在在的元素。xhtml包含的是一個內容！因此我們在設計xhtml時不要老想着得到什麼效果，而應該單純想着信息的組織形式。這裏css zengarden就做得非常好。
語義和結構是xhtml的兩大核心。
關於 CSS
我們可以去看一下在 w3上關於 div 的定義是怎樣的， The div element ， in conjunction with the id and class attributes,offer a generic mechanism for adding structure to documents.The element define content to be block-level but impose no other presentational idioms on the content. 這裏明確寫了 div 是用來 for structure 的，而不是用來 for layout 的。
現在我要談一下什麼是代碼結構，什麼是語義結構。我是這麼看的，語義結構就是說我們就只看那些標記，我們能不能只看那些標記就知道那些標記代表了什麼，有em 或是 strong 表示強調， p 表示一個段落， input 爲輸入框等等。但是呢，並不是說你看懂了那些標記的意思代碼就完美了，這其實遠遠不夠。比如我們寫一個程序，我們沒有用什麼模塊化的思想來寫，只是隨性而寫，也不管什麼面向對象或是函數的提取，統統寫成一坨，當然程序員看了代碼當然可以看得懂，但是代碼結構不好。你沒有用面向對象，沒有提取什麼函數，也沒有暴露給外界接口即模塊化做得不好，那麼別人就很難用你的代碼。同樣，你 xhtml 代碼結構不好，美工利用你寫的 xhmtl 就很難着手，因爲都混成一塊兒了，沒有做到結構的分離。好的代碼結構不僅可以便於固定 xhtml ，還對 css 提供很高的自由度。
比如
<h3>登錄</h3>
<label for="name">用戶名</label>
<input id="name"/>
<label for="password">密碼</label>
<input type="password" id="password">
<input type="submit " />
<div id="login_form">
<h3>登錄</h3>
<div>
<label for="name">用戶名</label>
<input id="name"/>
</div>
<div>
<label for="password">密碼</label>
<input type="password" id="password">
</div>
<div><input type="submit " /></div>
</div>
這裏的div 就是爲了使代碼結構更好的，這裏很多人肯定是爲了 div 可以換行所以用 div ，那如果那些 input 也可以達到換行的效果是不是我們就不用 div 了呢？不！也要用，因爲 div 是用來分隔內容的，是使代碼更加結構化的，不要想着換行這些和結構無關的東西！
但是呢，這裏有一個問題，就是如果我們都用div 來做節點或是分隔很容易產生語義模糊的地方，比如我們都用 div 做登錄表單的節點，又用 div 做資料展示的節點等等，有時不用做節點，用作行元素也用 div 就像上面的登錄表單裏面的 div 一樣，這個時候就混淆了，要是用 css 的話還得分號作爲節點的 div 改怎麼樣，作爲行的 div 改怎麼樣， padding 不同啊， magin 也不一樣啊！還得設個 class ，這樣覺得怪怪的，語義就不簡潔了呀！貌似 xhtml2.0 有一個什麼 section和 line 的，而且還保留了div ，是不是可以解決這個問題呢？要研究一下……
我之前在寫html 的時候，經常看到別人用什麼 strong 和 em 的標記，我覺得那樣不好，因爲我知道 font 不好，因爲把表現和結構混在一起了，而 strong 會使字體變粗，我就覺得這樣也是把表現和結構耦合了，其實這麼想是大錯特錯的。 Em 和 strong 並不是爲了表現，而是爲了強調內容，本質上還是內容。而我們完全可以取消掉 strong 的默認 css 樣式讓 strong 不顯示粗體。而且就算 storng 沒有任何額外的視覺效果我們還是要寫 strong ，因爲那是語義和內容上的，是爲了強調，而視覺效果則是 xhtml 編寫人員意想不到的效果。
什麼時候用table ，當結構側重於列（或是有趨勢擴展成多列的情況）時用 table 。什麼時候用 ol/li ，當結構側重於產生級（文件夾樹的結構，或是有趨勢擴展成級的結構）時用 ol/li 。