由于我使用的是mac，所以以下全程介绍的内容是基于mac系统上，使用的工具是sublime text3 for mac。
1.文本输入框、密码输入框
eg:
<input type="text" name="username"><br>
<input type="password" name="password"><br><br>标签为换行标签，效果如下：
注意：当type为password时，并未真正加密，只是显示效果，在编写代码时，为保证数据的安全，防止爬虫获取数据，还需对密码进行加密
2.选择框
eg：
<input type="checkbox" name="aa" value="1">篮球
<input type="checkbox" name="aa" value="2">足球
<input type="checkbox" name="aa" value="3">排球显示效果如图：
value就是存入数据库的值，而name其实就是跟数据库中字段相对应的
3.单选/复选框
eg：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知显示效果如图：
4.按钮
<input type="button" name="bb" value="百度一下，你就知道">效果：
5.文件上传
<input type="file" name="file" value="选择">效果如下：
6.下拉框
<select>
<option value="0"></option>
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
</select>页面显示如下：
7.超链接
<a href="http://wwww.baidu.com">跳转到百度首页去</a>页面显示如下：
8.表格
<table border="1">
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr><tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr><tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>页面显示如下：
9.图片
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2832677122,3463918518&fm=173&app=25&f=JPEG?w=218&h=146&s=76A2A5E50E730E925F2034B303008010">其中src为图片的地址
10.列表
（1）有序列表：ol（order list）
<ol>
<li>sfjakfangf</li>
<li>sflaglaafa</li>
<li>afalflafl</li>
</ol>（2）无序列表（unorder list）
<ul>
<li>dfjakjfoakf</li>
<li>ajfoakfoakf</li>
<li>dmfjlaokfla</li>
</ul>页面如下：
11.文本域
textarea定义一个多行的文本输入控件，也称为：文本域或文字域
<textarea rows="10" cols="40"></textarea>如下：
12.H标签
<h1>1号字体最大</h1>
<h2>字体大小随着“h”后面的数字变大，而变小</h2>
<h3>当然这个大小并非不可调试</h3>
<h4>可以通过css的样式进行再次调整</h4>
<h5>具体的css介绍可以参考css介绍</h5>
<h6>在原始标签中6号为最小号</h6>
13.iframe
用来在页面中框体嵌套，也即是在一个页面框体中显示其他页面的内容
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" width="200" height="200"></iframe>
</body>
</html>如图：
