table宽度超出页面_<iframe>、<a>、<form>和<table>

<iframe>标签

在一个页面中嵌套另一个页面

可以与<a>标签连用

比如：

<iframe name=xxx src=”#” frameborder=’0’></iframe>
<a target =xxx href=’http://www.qq.com’>QQ</a>

<iframe>的name和<a>的target

frameborder=0使边框为0

点击这个链接，就会在页面中显示QQ页面

<a>标签

跳转页面是GET请求

target属性

target=”_blank” 在空页面打开
target=”_self” 在自己页面打开
target=”_parent”在父级页面打开
target=”_top”在最高级页面打开

downloda属性

强制浏览器下载

href属性

链接最好是http或https开头

如果不加协议，会被认为是文件

也可以不加协议，就是加个//，意思是当前文件是什么协议就用什么协议

可以是锚点#（无GET请求）也可以是?name=xxx，也可(有GET请求)以是JavaScript伪协议(比如：javascript:alert(1);) 点击之后什么都不会做（javascript:;）

http-server

npm I -g http-server

进入网页目录

运行 http-server

就会开启一个本地服务器

在网页中输入http://127.0.0.1:8080/index.html即可打开页面

<Form>标签

跳转页面是POST请求

 <form action='users' method='post' target='_self'>
 <input type='text' name='username'>
 <input type='password' name='password'>
 <input type='submit' value='提交'>
 </form>

GET默认会把参数放到查询参数里面

POST默认会把参数放到第四部分

也可

<form action='users?qqq=1' method='post'>

让POST也有查询参数

<form>标签的target属性和<a>标签中target属性一样可以与<iframe>标签中的name属性一起使用

input 中 type属性的参数：

checkbox :复选框

<input type='checkbox'>弟弟

要想点弟弟两字也可以勾选就

<input type='checkbox' id='xxx'><label for='xxx'>弟弟</label>

label是关联的意思

也可以用label把input包起来

<label><input type='checkbox'>弟弟</label>

但是提交时,浏览器不知道你勾选了这个按钮

可以给个name

<label><input type='checkbox' name='didi'>弟弟</label>

提交时浏览器就会提交 didi=on

<label><input type='checkbox' name='didi' value='yes'>弟弟</label>

提交时浏览器就会提交 didi=yes

喜欢的明星<label><input type='checkbox' name='celebrity' value='yangmi'>杨幂</label>
<label><input type='checkbox' name='celebrity' value='liushishi'>刘诗诗</label>

如果都勾选浏览器就会提交

celebrity=yangmi&celebrity=liushishi

redio:单选框

爱我
<label><input type='radio' value='yes'>Yes </label>
<label><input type='radio' value='yes'>No</label>

这样的话就不是只能选一个了

只要给个相同的name就行了

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

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

无multiple

disabled:不能被选

selected：默认选中

multiple:可以多选，按ctrl

• multiple 多样的 /'mʌltɪpl/

文本框

<textarea  name='loveme' cols='30' rows='10'></textarea>

name一定要有

在文本框中输入值，提交，浏览器就会收到 loveme=值

创建文本框，是可以随便拉动的，但经常会造成BUG

所以一般是希望文本框是固定大小的

<textarea style='resize:none' name='loveme' cols='30' rows='10'></textarea>

<table>标签

table中只能有三个标签

<table>
  <thead>
    <tr>
      <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
    </tr>
  </thead>
 

  <tbody>
    <tr>
      <th></th><th>小明</th><td>1</td><td>1</td><td>94</td>
    </tr>
    <tr>
      <th></th><th>小红</th><td>1</td><td>1</td><td>95</td>
    </tr>

    <tr>
      <th>平均分</th><td></td><td></td><td>95</td>
    </tr>
  </tbody>
 

  <tfoot>
    <tr>
      <th>总分</th><td></td><td></td><td>190</td>
    </tr>
  </tfoot>
</table>

设置宽度和边框

<table border=1>#表格边框为1px
<colgroup>
 <col bgcolor=red width=100>#第一列宽度为100px，颜色为红色
 <col width=200>#第二列宽度为200px
</colgroup>
</table>

用CSS去取消表格间隙

<style>
 table{
 border-collapse:collapse;
}
</style>

tfoot tbody thead 顺序是无关的

可以不写 tbody,浏览器会自动帮你补上，如果不写thead,所有内容会被浏览器加到tbody里面,除了tfoot