JavaWeb
使用Java語言開發基於網際網路的專案
B/S架構詳解
資源分類

1. 靜態資源：
   使用靜態網頁開發技術釋出的資源
   特點：
   所有使用者訪問，得到的結果是一樣的
   如，文字，圖片，音訊，視訊，HTML,CSS,JavaScript
   如果使用者請求的是靜態資源，那麼伺服器會直接將靜態資源傳送給瀏覽器，瀏覽器中內建了靜態資源的解析引擎，可以展示靜態資源
2. 動態資源
   使用動態網頁技術釋出的資源
   特點
   所有使用者訪問得到的結果可能不一樣
   如：jsp/servlet，php，asp…
   如果使用者請求的是動態資源，那麼伺服器會執行動態資源，轉換為靜態資源再發送給瀏覽器

靜態資源：

• HTML：用於搭建基礎網頁，展示頁面的內容
• CSS：用於沒換頁面，佈局頁面
• JavaScript：控制頁面的元素，讓頁面有一些動態的效果

HTML

概念：最基礎的網頁開發語言
Hyper Text Markup Language 超文字標記語言
超文字：超文字是用超連結的方法，將各種不同空間的文字資訊組織再一起的網狀文字
標記語言：由標籤構成的語言。<標籤名稱>

標記語言不是程式語言

快速入門
語法
1.html文件字尾名.html或.htm
2.標籤分為
圍堵標籤：又開始和結束標籤，比如
自閉和標籤：開始和結束標籤在一起，比如

3.標籤可以巢狀
需要正確巢狀
4.在開始標籤中可以定義屬性，屬性由鍵值對構成，值需要用引號（單雙都可）引起來
5.html的標籤不區分大小寫，但是建議小寫

標籤學習

1.檔案標籤：構成html最基本的標籤
html：html的根標籤
head：頭標籤，用於指定html文件的一些屬性，引入外部資源
title：標題標籤
body：體標籤

2.文字標籤：和文字有關的標籤
<!-- 註釋內容 -->：註釋
<h1>-<h6>：標題標籤，字型大小遞減
<p>：段落標籤
<br>：換行標籤
<hr>：展示水平線並自帶換行功能
屬性：
*color：顏色
*width：寬度
*height：高度
*align：對齊方式
**center：居中
**left：左對齊
**right：右對齊

<b>：字型加粗
<i>：字型斜體
<font>：字型標籤
屬性：
*color：顏色
*size：大小
*face：字型
屬性定義
*color：
**1.英文單詞：red。。。
**2.rgb（值1，2，3）：範圍0-255
**3.#值123：範圍00-FF
*width：
**1.數值，預設單位是px畫素
**2.數值%，佔比相對於父元素的比例
<center>：文字居中

圖片標籤

<img>：展示圖片
*src：制定圖片的位置

列表標籤

有序列表
*ol
*li
無序列表
*ul
*li

連線標籤

<a>：定義一個超連結
*href：指定訪問資源的url
*target：指定開啟資源的方式
**_self：預設值，在當前頁開啟
**_blank：在空白頁面開啟

div和span

<div>：每一個div佔滿一整行，塊級標籤
<span>：文字資訊在一行展示，行內標籤，內聯標籤

語義化標籤

html5中為了提高程式的可讀性，提供了一些標籤
<header>：頁首
<footer>：頁尾

表格標籤

<table>：定義表格
*width：寬度
*border：邊框
*cellpadding：定義內容和單元格的距離
*cellspacing：定義單元格之間的距離，指定為0單元格的線會合為一條
*bgcolor：背景色
*align：對齊方式
<tr>：定義行
*bgcolor：背景色
*align：對齊方式
<td>：定義單元格
*colspan：合併列
*rowspan：合併行
<th>：定義表頭單元格
<caption>：表格標題
<thead'>：表格的頭部分
<tbody>：表格的體部分
<tfoot>：表格的腳部分

表單標籤

表單：用於採集使用者輸入的資料，用於和伺服器互動
<form>：用於定義表單，可以定義一個範圍，範圍內代表採集使用者資料的範圍
屬性
*action：指定提交資料的URL
*method：指定提交的方式，共7種，兩種常用
**get：
***1.請求引數會在位址列中顯示，封裝到請求行中
***2.請求引數的大小是有限制的
***3.不太安全
**post：
***1.請求引數不會在位址列中顯示，封裝到請求體中
***2.請求引數的大小沒有限制
***3.較為安全
表單項中的資料要想被提交，必須指定其name屬性
表單項標籤
<input>：可以通過type屬性，改變元素展示的樣式
type屬性：
*text：文字輸入框，預設值
**placeholder：指定輸入框的提示資訊，當輸入框內容變化時，會自動清空
*password：密碼輸入框
*radio：單選框
1.要想讓多個單選框實現單選的效果，則多個單選框的name屬性必須相同
2.一般給每個單選框提供value屬性，指定其被選中後提交的值
3.checked屬性可以指定被預設選中
*checkbox：複選框
1.一般給每個複選框提供value屬性，指定其被選中後提交的值
2.checked屬性可以指定被預設選中
*file：檔案選擇框
*hidden：隱藏域，用於提交一些資訊
按鈕：
*submit：提交按鈕，用於提交表單
*button：普通按鈕
*image：圖片提交按鈕，用src指定圖片路徑
<label>：指定輸入項的文字描述資訊

一般會讓label的for屬性和input的id屬性值對應，如果對應了，點選label處input會獲得焦點

<select>：下拉列表
子元素：
<option>：指定列表項
<textatea>：文字域
*cols：指定列數，每一行的字元數
*rows：預設行數