常用的html标签

a标签
a标签可以配合iframe标签

<a href="http://qq.com" target="aaa">QQ</a>
<iframe src="#" name="aaa" frameborder="0"></iframe>

iframe标签

2.1 target属性
(1) _blank(也是默认状态): 在新页面打开链接。
(2) _self: 在当前页面打开链接。
(3) _parent: 在父元素打开链接。
(4) _top: 在祖先最顶部元素打开链接。

image.png

如图：点击index2中的parent QQ链接会在index页面打开链接，点击index3中的top QQ会在index页面打开链接。

2.2 download属性

<a href="./index2.html" download>下载</a>

点击「下载」，可以下载「index2.html」文件。
还有一种下载方式，就是网页响应的「Content-type」为「application/octet-stream」时可以下载。但是如果「Content-type」为其他类型，则可以添加「download」属性来进行下载。

2.3 href属性
1）当我们直接这么写的时候：

<a href="qq.com" >QQ</a>

href中的qq.com是一个相对路径。
点击后，网址变化如下：

image.png

2）以当前协议打开。

<a href="//qq.com" >QQ</a>

可能你的当前协议是file，点击后不能打开QQ的网页，此时可以在命令行安装一个叫「http-server」的东西，此时当前协议是以http打开页面。

3）查询条件

<a href="?name=Jason" >QQ</a>

不会改变页面网址，会在当前网址后增加此「查询条件」。

4）#（锚点）
除了此方式，其他a标签都会发送get请求。

5）伪协议
如果有这么一个需求，就是点a标签，但是什么都不做。

<a href="#">QQ</a>

如果我们这么写，会“跳到”当前页面顶部。

<a href="">QQ</a>

如果什么都不写，浏览器会认为你是跳转到当前页面本身，也就是说会刷新页面。
因此，伪协议孕育而生。

<a href="javascript:;">QQ</a>

form标签（）

3.1 如果form表单中没有提交按钮，则无法提交表单。（除非使用JS）

<form action="users" method="post">
  <input type="text" name="username"/>
  <input type="password" name="password"/>
</form>

3.2 一般用于HTTP的POST请求

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

其中为username和password的值会作为POST请求的第四部分发出去。

image.png

但是如果此时换成GET请求，会有一些小区别。

image.png

会作为查询参数放在网址后面。

我们也可以在POST请求中增加查询参数。

<form action="users?name=xxx" method="get">
      <input type="text" name="username"/>
      <input type="password" name="password"/>
      <input type="submit" value="提交"/>
</form>

3.3 form标签的target功效跟a标签相同，同样可以对iframe标签进行操作。

input 标签
4.1 如果一个form中只有一个<buttom>按钮，那么这个按钮会自动升级type为submit提交按钮。

<form action="users?name=xxx" method="get">
      <input type="text" name="username"/>
      <input type="password" name="password"/>
      <button>提交</button>
</form>

如果input标签的type为button则不能提交。

<form action="users?name=xxx" method="get">
      <input type="text" name="username"/>
      <input type="password" name="password"/>
      <input type="button" value="提交"/>
</form>

4.2 type="checkbox"

<input type="checkbox"/>爱我

此时为了便捷性，用户应该直接点“爱我”两个文字就可以勾选那个box。于是乎：

<input type="checkbox" id="loveMe"/><label for="loveMe">爱我</label>

用label标签包住“爱我”，label标签中的for属性指向input标签的id属性。
但是老司机一般已经不这么做了，取名字太复杂了！！！！
就直接用label标签包住文字和input标签。

<label><input type="checkbox"/>爱我</label>

4.3 type="radio"，可以控制只选择一个选项，就是拥有相同的name。

<input type="radio" name="loveMe" value="yes">yes
<input type="radio" name="loveMe" value="no">no

综合4.2和4.3，checkbox用于多选框，radio用于单选框。

select标签

<select name="group" multiple>
    <option value="">--</option>
    <option value="1">第一组</option>
    <option value="2">第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4" selected>第四组</option>
</select>

disabled使得选项不可选，selected是默认选项，multiple是可以选多个选项。

table标签

6.1 table的孩子标签就只有三个：<thead>,<tbody>,<tfooter>,并且可以随意打乱顺序，浏览器会识别出三个标签应该有的顺序。

6.2 如果不写<tbody>，浏览器会自动补充对应内容为<tbody>标签里面。