HTML经常用到的标签详解

iframe标签

嵌套其他页面
默认的宽高是50px，100px
可以自定宽高

a标签

<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> 下载文件

a标签的href到底能写什么东西

<a href="//qq.com">QQ</a>a标签 无协议绝对地址
<a href="./xxx.html">QQ</a>a标签 相对路径
<a href="?name=frank">QQ</a>a标签 发起一个请求
<a href="#ssss">QQ</a>a标签 锚点页面内的跳转
<a href="javascript:;">QQ</a>a标签 js伪协议 a标签点击之后什么都不做的标签，让页面无法刷新。

form标签

a标签和form标签的区别，a标签发送的是get请求，form发送的是post请求
get是获取内容，post是发送内容

<form action="users?zzz" method="post">

一般写法<label for="xxx">用户名</label><input type="text" name="xxx" id="xxx">
//label的for和input的id是一对他们会一起出现
-老司机的写法<label for="xxx">用户名<input type="text" name="xxx" id="xxx"></label>
<label for="yyy">密码</label><input type="password" value="password">        //密码
<input type="button" value="button">                  //按钮
喜欢的水果<label ><input type="checkbox"  name="love me" value="orange" >橘子</label>   
喜欢的水果<label ><input type="checkbox"  name="love me" value="banana">香蕉</label>   
 //checkbox是建立一个可以点击的盒子      label是为了将“内容”和checkbox关联起来
<input name="loveme" type="radio" value="yes">
<input name="loveme" type="radio" value="no">
//checkbox和radio的区别checkbox是多选，radio是单选

<select name="group" multiple>
  <option value="">-</option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disbled>第三组</option>
  <option value="4" selectad>第四组</option>
</select>
//disbled表示无法选中，selectad默认选中，multiple可以选中多个组，
<hr>

<texttarea style="resize:none;with:200px;height:200px;" name="爱好" cols="30" rows="10">
//cols是列宽，rows是行高，最好用css控制

<input type="submit" value="提交">
</form>

如果一个form有<button>就会自动升级为提交按钮如果写type就会没有提交按钮
submit是唯一能确定form表单能不能提交的按钮button和他表单能不能提交没有什么关系

form也有target而且和a标签一模一样

如果form表单里没有提交按钮那么你就无法提交到服务器，GET默认会把参数放到查询参数里，post默认会把参数放到第四部分，可以通过给url直接加参数让post也有参数，但我们无法通过任何方法让get有第四部分。

总结：checkbox是多选框，radio是单选框。password是用来输入密码的只是让人看不见，input是没有子元素的，button是有子元素的。

table

<table>
  <colgroup border=1>
    <col width=100>
    <col bgcolor=red width=200>
    <col width=100>
    <col width=700>
  </colgroup>
  <thead>
    <tr>
       <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
    </tr>
  </thead>   
  <tbody>
    <tr>
       <th></th><td>1</td><td>94</td>
    </tr>
    <tr>
       <th></th><td>2</td><td>96</td>
    </tr>
    <tr>
       <th>平均分</th><td></td><td>95</td>
    </tr>
  </tbody>   
  <tfoot>
    <tr>
       <th>总分</th><th></th><th>190</th>
    </tr>
  </tfoot>
</table>

thead 头 tbody 身体 tfoot 脚
thead的border默认是用空间的可以用border-collapse:collapse;把空间合并起来

<tr>定义表格中的行
<td>定义了包含数据的表的一个单元格
<th>定义表格内的表头单元格