一、文本框标签 <input />
<input type="text" placeholder="请输入用户名" name="username" value="admin"> #value赋值，输入框中默认value中的值
password属性：
<input placeholder="请输入密码" type="password" name="password"> #type类型是密码类型，输入框中输入内容，显示格式是...
<span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked"> #checked="checked勾选框默认是选中状态
性别属性：
<span>男</span><input type="radio" checked="checked" name="sex"> #name后面是性别属性
<span>女</span><input type="radio" name="sex"> #type="radio" 和上面的男互斥，只能选中一个
button按钮
<input type="button" value="提交"> #提交按钮 button 是需要和js连用，通过js进行提交操作
二：form标签： input标签是写在form标签内
<form action="http://baidu.com" method="get"> #action后面的是按钮提交后跳转的链接，method后面的是接口类型 get or post
<input type="text" value="admin" name="username">
<!--reset 重置按钮 -->
<input type="reset"> #重置按钮
<!--submit如果和form连用，则直接提交表单-->
<input type="submit" value="登录"> #submit提交按钮，点一下按钮，页面会自动刷新一下，自动刷新页面，会让页面内容清空，要全部输入框内容全部重新输入，所以现在一般不用这个按钮提交
<input type="button" value="button登录"> #目前前端一般都用button按钮提交
</form>
三：laber 标签
<!--laber+input扩展了input的可点击范围 鼠标点击到用户名的时候，输入光标会定位到用户名后面的输入框中，span标签不会这样-->
<label for="i1">用户名</label><input id="i1" type="text" value="admin">
<span>密码</span><input type="password">
<textarea>多行文本标签</testarea>
四、select标签 比较重要
1、直接标签内输入option
<select name="city" size="2" multiple="multiple">
<option value="1">北京</option>
<option value="2" selected="selected">河北</option> <!--option下拉框选项,北京是下拉框中内容-->
<option value="3">黑龙江</option>
</select>
备注：
<!--size=2，则变成在一个输入框内，不是下拉框,后面的mul作用是输入中内容可以多选-->
<!--selected="selected"默认选中-->
2、optgroup
optgroup标签和上面的区别，详细看下面的截图 注：第一个输入框就是上面1中，select中添加size和multiple属性后的效果
五：a标签 也称超链接标签
<a href=http://www.baidu.com>百度</a> #添加链接后，点击百度文字后，页面会自动跳转到配置的链接页面中
六：ul标签 （不太常用的标签）
1、· 形式的列表 ul li
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
2、数字形式的标签 ol li
七、dl标签
<dl>
<dt>黑龙江</dt>
<dd>牡丹江</dd>
<dd>哈尔滨</dd>
</dl>
页面效果图：
六、table 表格标签
代码如下：
<table border="1">
<thead> <!--表头-->
<tr> #tr代表行，th代表表头当中的列
<th>id</th>
<th>请求方式</th>
<th>参数</th>
<th>接口</th>
<th colspan="2">操作</th> <!--colpan='2'意思是占二行表格 合并二行单元格-->
</tr>
</thead>
<tbody> <!--表体-->
<tr>
<td>1</td> #tr代表行，td代表表体中的列
<td rowspan="3">post</td> <!--rowspan='3意思是占三列表格 合并三列单元格-->
<td>{'name':'test'}</td>
<td>/login</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr>
<td>1</td>
<td>{'name':'test'}</td>
<td>/login</td>
<td><a href="update.html">修改</a></td>
<td>删除</td>
</tr>
<tr>
<td>1</td>
<td>{'name':'test'}</td>
<td>/login</td>
<td>修改</td>
<td>删除</td>
</tr>
</tbody>
</table>
页面效果图
备注：
<a href="update.html">修改</a> 让修改文案变为可以点击跳转的话，添加一个a标签，配置一个跳转链接
合并post为一列 用：rowspan="3" 3是因为一共有三列需要合并，有几列要合并，就输入几
操作合并为一行，用colspan="2" 2是因为一共2行表格需要合并
七、img标签
<img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="鼠标悬浮时候显示的文字">
alt:当图片加载失败时候显示alt设置的文案
title:鼠标悬浮在图片上时候显示的文字