窗體管理和標準控件運用 - EXCEL VBA（20

窗體管理和標準控件運用 - EXCEL VBA（20）

BA EXCEL的窗體是程序面向對象編程的具體體現(xiàn)，是提供給用戶的使用的“用戶界面”，窗體的設計類似于網(wǎng)頁的設計，簡單、實用、美觀等都是設計者要考慮的因素。

在VBE操作界面菜單中點擊【插入】，選擇【用戶窗體】插入窗體。用鼠標點擊窗體彈出【工具箱】窗體，其中標準控件如下圖：

一、窗體間相互調用

1、窗體設計

首先，在VBA管理界面中插入3個窗體。

窗體1為歡迎窗體
主窗體2中添加1個命令按鈕
子窗體3中添加1個命令按鈕

窗體1-歡迎窗體屬性表如下：

用途	對象	屬性	屬性值
歡迎窗體	窗體	名稱	frmSplash
		Caption	Splash窗體
		Picture	D:\baiduclouddisk\source\HTMLCSS\img\test2.jpg（本地）
		Picture	http://studio.galaxystatistics.com/shiny/rSHIndex/pic/test1.jpg（網(wǎng)上）
歡迎文字	標簽	名稱	Label1
歡迎文字	標簽	Caption	歡迎使用銀河統(tǒng)計系統(tǒng)

注：按表設計窗體和標簽屬性

窗體2-主窗體屬性表如下：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmMain
主窗體	窗體	Caption	主窗體
調用子窗體	命令按鈕	名稱	cmdCallSub
調用子窗體	命令按鈕	Caption	調用子窗體

窗體3-子窗體屬性表如下：

用途	對象	屬性	屬性值
子窗體	窗體	名稱	frmSub
子窗體	窗體	Caption	子窗體
返回主窗體	命令按鈕	名稱	cmdCallMain
返回主窗體	命令按鈕	Caption	返回主窗體

2、窗體視圖

設計完成歡迎窗體本身和標簽的屬性后，運行窗體（點擊三角形按鈕或按F5鍵），效果圖如下：

注：標簽字體、顏色等屬性需要修改。特別是標簽的BoderStyle屬性需要設置為0（使得標簽無背景）

主窗體視圖如下：

子窗體視圖如下：

3、窗體加載事件

鼠標雙擊歡迎窗體打開【代碼】窗口，在窗體的Activate事件中編寫代碼如下：

注：窗體運行激發(fā)Activate事件。事件中第2行代碼可動態(tài)加載窗體背景圖片，第3行代碼中窗體打開5秒后調用過程CloseSplash（關閉該窗體）

在工程中插入一個模塊，在模塊中編寫中過程CloseSplash代碼如下：

Private Sub CloseSplash()
Unload frmSplash
frmMain.Show
End Sub

注：過程中第2行代碼卸載歡迎窗體，第3行代碼顯示主窗體

主窗體的“調用子窗體”命令按鈕（名稱為cmdCallSub）的Click事件代碼如下：

Private Sub cmdCallSub_Click()
frmMain.Hide
frmSub.Show
End Sub

注：事件中第2行代碼隱藏主窗體，第3行代碼顯示子窗體

子窗體的“返回主窗體”命令按鈕（名稱為cmdCallMain）的Click事件代碼如下：

Private Sub cmdCallMain_Click()
Unload Me
frmMain.Show
End Sub

注：事件中第2行代碼卸載子窗體，第3行代碼顯示子窗體

最后，鼠標雙擊【工程】中【ThisWorkbook】對象，選用【W(wǎng)orkBook】的Open事件，如圖：

【W(wǎng)orkBook】對象的Open事件代碼如下：

Private Sub Workbook_Open()
frmSplash.Show
End Sub

注：打開EXCEL文檔時顯示歡迎窗體

這樣，每次打開打開EXCEL文檔時顯示歡迎窗體時，首先顯示歡迎窗體，5秒后自動進入主窗體；在主窗體中點擊“調用子窗體”命令按鈕，隱藏主窗體并顯示子窗體；在子窗體中點擊“返回主窗體”命令按鈕，卸載子窗體并顯示主窗體。從而實現(xiàn)了一個簡單的系統(tǒng)框架。

二、標準控件運用

2、文字框設計

文字框主要用來接收用戶輸入信息，也可以用來顯示信息供用戶修改。文字框控件可接收用戶輸入的文本、數(shù)字、單元格引用或格式等數(shù)據(jù)。

I、文字框常用屬性

EnterKeyBehavior：設置文字框中按下Enter鍵的效果，和MultiLine屬性同時設為True時，Enter鍵可以實現(xiàn)換行，否則將按Tab鍵功能順序跳轉到下一個對象；
MaxLength：設置文字框中能夠輸入字符的最大數(shù)量。默認為0，表示輸入字符沒有數(shù)量限制；
MultiLine：設置文字框能否接受和顯示多行文本。屬性值為True顯示多行文本，F(xiàn)alse只容納單行文本；
PasswordChar：文字框中字符顯示為“*”，用于密碼口令輸入；
ScrollBars：設置文字框是否有垂直或水平滾動條；
Text：設置或返回文字框中內容，與Value屬性相同。

II、文字框常用方法

Copy：將文本框中選中的文本復制到剪貼板；
Cut：將文本框中選中的文本移動到剪貼板；
Paste：把剪貼板上的文本粘貼到文本框中。

III、文字框常用事件

AfterUpdate：更改文本框中數(shù)據(jù)后觸發(fā)該事件；
BeforeUpdate：文本框中數(shù)據(jù)被改變之前觸發(fā)該事件。事件參數(shù)Cancel設置為True,焦點仍然停留在文字框上，并且AfterUpdate事件和Exit事件都不會發(fā)生；
Change：文字框中數(shù)據(jù)發(fā)生變化后觸發(fā)該事件；
Enter：通過鼠標或Tab鍵進入文字框（成為焦點）時觸發(fā)該事件；
Exit：離開文字框（成為焦點）時觸發(fā)該事件。

IV、文字框運用實例 - 信息注冊

文字框及窗體屬性表如下：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmInput
主窗體	窗體	Caption	注冊
姓名	文字框1	名稱	txtName
姓名	文字框1	maxLength	10
性別	選項按鈕1	名稱	optMan
		Caption	男
		Value	True
	選項按鈕2	名稱	optWoman
	選項按鈕2	Caption	女
民族	文字框2	名稱	txtNation
出生年月	文字框3	名稱	txtBirthday
出生年月	文字框3	maxLength	10
身份證	文字框4	名稱	txtID
身份證	文字框4	maxLength	18
聯(lián)系電話	文字框5	名稱	txtPhone
通訊地址	文字框6	名稱	txtAddress
備注	文字框7	名稱	txtMemo
備注	文字框7	MultiLine	True
登記	命令按鈕1	名稱	cmdSave
登記	命令按鈕1	Caption	登記
關閉	命令按鈕2	名稱	cmdClose
關閉	命令按鈕2	Caption	關閉

按屬性表設計的文字框窗體效果圖如下：

按面向對象程序設計思路，分布為不同文本框設計相應代碼。

為【出生年月】文本框的BeforeUpdate事件編寫檢查代碼，用來檢查輸入的日期格式是否正確。代碼如下：

Private Sub txtBirthday_BeforeUpdate(ByVal Cancel As MSForms.ReturnBoolean)
If Not IsDate(txtBirthday.Value) Then
  MsgBox "請輸入正確的出生日期！", , "提示"
  txtBirthday.SelStart=0
  txtBirthday.SelLength=Len(txtBirthday.Value)
  Cancel=True
End If
End Sub

注：如果在【出生年月】文本框中輸入錯誤的日期格式，將彈出錯誤提示窗口，文本框中錯誤文本被自動全選。正確的日期格式如，1997-12-24、1997/12/24、12、24、1997等

為【登記】命令按鈕的Click事件編寫代碼，將窗體中用戶輸入的文本框內容添加到工作表中。代碼如下：

Private Sub cmdSave_Click()
If txtName.Value="" Then
  MsgBox "請輸入員工姓名！", , "提示"
  txtName.SetFocus
  Exit Sub
End If
  setData                 'setData為自定義過程
End Sub

在【模塊1】編寫setData自定義過程代碼如下：

Public Sub setData()
Dim intRow As Integer
intRow=Sheet1.Range("A1").CurrentRegion.Rows.Count  '獲取已有數(shù)據(jù)行
intRow=intRow + 1                                   '計算出新行（數(shù)據(jù)錄入行）
Sheet1.Cells(intRow, 1)=frmInput.txtName.Value
If frmInput.optMan Then
  Sheet1.Cells(intRow, 2)="男"
Else
  Sheet1.Cells(intRow, 2)="女"
