04-html元素列表-表格-表单
一、列表
1.1.有序列表-ol-li
ol的直接子元素只能是li，li为列表中的每一项
<h4>一班同学名字：</h4>
<ol><li>沈星回</li><li>黎深</li><li>祁煜</li><li>秦彻</li><li>夏以昼</li>
</ol>
运行效果如下：
可以设置ol、li元素的list-style: none;删除序号
需要对齐修改padding和margin即可
1.2.无序列表-ul-li
ul包裹多个li
默认列表如下：
<h4>二班同学名字：</h4>
<ul><li>萧逸</li><li>陆沉</li><li>齐司礼</li><li>夏鸣星</li><li>查理苏</li>
</ul>
去掉列表前的点方法与ol相同，即设置list-style: none;
其实ol中li的序号和ul中li的小圆点都是list-style-type的值，例如值为decimal时为序号
1.3.定义列表-dl-dt-dd
基础用法如下：
<h4>提瓦特国家人</h4>
<dl><dt>蒙德</dt><dd>温迪</dd><dd>琴</dd><dd>迪卢克</dd><dt>璃月</dt><dd>钟离</dd><dd>达达利亚</dd><dd>胡桃</dd><dd>甘雨</dd>
</dl>
可通过设置margin与padding为0使其变为普通列表
二、表格
2.1.表格基本结构使用
表格使用案例：
可以设置css做出有边框的表格
<style>table{text-align: center;border-collapse: collapse;/*使格子紧挨*/}td,th{border: 1px solid black;padding: 8px 16px;}
</style>
<table><caption>提瓦特人</caption><thead><tr><th>序号</th><th>名字</th><th>元素</th><th>国家</th><th>性别</th></tr></thead><tbody><tr><td>1</td><td>温迪</td><td>风</td><td>蒙德</td><td>男</td></tr><tr><td>2</td><td>钟离</td><td>岩</td><td>璃月</td><td>男</td></tr><tr><td>3</td><td>雷电将军</td><td>雷</td><td>稻妻</td><td>女</td></tr><tr><td>4</td><td>纳西妲</td><td>草</td><td>须弥</td><td>女</td></tr></tbody><tfoot><tr><th>其他</th><th>其他</th><th>其他</th><th>其他</th><th>其他</th></tr></tfoot>
</table>
2.2.表格的合并
2.2.1.跨列合并
可以通过设置colspan明确跨多少列，我这里是跨的2列
<td colspan="2">1</td>
于是表格变成如下：
<table><tr><td colspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
可以删去第一行的一个td使表格变整齐
2.2.2.跨行合并
跨行合并与跨列合并是同样的道理，设置rowspan
<table><tr><td rowspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
三、表单
3.1.input
3.1.1input常见类型
input有不同类型，以下是常见的几个类型
<input type="text">
<input type="password">
<input type="time">
<input type="date">
<input type="file" >
3.1.2.input常见属性
input还有很多属性：
<input type="text" autofocus>
- autofocus：聚焦
- readonly：只读
3.1.3.input按钮
input按钮和button设置相同的type后可以互换
- 普通按钮：和button一样，没有特殊功能
- 重置按钮：可以把所在表单内容清空恢复默认
- 提交按钮：可以把所在表单内容提交
<form><input type="text"><input type="button" value="普通按钮"><button>普通按钮</button><input type="reset" value="重置按钮"><button type="reset">重置按钮</button><input type="submit" value="提交按钮"><button type="submit">提交按钮</button></form>
3.1.4.label聚焦input
input通过设置id与label关联，点击label中的文字可聚焦input输入框
<label for="username">用户名：<input id="username" type="text">
</label>
3.1.5.input单选框
- input的type值为
radio时，为单选框 - 不同选项可以设置相同的
name关联 - 经常使用label单选
value的值为表单提交时传送的值
<form action="/ad"><label for="male"><input id="male" type="radio" name="sex" value="male">男</label><label for="female"><input id="female" type="radio" name="sex" value="female">女</label><button type="submit">提交</button>
</form>
3.1.6.input复选框
复选框用法除能多选外，其他用法与单选框一致
某个input加上checked可以默认被选中
以下是示例代码：
<form action="/ad"><label for="game"><input id="game" type="checkbox" name="habit" value="打游戏">打游戏</label><label for="draw"><input id="draw" type="checkbox" name="habit" value="画画">画画</label><label for="ball"><input id="ball" type="checkbox" name="habit" value="踢球">踢球</label><button type="submit">提交</button>
</form>
3.2.textarea
textarea为可以输入的文本框，文本框默认是可以拉伸的，通过设置cols和rows控制大小
<textarea id="i" cols="30" rows="10"></textarea>
3.2.1.textarea防拉伸
可设css属性resize防拉伸
- resize: both; ：2个方向都能拉伸
- resize: horizontal; ：只能在水平方向拉伸
- resize: vertical; ：只能在垂直方向拉伸
- resize: none; ：无法拉伸
3.3.select
select下拉框可以选中一个
- 加上
mutiple可以按住ctrl多选 - 加上
size可以控制一次显示多少个选项 - 给某个选项加上
selected可以默认被选中
<select name="fruits" multiple size="2"><option value="apple">苹果</option><option value="orange">橘子</option><option value="watermelon">西瓜</option><option value="banana">香蕉</option>
</select>
3.4.form
form里一般装表单元素，
- form的
action里装要提交的目标链接，可以是相对地址或绝对地址 - form只会提交有name属性的字段
<form action="https://www.baidu.com/s"><input type="text" name="w" id=""><button type="submit">百度一下</button>
</form>
