JavaWeb前端開發知識總結(HTML)
1. HTML技術
1.1 HTML概述
HTML是用來描述網頁的一種語言;
HTML指的是超文本標記語言 (Hyper Text Markup Language) ;
HTML不是一種編程語言,而是一種標記語言 (markup language) ,標記語言是一套標記標籤 (markup tag)
HTML使用標記標籤來描述網頁.
1.2 HTML標籤
- HTML標記標籤通常被稱爲HTML標籤 (HTML tag).
- HTML 標籤是由尖括號包圍的關鍵詞,比如 ;
- HTML 標籤通常是成對出現的,比如和;
- 標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤;
- 開始和結束標籤也被稱爲開放標籤和閉合標籤.
- HTML規範:
- 格式: <標籤 屬性1=“屬性值1” 屬性2=“屬性值2”…>內容題
1.2.1 排版標籤
段落標籤(P標籤):
特點:段前和斷後自動換行
格式:<p align="center">段落內容</p>
align屬性:對齊方式,取值可以是:center/right/left換行標籤(br標籤):
<br/>換行:源碼的換行被瀏覽器忽略成一個空格而不能實現換行,使用br標籤代表換行.特殊字符:
空格：
> : >
< : <1.2.2 超鏈接標籤
作用:跳轉指定資源,資源可以是:圖片/文件/網頁.
格式:<a href="指定資源路徑" target="跳轉方式">名稱</a>
屬性:
href:指定跳轉的資源路徑;
target屬性:
_blank:新開一個網頁標籤頁;
_self:在本身網頁打開,覆蓋之前的網頁;
注意:href屬性和標籤的內容體同時存在纔能有超鏈接效果;
擴展:href=""和href="#"區別:
href="":會刷新頁面;
href="#":只是在地址欄添加了一個#,不會刷新頁面;
<a>標籤綁定事件一定要將href="#",綁定事件,可以通過事件的返回值控制鏈接是否跳轉.1.2.3 圖片標籤
作用:在網頁中展示圖片;
格式:<img src="本地路徑圖片或者互聯網圖片"/>
相對路徑:
1.同一級目錄 -- <img src="1.png" />或者<img src="./1.png" />
2.下級目錄 -- <img src="img/1.png" />或者<img src="./img/1.png" />
3.在上一級目錄 -- <img src="../1.png" />
4.在上一級目錄的photo文件夾內: -- <img src="../photo/1.png" />1.2.4 表格標籤
表格創建步驟:
1.<table></table>
2.<table><tr></tr></table>
3.<table><tr><td>內容</td></tr></table>
<table>標籤:
作用:定義一個表格
屬性:
邊框—border:數字;
align:對齊方式,可取值爲center/right/left;
<tr>標籤:
作用:定義表格中的行;
單元格<td>和<th>:
<th>:用於表格的表頭(字體會居中加粗),表格的每列的說明;
<td>:一般單元格,用於展示具體數據;
跨行屬性:rowspan="數字" -- 數字代表跨幾行;
跨列屬性:colspan="數字" -- 數字代表跨幾列;
跨行跨列步驟:
1.確定合併方式,是跨行還是跨列;
2.確定合併幾行或者幾列;
3.刪除被設置合併屬性外的其他需要被合併的單元格;1.3 表單
1.3.1 input標籤
type屬性:
- text:type的默認值;
- password:密碼框;
- radio:單選框,checked屬性設置默認選中checked="checked",通過name屬性進行分組(name相同就是同一組),
沒有被選中不會提交,後臺獲取不到name屬性,不能設置readonly屬性;
- checkbox:複選框,checked設置默認選中checked="checked",通過name屬性進行分組(name相同就是同一組),
不能設置readonly屬性;
- button:普通按鈕,點擊事件默認會提交表單;
- submit:提交表單按鈕;
- reset:重置表單按鈕(相當於重新加載網頁);
- file:文本選擇框;
- hidden:隱藏輸入框,一般設置不需要顯示的數據;
name屬性:
表單元素名稱,代表提交之後的參數名,對於radio/checkbox,name可以使用來分組;
value屬性:設置<input>標籤的默認值
1.對於radio/checkbox類型一定要設置value屬性,value代表的是該標籤的提交的值;
2.對於按鈕類型,設置按鈕顯示的名稱;
readOnly只讀屬性:
readOnly="readOnly",對於radio/disabled/按鈕類型沒有效果;
disabled禁用屬性:disabled="disabled";1.3.2 select標籤
作用:下拉選擇框,配合<option>標籤使用
常用屬性:
name屬性:表單名稱以及提交後的參數名;
multiple:設置下拉選項可以多選--multiple="multiple"
readOnly:不能設置只讀;
disabled禁用:不能設置禁用;
子標籤:<option>標籤
<option>與<option/>之間的值是瀏覽器顯示在下拉列表中的內容,而value屬性中的值是表單被提交時被髮送到服務器的值,如果沒有指定value屬性,選項的值將設置爲<option>標籤中的內容.
屬性:
value:對於選項的值;
selected:設置默認選中--selected="selected"1.3.3 textarea標籤
<textarea>標籤:文本域,可以輸入大量文字,可以自動換行
屬性:
name:標籤名稱以及提交後的參數名;
cols:文本框所佔列數;
rows:文本框所佔行數;
readOnly:只讀屬性 -- readOnly="readOnly";
disabled:禁用 -- disabled="disabled";1.3.4 form標籤
作用:提交表單
屬性:
action:提交的地址;
method:提交的方式, get/post;
get/post提交表單的區別:
1.get地址欄有參數顯示,post不會再地址欄顯示參數(參數是放在了請求體中);
2.get提交數據不安全(在地址欄顯示數據),post相對安全;
3.get提交的數據有限制大小(地址欄的數據長度有限制),post理論上對提交的數據大小不限制.2.HTML綜合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶註冊</title>
</head>
<body>
<form action="#" method="post">
<table border="4" width="500" height="20" align="center">
<tr>
<td align="right" width="100">用戶名:</td>
<td>
<input type="text" name="name" id="name" placeholder="請輸入用戶名" />
</td>
</tr>
<tr>
<td align="right">密碼:</td>
<td>
<input type="password" name="rpassword" id="rpassword" placeholder="請輸入密碼" />
</td>
</tr>
<tr>
<td align="right">確認密碼:</td>
<td>
<input type="password" name="rpassword" id="rpassword" placeholder="請確認密碼" />
</td>
</tr>
<tr>
<td align="right">性別:</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td align="right">籍貫:</td>
<td>
<select name="pronvice">
<option value="請選擇">--請選擇--</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="成都" selected="selected">成都</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file" name="file" id="file" value="" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="註冊" />
<input type="reset" name="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>