HTML常用标签

本文是关于HTML中的iframe标签、a标签、form标签、input/button标签、table标签常用标签的介绍，文中的代码若无说明，则表示写于<body>标签中

开篇介绍

这里是沂轱，经过几天的学习，沂轱终于开启了HTML的学习，昨日沂轱介绍了HTML中的可替换标签与空标签，今天就介绍几个比较常用的标签

进入正题

iframe标签

在HTML中起嵌套页面的作用，可以将另一个HTML页面嵌入当前页面中

<!-- 使用格式 -->
<iframe src = "http://www.baidu.com" name = "xxx" frameborder = "0"></iframe>

注：name表示嵌入的浏览上下文(框架的名称)，可以用作<a>标签，<form>标签的tar属性值，或<input>标签和<button>标签的formtaget属性值;frameborder取值为0时则无需绘制此边框

<!--使用格式：当点击文字时自动在iframe处跳转-->
<iframe name = "xxx" src = "#" framebo></iframeborder = "0"></iframe>
<a terget = xxx href = "http://qq.com">QQ</a>
<a terget = xxx href = "http://baidu.com">百度</a>

a标签

在HTML中起跳转的作用，类似office中的超链接，可以创建一个到其他URL的超链接；在使用a标签进行跳转其他URL地址时，浏览器发送的请求为GET请求

<!--各target属性值的含义-->
<a href = "http://www.qq.com" target = "_blank">QQ</a>
<!--_blank表示空，指在空页面打开链接-->
<a href = "http://www.qq.com" target = "_self">QQ</a>
<!--_self表示自己，指在当前（自己）页面打开链接-->
<a href = "http://www.qq.com" target = "_parent">QQ</a>
<!--_parent表示父母，指在<a>标签的父页面打开链接-->
<a href = "http://www.qq.com" target = "_top">QQ</a>
<!--表示顶层窗口，若<a>标签存在着比父页面还高一层的页面，即祖宗页面，时，在祖宗页面打开链接-->

在a标签中使用download属性，当点击使用a标签描述的文字时，会使浏览器出现下载情况

注：若HTTP响应的content-type为 application/octet-stream，那么浏览器将以下载的形式接收该请求，而非在页面进行展示；若HTTP响应的content-type为text/html，此时又想让用户下载，可使用<a>标签和download属性，强制浏览器进行下载；在开发过程中查看HTML展示效果时，建议使用http-server -c-1进行查看，不推荐使用直接点开html文件进行查看

form标签

和a类似起跳转页面的作用；用于创建供用户输入的HTML表单，用来向web服务器提交信息；form标签的HTML表单（后面简称 form表单）支持get和post请求，但是建议使用post请求，get请求在form表单中不常用；在使用form表单时，经常搭配input标签、button标签来对form表单进行补充

<!--使用格式-->
<form action = "users" method = "post">
  <input type = "text" name = "username"/>
  <input type = "password" name = "password"/>
  <input type = "submit" value = "提交"/>
</form>

注：post请求和get请求的区别为：get请求是获取内容，post请求是上传内容，post请求会将内容上传至服务器；<form>表单中的action的值为处理这个form信息的程序所在的URL，这个值可以被<button>标签或者<input>标签中的formaction属性重载（覆盖）；<form>表单中的method的值表示告诉浏览器使用哪种方式来提交form表单，可能的值有post和get
PS：目前在HTML中只有form可以提供上传内容，除此之外，HTML中没有其他上传内容的方法

form表单中的method的值若为get，则提交form表单时，input中的name参数会作为查询参数一起上传至地址栏中；若为post，则提交form表单时，input中的name参数则变为HTTP的POST请求中的第四部分，关于HTTP请求，请移步HTTP简单介绍

input/button标签

input标签是一个空标签，关于空标签，请移步可替换标签与空标签小介绍，用于为表单创建交互式控件，便于接收来自用户的数据；可以使用type来设置要呈现的控件；button标签是一个普通标签，其作用为创建一个可点击的按钮；input标签和button标签常与form表单配合使用，对form表单进行补充

<!--使用格式-->
<form action = "index.html" method = "post">
  <input type = "text" name = "username" />
  <input type = "password" name = "password" />
  <input type = "submit" value = "提交"/>
  <button>button</button>
</form>

在form表单中，若只存在button标签，那么button标签则自动升级为提交按钮；若button标签与input标签同时存在，button不会自动升级为提交按钮，此时form表单没有提交按钮，如下所示：

<form action = "index.html" method = "get">
  <input type = "button" value = "button" />
  <button>button</button>
</form>

只有当input标签的type属性值为submit时，此时form表单才可提交，type的值为submit时，是唯一确定form表单能不能点击提交的按钮，如下所示：

<!--使用格式-->
<form action = "index.html" method = "get">
  <input type = "text" name = "username" />
  <input type = "password" name = "password" />
  <input type = "sumbit" value = "button">
</form>

table标签

在HTML中起展示数据的作用；表示表格数据，即通过二位数据表示信息，在CSS创建之前，HTML<table>标签常被用于布局页面，但是这种用法在HTML4之后不被推荐使用；table标签中子标签比较多， HTML规定table中只能有三个元素分别为thead（table head）元素、tbody（table body）元素、tfoot（table foot）元素；但在这三个元素内可以有th（table header，表示表(table)的标题）子标签，tr(table row)子标签，td（table data，表示表的数据）子标签，如下所示：

<!--使用格式-->
<table>
  <thead>
    <tr>
      <th>项目</th><th>姓名</th><th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th><td>小明</td>
<td>94</td>
    </tr>
    <tr>
      <th></th><td>小红</td><td>96</td>
    </tr>
    <tr>
      <th>平均分</th><td></td><td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总分</th><td></td><td>190</td>
    </tr>
  </tfoot>
</table>

上面table标签效果展示

这样似乎有些不是很好看，那么将其改善得好看一些呢？其实可以使用colgroup标签与其子标签col一起来对table进行优化，colgroup标签是HTML中的表格列组标签，其作用是定义表中的一组列表；col位于colgroup标签内，用于定义所有公共单元格上的公共语义

<table border = 1>
  <colgroup>
    <col width = 100 />
    <col width = 150 />
    <col width = 70 />
  </colgroup>
  <thead>
    <tr>
      <th>项目</th><th>姓名</th><th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th><td>小明</td>
<td>94</td>
    </tr>
    <tr>
      <th></th><td>小红</td><td>96</td>
    </tr>
    <tr>
      <th>平均分</th><td></td><td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总分</th><td></td><td>190</td>
    </tr>
  </tfoot>
</table>

<colgroup>与<col>优化<table>效果图

通过上图我们可以看到在table表格里每个边框都有一定的空隙，但是我们不想要这些空隙，这时我们就需要使用CSS来将这些空隙去除

<!--此处为全部html代码，<style>部分为内部样式表CSS-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    table{
      border-collapse: collapse;
    }
  </style>
</head>
<body>
<table border = 1>
  <colgroup>
    <col width = 100 />
    <col width = 150 />
    <col width = 70 />
  </colgroup>
  <thead>
    <tr>
      <th>项目</th><th>姓名</th><th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th><td>小明</td>
<td>94</td>
    </tr>
    <tr>
      <th></th><td>小红</td><td>96</td>
    </tr>
    <tr>
      <th>平均分</th><td></td><td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总分</th><td></td><td>190</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

border-collapse: collapse;表示border中间不要有空隙

去除空隙后的展示

HTML常用标签