html button跳转页面_HTML常用标签

看完这篇博客，将加深你对以下几个标签的认识：

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名称两个位置。

如图

method：一般填写POST。GET情况下，同样添加action到网址后缀，只不过Form Data数据转移到Query Parameter。

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的数据主键

如图中username,password

实例：
        <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应为何值

实例

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>