Java Web程式設計------網頁開發基礎
1.1 HTML技術
1.1.1 HTML簡介
hyper text mark language，超文字標記語言，主要通過HTML標記語言對網頁的文字、圖片、聲音等內容進行描述。檔案字尾 .html或.htm。
1.<!DOCTYPE>標記，位於文件最前面，用於向瀏覽器說明當前文件使用哪種HTML標準規範，指定HTML文件的HTML版本和型別。
2.<html></html>標記，根標記，標誌著 文件的開始和結束。
3.<head></head>標記，頭部標記，定義HTML文件的頭部資訊，用來封裝其他位於文件頭部的標記
<title>文件的標題
<meta>標記可以提供有關頁面的元資訊
<link>定義文件與外部資源的關係
<style>用於為HTML文件定義樣式資訊
4.<body></body>標記，主體標記，定義文件所要顯示的內容。
<!DOCTYPE html PUBLIC"-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
這裡是網頁內容
</body>
</html>1.1.2
單標記：又叫空標記，用一個標記符號便可完整的描述某個功能，不需要選擇內容來描述。
<標記名 /> 建議加空格
雙標記：又叫體標記，
<標記名> 內容 </標記名>
1.1.3 文字控制與文字樣式標記
1.為了使網頁內容有條理的顯示出來，HTML提供了段落標記<p></p>。
2.如果需要某段文字強制換行顯示，要使用換行標記<br />。
3.使用<font></font>標記來控制網頁文字的樣式，如字型、字號和顏色。
<font 屬性="屬性值"> 文字內容 </font>
<font face="微軟雅黑" size="7" color="green"></br>
我是7號綠色文字，我的字型是微軟雅黑</font>1.1.4影象標記
在網頁中顯示圖片<img />
<img src="影象url" />
src屬性用來指定影象檔案的路徑，可以使絕對路徑，也可以是相對路徑。
<body>
顯示圖片:<img src="106.jpg" width="102" height="130" border="0" />
</body>1.1.5表格標記
是網頁中的資料能夠條理的顯示出來，對網頁進行規劃。
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>張三</td>
<td>90</td>
<td>91</td>
</tr>
</table>
</body>1.1.6表單標記
簡單說，表單就是網頁中用於輸入資訊的區域，它的主要功能是收集資料資訊，並將這些資訊傳遞給後臺資訊處理模組。
表單由三部分構成：
- 表單控制元件：包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框提交按鈕等。
- 提示資訊：控制元件前的文字說明，提醒使用者進行填寫和操作。
- 表單域：相當於一個容器，用來容納所有的表單控制元件和提示資訊。
1.<from></from>標記用於定義表單域。即建立一個表單。
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控制元件 </from>
2.使用<input/>控制元件可以在表單中定義輸入框<input type="text">、單選按鈕<input type="radio">、複選框<input type="checkbox">、重置按鈕<input type="reset">、提交按鈕<input type="submit">、文字域<textarea>、密碼框<input type="password">、郵件框<input type="email">、下拉選單等<select><option> </option></select>、檔案上傳控制元件<input type="file">。
- 注意：name屬性代表控制元件名，value屬性表示該控制元件的值。單選框和複選框每一個選項的name必須相同，為了方便在處理頁面資料時獲得表單傳遞的值（表單所傳遞的值就是value的值）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實驗一</title>
</head>
<body>
<h1 align="center"><u>請留下個人資料</u></h1>
<form>
<table align="center">
<tr>
<td a
<td align="lign="right">姓名：</td>
<td align="left"><input type="text" name="name" size="20px"></td>
</tr>
<tr>right">E-mail：</td>
<td align="left"><input type="email" name="email" size=" 50px" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"></td>
</tr>
<tr>
<td align="right">電話：</td>
<td align="left"><input type="telephone" name="phonenumber" size="25px" pattern="^[0-9]{11}$"> </td>
</tr>
<tr>
<td align="right">性別：</td>
<td align="left">
<input type="radio" name="sex" value="fmale" checked="checked">女
<input type="radio" name="sex" value="male">男
</td>
</tr>
<tr>
<td align="right">年齡：</td>
<td align="left"> <select name="age" >
<option value="1" selected>20以下</option>
<option value="2" >20</option>
<option value="3" >21</option>
<option value="4" >22</option>
<option value="5" >23</option>
<option value="6" >24</option>
<option value="7" >25</option>
<option value="8" >25以上</option>
</select>
</td>
</tr>
<tr>
<td align="right" >留言板：</td>
<td align="left"><textarea name="leave_word" rows="3" cols="50"></textarea></td>
</tr>
<tr>
<td align="right" rowspan="4">您的愛好：</td>
<td align="left"><input type="checkbox" name="hobby" value="">運動</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">閱讀</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">聽音樂</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">旅遊</td>
</tr>
</table>
<p align="center">
<input type="submit" value="提交">
<input type="reset" value="全部重寫">
</p>
</form>
</body>
</html>
[點選並拖拽以移動]
1.1.7列表標記和超連結標記
1.無序列表<ul></ul>
為了使網頁易讀，列表項並列存在，無序列表最為常用。<li>標籤的type屬性用來指定列表項的符號disc實心圓,square實心矩形,circle空心圓三種，預設為disc。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>2.超連結標記<a></a>
<a href="跳轉目標" target="目標視窗的彈出方式">文字或圖片</a>
target的值self（預設）在原視窗中開啟、blank在新視窗中開啟、parent在父框架中開啟被連結的文件、top在整個視窗中開啟被連結的文件。
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--定義連結 href 為屬性 屬效能夠賦予標籤含義和語境，提供有關HTML元素的更多資訊-->
<!--target規定在何處開啟連線-->
<p>使用圖片來做連結</p>
<img src="D:\123.png">
<a href="http://www.baidu.com" target="_blank">
<img border="0" src="D:\11111111111111文件\圖\火影\Screenshot_2017-09-26-00-11-37-65.png">
</a>
</body>1.1.8<div>標記
div是division的縮寫，意為“分割、區域”，簡單而言就是一個區塊容器標記，可以將網頁分為獨立的、不同的部分，以實現網頁的規劃和佈局。<div>中還可以套嵌使用<div>,一般與CSS搭配使用。
1.2 CSS技術
1.2.1 CSS簡介
CSS是cascading style sheet 層疊樣式表，是用於（增強）控制網頁樣式並允許將樣式資訊與網頁內用分離的一種標記性語言。
定義規則：選擇器{屬性1：屬性值1；屬性2：屬性值2；}
div{
border:1px solid red;
width:600px;
height:400px;
}border屬性有三個值：表示該邊框1畫素、實心框線、紅色。
在CSS中通常使用px為計量單位，px是相對於顯示螢幕的解析度而言的。二百分比是相對於父物件而言的，例如一個元素的寬度為400px，它的子元素設定為50%，則寬度為200px。
在CSS中顏色的取值方式有3種：
- 預定義顏色的值：如red、blue
- 十六進位制：#FF0000、#FF6600（常用）
- RGB程式碼
1.2.2 CSS樣式的引用方式
要使用CSS修飾網頁，要在HTML文件中引入CSS檔案，有4種方式
1.內嵌式：
<head>
<style type="text/css">
選擇器{
屬性1：屬性值1；
屬性2：屬性值2；
}
</style>
</head>2.鏈入式：
<head>
<link href="css檔案的路徑" type="text/css" rel="stylesheet" />
</head>
- href：定義鏈入外部樣式表的檔案地址，可以使相對路徑和絕對路徑。
- type：定義鏈入文件的型別。
- rel：指定當前文件與鏈入文件的關係。
3.行內式
4.匯入式
1.2.2 CSS選擇器和常用屬性
1.標記選擇器：標記名{ } 所有標記都可以，缺點不能設計差異化樣式。
2.類選擇器： . 類名{ }
3.id選擇器：#id { } id唯一，只能對應文件中的某一具體的元素。
4.萬用字元選擇器：*{ } 範圍最廣匹配到頁面中的所有元素。
1.3 JavaScript基礎
1.3.1 DOM相關知識
DOM是文件物件模型的簡稱“document object model”，是w3c推薦的處理可擴充套件標誌語言的標準程式設計介面，它可以以獨立於平臺和語言的方式訪問和修改文件的內容和結構。
分為三個不同部分：核心DOM、XML DOM、HTML DOM。
HTML DOM模型被構造成物件樹，該樹的根節點就是document，有一個documentelement屬性引用，表示文件根元素的element物件。HTML文件中的element物件是<html>元素，<head>、<body>元素可看成是樹的枝幹。概念：父節點、子節點、兄弟節點。
1.節點的訪問
DOM中，HTML文件的各個節點被視為各種型別的Node物件，如：想要通過子節點找到父節點的元素，如下：
父節點物件=子節點物件.parentNode；
| 屬性 | 型別 | 描述 |
| parentNode | node | 返回節點的父節點，沒有則為null |
| childNode | nodelist | 返回節點到子節點的節點列表 |
| fistChild |
node | 返回節點的首個子節點，沒有則為null |
| lastChild | node | 返回節點的最後一個子節點，沒有則為null |
2.獲取文件的指定元素
遍歷獲取節點的方法太麻煩，提供了直接獲取的方法。
（1）通過元素ID屬性獲取
如：獲取ID元素值為userid節點的程式碼：document.getElementById("userid");
（2）通過元素的name屬性獲得
由於具有相同name的元素不止一個，所以該方法返回的是一個數組，如果要獲取其中一個，可以通過加下標的方法。
如：document.getElementByName("usename")[5];
1.3.2javascript概述
js是web中的一種功能強大的指令碼語言，用來為網頁新增各種動態功能，不需要進行編譯，直接套嵌在HTML頁面中，就可以吧靜態網頁轉變為支援使用者互動並響應事件的動態網頁。
1.JavaScript的引用
（1）內嵌式：
<script type="text/javascript">
//此處為js程式碼
</script>js中有三種彈出對話方塊的方式：alert（）、confirm（）、prompt（）。如果不想彈出也可以直接用document.write（）直接將資訊輸出在頁面上。
<!doctype html>
<html>
<head>
<title>標題</title>
<script type="text/javascript">
doucument.write("js引入演示");
</script>
</head>
<body>
學習JavaScript
</body>
</html>（2）外鏈式：
當一段js指令碼程式碼要被很多頁面引用時，放到一個.js檔案中。
<script type="text/javascript" src="js檔案的路徑" ></script><!doctype html>
<html>
<head>
<title>標題</title>
<script type="text/javascript" src="demo01.js">
</script>
</head>
<body>
學習JavaScript
</body>
</html>2.資料型別
常用資料型別：
| 型別 | 含義 | 說明 |
| number | 數值型 | 不區分整型和浮點型 |
| string | 字串型別 | 用單引號或雙引號引起來的一個或多個字元 |
| boolean | 布林型別 | true/false |
| object | 物件型別 | 一組資料和功能的鍵值對集合 |
| null | 空型別 | 沒有任何值 |
| undefined | 未定義型別 | 指變數被建立但未賦值 |
3.變數
使用var宣告變數，不需要宣告變數型別。變數名由字母、下劃線、美元符號組成。
var number="27";
var str="javascript學習";4.運算子
- 算術運算子：+ - * / ++ --
- 比較運算子：< > <= >= == !=
- 邏輯運算子：&& || ！
- 賦值運算子：= += -= *= /= %=
- 條件與算符：三目運算子 運算元/布林表示式？結果1：結果2 如：alert((a==b)?true:false);
5.條件if語句
if( ){ } else { }
1.3.3JavaScript的使用
1.函式的定義及呼叫
函式定義：
function functionname(parameter1,parameter2){
tatements;
[return expression;]
}
2.事件處理
採用事件驅動是js的一大特徵，事件就是使用者在使用頁面時執行的操作。
事件處理通常有三步：事件發生、啟動事件處理程式、事件處理程式做出反應。
<body>
<input type="button" name="btn" value="點我" onclick="alert('hello');" />
</body>3.常用物件
（1）Window物件
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
甚至 HTML DOM 的 document 也是 window 物件的屬性之一
- window.open() - 開啟新視窗
- window.close() - 關閉當前視窗
- window.moveTo() - 移動當前視窗
- window.resizeTo() - 調整當前視窗的尺寸
- window.innerHeight - 瀏覽器視窗的內部高度
- window.innerWidth - 瀏覽器視窗的內部寬度
（2）Date物件
Date 物件用於處理日期和時間。
| 方法 | 描述 |
|---|---|
| Date() | 返回當日的日期和時間。 |
| getDate() | 從 Date 物件返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 物件返回一週中的某一天 (0 ~ 6)。 |
| getMonth() | 從 Date 物件返回月份 (0 ~ 11)。 |
| getFullYear() | 從 Date 物件以四位數字返回年份。 |
| getYear() | 請使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 物件的小時 (0 ~ 23)。 |
| getMinutes() | 返回 Date 物件的分鐘 (0 ~ 59)。 |
| getSeconds() | 返回 Date 物件的秒數 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 物件的毫秒(0 ~ 999)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數。 |
| setDate() | 設定 Date 物件中月的某一天 (1 ~ 31)。 |
| setMonth() | 設定 Date 物件中月份 (0 ~ 11)。 |
| setFullYear() | 設定 Date 物件中的年份（四位數字）。 |
| setYear() | 請使用 setFullYear() 方法代替。 |
| setHours() | 設定 Date 物件中的小時 (0 ~ 23)。 |
| setMinutes() | 設定 Date 物件中的分鐘 (0 ~ 59)。 |
| setSeconds() | 設定 Date 物件中的秒鐘 (0 ~ 59)。 |
| setMilliseconds() | 設定 Date 物件中的毫秒 (0 ~ 999)。 |
| setTime() | 以毫秒設定 Date 物件。 |