今天主要想說的是以下幾個(gè)標(biāo)簽
<a><iframe><form>-
<input>&&<button> <table>
-
<a>標(biāo)簽
- 全稱：
anchor：錨點(diǎn) - 常見用法一：
<a href=" http://www.xxx.com" target="_blank" > hello</a>
屬性理解1：target ：目標(biāo)拟淮，把什么作為目標(biāo)
(1)
_blank: 新窗口打開狮暑，即到一個(gè)新的未命名的HTML4窗口或HTML5瀏覽器上下文
例子：<a href=" http://www.xxx.com" target="_blank" > hello</a>(2)
_self： 當(dāng)前頁面加載淳地，即當(dāng)前的響應(yīng)到同一HTML 4 frame（或HTML5瀏覽上下文）。此值是默認(rèn)的凛俱，如果沒有指定屬性的話兰绣。
例子：<a href=" http://www.xxx.com" target="_self" > hello</a>(3)
_top： IHTML4中：加載的響應(yīng)成完整的，原來的窗口岛马，取消所有其它frame。 HTML5中：加載響應(yīng)進(jìn)入頂層瀏覽上下文（即屠列，瀏覽上下文啦逆，它是當(dāng)前的一個(gè)的祖先，并且沒有parent）笛洛。如果沒有parent框架或者瀏覽上下文夏志，此選項(xiàng)的行為方式相同_self
例子：<a href=" http://www.xxx.com" target="_top" > hello</a>(4)
_parent：加載響應(yīng)到當(dāng)前框架的HTML4父框架或當(dāng)前的HTML5瀏覽上下文的父瀏覽上下文。如果沒有parent框架或者瀏覽上下文苛让，此選項(xiàng)的行為方式相同_self沟蔑。
例子:<a href=" http://www.xxx.com" target="_parent" > hello</a>
屬性理解2：href ：超鏈接
(1) 鏈接到外部地址：
http://xxx.com
例子：<a >QQ</a>(2) 鏈接到本頁的某個(gè)部分：
#屬性
例子：<a href ="#attribute" >xxx</a>(3) 打開某個(gè)文件：
使用file協(xié)議:file:///C:/Users/Administrator/Desktop/homework/vsCode/Html/Untitled-1.html
例子：<a href ="file:///users/html/index.html" >demo</a>(4) 創(chuàng)建一個(gè)可點(diǎn)擊的圖片：
http://www.qq.com/imgs/1.png
例子：<a >pic</a>(5) 創(chuàng)建一個(gè)email鏈接：
mailto:123@qq.com
例子：<a href ="mailto:123@qq.com" >QQemail</a>(6) 創(chuàng)建電話鏈接：
tel:+1356789456
例子：<a href ="tel:+1356789456" >+1356789456</a>(7) 查詢參數(shù)：
?name=Tom
例子：<a >Tom</a>(8) 偽協(xié)議：
javascript:;或javascript:void(0);
例子：<a href ="javascript:;" >點(diǎn)擊無響應(yīng)</a>
注：以上參數(shù)中，只有（7）是會(huì)發(fā)起請(qǐng)求的狱杰，其他的都不會(huì)向服務(wù)器發(fā)起請(qǐng)求
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="ohter.html?name=hello">hello</a>
</body>
</html>
點(diǎn)擊 超鏈接 hello 后的效果瘦材，打開控制臺(tái)查看請(qǐng)求為
- 常見用法二：
<a href="www.xxx.com" download>hello</a>
屬性理解:1:download:下載URL而不是導(dǎo)航到URL，因此將提示用戶將其保存為本地文件仿畸。
- 注：僅在HTML中食棕，下載URL只有2種方式，一種是上面的
download屬性错沽，另一種為HTTP響應(yīng)中conten-type的參數(shù)為application/octet-stream時(shí)簿晓，瀏覽器會(huì)下載文件
2.<iframe>標(biāo)簽
- 名稱：框架
- 常見用法：主要在頁面嵌套頁面，經(jīng)常和
<a>標(biāo)簽一起使用千埃；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target="xxx">QQ</a>
<a target="xxx">123</a>
</body>
</html>
效果為：
屬性分析一：<iframe name=xxx src="#" frameborder="0"></iframe>
屬性：name=xxx,src=#
分析:在<a>標(biāo)簽中憔儿，分別對(duì)應(yīng)不同的超鏈接，但是目標(biāo)都指向iframe放可，以第一個(gè)QQ超鏈接為例皿曲，即表示在iframe打開鏈接為http://www.qq.com窗口，第二個(gè)123鏈接同理
屬性分析二：<iframe name=xxx src="#" frameborder="0"></iframe>
屬性：src=#
分析：除了上面所示參數(shù)可以為絕對(duì)路徑以外吴侦，也可以放置相對(duì)路徑屋休，即在本地新建一個(gè)index.html，上面src="index.html"备韧，即下面QQ在index.html打開
3.<form>標(biāo)簽
- form：表單
- 常見用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="index.html" method="post" target="_blank">
<input type="text" name="account">
<input type="submit" value="提交">
</form>
</body>
</html>
屬性分析一：
action
解釋：類似<a href="" >123</a>中的href一樣劫樟，跳轉(zhuǎn)鏈接，主要服務(wù)于后面submit所要提交到的位置屬性分析二：
method
解釋1：在<form>中，若不申明method的傳輸方式叠艳，則默認(rèn)為get奶陈；只有聲明為method="pos"t時(shí)，才是post附较，并且吃粒，HTTP協(xié)議會(huì)有第四部分即(Form Data)的內(nèi)容；如果有查詢參數(shù)出現(xiàn)拒课，也是出現(xiàn)在Form Data中徐勃，而不是像get一樣出現(xiàn)在搜索框中。
說明：當(dāng)在表單輸入賬號(hào)密碼時(shí)早像，因?yàn)槭褂玫牟皇荋TTPS協(xié)議僻肖，所以密碼在最后一部分以明文的方式進(jìn)行傳輸，存儲(chǔ)方式為上一部分
Content-Type:application/x-www-form-urlencoded卢鹦，若要是中間有人進(jìn)行監(jiān)聽臀脏，那么密碼就泄露了，這就是為什么HTTP協(xié)議不安全所在之處冀自。
解釋2：上圖中揉稚，我們看到，當(dāng)method="post"時(shí)熬粗，可以 上傳數(shù)據(jù)窃植，那么，想問：當(dāng)method=post時(shí)荐糜，是否可以像method="get"一樣查詢呢巷怜？
答案：可以的，需要修改1個(gè)地方暴氏，即：action=user?xxx=3 (其中=號(hào)兩邊為任意參數(shù))
屬性分析三：
target
和<a>標(biāo)簽一樣延塑，可以跳轉(zhuǎn)到其他的鏈接，不同的是答渔，前者是 get 一個(gè)頁面关带， form 是 post 一個(gè)頁面。屬性分析四：
submit
解釋：在<form>中沼撕，如果沒有這個(gè)提交按鈕 宋雏，就無法提交<form>內(nèi)的數(shù)據(jù)，除非使用JS务豺。
4.<input>標(biāo)簽
input 輸入
常見參數(shù)一：
type="text",type="password",type="button"......
說明：在頁面效果上<input type="submit" value="button">和<button>button</button>是一樣的 磨总，那么它們有什么區(qū)別呢？
區(qū)別：當(dāng)<form>中只有一個(gè)
<button>時(shí)笼沥，這個(gè)時(shí)候<button>就會(huì)自動(dòng)升級(jí)為<input type="submit" value="button">進(jìn)行提交數(shù)據(jù)蚪燕，即<button>button</button> == <input type="submit" value="button">二者等價(jià)娶牌。當(dāng)
<form>的<input type="button" value="">說明了type類型為button那么此按鈕也僅僅是一個(gè)按鈕，不具有提交功能馆纳。常見參數(shù)二：
看如下代碼：
<input type="checkbox" id="boy" > <label for="boy">男</label>
<label ><input type="checkbox">男</label>
當(dāng)我們選擇多選框時(shí)诗良，通常只有點(diǎn)擊多選框才能勾選其內(nèi)容，顯然鲁驶，這不太人性化鉴裹；需求是，我們只要點(diǎn)擊和多選框?qū)?yīng)的文字钥弯，那么就可以選中該多選框径荔，實(shí)現(xiàn)方式有2種，使用<label>標(biāo)簽實(shí)現(xiàn)寿羞，如上代碼猖凛。
- 常見參數(shù)三：?jiǎn)芜x框如何做到只會(huì)選中一個(gè)赂蠢？
<input type="radio" name="apple" value="yes">
<input type="radio" name="apple" value="no">水果
效果：
方法：使用
name 绪穆，當(dāng)單選框中name取的參數(shù)值相同時(shí)，就是二者或是多者選一虱岂；
- 常見參數(shù)三：下拉框
<select> <option></option> </select>
<select name="group" id="">
<option value=""></option>
<option value="second" selected>第二組</option>
<option value="third" disabled="">第三組</option>
<option value="fourth">第四組</option>
<option value="fifth">第五組</option>
</select>
5.<table>標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table border="1px">
<colgroup>
<col width=100 bgcolor=red>
<col width=150 bgcolor=green>
<col width=160 bgcolor=yellow>
</colgroup>
<thead>
<th>班級(jí)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</thead>
<tbody>
<tr>
<td>1班</td>
<td>張三</td>
<td>李四</td>
</tr>
<tr>
<td>2班</td>
<td>趙六</td>
<td>劉七</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
tr == table row
td ==table data
th ==theader
說明一：
<colgroup>標(biāo)簽的使用，自上而下的<col>分別設(shè)置第一列第岖，第二列...的屬性說明二：如果改變
<tfoot>的順序，將其放置在<tbody>前面蔑滓，那么效果如何？
答案是：不會(huì)改變键袱，瀏覽器會(huì)自動(dòng)排列順序。說明三：屬性
border-collapse:collapse;
設(shè)置合并邊框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1px">
<colgroup>
<col width=100 bgcolor=red>
<col width=150 bgcolor=green>
<col width=160 bgcolor=yellow>
</colgroup>
<thead>
<th>班級(jí)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</thead>
<tbody>
<tr>
<td>1班</td>
<td>張三</td>
<td>李四</td>
</tr>
<tr>
<td>2班</td>
<td>趙六</td>
<td>劉七</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
(完)
