1、列表
列表分为有无序列表（ul、li）、有序列表（ol、li）、自定义列表（dl、dt、dd）；一般会用无序列表做页面导航或者做图文列表。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>列表元素</title><link rel="stylesheet" href="../style/list.css" /></head><body><!-- 无序列表 --><h3>水果种类</h3><ul><li>苹果</li><li>火龙果</li><li>芒果</li></ul><!-- 有序列表 --><h3>考试成绩</h3><ol><li>第一名：张三</li><li>第二名：李四</li><li>第三名：王五</li></ol><!-- 自定义列表 --><dl><dt>公司名称：</dt><dd>牛逼格拉斯股份有限公司</dd><dt>地址：</dt><dd>合肥市蜀山区大蜀山光明顶</dd><dt>联系方式：</dt><dd>电话：<a href="tel:05510101010">05510101010</a></dd><dd>邮箱：<a href="mailto:123456@qq.com?subject=title&body=content">123456@qq.com</a></dd></dl><!--应用1：导航--><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="">登录</a></li></ul><ul class="list"><li><a><imgsrc="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"alt="web前端开发极速入门"/></a><a href="">web前端开发极速入门</a></li><li><a><imgsrc="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"alt="web前端开发极速入门"/></a><a href="">web前端开发极速入门</a></li><li><a><imgsrc="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"alt="web前端开发极速入门"/></a><a href="">web前端开发极速入门</a></li><li><a><imgsrc="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"alt="web前端开发极速入门"/></a><a href="">web前端开发极速入门</a></li></ul></body></html>
2、表格
表格涉及到的主要标签有：表格（table）、表格标题（caption）、表头（thead、tr、th）、表体（tbody、tr、td）；数据需要填充到th或者td中；列合并colspan、行合并rowspan。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格</title><link rel="stylesheet" href="../style/table.css"/><body><table class="product"><caption>商品信息</caption><thead><tr><th>ID</th><th>品名</th><th>单价</th><th>单位</th><th>数量</th><th>金额</th></tr></thead><tbody><tr><td>a100</td><td>手机</td><td>9999</td><td>部</td><td>1</td><td>9999</td></tr><tr><td>A102</td><td>电脑</td><td>19999</td><td>台</td><td>2</td><td>39998</td></tr><tr><td>A103</td><td>汽车</td><td>50000</td><td>台</td><td>1</td><td>100000</td></tr></tbody><tbody><tr><td>B201</td><td>猪肉</td><td>30</td><td>斤</td><td>10</td><td>300</td></tr><tr><td>B303</td><td>水杯</td><td>50</td><td>只</td><td>5</td><td>250</td></tr><tr><td>C404</td><td>住宅</td><td>2500000</td><td>套</td><td>2</td><td>5000000</td></tr></tbody></table><p class="page"><a href="">首页</a><a href="">...</a><a href="">5</a><a href="" class="active">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">...</a><a href="">尾页</a></p></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>课程表</title><link rel="stylesheet" href="../style/demo3.css" /></head><body><table class="lesson"><caption>合肥市第三十六小学课程表</caption><thead><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></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="4">各班自行组织，自愿参加</td></tr></tbody></table></body></html>
3、表单
表单form：action属性的值是表单提交后要跳转的地方；method属性的值有GET和POST，GET是默认提交方式，会将页面的元素属性值在浏览器地址上显示出来，涉及到敏感信息及大文件不建议用GET方式，POST方式不会将页面的元素属性值在浏览器地址上显示。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="../style/form.css" /><title>表单</title></head><body><h3 class="title">用户注册</h3><formaction=""class="register"method="POST"enctype="multipart/form-data"><label for="username">账号：</label><inputtype="text"id="username"name="username"placeholder="username"value=""/><label for="email">邮箱：</label><inputtype="email"id="email"name="email"placeholder="abc@php.cn"value=""/><label for="password">密码：</label><inputtype="password"id="password"name="password"placeholder="不少于8位"value=""/><label for="male">性别：</label><div><input type="radio" name="gender" value="male" id="male" checked /><label for="male">男</label><input type="radio" name="gender" value="female" id="female" /><label for="female">女</label><input type="radio" name="gender" value="secrity" id="secrity" /><label for="secrity">保密</label></div><label for="#">兴趣：</label><div><input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label><inputtype="checkbox"name="hobby[]"value="shoot"id="shoot"checked/><label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="travel" id="travel" /><label for="travel">旅游</label><inputtype="checkbox"name="hobby[]"value="program"id="program"checked/><label for="program">编程</label></div><label for="edu">学历：</label><select name="edu" id="edu"><option value="1">专科</option><option value="2" selected>本科</option><option value="3">硕士</option><option value="4">博士</option><option value="5">自学成才</option></select><label for="user-pic">头像</label><input type="hidden" name="MAX_FILE_SIZE" value="100000" /><input type="file" name="user_pic" id="user-pic" /><div class="user-pic" style="grid-column: span 2"></div><label for="user-resume">简历:</label><!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --><input type="hidden" name="MAX_FILE_SIZE" value="100000" /><input type="file" name="user_resume" id="user-resume" /><div class="user-resume" style="grid-column: span 2"></div><button>提交</button><label for="comment">备注：</label><textarea name="comment" id="comment" cols="10" rows="5"></textarea></form></body></html><script src="../js/demo7.js"></script>