<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>
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