前端基礎-HTML基礎（四）
- 2019 年 12 月 17 日
- 筆記
本文目錄
框架標籤
frameset標籤frame標籤表單標籤input標籤select標籤textarea標籤通用屬性參考
框架標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>框架集</title> </head> <!-- 框架標籤和body標籤不可以同時使用 --> <!-- 定義框架集 --> <frameset rows="*,70%,10%"> <!-- src：指定引用的頁面的路徑 --> <frame src="demo12_top.html" /> <frameset cols="20%,*"> <frame src="demo12_left.html" /> <frame name="content" /> </frameset> <frame src="demo12_bottom.html" /> </frameset> </html>
frameset標籤
- 用於定義框架集
- 屬性
- `cols`：垂直切割。
- `rows`：水平切割。
frameset和body不能同時使用。
frame標籤
- 用於具體展示頁面。
- 被引用的頁面不需要完整的結構，只需要頁面內容即可，去除body之外的內容。
- 屬性：
src：頁面的路徑。name：框架的名稱。
表單標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單標籤</title> </head> <body> <form action="" method="post"> 用戶名: <input value="zhangsan" name="username" type="text" placeholder="請輸入您的用戶名"/><br /> 密碼：<input name="password" type="password" placeholder="請輸入您的密碼"/><br /> 性別: <input type="radio" name="gender" checked="checked" value="male"/> 男<input value="female" type="radio" name="gender" /> 女<br /> 愛好: <input value="football" name="hobby" type="checkbox" checked="checked"/>足球<input type="checkbox" name="hobby" value="basketball" />籃球<input type="checkbox" name="hobby" value="pingpang" />乒乓球<br /> 頭像: <input type="file" name="icon"/><br /> 城市: <select name="city" > <option>--請選擇--</option> <optgroup label="北方城市"> <option selected="selected" value="bj">北京</option> <option value="tj">天津</option> </optgroup> <optgroup label="南方城市"> <option value="shh">上海</option> <option value="sz">深圳</option> </optgroup> </select><br /> 自我介紹： <!-- rows :行數 cols：列數 --> <textarea name="introduce" cols="20" rows="5" placeholder="請輸入您的自我介紹"></textarea> <br /> <input type="submit" value="註冊" /> <input type="reset" value="清空" /> <input type="button" value="登錄" /> <input type="image" src="img/logo_efonmark_caihui.png" width="15%"/> </form> </body> </html>
input標籤
- 屬性：
type，指定輸入框的類型。- `text`：普通的輸入框。
- `password`：密碼輸入框
- `radio`：單選
- `checkbox`：多選
- `file`：文件選擇框
- `submit`：提交按鈕
- `reset`：清空按鈕
- `button`：普通按鈕,事件要由自己來處理
- `hidden`：隱藏域
- `image`：圖片
select標籤
- 下拉框
textarea標籤
- 文本域
通用屬性
name- 指定傳遞數據給後台的key的名字。
- 對單選框和複選框進行分組。
- 數據要傳輸給後台，必須指定該屬性。
value- 指定按鈕上的文本。
- 指定選擇框在選中的狀態，傳遞給後台的數據。
placeholder- 用在輸入框中的，提示文本。
checked="checked"- 指定單選框和複選框的選中狀態。
selected="selected"- 指定下拉框的選中狀態。
action- 指定傳遞數據的地址。
method: 請求方式。- 默認，傳遞數據的時候,是拼接在原地址的後面。傳輸的數據的大小一般是1Kb。
?username=zhangsan&password=123&gender=on&hobby=on&hobby=on&city=%E5%8C%97%E4%BA%AC&introduce=ziwojieshaoget請求，在原地址的後面以?拼接參數傳遞給後台。key = value的形式去拼接，如果有多個參數，參數和參數之間使用&連接起來。getpost：隱藏起來。相對來說，post請求更加安全。在傳輸文件的時候一定是使用post請求。
參考
- 黑馬程式設計師 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
