WEB標準學習實踐（一）

首先說明，web標準即通俗意義上講的div+css網頁布局。

之所以學習web標準，沒有任何理由，完全是興趣。以前也有過學習的衝動，但總是限於時間和個人的原因沒有實際操作。換了東家之後，大把的時間咱可不能浪費了。。。。。。

利用每天上班的片段時間，零零散散的看了一些基礎知識，發現入門還是比較簡單的。但是要做出布局複雜、樣式絢麗的效果來，卻需要很深的功力。穩重錯誤請大家指正，省的我走火入魔。。

閒言少敘，今天開始web標準實踐（一）

1、web頁面分析

當我們檢視網頁的源**資訊時，會發現大概的結構式這樣的

">

" >

i'm eddypeng

下面我們就來一一分析

">

這段文字，說明了該文件屬於過渡型文件。doctype即document type的意思，transitional表明採用xhtml過渡，transitional.dtd為解釋頁面**的依據。因為xhtml相較於html來說更加嚴格，比如標籤必須小寫，必須閉合等要求，所以為避免一刀切的現象發生，在現階段一般都採用過渡型。還有其他兩個型別是嚴格型和框架型。

" >

xmlns即xml namespace的縮寫。因為xml標籤是可以自定義的，而每個自定義的標籤都要有乙個命名空間。這裡指的是xhtml符合國際標準。

表明該文件的語言編碼是gb2312（簡體中文編碼）。這裡不涉及過多編碼的知識，但有一點要注意，該文件包含的css檔案或其他檔案的編碼必須與該文件一致，否則會產生亂碼。

untitled page

頁面的名字

i'm eddypeng

這裡就是我們千變萬化的web頁面內容了。

2、html標籤

html標籤在頁面中都必須結束。成對的標籤以「/標籤名」結束，有些單一的標籤在本身的結尾打上/來結束，這是xhtml**編寫的規範。

成對標籤

...單一標籤

3、css載入方式

•內聯樣式：以style屬性方式寫在標籤內內部的樣式，只對該標籤有效。如內部樣式

•內部樣式：以結尾，寫在頁面內的head標籤內，只能針對本頁有效。如h2 < /style>

•外部樣式：以檔案的形式存在，在頁面內以link的形式引入，可以針對多個頁面，只要引用即可。如

•鏈結樣式：以@import url標記所鏈結的外部樣式表，它一般常用在另乙個樣式表內部。常用在全域性公用的樣式表檔案被其他樣式表檔案引用的情況。如@import url("/css/global.css")

4、css幾種主要選擇器

•派生選擇器：為存在上下文關係的html元素指定樣式。如 h2 string，那麼受影響的為

•id選擇器：為特定id的html元素指定樣式。以"#"號定義。如#idselector，那麼下面的元素將受影響：紅色。

。同時id選擇器也可以結合派生選擇器。如#idselector span，那麼下面的元素將受影響：i'm span

中的span。

•類選擇器：以"."號定義。如.center，那麼下面的元素將受影響：i'm class selector

。同時類選擇器也可以結合派生選擇器。如.centerspan，那麼下面的元素將受影響：i'm span

中的span。

•屬性和值選擇器：可以為擁有指定屬性的 html 元素設定樣式，而不僅限於 class 和 id 屬性。目前在ie7及以上版本支援。如：

input[type="text"]。那麼所有的文字輸入框將都會受到影響。

5、css優先順序

•id優先順序高於class

•後面的樣式覆蓋前面的

•指定的高於繼承

•行內樣式高於內部或外部樣式

最後再補充乙個html元素的知識。在整個web標準的學習實踐過程中，要不斷的遇到。就是塊元素和內聯元素。下面是兩種型別元素的特點

塊元素：總是另起一行開始；高度，行高以及頂、底邊距都可控制；寬度預設是它所在容器的100%，除非設定乙個寬度。

內聯元素:和其它元素都在一行上；高度，行高以及頂、底邊距不可改變；寬度就是它所容納的文字或的寬度，不可改變。

兩種元素可以通過display：block和display：inline的方式進行轉換。

好了，先到這吧，去喝點水先。寫部落格真累，不過寫完的東西在腦中更清晰了，值得。

WEB標準學習實踐（一）

由淺入深實踐學習 Web 標準

Web 標準實踐系列（一） Google 的首頁

Web 標準實踐系列（一） Google 的首頁

WEB標準學習實踐（一）

由淺入深實踐學習 Web 標準

Web 標準實踐系列（一） Google 的首頁

Web 標準實踐系列（一） Google 的首頁

相關推薦