End If
Sheet1.Cells(intRow, 3)=frmInput.txtNation.Value
Sheet1.Cells(intRow, 4)=frmInput.txtBirthday.Value
Sheet1.Cells(intRow, 5).NumberFormatLocal="@"       '設置單元格為文本格式
Sheet1.Cells(intRow, 5)=frmInput.txtID.Value
Sheet1.Cells(intRow, 6).NumberFormatLocal="@"
Sheet1.Cells(intRow, 6)=frmInput.txtPhone.Value
Sheet1.Cells(intRow, 7)=frmInput.txtAddress.Value
Sheet1.Cells(intRow, 8)=frmInput.txtMemo.Value
End Sub

注：如果工作表記錄為空，第1次執(zhí)行過程從第2行起記錄用戶輸入數(shù)據(jù)，第1行為預留表頭

為【關閉】命令按鈕的Click事件編寫代碼如下：

Private Sub cmdClose_Click()
Unload Me   '卸載窗體
End Sub

按要求完成文字框設計與運用步驟，運行后可以按設計要求按行錄入數(shù)據(jù)，即完成了一個簡單的信息錄入系統(tǒng)。當然，一個實用的信息錄入系統(tǒng)還需要更多、更嚴格的文本框數(shù)據(jù)校驗、重復記錄校驗等。

2、復選框設計

復選框用來表示一個特點的狀態(tài)是選定還是清除，在程序中為用戶提供從兩種方案中任選其一的操作。復選框可以彼此獨立工作，用戶可以同時選擇多個復選框（即多選選擇情況下使用復選框）

I、復選框常用屬性和事件

除了共有的屬性外，復選框有如下幾個特殊屬性。

Picture：為復選框指定一個圖片；
Value：設置或返回復選框的選擇狀態(tài)。當選中復選框時，該屬性為True、反之為False；
TripleState：決定用戶能否為復選框指定Null狀態(tài)。該屬性為True時可以在3個狀態(tài)（True、False、Null）中選擇,反之在2個狀態(tài)（True、False）中選擇。

復選框最常用的事件是Click（鼠標點擊事件），用戶選中復選框時其屬性Value值變?yōu)門rue。程序運行時，如果使用代碼改變復選框的Value屬性值也會發(fā)生Click事件。

II、復選框運用實例 - 設置EXCEL選項

窗體及復選框屬性表如下：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmOption
主窗體	窗體	Caption	選項（多選）
網(wǎng)格線	復選框1	名稱	chkGridLines
網(wǎng)格線	復選框1	Caption	顯示網(wǎng)格線
行列標題	復選框2	名稱	chkHeadings
行列標題	復選框2	Caption	顯示行列標題
標尺	復選框3	名稱	chkRuler
標尺	復選框3	Caption	顯示標尺
水平滾動條	復選框4	名稱	chkHScrollBar
水平滾動條	復選框4	Caption	顯示水平滾動條
垂直滾動條	復選框5	名稱	chkVScrollBar
垂直滾動條	復選框5	Caption	顯示垂直滾動條
工作表標簽	復選框6	名稱	chkTabs
工作表標簽	復選框6	Caption	顯示工作表標簽
確定	命令按鈕1	名稱	cmdOK
		Caption	確定
		Default	True
放棄	命令按鈕2	名稱	cmdCancel
		Caption	放棄
		Cancel	True

按屬性表設計的復選框窗體效果圖如下：

鼠標雙擊用戶窗體進入【代碼】窗口，為窗體的Initialize（初始化）事件編寫代碼獲取EXCEL中的相關選項值，并使用該值初始化用戶窗體中的各復選框。代碼如下：

Private Sub UserForm_Initialize()
With ActiveWorkbook.Windows(1)
  chkDridLines.Value=.DisplayGridlines
  chkHeadings.Value=.DisplayHeadings
  chkRuler.Value=.DisplayRuler
  chkHScrollBar.Value=.DisplayHorizontalScrollBar
  chkVScrollBar.Value=.DisplayVerticalScrollBar
  chkTabs.Value=.DisplayWorkbookTabs
End With
End Sub

當用戶設置不同復選框的值后，單擊【確定】按鈕，即可以根據(jù)復選框中的值來修改EXCEL中的相關選項。代碼如下：

Private Sub cmdOK_Click()
With ActiveWorkbook.Windows(1)
  .DisplayGridlines=chkDridLines.Value
  .DisplayHeadings=chkHeadings.Value
  .DisplayRuler=chkRuler.Value
  .DisplayHorizontalScrollBar=chkHScrollBar.Value
  .DisplayVerticalScrollBar=chkVScrollBar.Value
  .DisplayWorkbookTabs=chkTabs.Value
End With
End Sub

窗體中【放棄】按鈕代碼如下：

Private Sub cmdCancel_Click()
Unload Me   '卸載窗體
End Sub

3、選項按鈕設計

選項按鈕控件即網(wǎng)頁或其它編程語言中的單選按鈕。通常選項按鈕是分組的，在一組選項按鈕中只有一個處于選中或按下狀態(tài)。

I、選項按鈕常用屬性和事件

除了共有的屬性外，選項按鈕有如下幾個特殊屬性。

GroupName：創(chuàng)建一個互相排斥的選項按鈕控件組；
Picture：為選項按鈕指定一個圖片；
Value：設置或返回選項按鈕的選擇狀態(tài)。當選中選項按鈕時，該屬性為True、反之為False；
TripleState：決定用戶能否為選項按鈕指定Null狀態(tài)。該屬性為True時可以在3個狀態(tài)（True、False、Null）中選擇,反之在2個狀態(tài)（True、False）中選擇。

和復選框相同，選項按鈕最常用的事件也是Click（鼠標點擊事件），用戶選中選項按鈕時其屬性Value值變?yōu)門rue。程序運行時，如果使用代碼改變選項按鈕的Value屬性值也會發(fā)生Click事件。

II、選項按鈕運用實例 - 設置窗體字號和顏色

向用戶窗體添加1個標簽控件、1個多行文字控件、2個框架控件和8個選項按鈕控件，并設置各控件的屬性值如下表：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmFontsize
主窗體	窗體	Caption	設置字號和顏色
提示信息	名稱	請輸入文本
接受用戶輸入文字	文字框	名稱	txtFont
接受用戶輸入文字	文字框	MultiLine	True
字號分組	框架1	Caption	字號
字號大小	選項按鈕1	名稱	opt10
		Caption	10
		GroupName	gName1
	選項按鈕2	名稱	opt15
		Caption	15
		GroupName	gName1
	選項按鈕3	名稱	opt20
		Caption	20
		GroupName	gName1
	選項按鈕4	名稱	opt25
		Caption	25
		GroupName	gName1
顏色分組	框架2	Caption	顏色
字號大小	選項按鈕5	名稱	optBlack
		Caption	黑色
		GroupName	gName2
	選項按鈕6	名稱	optRed
		Caption	紅色
		GroupName	gName2
	選項按鈕7	名稱	optGreen
		Caption	綠色
		GroupName	gName2
	選項按鈕8	名稱	optYellow
		Caption	黃色
		GroupName	gName2
設置字號和顏色	命令按鈕	名稱	cmdSetStyle
設置字號和顏色	命令按鈕	Caption	確認

按屬性表設計的選項按鈕窗體效果圖如下：

為【確定】命令按鈕Click事件編寫處理代碼如下：

Private Sub cmdSetStyle_Click()
Dim cc As Control
For Each cc In Me.Controls    '遍歷窗體控件
  'If UCase(TypeName(cc))="TEXTBOX" Then cc.Text="如果為文本框"
  If UCase(TypeName(cc))="OPTIONBUTTON" Then     '如果為選項按鈕   
    If cc.Value And cc.GroupName="gName1" Then frmFontsize.txtFont.Font.Size=CInt(cc.Caption)
    If cc.Value And cc.GroupName="gName2" Then    '按鈕選中且為第2組
      If cc.Caption="黑色" Then frmFontsize.txtFont.ForeColor=vbBlack
      If cc.Caption="紅色" Then frmFontsize.txtFont.ForeColor=vbRed
      If cc.Caption="綠色" Then frmFontsize.txtFont.ForeColor=vbGreen
      If cc.Caption="黃色" Then frmFontsize.txtFont.ForeColor=vbYellow
    End If
  End If
Next
End Sub

注：代碼遍歷窗體所有控件，并通過判斷屬性值設置文本框中字體和顏色

4、列表框設計

列表框主要用來顯示項目列表。當項目總數(shù)超過列表框控件高度時，列表框會自動添加垂直滾動條，用戶可以從列表框中選擇一項或多項數(shù)據(jù)選項。

I、列表框常用屬性

列表框顯示多行文本，并且每行文本是一個可以獨立處理的項。其特有屬性如下：

ColumnCount：設置列表框顯示的列數(shù)；
ColumnHeads：設置是否顯示列表框的列標題；
ColumnWidths：指定列表框各列的寬度；
List：獲取或設置列表框中列表項的內容（通過List(下標值)）；
ListCount：表示列表框中的列表項數(shù)量；
ListIndex：返回列表框中選中選項的序號；
MultiSelect：是否允許列表框進行多項；
Selected：表示列表框中各個列表項是否被選中，為數(shù)組。

注：當MultiSelect屬性設置為Extended或Simple，必須用列表框的Selected屬性確定選定條目

