HTML标签

iframe

用来嵌套页面，现在很少用。
是可替换标签，有自己默认的宽100px、高50px。
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
src也可以是相对路径。
frameborder="0" 用来去掉内嵌页面的默认边框。
name 属性可以和 a 标签结合使用：

<iframe src="#" name="xxx"></iframe>
<a target="xxx" href="http://baidu.com">百度</a>

a

跳转页面（发起 HTTP GET 请求）
<a href="http://qq.com" target="_blank">QQ</a>新页面打开
<a href="http://qq.com" target="_self">QQ</a>自身页面打开
<a href="http://qq.com" target="_parent">QQ</a>父页面打开
<a href="http://qq.com" target="_top">QQ</a>最上层（祖宗）页面打开
<a href="http://qq.com" download>下载</a>download属性可以下载页面
href 属性的内容可以是绝对路径、相对路径./xxx.html、无协议链接//qq.com、锚点#xxx不发送请求、查询参数?name=yyy、伪协议javascript:; javascript:alert(1):;可以在用户点击 a 时执行一段 javascript 代码，实现点击之后没有任何动作的 a 标签等奇葩需求。

form

跳转页面（发起 HTTP POST 请求）
如果 form 表单里面没有提交按钮，就无法提交这个 form（回车也没有），除非使用 js。
form 标签用来发起一个 POST 请求，不管响应。

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

method 的值只能是 POST 或者 GET，但我们需要获取页面时往往用 a 标签而不是 GET。
用 POST 请求时，name 的值会成为发起的请求的第四部分。
用 GET 请求时，name 的值会成为查询参数。
我们可以用给 action 的值加参数的方法action="users?zzz=111"，使 POST 请求也有查询参数。但没有方法能使 GET 请求出现的第四部分。
form 标签也有 target 属性，和 a 标签的相同，也可以与 iframe 标签组合使用。

button

<button>button</button>button 标签里面可以有子标签。
如果 form 表单里没有提交按钮，button 标签中也没有写 type 属性，生成的按钮会自动升级成 submit 按钮。

input

根据 type 属性值的不同，有多种不同的 input 类型。
input 是空标签，没有子标签。
input 需要有 name 属性，这样在提交表单时， input 的值才会出现在请求里。

button

<input type="button" value="button">就是一个普通的按钮，和 submit 提交没什么关系。

checkbox

<input type="checkbox" id="xxx"><label for="xxx">爱我</label>checkbox 是复选框，label 标签的 for 属性和 input 标签的 id 属性是对应的，可以把某个 label 和 input 关联起来。
另一种关联的方法是用 labal 标签把 input 标签包起来

喜欢的水果
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>

给一组复选框同一个 name 值，不同的 value 值，这样服务器能知道你选择了哪些。

radio

<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>

给一组单选框同一个 name 值，这样只能选中一个，不同的 value 值，服务器能知道你选了哪一个。

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>

下拉菜单， multiple 属性表示可以多选。
disabled 属性表示不可选择该项，selected 属性表示默认选择该项。

textarea

多行文本
<textarea style="resize:none; width:200px; height:100px;" name="爱好"></textarea>可以用 CSS 控制宽高，resize:none表示多行文本框无法随意拖动大小。
<textarea style="resize:none;" name="爱好" cols="100" rows="10"></textarea>也可以用列数、行数来大概控制宽高。

table

<table border=1>
  <colgroup>
    <col width=100>
    <col width=120 bgcolor=red>
    <col width=70>
  <thead>
    <tr>
      <th></th><th></th><th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th><td></td><td></td>
    </tr>
  </thody>
  <tfoot>
    <tr>
      <th></th><td></td><td></td>
    </tr>
  </tfoot>
</table>

table 的 border 默认是有间隙的，可以在 CSS 中用table{ border-collapse: collapse; }去除间隙。
colgroup 标签可以设定表格一列的宽度、颜色等。