web概念概述
web概念概述
* JavaWeb：
?? ?* 使用Java語言開發基于互聯網的項目
* 軟件架構：
?? ?1. C/S: Client/Server 客戶端/服務器端
?? ??? ?* 在用戶本地有一個客戶端程序，在遠程有一個服務器端程序
?? ??? ?* 如：QQ，迅雷...
?? ??? ?* 優點：
?? ??? ??? ?1. 用戶體驗好
?? ??? ?* 缺點：
?? ??? ??? ?1. 開發、安裝，部署，維護 麻煩
?? ?2. B/S: Browser/Server 瀏覽器/服務器端
?? ??? ?* 只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程序
?? ??? ?* 優點：
?? ??? ??? ?1. 開發、安裝，部署，維護 簡單
?? ??? ?* 缺點：
?? ??? ??? ?1. 如果應用過大，用戶的體驗可能會受到影響
?? ??? ??? ?2. 對硬件要求過高
* B/S架構詳解
?? ?* 資源分類：
?? ??? ?1. 靜態資源：
?? ??? ??? ?* 使用靜態網頁開發技術發布的資源。
?? ??? ??? ?* 特點：
?? ??? ??? ??? ?* 所有用戶訪問，得到的結果是一樣的。
?? ??? ??? ??? ?* 如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript
?? ??? ??? ??? ?* 如果用戶請求的是靜態資源，那么服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源
?? ??? ?2. 動態資源：
?? ??? ??? ?* 使用動態網頁及時發布的資源。
?? ??? ??? ?* 特點：
?? ??? ??? ??? ?* 所有用戶訪問，得到的結果可能不一樣。
?? ??? ??? ??? ?* 如：jsp/servlet,php,asp...
?? ??? ??? ??? ?* 如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器
靜態資源：
?? ??? ?* HTML：用于搭建基礎網頁，展示頁面的內容
?? ??? ?* CSS：用于美化頁面，布局頁面
?? ??? ?* JavaScript：控制頁面的元素，讓頁面有一些動態的效果
HTML
1. 概念：是最基礎的網頁開發語言
?? ?* Hyper Text Markup Language 超文本標記語言
?? ??? ?* 超文本:
?? ??? ??? ?* 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.
?? ??? ?* 標記語言:
?? ??? ??? ?* 由標簽構成的語言。<標簽名稱> 如 html，xml
?? ??? ??? ?* 標記語言不是編程語言
2. 快速入門：
?? ?* 語法：
?? ??? ?1. html文檔后綴名 .html 或者 .htm
?? ??? ?2. 標簽分為
?? ??? ??? ?1. 圍堵標簽：有開始標簽和結束標簽。如 <html> </html>
? ? ? ? ? ? 2. 自閉和標簽：開始標簽和結束標簽在一起。如 <br/>
?? ??? ?3. 標簽可以嵌套：
?? ??? ??? ?需要正確嵌套，不能你中有我，我中有你
?? ??? ??? ?錯誤：<a><b></a></b>
?? ??? ??? ?正確：<a><b></b></a>
?? ??? ?4. 在開始標簽中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
?? ??? ?5. html的標簽不區分大小寫，但是建議使用小寫。
3. 標簽學習：
?1. 文件標簽：構成html最基本的標簽
?? ??? ?* html:html文檔的根標簽
?? ??? ?* head：頭標簽。用于指定html文檔的一些屬性。引入外部的資源
?? ??? ?* title：標題標簽。
?? ??? ?* body：體標簽
?? ??? ?* <!DOCTYPE html>：html5中定義該文檔是html文檔
?? ?2. 文本標簽：和文本有關的標簽
?? ??? ?* 注釋：<!-- 注釋內容 -->
?? ??? ?* <h1> to <h6>：標題標簽
?? ??? ??? ?* h1~h6:字體大小逐漸遞減
?? ??? ?* <p>：段落標簽
?? ??? ?* <br>：換行標簽
?? ??? ?* <hr>：展示一條水平線
?? ??? ??? ?* 屬性：
?? ??? ??? ??? ?* color：顏色
?? ??? ??? ??? ?* width：寬度
?? ??? ??? ??? ?* size：高度
?? ??? ??? ??? ?* align：對其方式
?? ??? ??? ??? ??? ?* center：居中
?? ??? ??? ??? ??? ?* left：左對齊
?? ??? ??? ??? ??? ?* right：右對齊
?? ??? ?* <b>：字體加粗
?? ??? ?* <i>：字體斜體
?? ??? ?* <font>:字體標簽
?? ??? ?* <center>:文本居中
?? ??? ??? ?* 屬性：
?? ??? ??? ??? ?* color：顏色
?? ??? ??? ??? ?* size：大小
?? ??? ??? ??? ?* face：字體
?? ??? ?* 屬性定義：
?? ??? ??? ?* color：
?? ??? ??? ??? ?1. 英文單詞：red,green,blue
?? ??? ??? ??? ?2. rgb(值1，值2，值3)：值的范圍：0~255 ?如 ?rgb(0,0,255)
?? ??? ??? ??? ?3. #值1值2值3：值的范圍：00~FF之間。如： #FF00FF
?? ??? ??? ?* width：
?? ??? ??? ??? ?1. 數值：width='20' ,數值的單位，默認是 px(像素)
?? ??? ??? ??? ?2. 數值%：占比相對于父元素的比例
?<meta charset="UTF-8">
©
圖片標簽：
?? ??? ?* img：展示圖片
?? ??? ??? ?* 屬性：
?? ??? ??? ??? ?* src：指定圖片的位置
總結
- 上一篇： 冒泡排序用c语言实现
- 下一篇： 图片标签|| 列表标签||链接标签||d