1.列表
作为容器使用可以放置任何类型的元素。
往往处理单列表格
无序列表
<ul><li>牛奶</li><li>蛋糕</li></ul>
有序列表
<ol start="7"><li>牛奶</li><li>蛋糕</li></ol>
自定义列表
最常用的列表<dl><dt>x姓名：</dt><dd>张三</dd><dt>性别：</dt><dd>男</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></ul>
- 图文列表
<ul class="list"><li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607949307789&di=376e2f5a51e5e85e844fa3ae4bb339d1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-11-05%2F5bdfd64baf0fd.jpg" alt=""></a><a href="">2020l旅行回忆</a></li></ul>
2.表格
基础
<!-- 表格标签：table thead tbody tr td/th--><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：单元格。划分行和列。所以数据都要填充到td/th其中。th有加粗、居中的效果。 --><tr><td>1</td><td>张三</td><td>男</td><td>33</td><td>工人</td><td>北京</td></tr><tr><td>2</td><td>李四</td><td>女</td><td>44</td><td>工人</td><td>上海</td></tr></tbody></table><p class="page"><a href="">首页</a><a href="">...</a><a href="">7</a><a href="" class="active">8</a><a href="">9</a><a href="">尾页</a></p>
行与列的合并
colspan，合并。
rowspan，列合并。<table class="lesson"><caption>我的课程表</caption><thead><tr><!-- 行合并：colspan --><th colspan="2"></th><!-- <th></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><!-- 列合并：rowspan --><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>
3.表单
文本框
使用lable与input标签<h3 class="title">用户注册</h3><!-- action:处理表单的程序 --><!-- method：表单提交类型 --><!-- 默认为GET：数据直接在URl地址中【网页地址】 --><!-- POST:表单的数据在请求体中 --><form action="" method="POST" class="register"><!-- 单行文本框 --><label for="username">账号：</label><!-- type :控件类型 --><!-- name：数据的变量名 value：数据的内容 --><!-- 通用文本框 --><input type="text" id="usename" name="username" value="" placeholder="username" required><!-- 邮箱文本框 --><label for="enmil">邮箱：</label><input type="emall" id="emall" name="emall" value="" placeholder="@emall.com" required><!-- 密码文本框 --><label for="password">邮箱：</label><input type="password" id="password" name="password" value="" placeholder="不少于6位" required><!--placeholder：提示。 required：必选 --><!-- 提交按钮 --><button>提交</button></form>
单选按钮与复选框
<!-- 单选按钮与复选框 --><label for="secret">性别：</label><div><!-- 单选按钮必须用同一个name的属性值 --><input type="radio" name="gender" value="male" id="male"><label for="male">男</label><input type="radio" name="gender" value="female" id="female"><label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">隐藏</label></div><!--checked，默认值 --><!--for后面可随便填 --><label for="">兴趣</label><div><!-- 复选框的name值要写成数组的格式，这样服务器才能接受到一组值 --><input type="checkbox" name="hobby[]" value="game"><label for="">游戏</label><input type="checkbox" name="hobby[]" value="book" checked><label for="">读书</label></div>
- 下拉列表/下拉框
使用select标签和option<label for="">学历</label><select name="edu" id=""><option value="1">小学</option><option value="2">初中</option><option value="3">高中</option><option value="4">研究生</option><option value="5" label="老司机">博士</option><!-- label属性优先级高，国外常用 --></select>
文件域与隐藏域
<!-- 1.请求类型必须是：post --><!-- 2.表单数据编码必须是 enctype="multipart/form-data" --><label for="user-pic">头像：</label><input type="hidden" name="MAX_FILE_SIZE" value="500000"><input type="file" name="user_pic" id="user-pic" ><label for="user-resume">简历：</label><!-- 隐藏域hidden，前端看不到，他的值供后端处理时用 --><input type="hidden" name="MAX_FILE_SIZE" value="5000000"><input type="file" name="user_resume" id="user-resume" >
- 文本域（多行文本框）
使用特殊标签：textarea
cols：列
rows：行<label for="comment">备注：</label><textarea name="comment" id="comment" cols="30" rows="5"></textarea>
- form属性
将控件与所属表单进行关联，可以写到其他地方，但不要这样做。<form action="" id="register"><p>用户名：<input type="text" form="register" name="username"></p><p>邮箱：<input type="text" form="register" name="emall"></p><p>秘密：<input type="password" form="register" name="password"></p><p><button>提交</button></p></form>