HTML 常用的标签

iframe标签

iframe 与 a标签结合使用

// target="xxx" 的 a标签 可以指向 name="xxx" 的 iframe标签 
// 这个示例可以点击一个a标签切换在内部改变iframe里的内容，不过刷新会比较卡
<iframe name="xxx" src="http://qq.com" frameborder="0"></iframe>
<a target="xxx" href="http://qq.com">qq</a>
<a target="xxx" href="http://baidu.com">百度</a>

a标签

a标签的属性详见

1. a标签的target属性

<a target="_blank"  href="http://qq.com">新窗口打开</a>
<a target="_self"  href="http://qq.com">在当前页打开</a>
<a target="_parent"  href="http://qq.com">在外层有iframe的情况下，在父级页面打开</a>
<a target="_top"  href="http://qq.com">在有三层iframe的情况下看得出与上面的区别，这个会在最顶层页面打开</a>

2. a标签的href属性

<a href="qq.com">这里不会打开qq页面，这里表示一个文件</a>
<a href="?name=xxx">加查询参数</a>
<a href="#xxx">加锚点，点击会移动到顶部</a>
<a href="javascript:;">加伪协议，不跳转链接</a>

form标签

form标签的属性详见
a标签与form标签的区别在于，a发起GET请求，form发起POST请求。

<a href="index2.html">link</a>
<form action="users" method="post">
    <input type="text" name="username"></input> 
    <input type="password" name="password"></input> 
    <input type="submit" value="提交"></input> 
</form>

1. form要有提交按钮

2. form主要用于发起POST请求
   form中method只能写get和post，写get会默认出现到查询参数，post会默认出现到响应的第四部分Form Data里。

3. 可以发起POST请求的同时添加查询参数，但是不可以在发起GET请求的同时响应第四部分Form Data。

<form action="users?zzz=3" method="post">
...
</form>

4. form 中的target与a中的target同样用法，也同样可以跳转iframe

<form target="_blank">
...
</form>

input标签

input的属性详见
input标签中加上name和value，用于提交查询参数。

1. 如果一个form里只有一个按钮，它的type是button，那么自动升级为提交按钮。
   button标签内可以加内容，可以是元素，也可以加标签；而input是个空标签，不能在input标签中加内容，要加内容只能在value里加。

// 这里不要加type，才会是submit效果
<button>提交</button>
// 或，一个提交按钮
<input type="submit" value="提交"></input>

2. checkbox，radio

// 用label中的for与input中的id相结合
<input type="checkbox" id="xxx"><label for="xxx">桔子</label>
//用label包裹名称和input标签
<label>用户名<input type="text" name="username"></label>

// 提交可以得到查询参数 fruit=orange&fruit=banana
<label><input type="checkbox" name="fruit" value="orange">桔子</label>
<label><input type="checkbox" name="fruit" value="banana">桔香蕉</label>

// 提交可以得到查询参数 loveme=yes 或 loveme=no
<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>

3. select

// 默认选择第四组，第三组不可选，加个multiple可以多选
<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>

4. textarea样式最好在css中添加

table标签

table中的属性详见

<table>
    <colgroup>
        <col width=100>
        <col width=100 bgcolor=red>
        <col width=100>
        <col width=100>
    </colgroup>
    <thead>
        <tr>
          <th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
          <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
    </tfoot>
</table>