II、列表框常用方法

AddItem：增加列表項。一般格式，
[對象名].AddItem[項字符串][.索引值]
其中，項字符串用雙引號""界定，索引值從0開始；
RemoveItem：移除列表項。一般格式，
[對象名].RemoveItem[索引值]
其中，索引值是必須的，表示欲刪除哪一項；
Clear：清除列表中所有內容。

III、列表框運用實例 - 列表框間移動數(shù)據(jù)

向用戶窗體添加2個列表框控件、8個命令按鈕和2個標簽控件。設置各控件的屬性值如下表：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmList
主窗體	窗體	Caption	列表框示例
左側列表框	列表框1	名稱	lstLeft
右側列表框	列表框2	名稱	lstRight
右移列表框所有數(shù)據(jù)	命令按鈕1	名稱	cmdToRightAll
右移列表框所有數(shù)據(jù)	命令按鈕1	Caption	>>
右移列表框選中數(shù)據(jù)	命令按鈕2	名稱	cmdToRight
右移列表框選中數(shù)據(jù)	命令按鈕2	Caption	>
左移列表框所有數(shù)據(jù)	命令按鈕3	名稱	cmdToLeftAll
左移列表框所有數(shù)據(jù)	命令按鈕3	Caption	<<
左移列表框選中數(shù)據(jù)	命令按鈕4	名稱	cmdToLeft
左移列表框選中數(shù)據(jù)	命令按鈕4	Caption	<
添加數(shù)據(jù)	命令按鈕5	名稱	cmdAdd
添加數(shù)據(jù)	命令按鈕5	Caption	添加圖書
刪除左側列表框選中數(shù)據(jù)	命令按鈕6	名稱	cmdDel
刪除左側列表框選中數(shù)據(jù)	命令按鈕6	Caption	刪除圖書
清空兩個列表框	命令按鈕7	名稱	cmdClear
清空兩個列表框	命令按鈕7	Caption	清空
關閉	命令按鈕8	名稱	cmdClose
關閉	命令按鈕8	Caption	關閉

用戶窗體顯示效果如下：

在戶窗體的Initialize事件中編寫代碼用于從工作表添加數(shù)據(jù)到列表框。

Private Sub UserForm_Initialize()
Dim r As Range, i As Integer
With ActiveWorkbook.Worksheets("sheet1")
  i=.Range("A1").End(xlDown).Row            '已有數(shù)據(jù)行數(shù)
  Set r=.Range(Cells(2, 1), Cells(i, 1))    '獲取已有數(shù)據(jù)引用
End With
For i=1 To r.Rows.Count                     '添加數(shù)據(jù)到列表框
  lstLeft.AddItem r(i)
Next i
If lstLeft.ListCount >=1 Then
  cmdToRight.Enabled=True
  cmdToRightAll.Enabled=True
Else
  cmdToLeft.Enabled=False
  cmdToLeftAll.Enabled=False
End If
cmdToLeft.Enabled=False
cmdToLeftAll.Enabled=False
End Sub

在運行這段代碼前，先在工作表sheet1中錄入數(shù)據(jù)，如圖：

并運行代碼后效果如下圖：

點擊命令按鈕 >>（cmdToRightAll），將左側數(shù)據(jù)項全部移至右側列表框中。

Private Sub cmdToRightAll_Click()
Do While lstLeft.ListCount > 0        '循環(huán)處理所有數(shù)據(jù)項
  lstRight.AddItem lstLeft.List(0)    '添加列表框中的第1項
  lstLeft.RemoveItem 0                '刪除左側列表框第1項
Loop
If lstRight.ListCount > 0 Then
  cmdToLeft.Enabled=True
  cmdToLeftAll.Enabled=True
End If
cmdToRight.Enabled=False
cmdToRightAll.Enabled=False
End Sub

點擊命令按鈕 <<（cmdToLeftAll），將右側數(shù)據(jù)項全部移至左側列表框中。

Private Sub cmdToLeftAll_Click()
Do While lstRight.ListCount > 0
  lstLeft.AddItem lstRight.List(0)
  lstRight.RemoveItem 0
Loop
If lstLeft.ListCount > 0 Then
  cmdToRight.Enabled=True
  cmdToRightAll.Enabled=True
End If
cmdToLeft.Enabled=False
cmdToLeftAll.Enabled=False
End Sub

點擊命令按鈕 >（cmdToRight），將左側選中數(shù)據(jù)項移至右側列表框中。

Private Sub cmdToRight_Click()
If lstLeft.ListIndex >=0 Then
  lstRight.AddItem lstLeft.Text          '右側列表框增加新數(shù)據(jù)項
  lstLeft.RemoveItem lstLeft.ListIndex   '刪除左側列表框選中項
End If
If lstRight.ListCount > 0 Then
  cmdToLeft.Enabled=True
  cmdToLeftAll.Enabled=True
End If
If lstLeft.ListCount > 0 Then
  cmdToRight.Enabled=True
  cmdToRightAll.Enabled=True
Else
  cmdToRight.Enabled=False
  cmdToRightAll.Enabled=False
End If
End Sub

注：應先選中左側某數(shù)據(jù)項，然后再點擊單項右移按鈕

點擊命令按鈕 <（cmdToLeft），將右側選中數(shù)據(jù)項移至左側列表框中。

Private Sub cmdToLeft_Click()
If lstRight.ListIndex >=0 Then
  lstLeft.AddItem lstRight.Text            '左側列表框增加新數(shù)據(jù)項
  lstRight.RemoveItem lstRight.ListIndex   '刪除右側列表框選中項
End If
If lstLeft.ListCount > 0 Then
  cmdToRight.Enabled=True
  cmdToRightAll.Enabled=True
End If
If lstRight.ListCount > 0 Then
  cmdToLeft.Enabled=True
  cmdToLeftAll.Enabled=True
Else
  cmdToLeft.Enabled=False
  cmdToLeftAll.Enabled=False
End If
End Sub

注：應先選中右側某數(shù)據(jù)項，然后再點擊單項左移按鈕

點擊命令按鈕【添加圖書】，將用戶通過對話框輸入的書名添加到左側列表框中。

Private Sub cmdAdd_Click()
Dim str As String
str=InputBox("請輸入向列表框添加的新書名：")
If Trim(str) <> "" Then lstLeft.AddItem str
End Sub

點擊命令按鈕【刪除圖書】，刪除左側對話框選中的書名。

Private Sub cmdDel_Click()
If lstLeft.ListIndex >=0 Then
 lstLeft.RemoveItem lstLeft.ListIndex
End If
End Sub

點擊命令按鈕【清空】，刪除兩側對話框中的書名。

Private Sub cmdDel_Click()
If lstLeft.ListIndex >=0 Then
 lstLeft.RemoveItem lstLeft.ListIndex
End If
End Sub

點擊命令按鈕【關閉】，退出窗體。

Private Sub cmdClose_Click()
Unload frmList
End Sub

5、復合框設計

復合框將文本框和列表框的特性結合在一起，即可以在該控件中的文本框部分輸入文字信息，也可以在控件的列表框部分選擇某項信息。

I、復合框常用屬性

ListRows：指定復合框的下拉列表中顯示的最大行數(shù)。如果列表中的題目數(shù)超出了ListRows屬性的值，則在復合框的列表框部分的右邊出現(xiàn)滾動條；
Style：該屬性設置復合框的兩種形式。FmStyleDropDownCombo下拉式復合框、值為0，它可可輸入編輯區(qū)和下拉式列表組成，用戶即可由編輯區(qū)輸入內容，也從下拉列表中選擇信息。FmStyleDropDownList下拉式列表框、值為2，用戶只能從列表中選擇信息；
Text：用于返回在列表中選擇的文本或在編輯區(qū)中輸入的文本，也可在窗體設計時設定。

II、復合框常用事件和方法

和列表框類似，復合框也使用AddItem、RemoveItem等方法。根據(jù)復合框的類型不同，復合框所響應的事件也有所不同。當復合框的Style屬性值為0或2時，能夠響應Click和Dropdown事件，當tyle屬性值為0時還可以接收Change事件。

III、復合框運用實例 - 電腦配置信息

向用戶窗體添加5個標簽控件、1個文本框控件、4個復合框控件和2個命令按鈕控件。設置各控件的屬性值如下表：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmComputer
主窗體	窗體	Caption	微機配置
顯示配置	文本框1	名稱	txtComputer
顯示配置	文本框1	MultiLine	True
CPU列表	復框1	名稱	cmbCPU
內存列表	復合框2	名稱	cmbMem
硬盤列表	復合框3	名稱	cmbHDD
顯示器列表表	復合框4	名稱	cmbDisp
確定	命令按鈕1	名稱	cmdAdd
		Caption	確定
		Defult	True
關閉	命令按鈕2	名稱	cmdClose
		Caption	關閉
		Cancel	True

用戶窗體顯示效果如下：

在戶窗體的Initialize事件中編寫代碼用于從工作表添加數(shù)據(jù)到列表框。

