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 物件。 |