java前端基礎知識
阿新 • • 發佈：2019-02-16
一，html+css基礎
1-1
Html和CSS的關係
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。
1-2
1， HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式設計師都以小寫為準。
1-3
一個HTML檔案是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body></html>
程式碼講解：
1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
1-4
1，下面這些標籤可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途，還可以幫助其他程式設計師很快的讀懂你的程式的功能，方便多人合作開發網頁程式碼。
語法：
<!--註釋文字 -->
3，CSS註釋程式碼
就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用<!--註釋語句-->)
1-5
1，語義化：說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如，網頁上的文章的標題就得用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。
2，語義化的作用
1）. 更容易被搜尋引擎收錄。
2）. 更容易讓螢幕閱讀器讀出網頁內容。
1-6
元素分類--塊級元素
行內元素不會獨佔一行，寬度隨著元素的內容改變而變化
行內元素的width和height的設定無效
行內元素的margin和padding的垂直方向上不產生邊距效果
可以使用display:block;或者display:inline;實現塊級元素和行內的相互轉換
HTML元素分為三大類：
塊狀元素：
2-5
換行標籤<br/>
<br/>標籤作用相當於word文件中的回車。
分割線標籤<hr/>
<hr/>標籤和<br/>標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr/>標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
2-6
html特殊字元
空格： (;分號必不可少)
2-7
address標籤，為網頁加入地址資訊
語法：
<address>地址資訊</address>
如：
<address>北京市西城區德外大街10號</address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在後面的課程中使用css樣式來修改它<address>標籤的預設樣式
2-8
在介紹語言技術的網站中，必免不了在網頁中顯示一些計算機專業的程式設計程式碼，當代碼為一行程式碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
語法：
<code>程式碼語言</code>
注意：在文章中一般如果要插入多行程式碼時不能使用<code>標籤，如果是多行程式碼，可以使用<pre>標籤。
<pre> 標籤的主要作用:預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。如果用以前的方法，回車需要輸入<br>籤，空格需要輸入 。
注意：<pre> 標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。
三，認識標籤（第二部分）
3-1
1，無序列表
ul-li是沒有前後順序的資訊列表。
語法：
<ul>
<li>資訊</li>
<li>資訊</li>
......
</ul>
舉例：
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點
2,有序列表
語法：
<ol>
<li>資訊</li>
<li>資訊</li>
......
</ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol>
<li>前端開發面試心法 </li>
<li>零基礎學習html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在網頁中顯示的預設樣式一般為：每項<li>前都自帶一個序號，序號預設從1開
3-2
<div>容器標籤
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
語法：
<div>…</div>
確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器
註釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個換行符。
3-3
建立表格的五個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完才會顯示。如右側程式碼編輯器中的程式碼。（這個標籤基本上不怎麼用了）
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...<td/>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中資料單元格的個數。
表格還是需要新增一些標籤進行優化，可以新增標題和摘要
<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量">
<caption>2012年到2013年庫存記錄</caption>
3-4
1，使用<a>標籤，連結到別一個頁面
使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。
語法：
<a href=”目標網址”>連結顯示的文字</a>
例如：
<a href = "http://www.imooc.com">click here!</a>
上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。
3-5
認識<img>標籤，為網頁插入圖片
在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。
語法：
<img src="http://m13121875965.blog.163.com/blog/圖片地址" alt="下載失敗時的替換文字" title = "提示文字">
舉例：
<img src="http://m13121875965.blog.163.com/blog/myimage.gif" alt = "My Image" title = "My Image" />
講解：
1、src：標識影象的位置；
2、alt：指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字；
3、title：提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字)；
4、影象可以是GIF，PNG，JPEG格式的影象檔案。
四，表單標籤（與使用者進行互動）
4-1
表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。
語法：
<form method="傳送方式" action="伺服器檔案">
講解：
1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ： 資料傳送的方式（get/post）。
4-2
<input>輸入框
文字輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字框也可以轉化為密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文字" />
</form>
1、type：
當type="text"時，輸入框為文字輸入框;
當type="password"時, 輸入框為密碼輸入框。
2、name：為文字框命名，以備後臺程式ASP 、PHP使用。
3、value：為文字輸入框設定預設值。(一般起到提示作用)
4-3
文字域，支援多行文字輸入
當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。
語法：
<textarea rows="行數" cols="列數">文字</textarea>
1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4-4
單選框，複選框
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當type="radio"時，控制元件為單選框
當type="checkbox"時，控制元件為複選框
2、value：提交資料到伺服器的值（後臺程式PHP使用）
3、name：為控制元件命名，以備後臺程式ASP、PHP使用
4、checked：當設定checked="checked"時，該選項被預設選中
注意：同一組的單選按鈕，name取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
4-5
下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。
語法：<option value="提交值">選項</option>
提交值是向伺服器提交的值，選項是顯示的值。
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅遊" selected="selected">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-6
使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，
就可以實現多選功能，進行多選時按下Ctrl鍵同時進行單擊，可以選擇多個選項。
如下程式碼：
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-7
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。
1，提交按鈕：當用戶需要提交表單資訊到伺服器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
2，重置按鈕，重置表單資訊
當用戶需要重置表單資訊到初始時的狀態時，比如使用者輸入“使用者名稱”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設定為"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當type值設定為reset時，按鈕才有重置作用
value：按鈕上顯示的文字
1-1
Html和CSS的關係
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。
1-2
1， HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式設計師都以小寫為準。
1-3
一個HTML檔案是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body></html>
程式碼講解：
1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
1-4
1，下面這些標籤可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途，還可以幫助其他程式設計師很快的讀懂你的程式的功能，方便多人合作開發網頁程式碼。
語法：
<!--註釋文字 -->
3，CSS註釋程式碼
就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用<!--註釋語句-->)
1-5
1，語義化：說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如，網頁上的文章的標題就得用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。
2，語義化的作用
1）. 更容易被搜尋引擎收錄。
2）. 更容易讓螢幕閱讀器讀出網頁內容。
1-6
元素分類--塊級元素
什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設定display:block就是將元素顯示為塊級元素。如下程式碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
<strong>1-7
塊級元素特點：</strong>
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
元素分類--內聯元素在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過程式碼display:inline將元素設定為內聯元素。如下程式碼就是將塊狀元素div轉換為內聯元素，從頁使用div元素具有內聯元素特點。
<strong>1-8</strong>
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設定；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
塊狀元素獨佔一行，在預設的情況下，寬度自動填滿父元素寬度行內元素不會獨佔一行，寬度隨著元素的內容改變而變化
行內元素的width和height的設定無效
行內元素的margin和padding的垂直方向上不產生邊距效果
可以使用display:block;或者display:inline;實現塊級元素和行內的相互轉換
HTML元素分為三大類：
塊狀元素：
- 網頁框架基本結構塊：html、body、frameset、frame、noframe、iframe
- 表單結構塊：form、filedset、legend
- 佈局結構塊：div
- 段落結構塊：p
- 標題結構塊：h1-h6
- 列表結構塊：ol、ul、dl、dt、dd、menu、dir
- 居中結構塊：center
- 預定義結構塊：pre
- 引用結構塊：blockquote
- 結構裝飾線：hr
- 網頁標題框：title
- 行內包含框：span
- 超連結和對映包含框：a、area
- 影象包含框：img
- 格式化資訊包含框：abbr、b、bdo、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、u、var
- 表單物件包含框：button、select、textarea、label
- 可執行的外掛或物件包含框：applet、object
- 表格標題包含框：caption
- 無指令碼包含框：noscript
- 頭部區域隱藏元素：
- 頭部包含框：head
- 預設基礎字型屬性：basefont
- 連結：link
- 元資訊：meta
- 指令碼：script
- 樣式：style
- url基礎：base
- 行內塊狀元素：
- 輸入框：input
- 下拉選框：option
- 下拉框的分組：optgroup
- 列表項元素：
- 列表項：li
- 結構內隱藏元素：
- 影象對映包含框：map
- 引數：param
- 換行：br
- 表格系列型別元素：
- 表格框顯示：table
- 表格行顯示：tr
- 單元格顯示：td
- 表格標題顯示：th
- 表格行組顯示：tbody
- 表格腳註組顯示：tfoot
- 表格標題組顯示：thead
HTML標籤巢狀規則
- body可以直接包含塊狀元素、ins、del、script。不可以直接包含行內元素
- ins和del（行內元素）可以包含塊狀元素或者行內元素，其他任何行內元素都不允許包含塊狀元素
- p、h1-h6可以直接包含行內元素和文字資訊，但是不允許包含塊狀元素
- dl元素只允許包含dt和dd，同時dt不能包含塊狀元素，只允許包含行內元素，對於dd可以包含任何元素
- form元素不能夠直接包含input元素。原因在於input元素屬於行內元素，form元素僅僅能夠包含塊狀元素
- table元素只能夠包含caption、colgroup、col、thead、tbody、tfoot，不能夠直接包含tr或者其他任何元素
二、認識標籤（第一部分）
2-1
如果想在網頁上顯示文章，這時就需要<p>標籤了，把文章的段落放到<p>標籤中。
語法：
<p>段落文字</p>
2-2
<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法：
<hx>標題文字</hx> (x為1-6)
文章的標題前面已經說過了，可以使用標題標籤，另外網頁上的各個欄目的標題也可使用它們
2-3
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標籤。
但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。兩個標籤相比，目前國內前端程式設計師更喜歡使用<strong>表示強調
2-4
<em>、<strong>、<span>的區別：
1. <em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
2. <span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的，把一段話圈起來，然後用css設定樣式。
2-5
換行標籤<br/>
<br/>標籤作用相當於word文件中的回車。
分割線標籤<hr/>
<hr/>標籤和<br/>標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr/>標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
2-6
html特殊字元
空格： (;分號必不可少)
2-7
address標籤，為網頁加入地址資訊
語法：
<address>地址資訊</address>
如：
<address>北京市西城區德外大街10號</address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在後面的課程中使用css樣式來修改它<address>標籤的預設樣式
2-8
在介紹語言技術的網站中，必免不了在網頁中顯示一些計算機專業的程式設計程式碼，當代碼為一行程式碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
語法：
<code>程式碼語言</code>
注意：在文章中一般如果要插入多行程式碼時不能使用<code>標籤，如果是多行程式碼，可以使用<pre>標籤。
<pre> 標籤的主要作用:預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。如果用以前的方法，回車需要輸入<br>籤，空格需要輸入 。
注意：<pre> 標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。
三，認識標籤（第二部分）
3-1
1，無序列表
ul-li是沒有前後順序的資訊列表。
語法：
<ul>
<li>資訊</li>
<li>資訊</li>
......
</ul>
舉例：
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點
2,有序列表
語法：
<ol>
<li>資訊</li>
<li>資訊</li>
......
</ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol>
<li>前端開發面試心法 </li>
<li>零基礎學習html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在網頁中顯示的預設樣式一般為：每項<li>前都自帶一個序號，序號預設從1開
3-2
<div>容器標籤
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
語法：
<div>…</div>
確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器
註釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個換行符。
3-3
建立表格的五個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完才會顯示。如右側程式碼編輯器中的程式碼。（這個標籤基本上不怎麼用了）
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...<td/>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中資料單元格的個數。
表格還是需要新增一些標籤進行優化，可以新增標題和摘要
<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量">
<caption>2012年到2013年庫存記錄</caption>
3-4
1，使用<a>標籤，連結到別一個頁面
使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。
語法：
<a href=”目標網址”>連結顯示的文字</a>
例如：
<a href = "http://www.imooc.com">click here!</a>
上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。
3-5
認識<img>標籤，為網頁插入圖片
在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。
語法：
<img src="http://m13121875965.blog.163.com/blog/圖片地址" alt="下載失敗時的替換文字" title = "提示文字">
舉例：
<img src="http://m13121875965.blog.163.com/blog/myimage.gif" alt = "My Image" title = "My Image" />
講解：
1、src：標識影象的位置；
2、alt：指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字；
3、title：提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字)；
4、影象可以是GIF，PNG，JPEG格式的影象檔案。
四，表單標籤（與使用者進行互動）
4-1
表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。
語法：
<form method="傳送方式" action="伺服器檔案">
講解：
1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ： 資料傳送的方式（get/post）。
4-2
<input>輸入框
文字輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字框也可以轉化為密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文字" />
</form>
1、type：
當type="text"時，輸入框為文字輸入框;
當type="password"時, 輸入框為密碼輸入框。
2、name：為文字框命名，以備後臺程式ASP 、PHP使用。
3、value：為文字輸入框設定預設值。(一般起到提示作用)
4-3
文字域，支援多行文字輸入
當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。
語法：
<textarea rows="行數" cols="列數">文字</textarea>
1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4-4
單選框，複選框
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當type="radio"時，控制元件為單選框
當type="checkbox"時，控制元件為複選框
2、value：提交資料到伺服器的值（後臺程式PHP使用）
3、name：為控制元件命名，以備後臺程式ASP、PHP使用
4、checked：當設定checked="checked"時，該選項被預設選中
注意：同一組的單選按鈕，name取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
4-5
下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。
語法：<option value="提交值">選項</option>
提交值是向伺服器提交的值，選項是顯示的值。
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅遊" selected="selected">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-6
使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，
就可以實現多選功能，進行多選時按下Ctrl鍵同時進行單擊，可以選擇多個選項。
如下程式碼：
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-7
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。
1，提交按鈕：當用戶需要提交表單資訊到伺服器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
2，重置按鈕，重置表單資訊
當用戶需要重置表單資訊到初始時的狀態時，比如使用者輸入“使用者名稱”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設定為"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當type值設定為reset時，按鈕才有重置作用
value：按鈕上顯示的文字