Private Sub UserForm_Initialize()
With cmbCPU
  .AddItem "QX6850 3.0GHz"
  .AddItem "QX6800 3.93GHz"
  .AddItem "QX6700 2.66GHz"
  .AddItem "X7800 2.6GHz"
  .AddItem "QX6450 2.6GHz"
  .AddItem "QX6250 3.4GHz"
  .AddItem "QX2850 3.6GHz"
  .AddItem "QX5870 3.8GHz"
  .AddItem "QX9150 3.23GHz"
  .AddItem "QX4250 3.13GHz"
  .Text=.List(0)
End With
With cmbMem
  .AddItem "512M"
  .AddItem "1G"
  .AddItem "2G"
  .AddItem "3G"
  .AddItem "4G"
  .Text=.List(0)
End With
With cmbHDD
  .AddItem "80G"
  .AddItem "120G"
  .AddItem "160G"
  .AddItem "250G"
  .Text=.List(0)
End With
With cmbDisp
  .AddItem "CTR 19寸"
  .AddItem "CTR 21寸"
  .AddItem "LCD 17寸"
  .AddItem "LCD 19寸"
  .AddItem "LCD 22寸"
  .Text=.List(0)
End With
End Sub

點擊【確定】按鈕，可在左側文本框中顯示計算機配置列表。該按鈕Click事件代碼如下：

Private Sub cmdAdd_Click()
Dim str As String
str="CPU: " & cmbCPU.Value & Chr(13)    'Chr(13)表示換行
str=str & "內存: " & cmbMem.Value & Chr(13)
str=str & "硬盤: " & cmbHDD.Value & Chr(13)
str=str & "顯示器: " & cmbDisp.Value
txtComputer.Value=str
End Sub

6、滾動條設計

滾動條分為橫向和縱向滾動條，它是可以放在窗體中的獨立控件。通過將已放置在窗體中滾動條進行水平或垂直拖動來調整其它對象的屬性值。

I、滾動條常用屬性

LargeChange：當用戶點擊滾動條區(qū)域時返回Value屬性值的改變量；
SmallChange：當用戶點擊滾動條箭頭時返回Value屬性值的改變量；
Max：當滾動框處于底部或最右位置時，返回滾動條Value屬性值的的最大設置值；
Mim：當滾動框處于頂部或最左位置時，返回滾動條Value屬性值的的最小設置值；
Value：滾動條的當前位置，其返回值介于Min和Max之間，包括這兩個值。Max為32767、Min為0。

注：Min和Max得屬性值范圍是?32768～32767?32768～32767，默認值

II、滾動條常用事件

Change：滾動滾動框或通過代碼改變Value值時觸發(fā)該事件；
Scroll：滾動框被重新定位，或按水平或垂直方向滾動時發(fā)生該事件。

注：Change是滾動完成后觸發(fā)，Scroll是在滾動過程中觸發(fā)

III、滾動條運用實例 - 顯示工作表比例

向用戶窗體添加2個框架框控件、3個滾動條控件、1個文本框控件和1個命令按鈕控件。設置各控件的屬性值如下表：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmZoom
主窗體	窗體	Caption	顯示比例
縮放工作表	框架1	名稱	Frame1
	框架1	Caption	縮放工作表
	滾動條1	名稱	scbZoom
		Max	400
		Min	10
		Value	100
	文本框1	名稱	txtZoom
滾動工作表	框架2	名稱	Frame2
	滾動條1	名稱	scbH
	滾動條2	名稱	scbV
關閉	命令按鈕2	名稱	cmdClose
		Caption	關閉
		Cancel	True

用戶窗體顯示效果如下：

在戶窗體的Initialize事件中編寫代碼設置滾動條的初始值。

Private Sub UserForm_Initialize()
txtZoom.Value=ActiveWindow.Zoom            '文本框顯示當前比例
With scbZoom
  .Min=10
  .Max=400
  .SmallChange=1
  .LargeChange=10
  .Value=ActiveWindow.Zoom
End With
With scbH
  .Min=1
  .Max=ActiveSheet.Cells.Columns.Count     '最大列數(shù)
  .SmallChange=1
  .LargeChange=10
  .Value=ActiveWindow.ScrollColumn         '當前列
End With
With scbV
  .Min=1
  .Max=ActiveSheet.Cells.Rows.Count        '最大行數(shù)
  .SmallChange=1
  .LargeChange=10
  .Value=ActiveWindow.ScrollRow            '當前行
End With
End Sub

為縮放工作表框架中滾動條的Change事件編寫代碼對當前窗口進行縮放。

Private Sub scbZoom_Change()
With ActiveWindow
  .Zoom=scbZoom.Value       '用滾動條的值設置當前窗口的縮放
  txtZoom.Text=.Zoom        '設置文本框的值
  .ScrollColumn=scbH.Value  '最左邊的列號
  .ScrollRow=scbV.Value     '最頂端的行號
End With
End Sub

為窗體右側滾動工作表框架中水平滾動條的Change事件編寫代碼。

Private Sub scbH_Change()
ActiveWindow.ScrollColumn=scbH.Value
End Sub

7、旋轉按鈕設計

旋轉按鈕控件主要用來輸入一定范圍內的整數(shù)值，一般將旋轉按鈕和文本框結合起來使用。點擊旋轉按鈕只會更改旋轉按鈕的值，還需要編寫代碼修改與之結合的文本框的值。

I、旋轉按鈕常用屬性

SmallChange：點擊旋轉按鈕箭頭時的改變量；
Max：旋轉按鈕上限值；
Mim：旋轉按鈕上限值；
Value：旋轉按鈕當前值。

II、旋轉按鈕常用事件

旋轉按鈕控件的Value屬性值改變時，將觸發(fā)Change事件，一般在該事件中編寫代碼來控制Value屬性值，并應用的與之關聯(lián)的文本框中。另外，當點擊旋轉按鈕的上箭頭（↑）和下箭頭（↓ ）時觸發(fā)SpinUp和SpinDown事件。

III、旋轉按鈕運用 - 修改日期和時間

向用戶窗體添加8個標簽控件、3個滾動條控件、6個文本框控件、6個旋轉按鈕控件和2個命令按鈕控件。設置各控件的屬性值如下表：

用途	對象	屬性	屬性值
主窗體	窗體	名稱	frmDate
主窗體	窗體	Caption	修改日期和時間
顯示年	文本框1	名稱	txtYear
顯示年	文本框1	MaxLength	4
顯示月	文本框2	名稱	txtMonth
顯示月	文本框2	MaxLength	2
顯示日	文本框3	名稱	txtDay
顯示日	文本框3	MaxLength	2
顯示時	文本框4	名稱	txtHour
顯示時	文本框4	MaxLength	2
顯示分	文本框5	名稱	txtMinute
顯示分	文本框5	MaxLength	2
顯示秒	文本框6	名稱	txtSecond
顯示秒	文本框6	MaxLength	2
調整年	旋轉按鈕1	名稱	spbYear
		Min	1900
		Max	2500
調整月	旋轉按鈕2	名稱	spbMonth
		Min	1
		Max	12
調整日	旋轉按鈕3	名稱	spbDay
		Min	1
		Max	31
調整時	旋轉按鈕4	名稱	spbHour
		Min	0
		Max	23
調整分	旋轉按鈕5	名稱	spbMinute
		Min	0
		Max	59
調整秒	旋轉按鈕6	名稱	spbSecond
		Min	0
		Max	59
關閉	命令按鈕1	名稱	cmdQuit
關閉	命令按鈕1	Cancel	True

用戶窗體顯示效果如下：

在戶窗體的Initialize事件中編寫代碼獲取系統(tǒng)當前日期和時間，然后分別顯示在相應文本框中，并根據(jù)當前的值初始化各旋轉按鈕的值。

Private Sub UserForm_Initialize()
txtYear.Value=Year(Date)
txtMonth.Value=Month(Date)
txtDay.Value=Day(Date)
txtHour.Value=Hour(Time)
txtMinute.Value=Minute(Time)
txtSecond.Value=Second(Time)
End Sub

在日期設置過程中，需要為反映天數(shù)的文本框（txtDay）設置最大天數(shù)。

對文本框（txtDay）的Change事件編程設置最大天數(shù)。

Private Sub txtDay_Change()
Dim dTemp As Date
dTemp=DateSerial(txtYear.Value, txtMonth.Value + 1, 1)
spbDay.Max=Day(dTemp - 1)
MsgBox spbDay.Max
End Sub

點擊旋轉按鈕的上箭頭（↑）觸發(fā)SpinUp事件代碼。

Private Sub spbYear_SpinUp()
txtYear.Value=txtYear.Value + spbYear.SmallChange
End Sub

點擊旋轉按鈕的下箭頭（↓）觸發(fā)SpinDown事件代碼。

Private Sub spbYear_SpinDown()
txtYear.Value=txtYear.Value - spbYear.SmallChange
End Sub

注：窗體中其它旋轉按鈕處理代碼相同，這里不再一一列出

8、多頁設計

