本篇文章主要记录的是自己学习的 HTML 常用的标签。

1、iframe 标签——嵌套页面

iframe这个标签目前用的很少，但是如果有五年前的遗留项目可能就会看到这个标签，主要就是在一个界面里面嵌套一个界面。关于iframe的详细内容有可以参考如下两个网站：

iframe 相关问题：https://www.zhihu.com/question/20653055 。

阅读 iframe MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe 。

一下是我自己关于iframe的学习记录。

<iframe name="xxx" src="#" frameborder="0"></iframe> 

iframe标签在页面中显示的时候，默认的宽度是100px，高度是50px，也可以在CSS中进行设置宽度和高度。

iframe其中的frameborder表示的边框的样式，默认的样式是带有三维效果的框，不怎么好看，所以一般都会设置为frameborder="0"。

iframe的src属性一般会填写网址 ，表示所嵌套的网页是什么网页，比如src="http://qq.com"，那么此时嵌套界面处显示的就是QQ的主页，如果src=”#”,那么这时嵌套界面是一个空的页面，什么都不包含在其中，src还可以是相对路径，比如所编写的网页文档在同一目录下的文件，src="./index2.html"，这时嵌套界面显示的就是编辑的index2.html的界面内容。

iframe的name属性和a标签结合起来使用，关于a标签的详细说明在下面进行讲解。

<a target="xxx" href="http://qq.com">QQ</a>

<a target="xxx" href="http://baidu.com">百度</a>

这就是如何使用iframe和a配合使用的情况，这时在界面出现的QQ，点击后嵌套的界面就会跳转到QQ的页面上。点击百度，嵌套的界面就会跳转到百度的主页。

2、a 标签

跳转页面（HTTP GET 请求）

属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

2.1 展示界面

对于a标签来说，最为常用的功能就是使用来打开一个界面。

<a href="http://qq.com" target="_blank">blank_QQ</a>

点击blank_QQ在一个新界面直接打开连接

<a href="http://qq.com" target="_self">self_QQ</a>

点击self_QQ在当前界面的一个规定的区域打开链接

<a href="http://qq.com" target="_parant">parant_QQ</a>

点击parant_QQ在所嵌套的那个区域打开链接

<a href="http://qq.com" target="_top">top_QQ</a>

点击top_QQ在最顶层的界面中打开链接，也可以说是在最原始的网页中打开。

2.2 下载

a标签可以用来设置下载功能，比如

浏览器是否能进行相应下载请求，看http相应的Content-type为application/octet-stream时，服务器就会以下载的形式去接收这个请求，而不是展示。如果Content-type为text/html时，想要用户能进行下载，那么就是用a标签进行强制下载。<a href="#"download>下载</a>，这时，点击界面上的下载按钮就能就行下载了，这时下载的是当前界面的html文件。可以设置为下载安装包等功能。

2.3 a标签的href的相关内容

<a href="//qq.com" >QQ    href的内容中的”//”表示当前什么协议访问的链接就是什么协议

<a href="xxx.html">QQ</a> 此时点击QQ后会跳转到一个相对路径

<a href="#hjhj">QQ  href的内容是一个锚点的话，点击之后不会进行跳转。是在当前页面，不发起请求

<a href="?name=frank">QQ</a> 此时会发出一个GET请求，但是并没有跳转

href可以写一段伪协议。比如href="javascript:xxx"

<a href="javascript:alert(1);">警告</a>，点击“警告”就会直接执行js代码

<a href="javascript:;">QQ</a> 此时表示的是一个伪协议，点击的时候页面什么都不会动，实现这样的需求的话，如果使用的是<a href="#">QQ</a>命令的话，点击之后页面将会有跳转的情况，a标签必须有herf，不能没有herf，href如果是“ ”也是不行，相当于界面会进行刷新，所以满足这种需求的时候就可以使用href="javascript:;"。

3、form 标签

跳转页面（HTTP POST 请求）

属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

如果form的表单里面没有提交按钮，将无法提交form，所以form一般都会和input等标签一起使用，form一般都是进行POST请求的。

  <form action=" users" method="POST">  //method一般都是POST，大小写都可以，

  <input type="text" name="username">

  <input type="password" neme="password">

  <input type="submit" value="提交">//此处就是提交按钮了

  </form>

会出现这样的一个页面布局

除此之外HTML就没有其他的提交方法上传内容，点击提交后此时点开所在网页界面的netbook在第四部分出现的form data上可以看到密码的明文，输入框中的内容如果是英文字母或者键盘上的特殊符号之外的将会出现一个utf-8转码的结果。

需要注意的是file协议是不支持POST的。

<form action=" users" method="get">//此时会将输入的参数放到查询参数中

比如点击提交按钮后网址输入栏里面将会出现http://127.0.0.1:8080/index2.html?xxx=xxx&sss=qqqq

<form action="users?zzz=3" method="POST">//这样设置后也可以进行查询参数了，http://127.0.0.1:8080/users?zzz=3

form标签也有target，同a标签的用法一样

比如

  <iframe src="#" frameborder="0" name="bbb"></iframe>

  <form action="users?zzz=1" method="POST" target="bbb">

  <input type="text" name="xxx">

  <input type="password" name="sss">

  <input type="submit" value="提交">

  </form>

这样就可以将提交的内容放到一个嵌入的网页中，也可以正常的使用前面说讲的a标签的target的设置内容。

