暫時(shí)學(xué)了這么些個(gè)標(biāo)簽楣导，做一下記錄屋谭。
- a
- form
- input
- select
- textarea
- table
a標(biāo)簽(HTTP GET 請(qǐng)求)
a標(biāo)簽的屬性
- target
- download
- href
a標(biāo)簽的target屬性
| 英文 | 翻譯 |
|---|---|
| blank | 空白的 |
| self | 自己 |
target的屬性值
-
_blank：新窗口打開 -
_self：當(dāng)前頁面打開/加載
a的download屬性
這個(gè)鏈接時(shí)用來下載,不是用來展示的
<a download>下載</a>
如果不想通過這個(gè)download下載文件,還可以:
通過http響應(yīng)以下載的形式接收請(qǐng)求Content-type: application/octet-stream
a的href
講這個(gè)之前,先在本地開啟服務(wù)器
操作如下:
mkdir demotouch index.htmlnpm install -g http-server-
http-server . -c-1(注意中間有一個(gè)空格一個(gè)點(diǎn)再加一個(gè)空格）實(shí)現(xiàn)不緩存
然后就可以直接訪問 http://localhost:8080/index.html 來預(yù)覽index.html
-
<a >QQ</a>使用http協(xié)議 -
<a >QQ</a>href里寫的是無協(xié)議地址一忱，意思是當(dāng)前頁面用的是什么協(xié)議,就會(huì)用什么協(xié)議 -
<a href="#xxx">QQ</a>錨點(diǎn),點(diǎn)擊之后不會(huì)發(fā)起請(qǐng)求,因?yàn)殄^點(diǎn)僅僅是在當(dāng)前頁面內(nèi)跳轉(zhuǎn) -
<a href="?username=ojl&psd=123456">QQ</a>點(diǎn)擊之后會(huì)在當(dāng)前面頁面發(fā)起?username=ojl&psd=123456的請(qǐng)求 -
<a href="./index.html">QQ</a>點(diǎn)擊后瀏覽器會(huì)發(fā)起GET請(qǐng)求,路徑是/index.html,協(xié)議是HTTP/1.1 -
<a href="javascript:;"></a>點(diǎn)擊之后不會(huì)發(fā)生任何事 -
<a href="javascript:alert(1);"></a>點(diǎn)擊之后彈出1
form標(biāo)簽(HTTP POST請(qǐng)求)
form標(biāo)簽主要是發(fā)起POST請(qǐng)求
表單中有name屬性的數(shù)據(jù)都會(huì)被提交
form的action屬性：告訴表單需要提交到哪個(gè)服務(wù)器
代碼展示
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
<!-- form表單里面一般要有submit按鈕才能提交 -->
</form>
如果填寫的信息是英文,數(shù)字或特殊符號(hào)的話
如果是填寫的信息是中文的話,會(huì)出現(xiàn)不一樣的效果
上圖中展示的數(shù)據(jù)并沒有顯示"小帥"兩個(gè)字,而是出現(xiàn)了%E5%B0%8F%E5%B8%85
這是因?yàn)镃ontent-Type: application/x-www-form-urlencoded中的x-www-form-urlencoded規(guī)定所有英文字符/鍵盤上的字母之外,都要經(jīng)過轉(zhuǎn)譯,將"小帥"變成對(duì)應(yīng)的UTF-8,可以搜索character utf-8 E5 B0 8F,得出"小"這個(gè)字對(duì)應(yīng)的utf-8就是E5 B0 8F,如果發(fā)現(xiàn)中文,就把utf-8中的每一個(gè)字節(jié)前面加個(gè)%,所以就有上圖這個(gè)效果了
小Tips:
- 如果form表單沒有提交按鈕,無法提交數(shù)據(jù),除非用JS
- 如果一個(gè)form表單里面只有一個(gè)按鈕
<button></button>,它會(huì)自動(dòng)升級(jí)為提交按鈕 - form表單里面的表單元素input等,里面的name會(huì)被帶到請(qǐng)求的第四部分那里的key
- utf-8中英文是占一個(gè)字節(jié),中文占3個(gè)字節(jié)
- GET不會(huì)把那個(gè)參數(shù)作為第四部分,默認(rèn)會(huì)把參數(shù)放到查詢參數(shù),而且不能通過任何方法讓GET有第四部分
- POST請(qǐng)求上傳的數(shù)據(jù)會(huì)出現(xiàn)在第四部分,默認(rèn)會(huì)把參數(shù)放到第四部分
- POST請(qǐng)求若想有查詢參數(shù)听皿，可以直接寫在action里
action="users?zzz=333
input標(biāo)簽
(name必須寫，提交數(shù)據(jù)的時(shí)候要用到)
type="checkbox" 復(fù)選框
- 如果想默認(rèn)選中最后一個(gè)静檬，就可以在它的input標(biāo)簽上給checked屬性
- 老司機(jī)的寫法是用label把input包裹起來炭懊，傳統(tǒng)方法是給label一個(gè)for屬性，給input一個(gè)id拂檩，讓它倆的值相同侮腹。
- 同組選項(xiàng)，name要一致稻励。
type="radio" 單選框
- 同組選項(xiàng)父阻，name要一致愈涩。
select
<select name="group" multiple>
<option value="">-</option>
<option value="1">第一組</option>
<option value="2">第二組</option>
<option value="3" disabled>第三組</option>
<option value="4" selected>第四組</option>
</select>
小Tips:
multiple 可以同時(shí)選中幾項(xiàng)
disabled 默認(rèn)不能被選中
-
selected 默認(rèn)被選中
image
textarea
- resize設(shè)置為none，用戶就不能隨意更改輸入框的大小
table
表格的基本元素
| 基本元素 | 翻譯/含義 |
|---|---|
| caption | 標(biāo)題 |
| thead | table head(表頭) |
| tbody | table body(表格主體) |
| tfoot | table foot(表格的底部) |
| tr | table row(表格行) |
| th | table header(表格頁眉) |
| td | table data(單元格) |
<table border="1" style="font-size: 12px;border-collapse: collapse;margin: 0 auto;margin-top:100px;" >
<colgroup>
<col width="74">
<col width="180">
<col width="497">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>簡(jiǎn)介</th>
</tr>
</thead>
<tbody>
<tr>
<td>兇真</td>
<td>拯救世界的中二病少年</td>
</tr>
<tr>
<td>助手</td>
<td>傲嬌助手加矛，學(xué)霸屬性</td>
</tr>
<tr>
<td>真由理</td>
<td>喜歡吃banana和炸雞便當(dāng)?shù)纳倥?lt;/td>
</tr>
<tr>
<td>桶子</td>
<td>變態(tài)紳士</td>
</tr>
</tbody>
</table>
小Tips:
- th和td的區(qū)別是:th里面不是放數(shù)據(jù),td里面全是數(shù)據(jù)
- thead tbody tfoot書寫的順序顛倒沒關(guān)系,瀏覽器會(huì)自動(dòng)糾正順序(頭->身體-->腳)
-
border-collapse: collapse;合并邊框 -
col可以規(guī)定每一列的寬
