列表/表格与表单
列表
<!-- 无序列表 --><ul><li>张无忌</li><li>张三丰</li><li>张翠山</li></ul><!-- 有序列表 --><ol><li>语文</li><li>数学</li><li>英语</li></ol><!-- 自定义列表 --><dl><dt>水果类</dt><dd>苹果</dd><dd>香蕉</dd><dd>桃子</dd></dl>
表格
caption表格标题thead表格头部tbody表格主题rowspan行合并colspan列合并
<!-- 课程表 --><table><caption>课程表</caption><thead><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead><tbody><tr><td colspan="2">早上</td><td colspan="5">晨读</td><td rowspan="13"></td><td rowspan="13"></td></tr><tr><td colspan="7" class="rest">早上休息</td></tr><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" class="rest">中午休息</td></tr><tr><td rowspan="3">下午</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 colspan="7" class="rest">下午休息</td></tr><tr><td rowspan="2">晚自习</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></tbody></table>
表单
action 处理表单的程序method 表单提交类型，分别有GET和POST两种，默认为GET
GET: 数据直接放在url地址中，POST: 表单的数据在请求体中enctype 表单数据编码，文件上传使用 multipart/form-data，请求类型必须是POST
<form action="" method="post" enctype="multipart/form-data"><!-- 1，单行文本框 --><!-- type: 控件类型 --><!-- name: 数据的变量名 --><!-- value: 数据的内容 --><!-- required: 必填项 --><!-- 单行文本框 --><div><label for="username">账号：</label><input type="text" name="username" id="username" value="" placeholder="请输入用户名" required></div><div><label for="email">邮箱：</label><input type="email" name="email" id="email" value="" placeholder="请输入邮箱" required></div><div><label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码6-16位字母加数字加字符组合" required></div><!-- 单选按钮 --><!-- checked: 默认值 --><div><label for="secret">性别：</label><input type="radio" name="gender" id="male" value="male"><label for="male">男</label><input type="radio" name="gender" id="female" value="female"><label for="female">女</label><input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">保密</label></div><!-- 复选框 --><!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接受到一组值 --><div><label for="">兴趣爱好：</label><input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="shoot" value="shoot"><label for="shoot">摄影</label><input type="checkbox" name="hobby[]" id="travel" value="travel" checked><label for="travel">旅游</label><input type="checkbox" name="hobby[]" id="program" value="program" checked><label for="program">编程</label></div><!-- 下拉列表 --><div><label for="edu">学历：</label><!-- <select name="edu" id="edu" multiple size="2"> --><select name="edu" id="edu"><option value="1">初中</option><option value="2">高中</option><option value="3">中专</option><option value="4" selected>大专</option><option value="5">本科</option></select></div><!-- 隐藏域 --><div><label for="user-pic">头像：</label><!-- 隐藏域：在前端页面中看不到，它的值供后端处理时使用 --><input type="hidden" name="MAX_FILE_SIZE" value="80000"><input type="file" name="user_pic" id="user-pic"><!-- 头像占位符 --><div class="user-pic" style="grid-column: span 2;"></div></div><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></div><!-- 文本域 --><div><label for="comment">备注：</label><textarea name="comment" id="comment" cols="30" rows="5" placeholder="备注信息"></textarea></div><button>提交</button></form>