HTML 常用标签
2018-12-30 本文已影响8人
饥人谷_Richard
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" href="http://qq.com">QQ</a>
<a target="xxx" href="http://baidu.com">baidu</a>
</body>
</html>
2. a 标签
a 标签主要用途是跳转页面（HTTP GET 请求）。具体可以参考<a>
a 标签的常用属性：
-
target注意：使用target时，考虑添加 rel="noopener norefferrer" 以防止针对 window.opener API 的恶意行为。
-
_self：当前页面加载（默认） -
_blank：新窗口打开 -
_parent：响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有，方式同_self。 -
_top：HTML4响应到完整的、原来的窗口，HTML5响应到顶层浏览上下文。如果没有，方式同_self。
-
-
download这是HTML5出现的新属性。此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么它将在Save提示符中作为预填充的文件名使用（如果用户需要，仍然可以更改文件名）。
-
href注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是HTML5的特性。
- 锚点，页面内跳转，只有它不发起请求。例子：
href="#foo"
其他的都会发起请求，比如href="?foo"，点击后也会发起一个带上?foo的GET请求。 - 无协议绝对地址。例子：
href="//qq.com" - 相对地址。例子：
href="xxx.html" - JavaScript伪协议。例子：
href="javascript: alert(123);"
在实际场景中，如果你希望有个点击它不要有任何跳转的 a 标签，可以这么使用：<a href="javascript: ;">hello</a>
- 锚点，页面内跳转，只有它不发起请求。例子：
3. form 标签
form 标签主要用途是跳转页面（一般是HTTP POST 请求）。具体可以参考<form>
注意点：
- form 标签中没有提交按钮则无法提交这个 form，除非你用 js
- form 标签主只支持 GET 请求和 POST 请求，但主要用来提交 POST 请求
- 发送 POST 请求时，from 标签中的 input 标签的 name 属性会被当做 HTTP 请求的第四部分（
Form Data）的 key
发送 GET 请求时，from 标签中的 input 标签的 name 属性会被当做 url 的查询参数
（你可以通过修改 from 标签的 action 来使得 POST 请求支持查询参数，但不能使得 GET 请求有第四部分。） - form 标签也有
target属性，用法类似 a 标签
4. input / button
input 标签具体可以参考 <input>
button 标签具体可以参考 <button>
注意点：
- input / button 的区别：是否为「空标签」（input 标签没有子元素）
- 在 form 中：
-
<input type="button" value="button">没有提交功能（只是普通按钮） -
<input type="submit" value="submit">有提交功能 -
<button type="submit">submit</button>有提交功能 -
<button>button</button>有提交功能（自动升级）
-
- 用 label 标签将 input 标签包起来，可以直接产生类似
<input type="checkbox" name="cb" id="cb"><label for="cb">checkbox</label>的关联效果 - input 标签的 type 为radio，几个 input 标签的 name 一致时，才会有不被同时选中的效果
5. table 标签
table 标签主要用途是展示数据。具体可以参考<table>
注意点：
- table 标签内，直接的子标签只能有 thead、tbody、tfoot、colgroup这4个
- thead、tbody、tfoot这三个的顺序无论怎么改变，都会被浏览器自动纠正为thead、tbody、tfoot
- table 的 border 默认是有空隙的，可以在 CSS 中设置
border-collapse: collapse;改为没有空隙
