iframe
用来嵌套页面,现在很少用。
是可替换标签,有自己默认的宽100px、高50px。
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
src也可以是相对路径。
frameborder="0"
用来去掉内嵌页面的默认边框。
name 属性可以和 a 标签结合使用:
<iframe src="#" name="xxx"></iframe>
<a target="xxx" href="http://baidu.com">百度</a>
a
跳转页面(发起 HTTP GET 请求)
<a href="http://qq.com" target="_blank">QQ</a>
新页面打开
<a href="http://qq.com" target="_self">QQ</a>
自身页面打开
<a href="http://qq.com" target="_parent">QQ</a>
父页面打开
<a href="http://qq.com" target="_top">QQ</a>
最上层(祖宗)页面打开
<a href="http://qq.com" download>下载</a>
download属性可以下载页面
href 属性的内容可以是绝对路径、相对路径./xxx.html
、无协议链接//qq.com
、锚点#xxx
不发送请求、查询参数?name=yyy
、伪协议javascript:;
javascript:alert(1):;
可以在用户点击 a 时执行一段 javascript 代码,实现点击之后没有任何动作的 a 标签等奇葩需求。
form
跳转页面(发起 HTTP POST 请求)
如果 form 表单里面没有提交按钮,就无法提交这个 form(回车也没有),除非使用 js。
form 标签用来发起一个 POST 请求,不管响应。
<form action="users" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
method 的值只能是 POST 或者 GET,但我们需要获取页面时往往用 a 标签而不是 GET。
用 POST 请求时,name 的值会成为发起的请求的第四部分。
用 GET 请求时,name 的值会成为查询参数。
我们可以用给 action 的值加参数的方法action="users?zzz=111"
,使 POST 请求也有查询参数。但没有方法能使 GET 请求出现的第四部分。
form 标签也有 target 属性,和 a 标签的相同,也可以与 iframe 标签组合使用。
button
<button>button</button>
button 标签里面可以有子标签。
如果 form 表单里没有提交按钮,button 标签中也没有写 type 属性,生成的按钮会自动升级成 submit 按钮。
input
根据 type 属性值的不同,有多种不同的 input 类型。
input 是空标签,没有子标签。
input 需要有 name 属性,这样在提交表单时, input 的值才会出现在请求里。
button
<input type="button" value="button">
就是一个普通的按钮,和 submit 提交没什么关系。
checkbox
<input type="checkbox" id="xxx"><label for="xxx">爱我</label>
checkbox 是复选框,label 标签的 for 属性和 input 标签的 id 属性是对应的,可以把某个 label 和 input 关联起来。
另一种关联的方法是用 labal 标签把 input 标签包起来
喜欢的水果
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
给一组复选框同一个 name 值,不同的 value 值,这样服务器能知道你选择了哪些。
radio
<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>
给一组单选框同一个 name 值,这样只能选中一个,不同的 value 值,服务器能知道你选了哪一个。
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 属性表示可以多选。
disabled 属性表示不可选择该项,selected 属性表示默认选择该项。
textarea
多行文本
<textarea style="resize:none; width:200px; height:100px;" name="爱好"></textarea>
可以用 CSS 控制宽高,resize:none表示多行文本框无法随意拖动大小。
<textarea style="resize:none;" name="爱好" cols="100" rows="10"></textarea>
也可以用列数、行数来大概控制宽高。
table
<table border=1>
<colgroup>
<col width=100>
<col width=120 bgcolor=red>
<col width=70>
<thead>
<tr>
<th></th><th></th><th></th>
</tr>
</thead>
<tbody>
<tr>
<th></th><td></td><td></td>
</tr>
</thody>
<tfoot>
<tr>
<th></th><td></td><td></td>
</tr>
</tfoot>
</table>
table 的 border 默认是有间隙的,可以在 CSS 中用table{ border-collapse: collapse; }
去除间隙。
colgroup 标签可以设定表格一列的宽度、颜色等。