# HTML中的常用标签
* 标题: <h1> ~ <h6>
* 段落: <p>
* 链接: <a href="" target="">
* 图像: <img src="" alt="">
* 列表: <ul> + <li>, <ol> + <li>, <dl><dt><dd>
* 表格: <table><thead><tbody><tr><td>
* 表单: <form><label><input>
* 框架: <iframe src="" width="" height="">
* 通用: <div><span>
* 容器: <header><nav><main><article><section><footer>
重要知识点：表格（table）、表单（form）、框架（iframe）
1、完成表格的合并功能——主要使用两个属性：rowspan（行合并）、colspan（列合并）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完成表格的跨行合并功能</title> </head> <body> <table cellspacing="0" border="1" cellpadding="5"> <caption>三年八班</caption> <thead> <tr bgcolor="#add8e6"> <th width="80">姓名</th> <th width="50">性别</th> <th width="50">数学</th> <th width="50">语文</th> <th width="50">英语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td rowspan="2">男</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>李四</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>莉莉</td> <td rowspan="2">女</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>Lucy</td> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td align="center" colspan="2">合计：</td> <td>360</td> <td>360</td> <td>360</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【注意】HTML5表格的样式跟html还是有出入的，分为表头——thead、正文——tbody、表尾——tfoot三部分；当设置了表格的border时，cellspacing一般设置为0比较***。
2、完成一个用户注册表单——input：输入控件 type、label：标签 for
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <h3>账号填写</h3> <form action="" method="get"> <p> <label for="username">账号：<span style="color: red;">*</span></label> <input type="text" name="username" id="username" placeholder="长度为4-30个字符" min="4" max="30" required> </p> <p> <label for="password">密码：<span style="color: red;">*</span></label> <input type="password" name="password" id="password" placeholder="长度为6-18个字符" min="6" max="18" required> </p> <p> <label for="password2">密码：<span style="color: red;">*</span></label> <input type="password" name="password2" id="password2" placeholder="两次密码必须一致" min="6" max="18" required> </p> <p> <label for="city">所在城市：</label> <select name="city" id="city" size="3"> <optgroup label="安徽省"> <option value="1">合肥市</option> <option value="2">淮南市</option> <option value="3">安庆市</option> </optgroup> <optgroup label="江苏省"> <option value="4">南京市</option> <option value="5">苏州市</option> <option value="6">常州市</option> </optgroup> </select> </p> <p> <button type="submit">下一步</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【注意】
1）输入框的type属性需要记一下，然后placeholder比较好用；label跟输入框的关联是通过控件的name属性；
2）下拉框的option的value跟下拉框内容的区别，前者返回给后台用，后者页面显示用。
3、制作一个简易后台——使用内联框架iframe
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易后台——使用iframe</title> </head> <body> <h2>友情链接</h2> <ul style="float: left;"> <li><a href="http://www.guyuehome.com/" target="link" style="text-decoration: none;">古月居</a></li> <li><a href="http://www.cnblogs.com/gaoxiang12/" target="link" style="text-decoration: none;">半闲居士</a></li> <li><a href="https://blog.csdn.net/heyijia0327?viewmode=list" target="link" style="text-decoration: none;">知行合一</a></li> </ul> <iframe src="https://blog.csdn.net/heyijia0327?viewmode=list" frameborder="1" width="1000" height="500" name="link" style="float: left"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【注意】
内联框架一般跟超链接联合使用，此处a的target属性发挥了关键作用，关联到iframe的name属性。
