![85d3e7f5d9c2476fbd9fd9179c57d101.png](https://i-blog.csdnimg.cn/blog_migrate/8b95445cf17e6bffdc17ac8edcb34b95.jpeg)
看完这篇博客,将加深你对以下几个标签的认识:
1.iframe
2.a
3.form
4.table
一.iframe
用来嵌套其他页面
src:页面地址,可写相对路径
frameborder:默认边框,美观起见常设0
name:嵌套页唯一标识,与a标签的target对应
实例
<iframe src="http://qq.com" frameborder="0"></iframe>
<iframe src="./index.html" frameborder="0"></iframe>
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://baidu.com">百度</a>
二. a
插入链接
href:分四种类型
- ="xxx.html":跳转到同母目录下其他页面
- ="?name=fang":自动将其添加到网页后缀,同时发起GET请求
- ="#tail":跳转到本页中"id=tail"的元素位置
- ="javascript:;":伪协议
target:也是四种选择
- target="_blank":新开页面
- target="_self":当前页面打开
- target="_parent":引用它的父页面打开
- target="_top":最祖先页面打开
download:点击下载source文件
实例:
<a href="http://qq.com" target="_blank">blank_QQ</a>
<a href="http://qq.com" download>下载</a>
<a href="#ssss">QQ</a>
<a href="javascript:alert(1);">QQ</a>
<a href="javascript:;">QQ</a>
<a id="top" href="#tail">回到底部</a>
<a id="tail" href="#top">回到顶部</a>
除了锚点(#)和伪协议外,一般href="??"都会触发请求
href参数对a标签的影响:
1.<a href="#">0w0</a> 回到顶部
2.<a href=""> 0w0</a> 刷新页面
3.<a href="javascript:;">0w0</a> 没有变化
三.form
用来填写表单,发起POST请求
action:填写一个路径,告诉form你要POST的一个地方,会影响网址后缀和POST名称两个位置。
![ec0f08d8444e85946d39b4cf2433448c.png](https://i-blog.csdnimg.cn/blog_migrate/c3bb050eb6e75879ee28ca7f6450e0d8.jpeg)
method:一般填写POST。GET情况下,同样添加action到网址后缀,只不过Form Data数据转移到Query Parameter。
![9ce9a784b9fc54f3d2b5d0afb140dd5c.png](https://i-blog.csdnimg.cn/blog_migrate/fcc98cc9fac18b44041854557d68665a.jpeg)
target:同iframe的target
实例:
<form action="index2.html" method="POST">
</form>
同样是跳转页面,a标签发起GET请求,form标签发起POST请求(因需向服务器传参数)
form>input
type:text/password/submit/button/checkbox/radio
name:用来声明Form Data的数据主键
![d15bbe2a3186dd44d21611d78179e143.png](https://i-blog.csdnimg.cn/blog_migrate/f05b11f9caeb5cfa7c0eed4e68684207.jpeg)
实例:
<form action="index2.html" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
form标签下的按钮有时候一回车就跳转,有时候不跳转——submit决定
<button>OwO</button>(默认等同<button type=>"submit">)
<button type="button">QAQ</button>
<input type="submit" value="OwO">
<input type="button" value="QAQ">
form>label
实现点击标签,选中相应的input元素
实例:
<label>爱我<input type="checkbox" name="loveme"></label>
<label>用户名<input type="text" name="username"></label>
form>input type=checkbox
多选框
name:必要,给选框一个变量
value:指定选中状态时name应为何值
![3c49843b26334edbe0f06673b7c5a2f4.png](https://i-blog.csdnimg.cn/blog_migrate/9c61f451c6e14ab4a25541696f3fb857.jpeg)
form>input type=radio
单选框
name:组内单选框须指定一样的name
value:指定该选项选中时name的值
form>select
下拉列表
name:指定列表名称
multiple:支持多选
form>select>option
下拉列表选项
value:选中该项时select的name值
disabled:禁选
selected:默认选项
实例:
<select name="group">
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
form>textarea
文本框(可提交)
style->resize:是否可手动拉伸
rows:行数
cols:列数
实例:
<textarea style="resize:none;width:200px;height:200px;" name="爱好">
<textarea style="resize:none;;" name="爱好" rows="10" cols="30">
四.table
表格
border-collapse:collapse:控制表格不留空隙
border:规定表格边框粗细
thead tbody tfoot:这三行不管放到哪,浏览器严格按照三者逻辑顺序展示
tr->table row:表行
td->table data:表数据(列)
th->table head:表头(表示非数据单元格用)
table>colgroup
按列描述表格尺寸,颜色等风格
实例:
<colgroup>
<col width=100>
<col bgcolor=red width=200>
<col width=100>
<col width=70>
</colgroup>