初識HTML【第三天】
阿新 • • 發佈：2020-08-22
1. web概念概述 2. HTML
1.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：控制頁面的元素，讓頁面有一些動態的效果2.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的標籤不區分大小寫，但是建議使用小寫。
* 程式碼： <html> <head> <title>title</title> </head> <body> <FONT color='red'>Hello World</font><br/> <font color='green'>Hello World</font> </body> </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. 數值%：佔比相對於父元素的比例