HTML和CSS(一)
阿新 • • 發佈：2020-06-27
一、JavaWeb
1. 基本概念
- JavaWeb：
- 使用Java語言開發基於網際網路的專案
- 軟體架構：
- C/S: Client/Server 客戶端/伺服器端
- 在使用者本地有一個客戶端程式，在遠端有一個伺服器端程式
- 優點：
- 使用者體驗好
- 缺點：
- 開發、安裝，部署，維護 麻煩
- B/S: Browser/Server 瀏覽器/伺服器端
- 只需要一個瀏覽器，使用者通過不同的網址(URL)，客戶訪問不同的伺服器端程式
- 優點：
- 開發、安裝，部署，維護 簡單
- 缺點：
- 若應用過大，使用者的體驗可能會受到影響
- 對硬體要求高
- C/S: Client/Server 客戶端/伺服器端
- B/S架構詳解
- 資源分類：
- 靜態資源：
- 使用靜態網頁開發技術釋出的資源。
- 特點：
- 所有使用者訪問，得到的結果是一樣的。
- 如：文字，圖片，音訊、視訊, HTML,CSS,JavaScript
- 如果使用者請求的是靜態資源，那麼伺服器會直接將靜態資源傳送給瀏覽器。瀏覽器中內建了靜態資源的解析引擎，可以展示靜態資源
- 動態資源：
- 使用動態網頁及時釋出的資源。
- 特點：
- 所有使用者訪問，得到的結果可能不一樣。
- 如：jsp/servlet,php,asp...
- 如果使用者請求的是動態資源，那麼伺服器會執行動態資源，轉換為靜態資源，再發送給瀏覽器
- 靜態資源：
- 資源分類：
若要動態資源，必須先學習靜態資源！
- 靜態資源：
- HTML：用於搭建基礎網頁，展示頁面的內容
- CSS：用於美化頁面，佈局頁面
- JavaScript：控制頁面的元素，讓頁面有一些動態的效果
二、HTML
概念
HTML是最基礎的網頁開發語言，是超文字標記語言Hyper Text Markup Language 的縮寫
- 超文字:
- 超文字是用超連結的方法，將各種不同空間的文字資訊組織在一起的網狀文字.
- 標記語言:
- 由標籤構成的語言。<標籤名稱> 如 html，xml
- 標記語言不是程式語言
語法
- html文件字尾名 .html 或者 .htm
- 標籤分為
- 圍堵標籤：有開始標籤和結束標籤。如
- 自閉和標籤：開始標籤和結束標籤在一起。如
- 標籤可以巢狀：
- 需要正確巢狀，不能你中有我，我中有你
- 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
- html的標籤不區分大小寫，但是建議使用小寫。
標籤
1. 檔案標籤
- 檔案標籤：構成html最基本的標籤
- html:html文件的根標籤
- head：頭標籤。用於指定html文件的一些屬性。引入外部的資源
- title：標題標籤。
- body：體標籤
<!DOCTYPE html>：html5中定義該文件是html文件
文字標籤
- 文字標籤：和文字有關的標籤
註釋：<!-- 註釋內容 --><h1> to <h6>：標題標籤- h1~h6:字型大小逐漸遞減
<p>：段落標籤<br>：換行標籤<hr>：畫出一條水平線- 屬性：
- color：顏色
- width：寬度
- size：高度
- align：對其方式
- center：居中
- left：左對齊
- right：右對齊
- 屬性：
<b>：字型加粗<i>：字型斜體<font>:字型標籤<center>:文字居中- 屬性：
- color：顏色
- size：大小
- face：字型
- 屬性：
- 屬性定義：
- color表示方式：
- 英文單詞：red,green,blue
- rgb(值1，值2，值3)：值的範圍：0~255 如 rgb(0,0,255)
-
值1值2值3：值的範圍：00~FF之間。如： #FF00FF
- width：
- 數值：width='20' ,數值的單位，預設是 px(畫素)
- 數值%：佔比相對於父元素的比例
圖片標籤
- 圖片標籤：
- img：展示圖片
- 屬性：
- src：指定圖片的位置
- 示例程式碼：
<a href="https://123.yawen.com/" target="_blank">簡潔的主頁</a>
- 相對路徑
- 以.開頭的路徑
./代表當前目錄 ./image/1.jpg<img src="./image/jiangwai_1.jpg">
../代表上一級目錄<img src="../image/jiangwai_1.jpg">
- 屬性：
- img：展示圖片
列表標籤
- 列表標籤：
- 有序列表：
- ol:
- li:
- 無序列表：
- ul:
- li:
- 有序列表：
連結標籤
- 連結標籤：
<a></a>定義一個超連結- 屬性：
- href：指定訪問資源的URL(統一資源定位符)
- target：指定開啟資源的方式
- _self:預設值，在當前頁面開啟
- _blank：在空白頁面開啟
- 示例程式碼;
<a href="https://123.yawen.com/" target="_blank">簡潔的主頁</a>
div和span
- div和span：
- div:每一個div佔滿一整行。塊級標籤
- span：文字資訊在一行展示，行內標籤 內聯標籤
語義化標籤
- 語義化標籤：html5中為了提高程式的可讀性，提供了一些標籤
<header>：頁首<footer>：頁尾
表格標籤
- 表格標籤：
- table：定義表格
- width：寬度
- border：邊框
- cellpadding：定義內容和單元格的距離
- cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
- bgcolor：背景色
- align：對齊方式
- tr：定義行
- bgcolor：背景色
- align：對齊方式
- td：定義單元格
- colspan：合併列
- rowspan：合併行
- th：定義表頭單元格
-
：表格標題 -
：表示表格的頭部分
- ：表示表格的體部分
- ：表示表格的腳部分
三、HTML標籤：表單標籤
-
表單：
-
概念：用於採集使用者輸入的資料，用於和伺服器進行互動。
-
form：用於定義表單的。可以定義一個範圍，範圍代表採集使用者資料的範圍
-
屬性：
-
action：指定提交資料的URL
-
method:指定提交方式
-
分類：一共7種，2種比較常用
-
get：
- 請求引數會在位址列中顯示。會封裝到請求行中
- 請求引數大小是有限制的。
- 不太安全。
-
post：
-
請求引數不會再位址列中顯示。會封裝在請求體中(HTTP協議後講解)
-
請求引數的大小沒有限制。
-
較為安全
-
-
-
-
表單項中的資料要想被提交：必須指定其name屬性
-
-
-
表單項標籤：
- input：可以通過type屬性值，改變元素展示的樣式
- type屬性：
- text：文字輸入框，預設值
* placeholder：指定輸入框的提示資訊，當輸入框的內容發生變化，會自動清空提示資訊 - password：密碼輸入框
- radio:單選框
- 注意：
- 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
- 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
- checked屬性，可以指定預設值
- checkbox：複選框
- 注意：
1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
2. checked屬性，可以指定預設值
- 注意：
- file：檔案選擇框
- hidden：隱藏域，用於提交一些資訊
- 按鈕：
- submit：提交按鈕。可以提交表單
- button：普通按鈕
- image：圖片提交按鈕
- src屬性指定圖片的路徑
- 注意：
- radio:單選框
- label：指定輸入項的文字描述資訊
- 注意：
- label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點選label區域，會讓input輸入框獲取焦點
- 注意：
- 子元素：option，指定列表項
- textarea：文字域
- cols：指定列數，每一行有多少個字元
- rows：預設多少行
- input：可以通過type屬性值，改變元素展示的樣式
- ：表示表格的體部分
-
- table：定義表格