学习目标:列表,表格,表单
- 一天掌握 HTML列表,表格,表单
学习内容:列表
- 有序列表
- 无序列表
- 自定义列表
<!-- 有序列表 --> <!-- type:1 A a I i 样式 --> <!-- reversed:倒序顺序 --> <!-- start:设置初始值 --> <ol type="1" reversed start="10"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!-- 无序列表 --> <!-- type:disc 实心圆 默认 circle 空心圆 square 实心方框 --> <ul type="square"> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul> <!-- 自定义列表 --> <dl> <dt>标题标签</dt> <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> </dl> <!-- 注意: ul/ol下只用li li可以套任意标签 -->
学习内容二:表格table
1.定义表格
2.定义行
3.定义标题
4定义列
<!-- 表格 -->
<!-- table: 定义表格
tr:定义行
th:定义标题
td:定义列
rowspan:合并行 使用时:值为几,就把对应几行的td删掉
colspan:合并列 使用时:值为几,就删除本行后的几个td
bgcolor:背景颜色
给一行中任意一个列加高,整行都是一个高,按最大值撑开
给一列中任意一个行加宽,整列都是一个宽,按最大值撑开 -->
<table align="center" border="1" width="400">
<tr>
<th bgcolor="red" height="60">表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr align="center">
<td rowspan="3">第一行第一列</td>
<td colspan="2">第一行第二列</td>
<!-- <td>第一行第三列</td> -->
</tr>
<tr align="center">
<!-- <td>第二行第一列</td> -->
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr align="center">
<!-- <td>第三行第一列</td> -->
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
学习内容三:表单form
1.输入框input
2.下拉框select
3.文本域textarea
<!-- 表单 form-->
<!-- input -->
<!-- type
text:任意字符 文本框
password:输入密码:显示为 .....
number: 只能输入数字
-
radio:单选按钮
name属性 name属性相同时,为同一组单选选项组
checked 默认选中,选多个时,选中最后拥用该属性的那个
checkbox:多选
name属性 name属性相同时,为同一组多选多选项
checked 默认选中,选多个时,就是多个选中
name属性:传数据时,让接收方知道我们传的谁的数据
value属性:值
submit:提交按钮
file:提交文件按钮
form:action属性是:提交地址 -->
<form action="demo.html">
姓名:
<input type="text" name="username">
密码:
<input type="password" name="passwored">
数字:
<input type="number" name="num">
单选按钮:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
<input type="radio" name="sex" checked value="qita">其他
多选按钮:
<input type="checkbox" name="happy" value="eat">吃
<input type="checkbox" name="happy" value="he">喝
<input type="checkbox" name="happy" value="wan">玩
<input type="checkbox" name="happy" value="le">乐
<!-- 下拉框 select -->
<!-- select - option--选项
- value 选项值
属性 selected默认选项 -->
下拉框:
<select name="" id="">
<option value="" selected></option>
<option value="beijing">北京</option>
<option value="taiyuan">太原</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
<br>
<!-- 文本域 -->
文本域:
<textarea name="" id="" cols="30" rows="3"></textarea>
<!-- 提交按钮 -->
提交:
<input type="submit">
<!-- 提交文件按钮 -->
提交文件:
<input type="file">
</form>