这一章的核心是HTTPiframe 新开一个窗口用了它页面可能会卡… 想嵌套页面的时候用（iframe默认 高度50 宽度100）【是可替换标签】第一种写法：<iframe src=“https://www.baidu.com/" frameborder=“0”></iframe>第二种写法：name要和a一起用<iframe name=“xxx” src=”#" frameborder=“0”></iframe><a target=‘xxx’ href=“http://qq.com”>QQ</a><a target=‘xxx’ href=“http://baidu.com”>QQ</a>a 标签的 download 属性<a href=“http://baidu.com” download>下载</a>不加 download 也会下载 加和不加的区别：由HTTP响应决定：HTTP响应的是 Content-type:application/octet-stream 那么 浏览器会以下载的形式接收请求 而不是在页面展示如果写的是 Content-type:text/html 又想在页面下载 那就加个download 强制下载a 标签的 href 属性写法<a href="" target=’_blank’>123</a><a href="" target=’_self’>123</a><a href="" target=’_top’>123</a><a href="" target=’_parent’>123</a>_blank 空_self 自己_top 顶级_parent 父级<a href="//baidu.com" download>下载</a><!– 无协议 –><a href="//qq.com">000</a><!– 可以直接写# ？ 相对路径 –><a href="#xxx">000</a><a href="？name=qqq">000</a><a href="./xxx.html">000</a><!– 可以接代码 –><a href=“javascript:aler(1)）;">000</a><!– 可以接代码； 表示什么也不做 javascript：是协议 ;是代码 –><a href=“javascript:;">000</a>a 标签和 form 标签的区别【重要】a 标签一般都是发起 get 请求form 标签一般都是发起 post 请求form 提交如果form表单中没有提交按钮 你就无法提交 除非用js<form action=“users” method=‘post’><!– form和a标签一样 都有target=’_xxxxx’ 标签 –> <input type=“text” name=‘username’> <input type=‘password’ name=‘password’> <input type=‘submit’ value=‘提交’></form>form 提交按钮 – button如果form里面只有一个按钮button 并且没有写 type=‘button’ 那么 它会自动升级为提交按钮如果 type=‘button’ 说明这个form表单没有提交按钮submit是唯一能确定 这个form表单能不能提交的按钮<form action=“users” method=‘post’> <button>提交按钮</button><!– 自动升级为 提交按钮 –> <button type=‘button’>只是按钮</button><!– 只是按钮 –> <input type=‘button’ value=‘只是按钮’><!– 只是按钮 –> <input type=‘submit’ value=‘提交按钮’><!– 提交按钮–></form>form 提交按钮 – checkbox 【划重点 敲黑板】<!– 记得把id改了省的报错 –><form action=“users” method=‘post’> <input type=‘checkbox’>选我! <!– 点选我 不能选中checkbox 只能点checkbox的小框框 –> <input type=‘checkbox’ id=‘ID的名字’><label for=‘ID的名字’>选我!</lable> <!– 点选我 可以选中checkbox –></form><!– 记得把id改了省的报错 –><form action=“users” method=‘post’> <label for=‘ID的名字’>用户名：</label><input type=‘text’ name=‘xxx’ id=‘ID的名字’> <!– 点 用户名：光标直接移入input里 –> <label for=‘ID的名字’>密码：</label><input type=‘text’ name=‘xxx’ id=‘ID的名字’> <!– 点 密码：光标直接移入input里 –></form>老司机写法：【划重点 敲黑板】name 必须要写name 必须要写name 必须要写没有name 提交的时候不会带上这个值<!– 不写id的情况下 label 和 input 就不能产生关联 但用 label 包住 input 则会自动产生关联 –><form action=“users” method=‘post’> <label>用户名：<input type=‘text’ name=‘xxx’></label> <label>密码：<input type=‘text’ name=‘xxx’></label></form>综合以上 写个较为完整的表单<form action=‘usres’ method=‘get’ target=‘bbb’> <label>用户名：<input type=‘text’ name=‘username’></label> <label>密码：<input type=‘password’ name=‘password’ ></label> <br/> 喜欢的水果 <!– checkbox 多选框 属于同一个name要给同一个名字 –> <label><input type=‘checkbox’ name=‘fruit’ value=‘orange’>橘子</label> <label><input type=‘checkbox’ name=‘fruit’ value=‘banana’>香蕉</label> <br/> 喜欢吗 <!– radio 单选框 属于同一个的name要给同一个名字 这样只能选中一个了 –> <label><input name=‘love’ type=‘radio’ value=‘yes’ >Yes</label> <label><input name=‘love’ type=‘radio’ value=‘no’ >Yes</label> <br/> <input type=‘submit’ value=‘button’><!– 提交 –></form><!– 点击提交后（信息就会提交到服务器） 可以看跳转页面的地址栏 里面有你选出的内容 –>下拉列表<!– 必须有form才能提交 不要忘记写 –><form action=“usres” method=“get” target=“bbb”> <select name=“分组” multiple ><!– 加上 multiple 可以按ctrl 就可以多选 –> <!– value 什么都不写（或者直接不写value） 提交后 分组后面就为空 –> <option value=”">-</option> <option value=“1”>第一组</option> <option value=“2” >第二组</option> <!– selected 默认选中 –> <option value=“3” selected>第三组</option> <!– disabled 默认不可选 –> <option value=“4” disabled>第四组</option> </select> <input type=“submit” value=“button”></form>加上 multiple 可以按ctrl 就可以多选多行文本<form action=“usres” method=“get” target=“bbb”> <!– 默认可以随便拉 但会经常出现bug 所有 一般情况需要固定宽高 –> <!–<textarea name=“爱好” cols=“30” rows=“10”></textarea>–> <!– cols 列数 row 行数 【cols不准 row只能大概控制 一般还是用css控制】 –> <textarea style=“resize:none; width: 200px; height: 100px; " name=“爱好” cols=“30” rows=“10”></textarea> <input type=“submit” value=“button”> </form>th 和 td 的区别<table> <!– 控制列的宽度 也可以通过它 控制这一列的颜色 –> <colgroup> <col width=“100”> <col width=“200”> <col width=“50”> <col width=“100”> </colgroup> <thead> <tr> <!– 标题要用 th –> <th></th><!– 左边也要写标题的时候 要空出来一个空的 th –> <th>姓名</th> <th>班级</th> <th>分数</th> </tr> </thead> <tbody> <tr> <th>平均分</th> <td>11</td> <td>22</td> <td>33</td> </tr> </tbody> <tfoot> <tr> <th>总分</th> <td>111</td> <td>222</td> <td>333</td> </tr> </tfoot></table>thead、tbody、tfoot、colgroup特点：不管这四个标签的顺序如何颠倒都没关系 浏览器最后会调整过来就算不写这四个标签 也没关系 浏览器会自动补上css： table之间不留空隙 border-collapse：collapse；— end —