HTML DIV CSS佈局基礎

一、HTML基本語法

HTML類似XML，頁面上的每個節點用一對標籤表示，例如

原始碼 ［ HTML ］

HTML 屬性名可以使用除 空白字元，雙引號，單引號，‘/’，‘>’，‘\0’以外的所有可列印字元，HTML 的屬性值可選包含在一對雙引號、或單引號內，注意不要使用有歧義的表示即可，例如值包含單引號就應當放在一對雙引號內。所以類似下面這樣的寫法雖不常見但仍然是合法的：

原始碼 ［ HTML ］

檢視原始碼列印？

三、HTML文件

一個完整的的HTML頁面原始碼如下：

一個標準的HTML頁面包含幾個必要的標記為其他節點的根節點，而 html一般 包含兩個子節點， body節點裡面放顯示內容，而head節點裡放頁面的其他引數（例如視窗標題，頁面編碼等等）而head節點與body節點又可以包含其他的子節點，子節點又可以包含子節點，就象一棵樹：

html是樹幹是根節點，而head節點包含的內容總是默默無聞的不可見部份，body則包含所有顯示在頁面上的內容。

四、盒子模型

所有的節點都可以用CSS來定義外觀，CSS可以寫到節點的style屬性裡，也可以寫到CSS檔案裡。所有可顯示的節點的顯示模式都可以用盒子模型來表示，如下圖：

每一個盒子有內容區，有邊框（CSS的border屬性）邊框裡面是內邊距（ 或者叫內補白、即CSS的padding屬性）邊框外面則是外邊距（或者叫外邊界，即CSS的margin屬性）當然還有節點的寬度、高度等等，有有的瀏覽器中寬度高度整的是包含border的節點大小，而在有的瀏覽器中指的是內容區大小，關於盒子模型請參考文章：瞭解CSS 盒子模型

五、CSS選擇器

如果你還不知道什麼是CSS選擇器，請參考教程CSS選擇器語法詳解以及HTMLayout快速入門

六、塊節點、內聯節點

HTML是以流的模式來顯示節點的，所有節點分為兩類。

塊節點:

可以指定高度、寬度（當然也支援上面所說的盒子模型的所有屬性，例如內邊距、外邊距等等），多個塊節點總是在頁面上自上向下的垂直流動（塊節點總是獨佔一行，預設的兩個塊節點不會顯示在同一行內，無法在同一行內聯接）

內聯節點:

內聯節點總是在頁面上自左向右的水平流動，一行放不下來才會流動到下一行，內聯元素顯示在行內，其高度受限於行距的高度，一個典型的例子就是文字，內聯節點不能指定垂直方向的外邊距（但是可以指定水平方向的外邊距）、雖然也可以指定邊框以及內邊距（但在垂直方向上受行距高度的限制，邊框以及內邊距在垂直方向上設定的再大也不能改變行距高度，多餘的內邊距會被忽略，而多餘的邊框會溢位到上一行或下一行重疊顯示），內聯節點也不能指定高度（受行距高度的限制），也不能指定寬度（即內聯節點在水平方向上只有外邊距是正常起作用的，垂直方向上內外邊距、邊框等都顯示不正常受制於行距高度）塊節點通常用來佈局、建立網頁的框架、調整網頁的結構，最重要的塊節點就是div節點。內聯節點通常用來顯示內容（文字和影象）、最常見的內聯節點是span，注意顯示影象的img也是內聯節點。在嚴格的HTML4規範中，body下面只能包含塊節點，所有內聯節點都應當放到塊節點中。所以div如此重要，甚至HTML佈局可以簡稱 div+css 佈局。塊節點中的兄弟節點預設是自上向下流動的，我們來看一個例子：

原始碼 ［ AAuto ］

001

import win。ui；

002

/*DSG{{*/

003

var winform = 。。win。form（ bottom=555；scroll=1；right=511；text=“自上向下流動的塊節點”）

004

winform。add（ ）

005

/*}}*/

006

007

import web。form；

008

var wb = web。form（ winform ）；

009

010

wb。html =/**

011

012

013

Document

014