HTML 常用標簽
1. iframe 標簽
iframe 標簽主要用途是嵌套頁面,目前使用較少,只有一些遺留項目在用。具體可以參考<iframe>
例子:
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<!-- frameborder 用來消除 iframe 的邊框 -->
<iframe name="xxx" src="http://qq.com" frameborder="0"></iframe>
<a target="xxx" >QQ</a>
<a target="xxx" >baidu</a>
</body>
</html>
2. a 標簽
a 標簽主要用途是跳轉(zhuǎn)頁面(HTTP GET 請求)。具體可以參考<a>
a 標簽的常用屬性:
-
target注意:使用target時,考慮添加 rel="noopener norefferrer" 以防止針對 window.opener API 的惡意行為。
-
_self:當前頁面加載(默認) -
_blank:新窗口打開 -
_parent:響應(yīng)到當前框架的HTML4父框架或當前的HTML5瀏覽上下文的父瀏覽上下文。如果沒有,方式同_self。 -
_top:HTML4響應(yīng)到完整的、原來的窗口,HTML5響應(yīng)到頂層瀏覽上下文。如果沒有,方式同_self。
-
-
download這是HTML5出現(xiàn)的新屬性。此屬性指示瀏覽器下載URL而不是導(dǎo)航到它,因此將提示用戶將其保存為本地文件。如果屬性有一個值,那么它將在Save提示符中作為預(yù)填充的文件名使用(如果用戶需要,仍然可以更改文件名)。
-
href注意: 可以使用 href="#top" 或者 href="#" 鏈接返回到頁面頂部。這種行為是HTML5的特性。
- 錨點,頁面內(nèi)跳轉(zhuǎn),只有它不發(fā)起請求。例子:
href="#foo"
其他的都會發(fā)起請求,比如href="?foo",點擊后也會發(fā)起一個帶上?foo的GET請求。 - 無協(xié)議絕對地址。例子:
- 相對地址。例子:
href="xxx.html" - JavaScript偽協(xié)議。例子:
href="javascript: alert(123);"
在實際場景中,如果你希望有個點擊它不要有任何跳轉(zhuǎn)的 a 標簽,可以這么使用:<a href="javascript: ;">hello</a>
- 錨點,頁面內(nèi)跳轉(zhuǎn),只有它不發(fā)起請求。例子:
3. form 標簽
form 標簽主要用途是跳轉(zhuǎn)頁面(一般是HTTP POST 請求)。具體可以參考<form>
注意點:
- form 標簽中沒有提交按鈕則無法提交這個 form,除非你用 js
- form 標簽主只支持 GET 請求和 POST 請求,但主要用來提交 POST 請求
- 發(fā)送 POST 請求時,from 標簽中的 input 標簽的 name 屬性會被當做 HTTP 請求的第四部分(
Form Data)的 key
發(fā)送 GET 請求時,from 標簽中的 input 標簽的 name 屬性會被當做 url 的查詢參數(shù)
(你可以通過修改 from 標簽的 action 來使得 POST 請求支持查詢參數(shù),但不能使得 GET 請求有第四部分。) - form 標簽也有
target屬性,用法類似 a 標簽
4. input / button
input 標簽具體可以參考 <input>
button 標簽具體可以參考 <button>
注意點:
- input / button 的區(qū)別:是否為「空標簽」(input 標簽沒有子元素)
- 在 form 中:
-
<input type="button" value="button">沒有提交功能(只是普通按鈕) -
<input type="submit" value="submit">有提交功能 -
<button type="submit">submit</button>有提交功能 -
<button>button</button>有提交功能(自動升級)
-
- 用 label 標簽將 input 標簽包起來,可以直接產(chǎn)生類似
<input type="checkbox" name="cb" id="cb"><label for="cb">checkbox</label>的關(guān)聯(lián)效果 - input 標簽的 type 為radio,幾個 input 標簽的 name 一致時,才會有不被同時選中的效果
5. table 標簽
table 標簽主要用途是展示數(shù)據(jù)。具體可以參考<table>
注意點:
- table 標簽內(nèi),直接的子標簽只能有 thead、tbody、tfoot、colgroup這4個
- thead、tbody、tfoot這三個的順序無論怎么改變,都會被瀏覽器自動糾正為thead、tbody、tfoot
- table 的 border 默認是有空隙的,可以在 CSS 中設(shè)置
border-collapse: collapse;改為沒有空隙