一、html标签, 元素与属性
HTML文档是由各种HTML元素组成的，如html元素（HTML文档根元素）、head（HTML头部）元素、
body（HTML主体）元素、title(HTML标题)元素和p（段落）元素等，这些元素都是通过尖括号“<>”组成的
标签形式来表现的。
标签有单标签和双标签，
单标签如<img src="test.jpg">
双标签是一对标签<p>test</p>
属性提供了对HTML元素的描述和控制信息，例如要设置<p>元素中文字内容的颜色为红色，字号为30像素
在<p>元素名称的尖括号内添加了“style="color:#ff0000;font-size:30px"”内容，浏览器就会按照设定的效果来显示内容。
如：<p style="color:#ff0000;font-size:30px">test</p>
二、列表
有三种有序、无序和定义列表
有序列表：有序列表也是一列项目，列表项目使用数字进行标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
三、列表与表格的区别与联系
如果用一列数据表示用列表，如果用多列数据表示用表格。
当单行单列数据时表格和列表都可以
对于多列且每一列之间有关联的数据适合用表格进行组织。
四、用列表制作工作计划
实例
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=uul , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用三种列表制作工作计划</title> </head> <body> <ul> <li>2019年第1周，完成工作任务A</li> <li>2019年第2周，完成工作任务B</li> <li>2019年第3周，完成工作任务C</li> <li>2019年第4周，完成工作任务D</li> <li>2019年第5周，完成工作任务E</li> </ul> <ol> <li>2019年第1周，完成工作任务A</li> <li>2019年第2周，完成工作任务B</li> <li>2019年第3周，完成工作任务C</li> <li>2019年第4周，完成工作任务D</li> <li>2019年第5周，完成工作任务E</li> </ol> <dl> <dt>2019年1月份工作计划</dt> <dd>第1周，完成工作任务A</dd> <dd>第2周，完成工作任务B</dd> <dd>第3周，完成工作任务C</dd> <dd>第4周，完成工作任务D</dd> <dt>2019年2月份工作计划</dt> <dd>第5周，完成工作任务E</dd> <dd>第6周，完成工作任务F</dd> <dd>第7周，完成工作任务G</dd> <dd>第8周，完成工作任务H</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、使用表格实现商品清单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用表格制作商品清单</title> </head> <body> <table border="1" width="800" cellspacing="0" cellpadding="5"> <caption> <h3>商品清单</h3> </caption> <thead> <th>序号</th> <th>类别</th> <th>品名</th> <th>规格</th> <th>单价</th> <th>单位</th> <th>数量</th> <th>金额</th> </thead> <tr> <td>1</td> <td rowspan="3">食品</td> <td>花生</td> <td>1#</td> <td>5</td> <td>公斤</td> <td>10</td> <td>50</td> </tr> <tr> <td>2</td> <td>瓜子</td> <td>2#</td> <td>2</td> <td>公斤</td> <td>5</td> <td>10</td> </tr> <tr> <td>3</td> <td>苹果</td> <td>4#</td> <td>5</td> <td>公斤</td> <td>2</td> <td>10</td> </tr> <tr> <td>4</td> <td rowspan="2">日用品</td> <td>牙膏</td> <td>2#</td> <td>10</td> <td>支</td> <td>2</td> <td>20</td> </tr> <tr> <td>5</td> <td>洗发水</td> <td>4#</td> <td>20</td> <td>瓶</td> <td>10</td> <td>200</td> </tr> <tr> <td colspan="6" align="center">合计：</td> <td>29</td> <td>290</td> </tr> <tfoot> <tr> <td>备注：</td> <td colspan="7">以上清单为2019年第1周的数据</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、注册表单
实例
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单及控件</title> </head> <body> <h3>用户注册</h3> <form action="login.php" method="POST"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="不能超过8个字符"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="必须6-12位之间"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@test.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="kc">课程</label> <select name="kc" id="kc"> <optgroup label="前端"> <option value="">请选择</option> <option value="HTML">HTML</option> <option value="CSS">CSS</option> <option value="JavaScript" selected>JavaScript</option> </optgroup> <optgroup label="后端"> <option value="PHP">PHP</option> <option value="C++">C++</option> <option value="JAVA">JAVA</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label> <input type="checkbox" name="hobby[]" value="music" id="music"><label for="music">音乐</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重写"> <input type="button" name="button" value="按钮"> <button>注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七、总结
列表有三种，分别是无序列表、有序列表、定义列表三种；列表主要用于单列显示，表格用于多列相关性数据显示；
表格<table>有标题<captioon>、表头<thead>、表体、表格脚本<tfoot>四部分组成，<tr>用于显示行;
<th>用于表头内加粗字体显示列，<td>用于显示一般字体的列，多用于表体；rowspan用于合并列单元格，
colspan用于合并行单元格；
表单<from>是向服务器提交数据的界面，包含很多控件。