php基礎學習筆記（1）

表單是什嗎？——表單不是表格。

使用者可以在其中提供一定的資料或資訊或選項的一些html元素。表單通常有一個“提交”按鈕，然後可以將這些資料據/資訊/選項提供給伺服器上的程式使用——資料處理。

——表單的核心是資料。

表單標籤的構成和形式：

到底有哪些表單項？

單行文字框：

其他屬性：

value：設定其中的初始文字

size：設定其輸入框的寬度（單位是“字元寬”）——其中能放置該數量的字元

maxlength:設定該輸入框最多能輸入的字元個數

readonly：這是一個“無值”屬性，表示“唯讀”，則寫法是：readonly=”readonly”

disable: 設定該輸入框“無效”，即資料無效。

密碼框：

其他屬性：

value：設定其中的初始文字

size：設定其輸入框的寬度（單位是“字元寬”）——其中能放置該數量的字元

maxlength:設定該輸入框最多能輸入的字元個數

單選項：

說明：單選項通常必須有value值；

其他屬性：

checked: 表示該選項預設是選中的狀態。也是一個“無值屬性”

name特別說明：一組的單選項要求name值必須相同。

多選項：

說明：多選項通常必須有value值；

其他屬性：

checked: 表示該選項預設是選中的狀態。也是一個“無值屬性”

提交按鈕：

說明：點擊提交按鈕，則表單就會“被提交”，即資料會傳入到表單的action所設定的檔案中去。

圖片按鈕：

說明：圖片按鈕的功能其實也是“提交”，但其顯示出來的效果是一張圖片——這樣有利於美化頁面。

重設按鈕：

說明：會將表單的所有使用者填寫或選擇的資料恢複到初始狀態

普通按鈕：

說明：對錶單沒有影響，但可以從中產生“動作”以實現其他要求（ｊｓ程式）

檔案域：

說明：可以讓使用者選擇本地的檔案（並發送到伺服器）——檔案也是資料。

隱藏欄位：

說明：介面上不可見，但是作為一份“隱藏的資料”提交給伺服器——編程所需。

下拉選擇：使用select和option標籤配合實現。但要把此當作“一個表單項”

文字1 文字2 文字3 ………………….

說明：

option標籤上可以使用selected屬性，表明該select元素的預設選中的項（預設是第一項被選中）。

select標籤上可以使用multiple屬性，使該select元素可以“選擇多項”（即預設只能選一個）

多行選項（也叫列表選項）：多行選項其實只是下拉選擇的一種“變形”——設定其size值大於等於就會成多行。

文字1 文字2 文字3 ………………….

多行文字框：

說明：

rows設定的行數是一個數字，表示該多行文字框可以顯示的文字的行數

cols設定的列數是一個數字，表示該多行文字框可以顯示的一行文字中個數

此標籤沒有value屬性。但其實際的“值”是放在此標籤中間的所有內容。

注意：表單項都必須有name屬性，以表明其“名字”——伺服器取其中的資料就是憑此名字。

架構標籤

第一個觀念：我們在開啟的一個“視窗”中總是只會顯示一個網頁。

但是：

我們其實也可以在一個視窗中開啟多個網頁——其實其實質還是一個視窗顯示一個網頁，只是我們會使用某些特定標籤（frameset）來將一個“大視窗”分割成若干個“小視窗”。

首先要明確：

1， 使用架構標籤（frameset）就不能使用body標籤——即body標籤使用frameset標籤代替

2， 使用frameset標籤就要使用framseset文件類型

則具體分割代碼如下：

。。。。。。。。。。。。。

cols的值是連續的表示列的寬度的數字或百分數，相互之間用（，）分開，其中“*”號表示“其餘”的寬度。比如：

cols=”100,800” ：表示將大視窗按列分割成兩個小視窗，第一個為100寬，第二個為800寬

cols=”100,200,*” ：表示將大視窗按列分割成3個小視窗，第一個為100寬，第二個為200寬,其餘給第3個

cols=”15%, *”

rows的值是連續的表示行的寬度的數字或百分數，相互之間用（，）分開，其中“*”號表示“其餘”的寬度。比如：

rows=”100,200,*”

row=”20%, *”

注意：一個frameset只能按某一個方向（列或行）進行分割

css介紹

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的值為該類名的所有標籤都應用該屬性設定。

舉例：

惺惺惜惺惺資訊

ID選取器：

形式： #id名{ …… }

含義： 指代（對應）網頁中的id的值為該名稱的該標籤都應用該屬性設定。

注意： 通常，一個網頁中的id名不要相同，因為id本身就是表示“唯一”的意思。

舉例：

惺惺惜惺惺資訊

通用選取器：

形式： *{ ….. } ——通用選取器只有這一個形式（符號）

含義： 其自動指代“所有標籤”，即所有標籤都應用該屬性設定

注意： 通用選取器慎用，通常只用於設定基本的幾個屬性，比如文字顏色，文字大小，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{….}

舉例：

段落1

段落2

複合選取器之：分組選取器

形式： 選取器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標籤，並要使用架構文件類型。

。。。。。。。

css基本概念：

css是用於這樣一個目的： 將網頁中的某個（些）標籤（元素）的某(些)方面特性設定為某(些)個值。

css的文法基本模式為：

選取器 { css屬性1：值1；css屬性2：值2；……… }

所謂選取器，其實就是某種可以對應到網頁中的某個（些）標籤的文法形式。

css選取器分類：

標籤選取器：

一個英文單詞{….}

所謂一個英文單詞，其實也就是一個應該存在的標籤名

類別選取器（class選取器）

.類名{…}

啊啊啊啊啊

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) 左右結構：此時使用若干個盒子，並進行相應的浮動，通常的模式：

1. i. 2個盒子：一左一右
2. ii. 3個盒子：兩左一右或兩右一左，或一邊倒。
3. iii. 更多盒子：通常一邊倒。

浮動解釋：

浮動就像水中的氣泡，會“網上浮”

更形象的比喻：大家（所有標籤）都在“地面上平鋪著”，各自佔據著一定的面積，浮動元素卻“浮”到天花板上去了，其並佔據大家通常的“地面面積”。

浮動除了表現上不跟別的元素搶佔地盤之外，其最主要的特性（也就是破壞效果）其實是：使其父盒子失去合理高度——父盒子已經包不住其這些浮動的內部盒子了！這在布局中基本上是不允許的！那麼我們就必須使用補充的做法來實現合理包含——父盒子包住子盒子。讓父盒子獲得正確有效高度的方法有３個：

１， 給父盒子設定一個固定的高度——通常設計時已知高度且不回改變的時候。

２， 給父盒子的內部最末尾加一個清除浮動的空盒子，如下：

３， 給父盒子設定一個css屬性：overflow:hidden;

則最好總結：布局需要左右排列，左右排列需要浮動，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子。

以上就介紹了php基礎學習筆記（1），包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

