html标签

摘要，本文就是扫一下知识盲区，刚看了个视频，发现有些竟然还是不了解的，所以写下本文以做记录

1. iframe 标签

嵌套页面

<iframe src="https://www.baidu.com" name="xxx"></iframe>

比如说，iframe标签也会和a标签一起用

<iframe src="https://www.baidu.com" name="xxx"></iframe>
<a href = "#" target ="xxx"></a>

也就是说，在点击a标签的时候,iframe所在的那一部分会打开baidu.com的页面。

2. a 标签

跳转页面（HTTP GET 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

<a href = "https://www.baidu.com" target ="_blank"></a>
<a href = "https://www.baidu.com" target ="_self"></a>
<a href = "https://www.baidu.com" target ="_parent"></a>
<a href = "https://www.baidu.com" target ="_top"></a>

<a href="">link</a> 标签被点击后会发生什么？
当前页面刷新
<a href="#">link</a> 标签被点击后会发生什么？
页面锚点变成 #
页面滚动到顶部
<a href="/..">link</a> 标签被点击后会发生什么？
浏览器发起 GET / HTTP/1.1 的请求
关于无协议链接 //qq.com，说法正确的是
浏览器会根据当前协议，补全无协议链接的协议
如果用 file:// 协议浏览页面，就会访问到 file://qq.com，这是一个不存在的路径
应该尽量不使用 file:// 协议预览网页，以免无协议链接出错

其他：

_blank:新打开一个空页面
_self:在自己页面的iframe的里面打开
_parent:在父页面打开，也就是在本页打开
_top:在顶级页面打开。也就是说，如果有多个嵌套页面，在最外面的页面打开。

3. form 标签

跳转页面（HTTP POST 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

form 标签的作用有：
发起 POST 请求
发起 GET 请求
form 标签的 action 属性的作用是？
指定请求路径
form 标签的 method 属性的作用是？
指定请求动词
form 标签在以下哪些情况下可以被用户提交？
form 标签里面有一个 input type=submit 的元素
form 标签里面有一个 button 元素，button 的 type 属性为空

4. input / button

区别：是否为「空标签」

<button type="button">Click Me!</button>

image.png

input

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

image.png
image.png