ZhangYang's Blog

form、a、iframe 和 table 详解

发表于 | 分类于

a标签

href

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 相对路径
<a href="./xxx">点击</a>
// 绝对路径
<a href="www.baidu.com">点击</a>
// 有协议路径
<a href="https://www.baidu.com">点击</a>
// 无协议路径(跟随文件所在协议)
<a href="//www.baidu.com">点击</a>
// javascipt: 伪协议
<a href="javascript:;">点击</a>
// 锚点（fragment）
<a href="#xxx">点击</a>
<div id="xxx">2</div>

target

_blank:打开新窗口

_self:自身窗口打开

_top:最顶层窗口打开

_parent:父窗口打开

a标签打开target给值都是窗口的name

download

iframe标签

页面套页面

性能较低

name 属性

1
2
<a href="http://baidu.com" target="xxx">百度</a>
<iframe src="/b" name="xxx" frameborder="0" width=900 height=900></iframe>

其他属性

table标签

table属性

form构造get请求

form的action请求路径

inpui的name和value分别对应请求参数的key和value,多个参数用&连接

同个路径,不同请求参数对应不同页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// index.html
<form action="/">
	<div>
		<input type="text" name="username" >
	</div>
	<div>
		<input type="password" name="password" >
	</div>
	<div>
		<input type="submit" value="提交">
	</div>
</form>
// server.js
if(path === "/"){
	var string = fs.readFileSync("./index.html")
	response.setHeader("Content-type","text/html;charset=utf-8")
	if(query.username){
		response.end("你好" + query.username)
	}else{
		response.end(string)
	}
}else{
	response.end("404")
}

form构造post请求

get 和 post 的区别

  • 消息体：get 没有，post 有
  • 查询参数：get 一般使用查询参数，post 一般不使用
  • URL 长度：get 的 URL 存在长度限制（1024个字符等），post 没有限制（其实也有）
  • 安全性：post 比 get 安全一丢丢，因为 post 需要用 form 来构造，而 get 可以轻易构造
1
2
3
4
5
6
7
8
9
10
11
12
// index.html
<form action="/" method="post">
	<div>
		<input type="text" name="username" >
	</div>
	<div>
		<input type="password" name="password" >
	</div>
	<div>
		<input type="submit" value="提交">
	</div>
</form>