常用HTML标签

iframe标签

• 用于在当前页面里嵌入一个页面

<iframe src="https://qq.com" frameborder="0"></iframe>

• 跟a标签配合使用

<iframe name="QQ" frameborder="0"></iframe>
<a href="http://qq.com" target="QQ">点击跳转到腾讯网</a>

a标签

• 可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
• download属性

下载href中的内容，不是跳转到它
<a href="index.html" download>点击下载</a>

• href属性

1.当前页面刷新
<a href="">link</a>

2.页面滚动到顶部，页面锚点变成#
<a href="#">link</a>

3.跳转页面
<a href="https://baidu.com">超链接</a>

5.浏览器发起 GET / HTTP/1.1的请求(需关闭浏览器缓存查看)
<a href="/...">发起请求</a>

6.执行一段js代码(javascript伪协议)
<a href="javascript:alert(1);">弹出1</a>

7.执行一条空的js代码(javascript伪协议)
<a href="javascript:;"></a>

• target属性

1.在新的窗口打开页面
<a href="https://qq.com" target="_blank"></a>

2.在当前窗口打开或iframe
<a href="https://qq.com" target="_self"></a>

3.父级窗口或iframe
<a href="https://qq.com" target="_parent"></a>

4.顶层窗口或iframe
<a href="https://qq.com" target="_top"></a>

form标签

• form标签的作用是发起POST/GET请求
• 注意：form表单下必须要有一个按钮，否则无法提交
• action属性

action用来指定请求的路径
<form action="index.html">
   <button>提交</button>
</form>

• method属性

method用来指定请求的方法，默认是GET，一般用POST
<form action="index.html" method="post">
   <button>提交</button>
</form>

• target属性
  与a标签的target属性作用一样

• 与input搭配使用

发起一个POST请求，请求第四部分的内容是name=suyuan&password=1234
*input的name属性值会作为请求的参数名
<form action="index1.html" method="post">
   <input type="text" name="name">
   <input type="password" name="password">
   <button>提交</button>
</form>

input标签

• 基于Web的表单创建交互式控件
• type属性

1.submit用于提交表单的按钮
<input type="submit">

2.checkbox复选框
实现点击'苹果'选中，两种方式
第一种：
<input type="checkbox" id="apple">
<label for="apple">苹果</label>
第二种
<label><input type="checkbox">苹果</label>

3.radio单选框
也能与label标签搭配使用
实现点击'苹果'选中，两种方式
第一种：
<input type="radio" id="apple">
<label for="apple">苹果</label>
第二种
<label><input type="radio">苹果</label>

4.text文本框
<input type="text">

5.password密码输入
<input type="password">