iframe与a标签嵌套:

<iframe name="xxx" src="http://baidu.com" frameborder="1"></iframe>
<a target="xxx" href="http://qq.com">qq</a>

*解释:* 1、默认打开情况,iframe打开的是百度页面; 2、iframe标签的name为xxx,与a标签target为xxx向对应结合使用,那么点击a标签,打开的是QQ页面; 3、frameborder不写的话会有一个默认border,往往不写的话比较难看;

一、a标签(get请求)

1、可以写一个跳转链接:

<a target="xxx" href="http://qq.com"target="_blank">qq</a>
<a target="xxx" href="http://qq.com"target="_self">qq</a>
<a target="xxx" href="http://qq.com"target="_parent">qq</a>
<a target="xxx" href="http://qq.com"target="_top">qq</a>

在HTML中target目标的四个参数的用法:

target="_blank"表示:将链接的画面内容,在新的浏览视窗中打开。打开新窗口;
target="_self"表示:在自己的窗口打开。如果被iframe 嵌套,这在当前这个iframe窗口打开,而不是当前浏览器窗口;
target="_parent"表示:将链接的画面内容,当成文件的上一个画面。即:当父窗口打开。
target="_top"表示:将框架中链接的画面内容,显示在没有框架的视窗中(即除去了框架)。即:顶端打开窗口。

2、点击a标签下载文件

 <a  href="http://qq.com" download>下载</a>

3、a标签的href到底可以写什么?

href="xxx.html"    //就会跳到: 当前地址/xxx.html
href="?name=qqq"  //就会跳到: 当前地址/?name=qqq
href="javascript:alert(1);"  //点击执行javascript内容
href="javascript: ;"     //点击后什么也不做的a标签-伪协议
href="#"     //页面会回到头部

二、form标签(post请求)

<form action="users" method="post">
    <label for="yyy">用户名</label>
    <input type="text" name="账号" id="yyy">
    <label>密码<input type="password" name="密码" ></label>
    <input type="submit" value="提交">
</form>

解释: 1、form表单里面的input的type没有submit属性,就无法提交; 2、label标签的for=yyy 与 input标签的id=yyy 同时出现,点击文字就能聚焦到输入框,或用label套input也行;

get默认会把参数出现在查询参数上; post会把参数放入请求的第四部分; 我们不能让get请求出现在第四部分; post可以把参数出现在查询参数,在action=“users/use?name=1”;

三、input标签type属性

1、能否提交button和submit?

<input type="submit" value="提交">
<button>按钮</button>

解释:两者都可以提交

<button type="button">按钮</button>

解释:不能提交

<button type="submit">按钮</button>

解释:可以提交

总结,button没有写type会自动升级为type=“submit”使得可以提交。

2、多选框 type=“checkbox” name分组

喜欢的水果

<label><input type="checkbox" name="fruit" value="1"> 苹果 </label>
<label><input type="checkbox" name="fruit" value="2"> 香蕉 </label>
<label><input type="checkbox" name="fruit" value="3"> 哈密瓜 </label>

3、单选框 type=“radio” 及 name分组

<label><input type="radio" name="cool" value="yes"> yes </label>
<label><input type="radio" name="cool" value="no"> no </label>
<label><input type="radio" name="cool" value="noyes"> noyes </label>

4、选择框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>
<button type="submit"> button</button>

解释: 默认单选,加了multiple可以多选 disabled默认不能选 selected默认已经选择了

5、textarea多行文本

<textarea  name="hobby" cols="30" rows="10"></textarea>

可以增加css属性来调整textarea固定宽高或用cols和rows来定宽高

style="resize:none;width:100px;heigh:100px"

6、table标签

<table>
   <colgroup>
      <col width=100>
      <col width=200>
   </colgroup>
   <thead>
      <tr>
         <td>姓名</td><td>年龄</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>小红</td><td>12</td>
      </tr>
      <tr>
         <td>小明</td><td>15</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>XXX</td><td>yyy</td>
      </tr>
   </tfoot>
</table>

解释: 1、table标签有三个子元素:thead、tbody、tfoot,顾名思义;即使换了顺序浏览器也一定会按照顺序展示的; 2、table标签另一个元素:colgroup来设置每一列的宽度 3、tr表示列,td表示数据