在网站中必不可少的列表，列表可以有效对我们数据分组使页面更加的美观有条理性；
一、有序列表和无序列表
1、有序列表通过Ol和li实现
<ol><li>牛奶一箱</li><li>蛋糕一个</li><li>苹果10斤</li></ol>
2、无序列表通过ul li及 dldtdd标签来实现
<ul><li>牛奶一箱</li><li>蛋糕一个</li><li>苹果10斤</li></ul>
使用dl,dt,dd方式实现列表方式为
<dl><dt>名称</dt><dd>PHP中文网</dd><dt>地址</dt><dd>合肥市政务新区置地广场</dd><dt>联系</dt><dd><a href="tel:18032826913" target="_blank">18032826913</a></dd><dd><a href="mailto:tosakl@hotmail.com?subject=title&body=content">发送邮件</a></dd></dl>
案例一 用无序列表实现导航栏<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">教学视频</a></li>
<li><a href="#">社区问答</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#" target="_black">登录</a></li>
</ul>
二、表格
在表格当中标签为<TABLE>,常用属性有border、cellspacing、cellpadding 以及表格name属性，当我们用极细边框时候border=1 cellspacing=0 cellpadding=0;
<TABLE> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
案例一商品信息表
<table border=1 cellspacing=0 cellpadding=0 ><caption>商品信息表</caption><thead><tr><th>ID</th><th>品名</th><th>单价</th><th>数量</th><th>金额</th></tr></thead><tbody><tr><td>1</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr><tr><td>2</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr><tr><td>3</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr><tr><td>5</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr><tr><td>6</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr><tr><td>7</td><td>惠普128多功能打印机</td><td>1280</td><td>20</td><td>10000</td></tr></tbody></table><p class="fy"><a href="#">首页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">末页</a></p>
案例二 课程表
<table border=1 cellspacing=0 cellpadding=0><caption>合肥市第三十六小学课程表</caption><thead><tr><td colspan=2></td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr></thead><tbody><tr><td rowspan=4> 上午 </td><td>1</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td>2</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td>3</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td>4</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td colspan=7>中午休息</td></tr><tr><td rowspan=3>下午</td><td>5</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td>6</td><td>数学</td><td>语文</td><td>英语</td><td>历史</td><td>体育</td></tr><tr><td>7</td><td >课外活动</td><td colspan=6>各班自行组织,自愿参加</td></tr></tbody></table>
三、html表单
表单是我们通过用户输入信息发往后台进行验证及请求，通常请求的方式为GET 和POST get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍get和post的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）get安全性非常低，post安全性较高；
在form表单 属性分为action、method、entype属性分别为action 代表亲求地址接收页面，method代表请求的类型get|post然后entype就是编码类型的意思需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。
application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。enctype：规定了form表单在发送到服务器时候编码方式，有如下的三个值。
1、application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得 效率低下。
2、multipart/form-data 。 指定传输数据为二进制类型，比如图片、mp3、文件。
3、text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。
表单控件分为 text文本 password 密码 email 邮件 checkbox多选框 radio单选框 hidden 隐藏域 textarea 富文本框 select 下拉框file文件上传等；
需要注意是名字name属性及value属性在服务器端，需要获取控件的名称是上传信息（值）；
案例一，用户组测
<h2 style="text-align: center;">用户注册</h2>
<form action="" method="get" class="register"><label for="username">账号：</label><input type="text" id="username" name="username" value="" required placeholder="填写账号" ><label for="email">邮箱：</label><input type="email" id="email" name="email" placeholder="填写邮箱" required><label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" placeholder="填写密码" value="" required><label for="#">性别： </label><div><input type="radio" name="sex" id="man" checked><label for="man">男</label> <input type="radio" name="sex" id="woman"><label for="woman">女</label><input type="radio" name="sex" id="bm" ><label for="bm">保密</label></div><label for="#">兴趣</label><div><input type="checkbox" name="hobby[]" value="摄影" id="shoot" checked><label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="游戏" id="game"><label for="game">游戏</label><input type="checkbox" name="hobby[]" value="韩剧" id="dsj"><label for="dsj">韩剧</label><input type="checkbox" name="hobby[]" value="日剧" id="rdsj"><label for="rdsj">日剧</label></div><label for="edu">学历：</label><select name="edu" id="edu"><option value="初中" selected>初中</option><option value="高中">高中</option><option value="大学">大学</option><option value="博士">博士</option></select><label for="tx">头像</label> <input type="file" name="tx" id="tx"><label for="jl">简历</label> <input type="file" name="jl" id="jl"><label for="bz">备注</label><textarea name="bz" id="bz" cols="30" rows="10">请填写您的备注</textarea><button>提交</button></form>
总结：在页面上看到使用列表时候采用UL li方式在DIV+CSS 使用表格情况较为少见，在N年前还能看到表格布局网页，现在基本都是框型结构。表单当中注意上传值和名称要一一对应；