多頁控件可以中窗體中顯示一系列不同的頁面，在處理可以劃分為不同類別的大量信息時很有用。利用多頁控件能夠將相關數(shù)據(jù)組織在一起顯示出來。

I、多頁控件的常用屬性

多頁控件對象為MultiPage，在該控件中還有一個子對象Page。在窗體中點擊多頁控件對象時，將選中當前的Page對象。Page對象類似一個獨立的窗體，每個Page對象都包括自己一套獨立的控件。

A. MultiPage對象屬性

MultiRow：設置控件是否有多行標簽，當MultiRow屬性值為True時標簽分行顯示，為False時，標簽將在一行中顯示，右側將出現(xiàn)左右滾動箭頭；
Value：標識當前激活頁，0表示第1頁。通過該屬性可獲得當前激活頁，也可通過給Value屬性賦值來激活對應頁。

B. Page對象屬性

ScrollBars：設置頁面是否有垂直或水平滾動條（取值為FmScrollBarsNone：不顯示滾動條、FmScrollBarsHorizontal：顯示水平滾動條、FmScrollBarsVertical：顯示垂直滾動條、FmScrollBarsBoth：同時顯示垂直和水平滾動條）；
TransitionEffect：設置從一頁轉換成另一頁時所用的可視效果；
TransitionPeriod：以毫秒為單位定義一個頁面過渡效果的歷時長度。

II、多頁控件的常用事件

多頁控件支持Click等事件，其常用事件是Change事件。當用戶選擇不同頁（改變Value屬性值）時觸發(fā)Change事件，此時Value屬值為新激活頁的序號。

III、多頁運用 - 報名登記

向用戶窗體添加1個多頁控件和2個命令按鈕（這里命令按鈕屬性設置從略），將控件分為2頁，每頁屬性分別進行設置。注意，如果需要2頁以上的多頁時，用鼠標右鍵登記多頁控件上方（多頁標簽右邊無標簽部分）。

第1頁【基本信息】頁包括3個文本框和2個單選按鈕控件：

用途	對象	屬性	屬性值
多頁	分頁1	名稱	Page1
多頁	分頁1	Caption	基本信息
姓名	文本框1	名稱	txtName
性別（男性）	單選按鈕1	名稱	optMan
性別（男性）	單選按鈕1	Value	True
性別（女性）	單選按鈕2	名稱	optWoman
性別（女性）	單選按鈕2	Value	False
年齡	文本框2	名稱	txtAge
住址	文本框3	名稱	txtAddress

第2頁【家庭信息】頁包括4個文本框控件：

用途	對象	屬性	屬性值
多頁	分頁2	名稱	Page2
多頁	分頁2	Caption	基本信息
父親	文本框4	名稱	txtFName
電話	文本框5	名稱	txtFPhone
單位	文本框6	名稱	txtFUnit
住址	文本框7	名稱	txtFAddress

注：多頁控件不同頁面中控件不能同名

用戶窗體顯示效果如下：

點擊窗體【保存】按鈕，分別從多頁控件各個分頁中的控件獲得用戶數(shù)據(jù)，然后將數(shù)據(jù)保存在指定工作表中。

Private Sub cmdSave_Click()
Dim r As Integer
If txtName.Value="" Then
  MsgBox "請輸入學生姓名！", vbCritical + vbOKOnly
  Exit Sub
End If
With Worksheets("sheet2")
  r=.UsedRange.Rows.Count + 1 '定位添加數(shù)據(jù)的行
  .Cells(r, 1)=txtName.Value
  If optMan.Value Then
    .Cells(r, 2)="男"
  Else
    .Cells(r, 2)="女"
  End If
  .Cells(r, 3)=txtAge.Value
  .Cells(r, 4)=txtAddress.Value
  .Cells(r, 5)=txtFName.Value
  .Cells(r, 6)=txtFPhone.Value
  .Cells(r, 7)=txtFUnit.Value
  .Cells(r, 8)=txtFAddress.Value
End With
End Sub

注：在向工作表錄入數(shù)據(jù)前，可按分頁標簽提示在sheet2第1行輸入標題

創(chuàng)建自定義窗體對話框（用戶界面設計）是運用VBA EXCEL設計數(shù)據(jù)管理系統(tǒng)的基礎，是用戶開發(fā)數(shù)據(jù)管理系統(tǒng)的入口和控制中樞。

介
HTML 是什么？
htyper text markup language 即超文本標記語言。
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言。
什么是標簽:
是由一對尖括號包裹的單詞構成例如: <html> *所有標簽中的單詞不可能以數(shù)字開頭.
標簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標簽分為兩部分: 開始標簽<a> 和結束標簽</a>. 兩個標簽之間的部分我們叫做標簽體.
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/><hr/><input/><img/>
標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標簽的屬性:
通常是以鍵值對形式出現(xiàn)的. 例如 name="nick"
屬性只能出現(xiàn)在開始標簽或自閉和標簽中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="nick"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
HTML5基本結構:
將HTML4中的DTD定義為如下結構即可，其他不變。
<!DOCTYPE HTML>
HTML5支持的兩種指定頁面使用的字符集的方式:
使用Content-Type指定字符集
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
直接使用charset指定字符集
<meta charset="UTF-8">
<head> 標簽
<title>
<title>Title</title>
<base/>
標簽為頁面上的所有鏈接規(guī)定默認地址或默認目標。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/"/>
<base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/suoning/">nick blogs</a>
</body>
</html>
# 上面這段代碼中，<img>標簽的src屬性是一個相對路徑，因為<head>中通過base標簽設置了鏈接的默認地址，
所以img的src實際的地址是“http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
同樣的，<a>中只是指定了href，并未指定target屬性，所以也會使用base中設置的target屬性的值。
<link/>
引用外部文檔，常見于引用外部樣式。重要屬性有三個：rel、href、type。
rel 規(guī)定文檔與被鏈接文檔之間的關系。
rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是為了提高網(wǎng)頁訪問速度。使用場景：在一個網(wǎng)頁頻繁使用其他域名資源時。
rel="shortcut icon"或rel="icon" 在收藏和標題欄上用于顯示的圖標。示例：<link rel="icon" href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，為了兼容IE，圖片文件采用ico格式。
rel="stylesheet" 引用外部樣式表。
rel="nofollow" 用于指示搜索引擎不要追蹤（爬蟲抓取），減少垃圾鏈接。用于<a>標簽，使用場景：網(wǎng)頁不被信任或是不希望唄搜索引擎錄入的網(wǎng)站。
href 資源的路徑（相對路徑/絕對路徑）。
type 規(guī)定被連接文檔的MIME類型，用于明確文件的打開方式。例如：.ico文件 p_w_picpath/x-icon。
<meta/>
定義關于HTML文檔的元數(shù)據(jù)。重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯(lián)到http頭部。
Content-Type（瀏覽器接受的文檔類型，一般是text/html）
refresh（網(wǎng)頁刷新，以秒為單位）
expires（設定網(wǎng)頁到期時間，一旦過期，必須到服務器上重傳）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>
name 把content屬性關聯(lián)到一個名稱。
keywords（搜索關鍵字，用于搜索引擎抓取信息的顯示）
description（搜索到網(wǎng)站后顯示的網(wǎng)頁內容簡描述）
author（站點制作者信息）
generator（用以說明生成工具）
name也可以根據(jù)特定的功能自定義，在新浪網(wǎng)中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">
content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。
<body> 標簽
1、塊級標簽和內聯(lián)標簽
塊級標簽：<p><h1><table><ol><ul><form><div>
內聯(lián)標簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯(lián)元素和其他塊元素
inline（內聯(lián)）元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯(lián)元素只能容納文本或者其他內聯(lián)元素
對行內元素，需要注意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
2、基本標簽
<h1>~<h6> 標題標簽.
<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.
　　　　style="text-indent: 2em"可以設置樣式為首行縮進兩個字符。
　　　　<blockquote></blockquote>可以用來設置整個段落的縮進。
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標和下角標.
<br>:換行.
<hr>:水平線.
<div>
塊級標簽。塊級標簽常用于布局，行級標簽常用語顯示內容。
　　 div的顯示通常使用id或class來標識。id為唯一的標簽標識，class為標簽的類標識。
　　 div的大小是由內容來決定的，默認情況下，高度由內容的高度決定，寬度適應屏幕。
　　可以容納其他元素，是一個容器。
<span>
3、特殊符號
　　> >
　　< <
　　空格
　 " 引號
　　© 版權符號
特殊符號符號碼
" " ;
& & ;
< < ;
> > ;
© ;
® ;
± ± ;
× × ;
§ § ;
¢ ;
¥ ;
· · ;
&euro ;
£ ;
&trade ;