4、input / button

区别：是否为「空标签」

input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

<button> 标签定义的是一个按钮

    1、在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处；

    2、 <button> 控件提供了更为强大的功能和更丰富的内容；

    3、<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

<input> 标签规定了用户可以在其中输入数据的输入字段

    1、<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件；

    2、输入字段可通过多种方式改变，取决于 type 属性

这里主要介绍一下label标签。通过以上的form标签进行举例子

<form action="users" method="POST">

  <input type="text" name="xxx">

  <input type="password" name="sss">

  <input type="submit" value="提交">

  <button>button1</button>

  <input type="submit" value="button2">

  </form>

如果form表单里面的button标签没有指定type，那么点击按钮之后将会实现的是submit的功能，当使用input标签的时候指定了type之后，定义的按钮就可以进行提交了。Submit是唯一能进行提交form的方式。

<input type="checkbox">哎呀   出现的是一个勾选框，框后面是“哎呀”，点击“哎呀”勾选框就会被选中。

<input type="checkbox" id="xxx"><label for="xxx">哎呀   //此时会出现上面同样的界面，但是文字和勾选框已经连接起来了，选中一个，连接的另一个也会被选中。这样的id和label里面的for需要一一对应的，而且连接起来的id名称是需要唯一对应的才可以。

此处另外引出一个label标签的使用方法，具体为：<label>用户名<input type="text" name="xxx"></label>    这样写就可以不用写id，两者就能直接连接起来。

Input的checkbox和radio

checkbox是多选框：

喜欢的水果

<label><input type="checkbox" name="fruit" value="orange">橘子</label>

<label><input type="checkbox" name="fruit" value="banana">香蕉

这个时候由于name是相同的，所以就可以进行多项选择

radio是单选框：

好吗

<label><input name="ok" type="radio" value="yes">Yes</label>

<label><input name="ok" type="radio" value="yes">No</label>

此时由于name是相同的，所以只能选择一个，要么Yes要么No，

两者都在form的表单里面时，当进行提交的时候选择的内容就会随着提交的按钮上传到服务器上。

比如

<form action="users" method="GET" target="bbb">

<label>用户名<input type="text" name="username"></label>

<label>密码<input type="password" name="password"></label>

<input type="submit" value="提交">

喜欢的水果

<label><input type="checkbox" name="fruit" value="orange">橘子</label>

<label><input type="checkbox" name="fruit" value="banana">香蕉</label>

好吗

<label><input name="ok" type="radio" value="yes">Yes</label>

<label><input name="ok" type="radio" value="yes">No</label>

<input type="submit" value="button2">

</form>

Select标签是进行分组的，和分组标签共同使用的得有option，

<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的时候只能进行单选，有multiple时，就可以多选，按下Ctrl键，进行多选，选择的内容是option标签里面的内容，如果option的中有disable的时候表示不能进行选择，当option中有selected的时候是该选项已经被选中，为空就是value=””.

textarea标签是对于文字进行编辑的一个输入框

<textarea name="爱好" style="resize:none; width:100px; height:100px;">   表示的是绘制了一个文件输入框，在输入框中进行文字的输入，此处需要有name，还有就是直接使用css的方法进行规定框的大小。而不用默认的<textarea name="" id="" cols="30" rows="10"></textarea>来设置长和宽，此处的框是通过列数和行数的大小来确定框的，默认的方法并不准确。

5、table 标签示例

用于展示数据

属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

table标签主要是用来添加表格的。例子如下：

<body>

<table border=1> //添加border=1就能显示出表格线

    <colgroup>      //但是比较生僻，比较少用

      <col width=100>                         //设置第一列的宽度

      <col bgcolor=red width=100>    //设置第二列的背景颜色和宽度

      <col width=100>                         //第三列

      <col width=100>                         //第四列

    </colgroup>

  <thead>

    <tr>    

      <th>项目</th><th>姓名</th><th>班级</th><th>武力值</th>

    </tr>   

  </thead>

  <tbody>

    <tr>

      <th></th><th>张三丰</th><td>1</td><td>88</td>

    </tr>

    <tr>

      <th></th><th>秦始皇</th><td>2</td><td>66</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th>平均分</th><td></td><td></td><td>77</td>

    </tr>

    <tr>

      <th>总分</th><td></td><td></td><td>154</td>

    </tr>

  </tfoot>

  </table>

</body>

画出来的效果如下：

HTML规定table标签有三个元素，分别是<thead></thead>指的是表头、<tbody></tbody>指的是表的主体、<tfoot></tfoot>指的是表的脚，三者的顺序在代码中可以不分前后，但是将三个元素的表头都删掉了之后，代码中写的是什么顺序，显示的就会是什么顺序。<tr>（table row）表示在表中写一行，td（table data）表示写入的内容是数据，th（table header）表示写入的内容是表的标题，写入的内容为空时，就直接留空<td></td>.

由于以上的表格线之间存在着一定的间隙，可以通过CSS消除间隙，如下所示

<style>

table{

border-collapse:collapse //在head里面添加这一句就会将所画的表格线紧密的凑到一起。

}

</style>

到此就结束了本文的学习记录，HTML并非想象中的那么简单，里面的内容还有很多都是需要慢慢学习的，今后的学习过程中还得慢慢积累这方面的知识。