一、表單
功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get默認取值就是get
注意啦！！！！
from表單：實現用戶與web服務器的交互
以鍵值對的形式發過去{"":"haiyan","":"123"}
如果沒有name屬性，你的數據是不過去的
name:鍵名
請求server端的方式：
get:請求會放在url后面 username=yaun&password =123
post:請求會放在請求體里
關於 url的內容
url: https://www.baidu.com(協議：域名（也是ip+端口))
url: http:127.0.0.1:8800/blog/addBlog（協議：ip:端口/）
url: http:127.0.0.1:8800/blog/addBlog？username = yuan
http:協議
127.0.0.1:8800：ip地址與端口
blog/addBlog：url的路徑（path）
username = yuan:get請求數據
請求協議：
瀏覽器發給服務器（get請求,post請求）
格式：
請求首行
請求頭：就是一組組鍵值對
換行 \n,\n\r
請求數據：有兩種方式
if get :
url?data
if post :
請求數據
get請求：安全性差，數據量有限（當設計到查詢的時候會用到get請求）
那些是get請求（一般都是查詢數據庫操作）：
1.url訪問server端
2.超鏈接訪問，即a標簽
post請求：相對於get安全點，，但是沒有絕對的安全（修刪改可以用post）
相應協議：
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息
<input>系列標簽
'''
<1> 表單類型
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
上傳文件注意兩點：
請求方式必須是post
enctype="multipart/form-data"
<2> 表單屬性
name: 表單提交項的鍵.
注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；
而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的
value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
'''
select標簽
'''
<select> 下拉選標簽屬性
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<optgroup>為每一項加上分組
<option> 下拉選中的每一項 屬性：
value:表單提交項的值.
selected: selected下拉選默認被選中
'''
<textarea> 多行文本框
‘’''
<form id="form1" name="form1" method="post" action="">
<textarea cols=“寬度” rows=“高度” name=“名稱”>
默認內容
</textarea>
</form>
'''
<label>標簽
定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
'''
<form method="post" action="">
<label for=“username”>用戶名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
'''
<fieldset>標簽
'''
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
'''
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
</head>
<body>
<h3>注冊頁面</h3>
<!--action放的是ip地址和端口-->
<!--method放的是請求方式-->
<form action="" method="post">
<hr size="5" color="red">表單中input系列
<label for="c1"> <!--label標簽就是把下面的姓名關聯起來-->
<p>姓名：<input type="text" name="username" id="c1"></p>
</label>
<!--#當你不輸入的時候有個默認的value值-->
<p>密碼：<input type="password" name="password" value="123"></p>
<!--單選框ridio-->
<p>性別：<input type="radio" name = gender value="male">男：<input type="radio" name="gender" value="female">女</p>
<!--復選框checkbox-->
<p>愛好：<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="sport">運動</p>
<!--文件-->
<p>頭像：<input type="file" name="fileobj"></p>
<hr size="5" color="red">上面的value和下面的value是不一樣的，上面的是發送請求的，下面的是修改值的
<!--重置-->
<p><input type="reset" value="reset"></p>
<!--其實是submit按鈕把數據提交到action指定的地址了-->
<p><input type="submit"></p>
<!--空按鈕 當你輸入值才有內容-->
<!--onclick：鼠標點擊事件-->
<p><input type="button" value="按鈕" onclick="alert('確定')"></p>
<!--onmouseover：鼠標指到上面就觸發-->
<p><input type="button" value="按鈕" onmouseover="alert('確定')"></p>
<!--隱藏：不想讓用戶看見-->
<p><input type="hidden" name="sss" value="sds"></p>
<!--文本域-->
<p>個人簡歷<br>
<textarea name="selfinfo" cols="30" rows="10"></textarea>
</p>
<fieldset>海燕啊啊啊啊啊啊啊</fieldset>
<!--下拉框-->
<hr size="5" color="red">表單中select系列
<select name="provice" size="5" multiple="multiple" >
selected設置默認選擇。如果select里有multiple屬性，那么可以在option里面設置多個selected
<option value="hebei" selected="selected">甘肅省</option>
<option value="henan" selected="selected">河南省</option>
<option value="hebei">湖北省</option>
<option value="shanxi">陝西省</option>
</select>
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
</form>
<!--以鍵值對的形式發過去{"":"haiyan","":"123","gender":"male","hobby":["basketball","football"],"fileobj":"fileobj"}-->
<!--如果沒有name屬性，你的數據是發不過去的-->
<!--name:鍵名-->
</body>
</html>
2.div和span標簽
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
3.圖片標簽img
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.) '''
4.列表標簽
<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
'''
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序列表-- order list-->
<!--默認是1,2,3,4有序，如果加type就會以你指定的有序-->
<ol type="a">
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ol>
<!--無序列表-->
<ul>
<li>鳥</li>
<li>鳥</li>
<li>鳥</li>
<!--實心圓（默認是實心圓）-->
<li type="disc">鳥</li>
<!--空心圓-->
<li type="circle">鳥</li>
<!--方形-->
<li type="square">鳥</li>
</ul>
<!--定義列表-->
<!--define liset-->
<dl>
<!--定義的標題內容 define title-->
<dt>河北省</dt>
<!--內容-->
<dd>石家庄</dd>
<dd>天津</dd>
<dd>雄安</dd>
</dl>
</body>
</html>
運行截圖
分類:
Web前端