4、<a> 超鏈接標簽(錨標簽)
重要屬性有三個：href、target、name
href 超鏈接地址：可以是Web上任意資源，包括圖片，網(wǎng)頁，樣式，腳本文件等。href="#"時，表示被鏈接頁面就是當前頁面。
target 文檔打開時要顯示的目標位置，屬性值一般有：_blank（新窗口中打開）、_self（默認，在超鏈接所在的容器中打開）、_parent（在超鏈接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。
name 錨記名稱。作用：跳轉到文檔的某個地方。返回首頁。
# 跳轉網(wǎng)頁
<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>
# 跳轉錨記書簽名稱
<a name="top"><h3>Top！</h3></a>
<div style="height: 800px"></div>
<a href="#top">top</a>
1.標簽最簡式
<a href="mailto:xxx@xx.com">郵件聯(lián)系</a>
2.標簽幫你填抄送地址
<a href="mailto:xxx@xx.com?cc=xxxx@xx.com">郵件聯(lián)系</a>
3.標簽幫你填暗送地址
<a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">郵件聯(lián)系</a>
4.暗,抄
<a href="xxxxx@xx.com">郵件聯(lián)系</a>
5.標簽幫你填主題
<a href="mailto:xxx@xx.com?subject=這是主題">郵件聯(lián)系</a>
6.填郵件內容
<a href="mailto:xxx@xx.com?body=這是內容">郵件聯(lián)系</a>
7.多址發(fā)送
<a href="mailto:xxx@xx.com,xxxx@xx.com">郵件聯(lián)系</a>
# http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這里給我發(fā)消息" title="點擊這里給我發(fā)消息"/></a>
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
# 更多圖片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13
5、<img> 圖形標簽
行級標簽，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 鼠標懸浮在圖片上的文字。
alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網(wǎng)資源，則不會顯示要替換的文字。如果使用的是本網(wǎng)站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，并保留圖片設置的寬高結構。
align 圖片周圍文字的垂直對齊情況。常用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>
6、列表標簽　
<ul> :無序列表標簽
<li>:列表中的每一項.
<ol> :有序列表標簽
<li>:列表中的每一項.
<li>主要的屬性有：type、value兩個:
type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
value表示序號值從幾開始。
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
<ur>
<li type="circle">A</li>
<li type="1">B</li>
<li type="1">C</li>
</ur>
<ol>
<li value="3">3</li>
<li>4</li>
</ol>
<dl>
<dt><i>標題</i></dt>
<dd>第一項</dd>
<dd>第二項</dd>
<dd>第三項</dd>
</dl>
　　
7、<table> 表格標簽
<table border="1">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
</tr>
</tbody>
</table>
<table> 表格標簽
border:（表格邊框）
align（水平對齊方式）
bgcolor（背景顏色）
cellpadding（內邊距，單元格與內容之間的距離）
cellspacing（外邊距，單元格的間距，設置為0時，表格變?yōu)閷嵕€表格）
width（表格的寬度，可以用%或者像素，最好通過css來設置長寬）
<caption> 表格的標題
<tr> 表格的數(shù)據(jù)行，table row
<th> 表格的表頭名稱，與<td>不同在于文字采用加粗居中的形式顯示，table head cell
<td> 單元格，用來顯示表格內容，table data cell
<thead> 表格頭部，使結構更加分明
<tbody> 表格主體部分，使結構更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合并單元格），作用在th或者td上
<table>
<caption>xxxxxxxxxx</caption>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>女神</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
<td>18</td>
<td>可可西</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
<td>21</td>
<td>nick!!!</td>
</tr>
</tbody>
</table>
8、<form>表單標簽
表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中。
屬性：action、method、enctype
action 表單要提交的地址，用于處理表單的內容（一般是提交字典到后臺的一個接口，這個接口是java寫成的，提交到這個接口后后臺就知道如何處理這些數(shù)據(jù)了）。
method 提交的方法，默認是get方式提交。
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
enctype 對表單數(shù)據(jù)進行編碼，默認都是要編碼的。格式為：application/x-www-form-urlencoded（表單默認的編碼格式，表單發(fā)送前對所有字符進行編碼。編碼規(guī)則：空格轉換為“+”號，特殊符號轉換為ASC HEX值）。提交普通的文本內容到服務器就可以采用這種默認的編碼方式。當你需要提交的是一個文件時，編碼就需要采用另一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換為“+”號，但是不對特殊字符進行編碼）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query">
<input type="submit" value="搜狗搜索">
</form>
</body>
</html>
表單元素
<input> type 屬性：
text 文本框輸入（默認text文本框類型）。
autocomplete（自動完成輸入的內容，要求表單元素要有name屬性才有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）
disabled（設置或者獲取控件的狀態(tài)，默認是false即可用，等于true時不可用，不能輸入內容）
　　　　password 密碼框。（以下屬性text和password共有）
size（指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字符為單位，對于其他元素，寬度以像素為單位）
maxlength（type為text或password時，表示輸入的最大字符數(shù)），有利于防止sql的注入攻擊
readonly 只讀.　
　　　　　　placeholder 框內預置內容(灰色)，寫上內容時才消失
radio 單選按鈕。屬性：
name（將name的值設置為相同值，才表示一組數(shù)據(jù)，才能實現(xiàn)單選功能）
value（必須要寫，提交到服務器的key值，實際開發(fā)過程中value一般是編號）
checked（是否被選中的狀態(tài)）
checkbox 復選框。
name（名字一定要一樣一樣的，才表示是一組數(shù)據(jù)，添加到同一value值列表提交到服務器）
value（必須要寫，提交到服務器的key值，實際開發(fā)過程中value一般是編號）
checked（是否被選中的狀態(tài)）
file 文件域，上傳文件（不同的瀏覽器表現(xiàn)形式不同）
　　　　submit 提交按鈕。用于提交表單。
　　　　reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態(tài)。
button 普通按鈕。一般結合javascript使用。
　　　　p_w_picpath 圖片按鈕，用來提交表單，與submit是一樣的效果。
src（圖片路徑）
　　　　hidden 隱藏字段。
value（隱藏的內容）
　　　　color 顏色標簽。value指定顏色值（采用#十六進制數(shù)表示）。
　　　　date 日期。value值指定默認的日期，格式為****-**-**（年月日）。
　　　　datetime-local 顯示本地時間，value值指定默認的時間，格式為2016-05-20T11:10:10（年月日T時分秒）。
　　　　number 數(shù)字向上或者向下滑動。可以填數(shù)字然后向上或者向下選擇不同的值。
　　　　range 滑動標簽。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。
　　　　week 每年的周數(shù)。value指定哪一年第幾周，格式為2016-W25（2016年第25周）。
<textarea> 文本域標簽。默認表現(xiàn)形式是可以輸入很多行文本的文本框。
name （表單提交項的key）
　　　　cols（設置文本域寬度）
rows（設置文本域高度，即行數(shù)）
<select> 下拉框標簽。使用時要結合<option>子標簽一起使用。
name:表單提交項的key
size：選項個數(shù)
multiple：多選
<option> 下拉選中的每一項
value（表單提交項的值）
selected（selected下拉選默認被選中）
<optgroup>為每一項加上分組
<label> 把元素與文本結合起來
友好設計：不只是選中復選框才能選中并打鉤，要求點擊對應的文字也能選中該復選框。
這種情況下要用到<label>標簽的for屬性（設置或獲取給定標簽對象指定到的對象，值=另一個元素的id號即可）
<label for="name">姓名</label>
<input id="name" type="text">
<fieldset> 對表單中的相關元素進行分組
<fieldset>
<legend>溫馨提示</legend>
<div align="middle">不要忘記點贊哦==</div>
</fieldset>
value: 表單提交項的值
對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "p_w_picpath" - 定義與輸入相關聯(lián)的值
框架
<frameset> 框架
用來劃分窗體，不能放在<body>中，否則沒有效果。
cols （縱向分割頁面。其數(shù)值表示方法有三種：“30%、30（或者30px）、*”；數(shù)值的個數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開。“30%”表示該框架區(qū)域占全部瀏覽器頁面區(qū)域的30%；“30”表示該區(qū)域橫向寬度為30像素；“*”表示該區(qū)域占用余下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三部分，左面部分占頁面30%，中間橫向寬度為200像素，頁面余下的作為右面部分。）
rows（橫向分割頁面。屬性和cols一樣）
frameborder（設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
border（框架之間的距離，一般設置為0）
bordercolor（邊框的顏色）
framespacing（設置框架與框架間的保留的空白距離）
<frameset cols="40%,*,*"> 第一個框架占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
<frameset cols="*,*,*,*"> 瀏覽器窗口等分為四部分。
<iframe> 框架
元素會創(chuàng)建包含另外一個文檔的內聯(lián)框架（即行內框架）
name （設置框架名稱。此為必須設置的屬性）
src （設置此框架要顯示的網(wǎng)頁名稱或路徑。此為必須設置的屬性）
scrolling （設置是否要顯示滾動條。設定值為auto, yes, no）
bordercolor （設置框架的邊框顏色）
frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
noresize （設置框架大小是否能手動調節(jié)）
marginwidth （設置框架邊界和其中內容之間的寬度）
marginhight （設置框架邊界和其中內容之間的高度）
width（設置框架寬度）
height （設置框架高度）

tml標簽<

<marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=’left’></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數(shù)

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定滾動速度

<marquee scrolldelay=300>...</marquee>設定卷動時間

