WEB前端開發經驗總結

結構，結構，剛才我提到了標籤有塊級元素和行內元素之分的，要是不理解好這兩個概念，我們也不會很好的了解怎麼合理的結構化頁面，現在就來介紹它們：

塊級元素

塊級元素生成乙個元素框，（預設地）它會填充其父級元素的內容，旁邊不能有其他元素。換句話說，他在元素框之前和之後生成了「分隔」符。我們最熟悉的html元素是p和div.

行內元素

行內元素在乙個文字行內生成元素框，而不會打斷這行文字。行內元素最好的例子就是xhtml中的a元素。strong和em也屬於行內元素。

這些元素不會在它本身之前或之後生成「分隔符」，所以可以出現在另乙個元素的內容中，而不會破壞其顯示。

注意，儘管「塊」和「行內」這兩個詞與html和xhtml中的塊級和行內元素有很多共同點，但也存在乙個重要的差別。在html和xhtml中，塊級元素不能繼承自行內元素（即不能巢狀在行內元素中）。但是css中，對於顯示角色如何巢狀不存在任何限制。

恩，還是不能把css跟xhtml完全的分開談，沒辦法。現在大家了解了什麼是塊級元素和什麼是行內元素了吧。還是回過頭來接著說我們的結構化吧，以上講了這麼多，我都是在講xhtml標籤要結構化，所以基本跟css關係不大，那麼我們下面看看我寫的這個頁面的**在沒有css的情況想，是否結構清晰吧：

看看，頁面是不是依舊很清晰，很容易看出，**是標題，**是導航，**是搜尋表單？呵呵，其實我這麼給大家看的頁面，跟我們的搜尋引擎檢視頁面的結構很接近了，到這裡大家可能體會到一些搜尋引擎友好的意思了吧？

其實讓我們看看這個頁面的dom數狀圖，可能我們對乙個簡潔合理的結構化布局的頁面有更直觀的了解。

看看，是不是做到了我說的：xhtml標籤充分的語意化、盡量少的巢狀、頁面裡基本只顯示使用者需要看的資料、對搜尋引擎友好（沒有css支援時，瀏覽頁面時同樣清晰，層次分明，十分容易檢視的資料。），已做了基本的seo優化

呵呵，說到這裡我才回答了「怎樣的乙個頁面才算是合理的布局的呢？」，做到上面4點，我個人覺得這個頁面就已經做到了合理布局。而至於說要通過w3c的xhtml語法驗證，只是很基礎的開始。

乙個通過驗證的頁面和乙個合理布局的頁面是兩碼事的。

這裡我再羅嗦一下，我一直都在說的是個人認為如何才算是乙個合理布局的頁面？要達到什麼要求才能算合理布局？因為只有理解了這個，之後的css的技巧（瀏覽器的相容處理等）都是圍繞著讓xhtml頁面布局更合理來進行的。

而不是單純做到各個瀏覽器下都顯示正常（一致）。所以請記住在開發時做到：

1. xhtml標籤充分的語意化

2. 盡量少的巢狀

3. 頁面裡基本只顯示使用者需要看的資料（我們用css直接控制使用者需要看的資料的顯示的樣式）

4. 頁面對搜尋引擎友好（沒有css支援時，瀏覽頁面時同樣清晰，層次分明，十分容易檢視資料。），已做了基本的seo優化

今天就談到這裡吧，下面我們會接著討論css的處理技巧。