HTML常用标签iframe、a、form、input、table

本文所介绍的标签：
iframe、a、form、input、table

iframe 标签

嵌套页面
<iframe src="https://www.baidu.com" name="xxx"></iframe>

<iframe name="12121" src="" frameborder="0"></iframe>
<a href="http://qq.com" target="12121">test</a>

iframe 可用作链接的目标（target），
a标签的 target 属性必须引用 iframe 的 name 属性
点击test，a标签链接会在iframe中打开
iframe会自带一个8px的边框，用frameborder=“0”去掉

a 标签

跳转页面（HTTP GET 请求）

<a href="http://www.baidu.com" download>下载</a>
注意：只有 Firefox浏览器和 Chrome浏览器支持 download 属性。

<a href="http://baidu.com" target="_blank"></a>
_blank 新标签页打开
_self 当前页面打开、
_parent 父级页面打开
_top 顶级页面打开

<a href="//baidu.com"></a>
无协议绝对地址，会自动继承协议（父页面是什么协议，就继承什么协议）

<a href="#121"></a>
锚点，不会发起请求，只在当前页面内跳转

<a href="#"></a>
跳转到顶部

<a href="?name=yuki"
发起get请求

<a href="javascript:;"></a>
伪协议。把JavaScript当作协议（实际没有这个协议），所以是伪协议。
由于javascript里面是分号，a标签点击后什么也不做。
如果是alert(1); 则点击跳出弹窗，内容为1（一般不这样做，有需要可在js里面设置）

form标签

用于搜集不同类型的用户输入，提交给服务器后台
（文本域，下拉列表，单选框，复选框等）

<form action="/abc" method="get">
把form里面的内容提交到abc文件夹，提交方式是“get”（也可以用post）

get：默认方式。
将表单数据（form-data）以名称/值对的形式附加到 URL 中：
URL?k=value&k=value。（键+值）
post：以 HTTP post 事务的形式发送表单数据（form-data）。

form标签是表单的外壳，主要有4个属性:

action：表单提交的地址
method：提交保单的方法
target：在何处打开action（比如target="_blank" ，在新窗口打开页面）
enctype：
（默认）application/x-www-form-urlencoded:在发送前编码所有字符
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值！以二进制形式上传。

通过form表单提交文件操作如下：

<form method="post" action="test" enctype=”multipart/form-data”>
<input type="file" accept=“image/jpg”>
</form>

accept限制可选择的文件类型

如果一个form里面，只有一个按钮，按钮为button（用button标签写），那么该按钮会自动升级为submit

<button>真提交按钮</button>
<input type="submit" value="真提交">

<button type="button">假提交</button>
<input type="button" value="假提交">

input标签

<input>的工作方式因其类型属性的值而有很大差异，如果未指定此属性，则采用的默认类型为 text

可用的值包括：

button：无缺省行为按钮。
checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
checkbox和label一起用，两种方法：

<input type="checkbox" id="111" name="hobby" value="wine">
<label for="111">喝酒</label>

<label><input type="checkbox" name="hobby" value="wine">喝酒</label>

点击“喝酒”文字时，会选中相应的复选框

color：HTML5 用于指定颜色的控件。
date：HTML5 用于输入日期的控件（年，月，日，不包括时间）。
datetime：HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：HTML5 用于输入日期时间控件，不包含时区。
email：HTML5 用于编辑 e-mail 的字段。
file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
hidden：不显示在页面上的控件，但它的值会被提交到服务器。
image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
month：HTML5 用于输入年月的控件，不带时区。
number: HTML5 用于输入浮点数的控件。
password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。
radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
submit：用于提交表单的按钮。
tel：HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
text：单行字段；换行会将自动从输入的值中移除。

table 标签

table里面是一行一行写的（table row）

<tr>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>

小技巧：

可在table里面用colgroup 设置列宽

<colgroup>
<col width=100>
<col bgcolor=red width=200>
<col width=70>
</colgroup>

默认的border之间有空隙（双线边框），CSS改为如下后，可消除（变为单线）

<style>
table{
border-collapse:collapse;
}
</style>