<marquee onmouseover="this.stop()">...</marquee>鼠標經(jīng)過上面時停止?jié)L動

<marquee onmouseover="this.start()">...</marquee>鼠標離開時開始滾動

<!>字體效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調) （同上效果略同）

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style=’font-size:100 px’>...</font>無限增大

區(qū)斷標記

<hr>水平線

<hr size=’9’>水平線(設定大小)

<hr width=’80%’>水平線(設定寬度)

<hr color=’ff0000’>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target=’_blank’></a>外部連結(另開新視窗)

<a href=位址 target=’_top’></a>外部連結(全視窗連結)

<a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結)

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=’180’>設定圖片寬度

<img src=圖片位址 height=’30’>設定圖片高度

<img src=圖片位址 alt=’提示文字’>設定圖片提示文字

<img src=圖片位址’ border=’1’>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

屬性：

cols 垂直切割窗口（如左右分割兩個窗口）接受整數(shù)值，百分數(shù)，*（*代表占用余下空間）數(shù)值的個數(shù)代表分成的部分數(shù)目，要以逗號分隔。例：cols="30,*,50%"可以切成三個視窗，第一部分是30像素（pixels）為絕對分割，第二部分是當分配完第一和第三視圖后剩下的空間，第三部分則占整個窗口的50%寬度，為相對分割。

rows 就是橫向切割，將窗口上下分開，數(shù)值設置同上。

以上兩屬性盡量不要在同一個<frameset>標記中，因為王井（netscape）不支持，盡量采用多重分割。

frameborder 設置框架的邊框，其值有0不要邊框，1要邊框。

border 設置框架邊框厚度

framespacing 表示框架與框架間保留空白的距離

frame 元素（單標簽）

語法格式：

屬性：

name 框架名稱，指定框架來做連接的目標窗口。

src 框架中要顯示的網(wǎng)頁文當url地址，每個個框架要對應一個html文擋。

scrolling 是否顯示滾動條，yes/no,auto是自動。

noresize 設置不讓使用者改變這個框架的大小，

noframe元素

指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息

語法格式：

......

</noframe>

表單<form></form>

語法格式：

....

</form>

method有兩種提交方式get,post

action 是指明處理該表單的程序位置，這樣表單所填的資料才能傳給cgi做處里，可設定此參數(shù)為action="mailto:lwr8494@163.com" 這樣此表單所填的資料將會發(fā)送到這個郵箱地址。

method 是指傳送信息給cgi等網(wǎng)絡程序的方式。可選post方法， get方法，post方法容許傳送大量信息。get方法只接受低于1k的信息。

申請表單用的是post搜索引擎用的是get

<! - - ... - -> 注解

<A HREF TARGET> 指定超連結的分割視窗

<A HREF=#錨的名稱> 指定錨名稱的超連結

<A HREF> 指定超連結

<A NAME=錨的名稱> 被連結點的名稱

<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

<B> 粗體字

<BASE TARGET> 指定超連結的分割視窗

<BASEFONT SIZE> 更改預設字形大小

<BGSOUND SRC> 加入背景音樂

<BIG> 顯示大字體

<BLINK> 閃爍的文字

<BODY TEXT LINK VLINK> 設定文字顏色

<BODY> 顯示本文

<BR> 換行

<CAPTION ALIGN> 設定表格標題位置

<CAPTION>...</CAPTION> 為表格加上標題

<CENTER> 向中對齊

<CITE>...<CITE> 用於引經(jīng)據(jù)典的文字

<CODE>...</CODE> 用於列出一段程式碼

<COMMENT>...</COMMENT> 加上注解

<DD> 設定定義列表的項目解說

<DFN>...</DFN> 顯示"定義"文字

<DIR>...</DIR> 列表文字標簽

<DL>...</DL> 設定定義列表的標簽

<DT> 設定定義列表的項目

<EM> 強調之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 設定字體大小

<FORM ACTION> 設定戶動式表單的處理方式

<FORM METHOD> 設定戶動式表單之資料傳送方式

<FRame MARGINHEIGHT> 設定視窗的上下邊界

<FRame MARGINWIDTH> 設定視窗的左右邊界

<FRame NAME> 為分割視窗命名

<FRame NORESIZE> 鎖住分割視窗的大小

<FRame SCROLLING> 設定分割視窗的卷軸

<FRame SRC> 將HTML檔加入視窗

<FRameSET COLS> 將視窗分割成左右的子視窗

<FRameSET ROWS> 將視窗分割成上下的子視窗

<FRameSET>...</FRameSET> 劃分分割視窗

<H1>~<H6> 設定文字大小

<HEAD> 標示文件資訊

<HR> 加上分格線

<HTML> 文件的開始與結束

<I> 斜體字

<IMG ALIGN> 調整圖形影像的位置

<IMG ALT> 為你的圖形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入圖片并預設圖形大小

<IMG HSPACE> 插入圖片并預設圖形的左右邊界

<IMG LOWSRC> 預載圖片功能

<IMG SRC BORDER> 設定圖片邊界

<IMG SRC> 插入圖片

<IMG VSPACE> 插入圖片并預設圖形的上下邊界

<INPUT TYPE NAME value> 在表單中加入輸入欄位

<ISINDEX> 定義查詢用表單

<KBD>...</KBD> 表示使用者輸入文字

<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )

<MARQUEE> 跑馬燈效果

<MENU>...</MENU> 條列文字標簽

<MULTIPLE> 可同時選擇多項的列表欄

<NOFRame> 定義不出現(xiàn)分割視窗的文字

<OL>...</OL> 有序號的列表

<OPTION> 定義表單中列表欄的項目

<P ALIGN> 設定對齊方向

<P> 分段

<PERSON>...</PERSON> 顯示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select > 在表單中定義列表欄

<SMALL> 顯示小字體

<STRIKE> 文字加橫線

<STRONG> 用於加強語氣

<SUB> 下標字

<SUP> 上標字

<TABLE BORDER=n> 調整表格的寬線高度

<TABLE CELLPADDING> 調整資料欄位之邊界

<TABLE CELLSPACING> 調整表格線的寬度

<TABLE HEIGHT> 調整表格的高度

<TABLE WIDTH> 調整表格的寬度

<TABLE>...</TABLE> 產(chǎn)生表格的標簽

<TD ALIGN> 調整表格欄位之左右對齊

<TD BGCOLOR> 設定表格欄位之背景顏色

<TD COLSPAN ROWSPAN> 表格欄位的合并

<TD NOWRAP> 設定表格欄位不換行

<TD VALIGN> 調整表格欄位之上下對齊

<TD WIDTH> 調整表格欄位寬度

<TD>...</TD> 定義表格的資料欄位

<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄

<TEXTAREA WRAP> 決定文字輸入欄是自動否換行

<TH>...</TH> 定義表格的標頭欄位

<TITLE> 文件標題

<TR>...</TR> 定義表格美一行

<TT> 打字機字體

<U> 文字加底線

<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數(shù)

BlockQuotc文本縮進

表示顏色的有三種方式；

1，16進制顏色代碼

語法：#RRGGBB

例：<font color="#ff0000">紅色</font>

2，10進制RGB碼

語法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">紅色</font>

3,直接用顏色的英文名稱

例：<font color="red">紅色</font>

<body>.....</body>屬性可分為三種：

1，背景屬性

包括：bgcolor,background

2,文字屬性：

包括：text,link,alink,vlink,

3,留白屬性：

其中分為：leftmargin,topmargin

.bgcolor背景色

語法格式：<body bgcolor="#ff0000">

.background背景圖案。

語法格式：<body background="url">

.text文本顏色（非連接文字顏色）

.link連接文字顏色（可連接文字顏色）

.alink活動連接文字顏色（正被點擊的可連接文字的顏色）

.vlink已訪問連接文字顏色）（已經(jīng)點擊訪問過的可連接文字的顏色）

語法格式：<body text="color" link="color" alink="color" vlink="color">

.leftmargin 頁面左側的留白距離

.topmargin 頁面頂部的留白距離

語法格式：<body leftmargin="value" topmargin="value">

注：value為長度值為數(shù)字

align 屬性

語法：<h2 align="?">文字</h2>

其屬性有三種：left靠左,center居中,right靠右

〈p〉</p>為段落標記，可利用以上屬性對整個段落進行設置

〈br>為換行標記

<nobr></nobr>為不換行標記放在文字兩邊即可

例：<body>

<h3>江南逢李龜年</h3>

<p>歧王宅里尋常見<br>

催九堂前幾度聞<br>

正是江南好風景<br>

落花時節(jié)又逢君</p>

</body>

預格式化：

<pre>......</pre> 瀏覽是效果和編寫是效果格式一樣

列表

1無序列表又稱符號列表

語法格式：

<ul type="">type的屬性可選直disc實心圓點,clrcle空心圓點,square實心方框

</ul>

2有序列表

語法格式：

</ol>

type的值是編號字符可選的有1...,a...,A...,i... ,I...

start為起始值例：如果start為3是那么將從3開始，而且必須是數(shù)字。

3定義列表

