表單是什麼？——表單不是表格。
用戶可以在其中提供一定的數據或信息或選項的一些html元素。表單通常有一個“提交”按鈕，然後可以將這些數據據/信息/選項提供給服務器上的程序使用——數據處理。
——表單的核心是數據。
表單標簽的構成和形式：
<form name=”form1” action=”將本表單中的數據提交給的對象（是一個php文件名而已）” method=”post”>
第一個表單項
第二個表單項
。。。。。。。
</form>
到底有哪些表單項？
單行文本框：<input type=”text” name=”n1” />
其他屬性：
value：設定其中的初始文字
size：設置其輸入框的寬度（單位是“字符寬”）——其中能放置該數量的字符
maxlength:設置該輸入框最多能輸入的字符個數
readonly：這是一個“無值”屬性，表示“只讀”，則寫法是：readonly=”readonly”
disable: 設置該輸入框“無效”，即數據無效。
密碼框：<input type=”password” name=”n2” />
其他屬性：
value：設定其中的初始文字
size：設置其輸入框的寬度（單位是“字符寬”）——其中能放置該數量的字符
maxlength:設置該輸入框最多能輸入的字符個數
單選項：<input type=”radio” name=”n3” value=”某個值” />
說明：單選項通常必須有value值；
其他屬性：
checked: 表示該選項默認是選中的狀態。也是一個“無值屬性”
name特別說明：一組的單選項要求name值必須相同。
多選項：<input type=”checkbox” name=”n4” value=”某值” />
說明：多選項通常必須有value值；
其他屬性：
checked: 表示該選項默認是選中的狀態。也是一個“無值屬性”
提交按鈕：<input type=”submit” name=”n5” value=”提交文字” />
說明：點擊提交按鈕，則表單就會“被提交”，即數據會傳入到表單的action所設定的文件中去。
圖片按鈕：<input type=”image” name=”n6” src=”圖片地址” />
說明：圖片按鈕的功能其實也是“提交”，但其顯示出來的效果是一張圖片——這樣有利於美化頁面。
重置按鈕：<input type=”reset” name=”n7” value=”重置文字” />
說明：會將表單的所有用戶填寫或選擇的數據恢復到初始狀態
普通按鈕：<input type=”button” name=”n8” value=”文字” />
說明：對表單沒有影響，但可以從中產生“動作”以實現其他要求（ｊｓ程序）
文件域：<input type=”file” name=”n9” />
說明：可以讓用戶選擇本地的文件（並發送到服務器）——文件也是數據。
隱藏域：<input type=”hidden” name=”n10” />
說明：界面上不可見，但是作為一份“隱藏的數據”提交給服務器——編程所需。
下拉選擇：使用select和option標簽配合實現。但要把此當作“一個表單項”
<select name=”n11” multiple=” multiple” >
<option value=”1” >文字1</option>
<option value=”2” selected=”selected” >文字2</option>
<option value=”3” >文字3</option>
………………….
</select>
說明：
option標簽上可以使用selected屬性，表明該select元素的默認選中的項（默認是第一項被選中）。
select標簽上可以使用multiple屬性，使該select元素可以“選擇多項”（即默認只能選一個）
多行選項（也叫列表選項）：多行選項其實只是下拉選擇的一種“變形”——設置其size值大於等於就會成多行。
<select name=”n12” size=”4”>
<option value=”1” >文字1</option>
<option value=”2” >文字2</option>
<option value=”3” >文字3</option>
………………….
</select>
多行文本框：
<textarea name=”n13” rows=”行數” cols=”列數”></textarea>
說明：
rows設定的行數是一個數字，表示該多行文本框可以顯示的文字的行數
cols設定的列數是一個數字，表示該多行文本框可以顯示的一行文字中個數
此標簽沒有value屬性。但其實際的“值”是放在此標簽中間的所有內容。
注意：表單項都必須有name屬性，以表明其“名字”——服務器取其中的數據就是憑此名字。
第一個觀念：我們在打開的一個“窗口”中總是只會顯示一個網頁。
但是：
我們其實也可以在一個窗口中打開多個網頁——其實其實質還是一個窗口顯示一個網頁，只是我們會使用某些特定標簽（frameset）來將一個“大窗口”分割成若干個“小窗口”。
首先要明確：
1， 使用框架標簽（frameset）就不能使用body標簽——即body標簽使用frameset標簽代替
2， 使用frameset標簽就要使用framseset文檔類型
則具體分割代碼如下：
<frameset cols=”將當前窗口按列分割的設置” rows=”將當前窗口按行分割的設置”>
<frame src=”網頁1路經url” />
<frame src=”網頁2路經url” />
。。。。。。。。。。。。。
</frameset>
cols的值是連續的表示列的寬度的數字或百分數，相互之間用（，）分開，其中“*”號表示“其余”的寬度。比如：
cols=”100,800” ：表示將大窗口按列分割成兩個小窗口，第一個為100寬，第二個為800寬
cols=”100,200,*” ：表示將大窗口按列分割成3個小窗口，第一個為100寬，第二個為200寬,其余給第3個
cols=”15%, *”
rows的值是連續的表示行的寬度的數字或百分數，相互之間用（，）分開，其中“*”號表示“其余”的寬度。比如：
rows=”100,200,*”
row=”20%, *”
注意：一個frameset只能按某一個方向（列或行）進行分割
CSS：Cascading Style Sheet（層疊樣式表）
CSS能夠讓我們將網頁從以下兩個方面來控制網頁的外觀：
1， 批量控制網頁的外觀，使我們節省勞力。
2， 精確控制網頁的外觀：到像素級別。
css的基本語法形式：
選擇器 { css屬性名1：值1；css屬性名2：值2； ………… }
舉例：
font{color:red; font-weight:bold; font-size:18px;}
dt{
font-size:14px;
font-weight:bold;
color:pink;
}
html屬性：寫在標簽中，形式為： 屬性名=“屬性值”——此引號可以省略，但牆裂推薦不省略
——也可以叫“標簽屬性”
——html屬性通常是“各個標簽的自有屬性，一般不一樣”
——使用相同html屬性的標簽極少
css屬性： 寫在選擇器的大括號中，形式為： 屬性名：屬性值——特別注意，值不可以加引號
——也可以叫“樣式屬性”
——css屬性通常是 “對各個標簽都可用”，一般都一樣
——不使用相同css屬性的標簽極少
標簽選擇器：
形式： 標簽名 { …….. }
含義： 指代（對應）網頁中的所有該標簽都應用其中的屬性設置。
類選擇器：
形式： .類名 { …… }
含義： 指代（對應）網頁中的class的值為該類名的所有標簽都應用該屬性設置。
舉例：
<style> .cc1{color:red;} </style>
<h1 class=”cc1”> 惺惺惜惺惺信息</h1>
ID選擇器：
形式： #id名{ …… }
含義： 指代（對應）網頁中的id的值為該名稱的該標簽都應用該屬性設置。
注意： 通常，一個網頁中的id名不要相同，因為id本身就是表示“唯一”的意思。
舉例：
<style> #d1{color:red;} </style>
<h1 id=”d1”> 惺惺惜惺惺信息</h1>
通用選擇器：
形式： *{ ….. } ——通用選擇器只有這一個形式（符號）
含義： 其自動指代“所有標簽”，即所有標簽都應用該屬性設置
注意： 通用選擇器慎用，通常只用於設置基本的幾個屬性，比如文字顏色，文字大小，padding，margin
偽類選擇器：
形式： :偽類名 { …… }
注意： 偽類名其實只有系統內部規定的不多的幾個，不是我們自己定義的，比如：link, visited, hover, active.他們的含義也是特定的。通常上述幾個偽類只用於a標簽，則其形式和含義通常為：
a:link{ …… } ：表示一個a鏈接標簽在網頁初始打開的時候的狀態（初始鏈接狀態）
a:visited{…..} ：表示一個a鏈接標簽在點擊（訪問）過之後的時候的狀態（訪問後狀態）
a:hover{….} ：表示一個a鏈接標簽在鼠標放上去的時候的狀態（懸停狀態）
a:active{….} ：表示一個a鏈接標簽在鼠標摁住但還沒有抬起的狀態（活動狀態）。
不過，最新的浏覽器中，出於安全考慮，a的hover和visited效果有些屬性不能用了。
復合選擇器之：層級選擇器
形式： 選擇器1 選擇器2 { ……… }
含義： 在選擇器1所對應的標簽中由選擇器2所對應的那些標簽。。。。。其中，選擇器1和選擇器2可以是前面所學的任意某種選擇器，而且這種層級關系還可以多層次，比如：
#d1 div{…}
.cc1 p span{…..}
p .cc2 img{…..}
#d1 p a:hover{….}
舉例：
<style>
div p{ color: red;}
</style>
<div>
<p>段落1</p>
</div>
<p>段落2</p>
復合選擇器之：分組選擇器
形式： 選擇器1，選擇器2 { ……… }
含義：指這兩個選擇器都使用同樣的屬性設置，其實無非是簡縮代碼的一種寫法，否則他們得用兩個選擇器來寫。
.a {color:red; font-size:15px;}
.b{ color:red; font-size:15px;}
è
.a, .b{ color:red; font-size:15px;}
其他復合形式（舉例）：
div.cc1{…} :代表具有class值為cc1的div標簽，它跟 div .cc1{…}是完全不同的。
p#d1{…} :代表具有id值為d1的p標簽，但這種形式其實並不推薦（意義不大）。
框架：
框架標簽是用於將“當前窗口”進行瓜分成更小窗口的一種技術。framseset代替body標簽，並要使用框架文檔類型。
<frameset rows=”行高度劃分” cols=”列寬度劃分”>
<frame src=”第1個小窗口中的網頁地址url” border=”0” scrolling=”no” />
<frame src=”第2個小窗口中的網頁地址url” />
。。。。。。。
</frameset>
css基本概念：
css是用於這樣一個目的： 將網頁中的某個（些）標簽（元素）的某(些)方面特性設置為某(些)個值。
css的語法基本模式為：
選擇器 { css屬性1：值1；css屬性2：值2；……… }
所謂選擇器，其實就是某種可以對應到網頁中的某個（些）標簽的語法形式。
css選擇器分類：
標簽選擇器：
一個英文單詞{….}
所謂一個英文單詞，其實也就是一個應該存在的標簽名
類選擇器（class選擇器）
.類名{…}
<p class=”類名1” align=”center”> 啊啊啊啊啊</p>
<img src=”某圖片路徑” width=”100” class=”類名2” />
<input type=”text” name=”name名” class=”類名3” />
id選擇器：
#id名{…..}
<input type=”text” name=”name名” class=”類名3” id=”id名” />
特別注釋：title, class, id就是我們所謂的“通用屬性”——即誰都可以用。
通用選擇器：
*{….}
偽類選擇器：
a:link{…}
a:visited{…}
a:hover{。。。}
a:active{….}
注意：上述４個偽類用於ａ標簽通常就必須按上述順序寫。
另外，實際應用中，常常簡化為這樣：
a{……}
a:hover{….}
含義是：a連接標簽只分“鼠標放上去狀態”和“其他狀態”
層級選擇器：
選擇器1 選擇器２｛。。。。。｝
分組選擇器：
選擇器1， 選擇器２｛。。。。。｝
color：設定一個標簽中的文字的顏色，顏色值可以使用英文單詞，16進制語法和rgb語法：
color: red; color: #f0fcf8; color:rgb(123, 88, 205);
font-size: 設定文字大小，單位通常為像素（px）—— 一般的商業網站的文字大小通常都是12px。
font-weight: 設置文字粗體（bold）或非粗體（normal）。
font-style: 設置文字斜體(italic) 或非斜體（normal）
font-family：設置文字的字體名字，可以使用多個字體名，中間用逗號分開，表示的含義是：首先使用第一個字體，如果用戶電腦中沒有第一個，則是用第二個，以此類推。舉例：
font-family: 宋體，仿宋，微軟雅黑，arial, “Times New roman”;
line-height:設置文字的行高，單位通常也是px，即一行文字所占據的空間高度——行高不是文字的高度。
letter-spacing:設置字符（或字母）之間的間隔距離，中文其實就是“字”的間隔。
word-spacing:設置單詞之間的間隔距離——通常只對西方拉丁語系的字符有效。
text-align:設定文字的水平對齊方式。其功能是相當於標簽屬性中的align屬性。但要注意：align作為html屬性，其實只在其中的某幾個標簽中使用，但text-align是幾乎所有標簽都可以用的。
text-indent: 設定一個段落中的首行縮進距離，單位通常也是px。
text-decoration:設置文字的“修飾線”：下劃線（underline）,中劃線(line-through)，上劃線（overline）,none(無)
vertical-align: 設定文字在一個表格盒子（單元格）的垂直對齊方式：top（頂對齊），middle(中對齊)，bottom(底對齊)
盒子是css中最重要的概念。
盒子
首先先建立一個觀念： 幾乎所有標簽其實都是一個盒子——而所謂盒子，無非就是一個“矩形的區域范圍而已”。其實所謂網頁，無非是一個盒子套一個盒子。
一個盒子有如下一些區域（結構）構成：
邊框（border）：一個線型的區域，可以是實線或虛線或其他形狀。
外邊距（margin）：也叫“邊界”，邊框線之外的一塊空白區域，其含義是“不能放置物體”
內邊距（padding）：也叫“補白”，邊框線之內的一塊空白區域，其含義也是“不能放置物體”
內容區（沒有對應的css屬性名）：指一個盒子中可以放置“物體”的區域——也就是盒子的主要區域。其中放置的物體可以是普通的文字或其他標簽——對應我們之前學的html中的“內容部分”。內容區通常只能設置其寬高屬性（ｗｉｄｔｈ，ｈｅｉｇｈｔ）。
一個盒子的各個組成部分由下圖所示：
我們以前學習ｈｔｍｌ，說，標簽具有“表形表意”之作用。其實也可以說，內容和其表現混在一起。
現在：
ｃｓｓ技術其實可以將一個網頁中的各個標簽的表現都“提出來”放到一個專門的地方（比如style標簽中），剩余的部分（標簽和文字內容等）被整體上稱為“結構/內容”。這種做法就被稱為“內容與表現分離思想”
類似ｄｉｖ的盒子：一個盒子自動“占據一行”（不管其內部內容多少）：這就是“塊盒子”（塊元素）。常用塊盒子：
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特點：可以設置固定的寬高，margin，padding，
類似ｓｐａｎ盒子：一個盒子中的內容會跟同類的盒子並排在一行出現，除非該行已滿，則會自然到下一行——類似文字的表現特性。：這就是行內盒子（行內元素）。行內盒子通常放“最終的數據內容”，比如文本，圖片。其他行內盒子：
b, strong, font, i, u, a, img, input, textarea, select,
特點：寬高不能設定，而是由其內容“撐出”，margin和padding沒有上下方面的表現。
通常，行內盒子是“小盒子”，塊盒子是“大盒子”，
所謂布局，其實是指的將網頁內容以一定的方式放到合適的位置上去。
布局的基本步驟：
1， 將“當前版面”以視覺上界限明顯的方式進行劃分若干個區塊，劃分只用兩種方式：
a) 上下結構：此時，只要使用若干個盒子，自然就是上下結構，無需其他設置。
b) 左右結構：此時使用若干個盒子，並進行相應的浮動，通常的模式：
浮動解釋：
浮動就像水中的氣泡，會“網上浮”
更形象的比喻：大家（所有標簽）都在“地面上平鋪著”，各自占據著一定的面積，浮動元素卻“浮”到天花板上去了，其並占據大家通常的“地面面積”。
浮動除了表現上不跟別的元素搶占地盤之外，其最主要的特性（也就是破壞效果）其實是：使其父盒子失去合理高度——父盒子已經包不住其這些浮動的內部盒子了！這在布局中基本上是不允許的！那麼我們就必須使用補充的做法來實現合理包含——父盒子包住子盒子。讓父盒子獲得正確有效高度的方法有３個：
１， 給父盒子設置一個固定的高度——通常設計時已知高度且不回改變的時候。
２， 給父盒子的內部最末尾加一個清除浮動的空盒子，如下：<div style=”clear:both”></div>
３， 給父盒子設置一個css屬性：overflow:hidden;
則最好總結：布局需要左右排列，左右排列需要浮動，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子。
