文章目錄
目標：瞭解JavaWeb技術體系，掌握常用技術點
【既然是學習大數據：以後主要就是集中到後端，對數據進行一些處理，那就得知道這些數據到底是怎麼來的，也就是企業怎麼就收集到用戶的數據了，處理完了數據以後，又如何再反饋給用戶
----> 即，後端的數據怎麼來的，處理完了又如何返回給前端（而這整個過程，是通過JavaWeb來完成的）】
一、JavaWeb技術體系
【
- "前端"相關技術，通過瀏覽器實現；
- "後端"相關技術；
- 前後端肯定是要交互的，“通過HTTP協議交互”；
- 在交互過程中，肯定會發生數據的傳遞（客戶端<---->服務端，可能會從客戶端把一些數據傳送到服務器端，也可能會把服務器端處理完成的數據響應給客戶端），在這個過程中，就可以藉助json、xml等格式進行"數據交互"；
- 在整個項目過程中，有時需要維護用戶的狀態（比如，登錄狀態，可以做某些操作，非登錄狀態，就不能做某些操作），可以使用Cookie、Session來"維持會話狀態"
】
簡化版如下：
【講解過程是以一個小項目來進行的，主要功能包括： 登錄、註冊
----> 那麼首先就要有一個登錄界面，讓用戶來輸入用戶名、密碼，這就涉及前端技術】
二、前端三劍客
- HTML（結構）：網頁上要有什麼東西，由HTML負責（用標記把圖片、視頻、音樂等等呈現出來）
- CSS（樣式）：美化網頁
- JS（行爲）：想要實現交互（動態網頁），需要JS
1、HTML（超文本標記語言）常用標籤
- 超文本："超越"普通文本 —> 普通文本只能有文字，而網頁上可以有文字、圖片、鏈接、音樂、視頻、程序
- 標記：HTML的核心就是標記，通過各種各樣不同的標記，來呈現不同的內容（圖片、視頻等）
1.1 根標記< html >、頭標記< head >、體標記< body >
一個HTML頁面最基本的組成結構：
- < html >：根標記
- < head >：頭標記 ——> 寫描述性的信息（例如 CSS / JavaScript 的信息）
- < body >：體標記 ——> 寫頁面顯示的信息（頁面上要顯示的東西，都寫在body裏）
1.2 標題標記 < h1 >…< h6 >
<h1 align="center">標題1</h1>
<h2 align="center">標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5 align="right">標題5</h5>
<h6 align="right">標題6</h6>
1.3 超鏈接 < a >
<!-- 超鏈接 href：可以指定應用內（本項目內）或應用外（互聯網中）的任意地址 -->
<a href="http://www.baidu.com">點我查看超鏈接</a>
1.4 表格 < table >
- border屬性：邊框粗細（不設置，看不到邊框）
- width屬性：設置寬度（推薦自適應，只寫百分比，如60%）
- cellspacing屬性：設置單元格之間的距離（不想要邊框的空隙，就設爲0px）
<h1 align="center">員工信息列表</h1>
<!-- 表格 -->
<table border="1px" align="center" width="60%" cellspacing="0px">
<!-- 行 tr -->
<tr>
<!-- 列 th/td （有了行纔有列，所以在行裏面去寫列）
th：標題列，自帶居中並加粗
td：普通列
-->
<th>員工ID</th>
<th>姓名</th>
<th>性別</th>
<th>描述</th>
</tr>
<tr align="center">
<td>1001</td>
<td>小紅</td>
<td>女</td>
<td>班花</td>
</tr>
<tr align="center">
<td>1002</td>
<td>小明</td>
<td>男</td>
<td>老司機</td>
</tr>
</table>
效果如下：
1.5 表單< form >：非常常用！
【作用：收集用戶的信息，提交到後臺服務器】
- action屬性：提交的地址（數據要提交到哪個地址）
- method屬性：提交方式（GET / POST）
表單內的輸入框< input />
- type屬性：輸入框的輸入格式
- name屬性：表單提交到後臺時的key值，數據提交的格式是"key=value"（對於頁面沒什麼作用，將來表單要提交到後臺，這個屬性就有用了）
- value屬性：輸入框的默認值
1.5.1 文本框 < input type=“text” />
- 文本框可以有默認值，通過value屬性來設定
1.5.2 密碼框 < input type=“password” />
- 設定爲密碼框後，用戶輸入的字符默認顯示爲星號
1.5.3 單選框 < input type=“radio” />
- 注意：同一組單選框，必須設定相同的name，否則不認爲是同組，沒有互斥效果
- 注意：同組內的不同選項，設定不同value，後臺根據value判斷選中的是誰
1.5.4 多選框：< input type=“checkbox” />
- 注意：同上
1.5.5 下拉列表：< select >（注意不再是< input >中換換type）
- name屬性
- < option >標籤：每一個選項都是一個< option >
- < option >的value屬性：提交給後臺的是選中的那個< option >的value屬性的值
1.5.6 提交按鈕：< input type=“submit” />，（依然是< input >中換換type）
- 點擊該按鈕後，就會跳轉並提交到的action屬性中指定的地址
- value屬性：按鈕上顯示的內容
1.5.7 重置按鈕：< input type=“reset” />
- 點擊以後，表單中的填寫的所有內容都會被重置爲空或默認值
實例：
<!-- 表單 收集用戶的信息，提交到後臺服務器 -->
<form action="http://www.baidu.com" method="GET">
<!-- 數據提交的格式：username=admin -->
用戶名稱： <input type="text" name="username" value="admin" />
<br/>
用戶密碼： <input type="password" name="password" />
<br/>
用戶性別： 男 <input type="radio" name="gender" value="1" />
女 <input type="radio" name="gender" value="0" />
<br/>
用戶愛好： 喫飯 <input type="checkbox" name="hobby" value="eat" />
睡覺 <input type="checkbox" name="hobby" value="sleep" />
打豆豆 <input type="checkbox" name="hobby" value="ddd" />
<br/>
用戶地址：省份 <select name="province">
<option value="sd">山東省</option>
<option value="sx">山西省</option>
</select>
<br/>
<input type="submit" value="註冊" />
<input type="reset" value="重置">
</form>
效果如下：
2、CSS樣式
【CSS（樣式）是描述網頁的，因此要寫在< head >裏】
1.1 CSS的三種修飾方法：
在< head >中使用一對< style >標籤，在其中通過CSS語法來描述一些樣式
- 第一種方式 —— 元素選擇器：這種方式作用的是所有的< div >標籤（不一定給施加，任何標籤都可以）
- 第二種方式 —— id選擇器：這樣可以單獨給某個< div >作一個樣式的設置，注意，id必須唯一
- 第三種方式 —— 類選擇器：這樣可以給一組< div >作同一個樣式設置
示例代碼如下：
<head>
<style>
div{ /*元素選擇器*/
width: 300px;
height: 100px;
border: 2px solid red;
background-color: green;
}
#d1{ /*id選擇器*/
background-color: yellow;
}
.d{ /*類選擇器*/
background-color: gray;
}
</style>
</head>
<body>
<div>這是個div</div>
<div id="d1">這是個div</div>
<div class="d">這是個div</div>
<div class="d">這是個div</div>
</body>
效果如下：
1.2 外部引入CSS文件
- 注意：樣式特別多的時候，全部直接寫在< head >裏，會特別亂，也不便於集中管理
- 因此可以把CSS樣式直接寫在一個樣式文件（xx.css）裏，此時想使用這些樣式，首先就要把樣式文件引入當前HTML中
<head>
<!-- 引入外部的樣式文件 -->
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<!-- 此處my.css和該html文件在同一路徑下，因此可以直接訪問 -->
三、登錄界面
【有了上述相關技術，一個簡單的登錄界面就可以實現了】
<html>
<head>
<style type="text/css">
body{
background-color: pink;
}
</style>
</head>
<!--<body bgcolor="pink">--><!-- 也可以使用body標籤的自帶屬性"bgcolor" -->
<body>
<h1>歡迎登錄</h1>
<form action="" method="">
用戶名稱： <input type="text" name="username" />
<br/>
用戶密碼： <input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</body>
</html>
效果如下：