<dl>定義列表標記

<dt>標示定義條目

<dd>標示定義內容

語法格式：

<dl>

</dl>

連接和圖像

語法格式：

屬性：href 連接目標值可以是url地址也可以是連接錨點

<a href="url">...</a>或者

name 連接名稱

語法格式：<a name="錨點名稱">...</a>

例：<a name="abcdcf">...</a>

連接到該錨點的連接則應是：

target目標窗口語法格式：

-blank打開新窗口

_self當前窗口打開

一下兩個僅在框架葉面中應用

_parent當前窗口的父級窗口（上一級）打開

_top在最高一級的窗口打開

windowname已命名的窗口或框架中打開連接

title連接提示

圖像<img> 語法格式：

border屬性定義圖片邊框的寬度，默認值為0

align屬性設置圖片旁邊文字的位置

語法格式：<img src="" align"">

可選值有：

top圖片和文字頂部對齊

middle圖片和文字居中對齊

bottom圖片和文字底邊對齊（默認）

left圖片居左對齊，文字沿圖片繞排

right圖片居右對齊，文字沿圖片繞排

absmiddle圖片對齊到目前文字行絕對中央

absbottom圖片對齊到目前文字行絕對底部

文字的排版

不換行空白標記

font元素

語法格式：

字體大小可選值為1——7，默認為3

例：〈font face="黑體" size="4" color="#ff00ff">....</font>

水平線<hr>

語法格式：<hr width="寬度" align="對齊方式默認居中center" size="水平線厚度默認為2" color="顏色" noshade>

noshade無陰影，既實線

層〈div><span>兩種元素

<div>是塊級元素，和段落元素<p>相似，不同的是兩個<div>元素之間不會產(chǎn)生兩個<p>元素之間的空行，

<span>是行內元素，可以定義段落中部分文字的屬性

語法格式：

align設置層中元素的水平對齊方式

stule設置元素應用css規(guī)范的屬性

表格語法格式：

</table>

border邊框寬度默認值為0，既沒有邊框

cellspacing表格中單元格的邊距大小，默認值為兩個像素

cellpadding表格中單元格之間的間距大小，默認值為兩個像素

tr元素

語法格式：

align屬性對齊方式可選值如下：left,center,tight,默認為left

bgcolor指定該行的背景顏色

td元素

語法格式：

align屬性的可選值有：left,center,right

valign屬性的可選值有：top,middle,bottom

rowspan和colapan跨行和跨列的數(shù)量，默認為1

input元素語法格式：

type屬性的可選值有：

text 單行文本框

屬性：name 文本框名稱

value 文本框的初始值

size 文本框的長度

maxlength 可輸入字符串最大的長度

radio 單選框

屬性：name 單選框名稱

value 內部值

checked 默認選定

checkbox 復選框

屬性：name 復選框名稱

value 內部值

checked 默認選定

reset 重置按鈕

submit 確定按鈕

屬性：name 按鈕名稱

value 顯示在按鈕上的文字

password 密碼框

屬性與文本框的屬性完全相同

file 文件域

屬性：name文件域名稱

size 文件域的長度

maxlength 文件域可接受的字符數(shù)量的上限

hidden 隱藏域

屬性：name 隱藏域名稱

value 內定值

image 圖片域

屬性：name 所要代表的按鈕，可以是submit,reset,或其他.

src 按鈕圖片的url 地址

列表框<select>

語法格式：

.....

.....

</select>

select元素

語法格式：<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框顯示列表項的條數(shù)，如果指定了該參數(shù)，select元素是個列表，否則是一個下拉列表框

multiple 指定了這個參數(shù)，則表示該列表框可選擇多項，否則只可選擇一項

option屬性

語法格式：<option value="" selected></option>

value 該列表項的值

selected 如果設定了這個參數(shù)，默認為選定這一項

多行文本框<textarea>

屬性：

name文本框的名稱

cols文本框的寬度

rows文本框的高度

wrap文本框的折行方式可選值有：

off不保存換行信息

physical強迫瀏覽器在發(fā)送信息到web服務器端時必須將多行文本框的文字一行一行的送出，

virtual送出連續(xù)成串的字除非使用者按回車。

css 層疊樣式表

引入層疊樣式表的方法包括：

外聯(lián)式樣式表

例：<head>

</head>

<body>

....

</body>

</html>

屬性：rel 用來說明<link>元素在這里要完成的任務是連接一個獨立的css文件。而href屬性給出了所要連接css文件的url地址

內嵌式樣式表：

例：<html>

<head>

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

</html>

元素內定

格式：<p style="font-size:10.5pt">

導入式樣式表

〈html>

<head>

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的優(yōu)先級

越接近目標的樣式定義優(yōu)先級越高，高優(yōu)先級樣式將繼承低優(yōu)先級樣式的未重疊定義但覆蓋重疊的定義

如果4種樣式表對同一元素定義了不同的樣式，那么他們的優(yōu)先級順序從高到低是，元素內定，內嵌樣式表，導入樣式表，外聯(lián)樣式表。

css結構

例：td{font-size:10.5pt;color:#666666}

css樣式包含兩個基礎部分，

選擇符<td>和聲明{font-size:10.5pt;color:#666666}

聲明也有兩部分組成：

屬性font-size,color和值10.5pt,#666666

選擇符分為6種

1元素選擇符

當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開例：td,p,li,input,select{font-size:12px;}

2class(類)選擇符

例：〈head>

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

</body>

還有一種方法就是限定可以應用它的頁面元素

例：〈head>

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井岡山地方官</p>

</body>

3 id選擇符

與class選擇附類似，只是把'.'換成'#'

例：<body>

<head>

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center" id="select">id選擇符</td>

</tr>

</table>

</body>

</html>

我們看到在調用ID選擇附時與CLASS選擇附類似，只是將class=""換成了id=""，方便頁面腳本語言的調用

關聯(lián)選擇符

<body>

<head>

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

我們設定了在元素中<td>的元素<p>所包含文字的樣式，只有在兩個條件都滿足是，樣式在會起作用，

偽類選擇符

是只能用在css選擇符里，而不能用在html代碼中的選擇符

例：

〈html>

<head>

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

〈/body>

</html>

正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂

偽元素選擇符

與偽類選擇符定義類似，目前被大多數(shù)瀏覽器支持的有兩個：首行偽元素（first-line）和首字符偽元素(first-letter)是用來實現(xiàn)首行大寫和首行下沉效果的

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

長度隨瀏覽器窗口大小而改變

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上兩種都只能應用于塊狀元素上

css規(guī)則

1.繼承

例：<html>

<head>

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<tr>

</td>

</table>

</body>

</html>

<p>為最高級<td>次一級兩種css用在一個屬性元素上，相同的覆蓋，不同的繼承，

2.組合

例:td{font-size:12pt}

p1{font-size:12pt}

組合后

td,.p1{font-size:12pt}

3.層疊

在樣式里定義過后，在表格屬性中又定義一次

<html>

<head>

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<tr>

<td align="center" style="color:#0000ff" class="red">決撒地方官</td>

</tr>

</table>

</body>

</html>

css單位

分四大類：

1 長度單位

數(shù)值可以是整數(shù)，小數(shù)，正數(shù)，負數(shù)，0，后加單位（負值不要輕易使用）

換算關系：

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(厘米)

1cm(厘米)=10mm(毫米)

1cm(厘米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸

2 百分比單位

3 顏色單位

4 url單位

div屬性

color : #999999 文字顏色

font-family : 宋體文字字型

font-size : 10pt 文字大小

font-style:itelic 文字斜體育

font-variant:small-caps 小字體

letter-spacing : 1pt 文字間距

line-height : 200% 設定行高

font-weight:bold 文字粗體

vertical-align:sub 下標字

vertical-align:super 上標字

text-decoration:line-through 加?h除線

text-decoration:overline 加頂線

text-decoration:underline 加底線

text-decoration:none ?h除連接底線

text-transform : capitalize 首字大寫

text-transform : uppercase 英文大寫

text-transform : lowercase 英文寫

text-align:right 文字*右對齊

text-align:left 文字*左對齊

text-align:center 文字置中對齊

這些是一些簡單的文字效果，可以應用到css的頁面中。　

背景

background-color:black 背景顏色

background-image : url(image/bg.gif) 背景圖片

background-attachment : fixed 固定背景

background-repeat : repeat 重復排列-網(wǎng)頁預設

background-repeat : no-repeat 不重復排列

background-repeat : repeat-x 在x軸重復排列

background-repeat : repeat-y 在y軸重復排列

background-position : 90% 90% 背景圖片x與y軸的位置　

鏈接

A 所有超連接

A:link 超連接文字格式

A:visited 瀏覽過的連接文字格式

A:active 按下連接的格式

A:hover 鼠標移至連接

邊框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四邊框

虛線

實線

在線咨詢

上一篇：進階IT：如何自學HTML5？
下一篇：精美時間線時間軸模板素材，圖文實例詳解時間線繪制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

窗體管理和標準控件運用 - EXCEL VBA（20

您的項目需求