iframe关闭当前窗口_iframe 、 a标签、input标签

1       npm i -g  http-server

全局安装本地服务器，预览html文件

或者不安装提交到github 里面，再用它提供的预览链接看

注意：安装成功后，启动时可以直接是http-server，但最好写 http-server -c-1 (意思是不要缓存)

2 <a>标签 页面跳转（http GET请求）

<a href="//baidu.com" target="_blank" download>baidu3</a>

href="//baidu.com"  /*当前是什么协议我就用什么协议*/（http/https）
href="xxx.html"     //相对路径
href="?xxx=yyy"   //后台会发起get请求
href="#ssdfgsdfg"// 只写锚点后台不会发起，因为锚点页面内的跳转，而其他都是后台要发请求的
href="javascript:alert(1);"//直接执行js，这是伪协议，不是URL

应用场景：希望点击<a>标签后，页面不要跳转,也不要上下左右移动

href="javascript:;"

download 可以下载文件

或者是 content-type: application/octet-stream 也可以下载文件

3     <iframe src="http://baidu.com" frameborder="0"></iframe>

frameborder="0" <iframe>标签有自带的边框，建议去掉！

src 可以写相对路径(比如 ./index4.html)

4 <a>标签和<iframe>标签一起用有以下特点：

index.html
<ifame src="./index2.html" frameborder="0"></iframe>

index2.html
<a href="//baidu.com" target="_blank" download>blank</a>//新开页面
<a href="//baidu.com" target="_self" download>self</a>//在自身打开页面
<a href="//baidu.com" target="_top" download>top</a>//在祖宗窗口打卡页面，涉及祖孙三代时体现更直接，反之则和parent效果一样
<a href="//baidu.com" target="_parent" download>parent</a>//父辈窗口打开页面
或者
<iframe src="#" frameborder="0" name="vvv"></iframe>
<a href="//baidu.com" target="vvv" download>link</a>

5 <form>标签 页面跳转（http POST请求）

<form action="user" method="post/get"   target="_blank"></form>

<form>标签也有target，和<a>标签一样，也可以放到<iframe>标签里面。

<iframe src="//qq.com" frameborder="0" name="vvv"></iframe>
<a href="//baidu.com" target="vvv" download>link</a>
<form action="user" method="get"   target="vvv">
<input  type="text" name="username">
<input  type="password" name="password">
<input  type="submit" value="提交">
</form>//打开后台就可以看到第四部分内容

GET请求默认会把参数放到查询参数里面，也就是显示道地址栏的后面部分,；

POST请求默认把参数放到第四部分；

若action="user?z=7"，则POST请求的参数会出现在查询参数里面；

但是get请求方法无论如何都没有第四部分

<form action="user" method="post">
<input  type="text" name="username">
<input  type="password" name="password">
<input  type="submit" value="提交">
</form>    

//后台请求有了第四部分，用form+input标签 实现，基于http 协议。https 更安全！

请求头里面的Content-Type: application/x-www-form-urlencoded

第四部分内容为非字母和数字时会转译

<form>标签里面一定要有<input type="submit" value="提交">，否则无法提交；除非用js。

6 input

<input  type="button" value="button">
<input  type="submit" value="提交">

type属性有很多：text, password, button, checkbox, radio

为什么有了type值 有了button还要submit？它们看起来都是button样式

如果一个form标签里面只有一个button标签，那么button标签会自动升级为提交按钮（submit）

<button>button</button>
<button type="button">button</button>   //不会升级为提交按钮
<input type="submit" value=" button">   //提交按钮
<input type="checkbox" id="xxx"><label for="xxx">选我</label>

点击“选我”时自动勾选Checkbox框, label for和input id 一起出现，这样就会在点击字的时候也相当于点击框，进入编辑状态

还有一种简单直接的办法将这两者关联起来，老司机的路数

<label><input type="checkbox" name="animal" value="cat">cat</label>
<label><input type="checkbox" name="animal" value="dog">dog</label>
<label><input type="checkbox" name="animal" value="rabbit">rabbit</label>

type="checkbox"是多选框

<label><input type="radio" name="loveu" > yes</label>
<label><input type="radio" name="loveu" > no</label>

type="radio"是单选框，在input标签里面添加同一个name="loveu"，二选一或者多选一

用get方法可以把选中的信息提交到服务器，在查询参数里面可以看到

选中的信息

7 <select>标签

<select name="group">
  <option value="">---</option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disabled>第三组</option>//默认不能选
  <option value="4" selected>第四组</option>//默认选项
</select>

<select name="group" multiple>//多选，按住ctrl键

8 textarea

<textarea style="resize:none; width:200px;height:100px;" name="hobby" row="30" col="20"></textarea>

textarea的样式用css固定，否则容易出bug固定，style="resize:none; width:200px; height:100px;"