HTML标签(下)
目标
- 书写表格
- 写出无序列表
- 写出3-4个常用的input表单类型
- 写出下拉列表表单
- 使用表单元素实现注册页面
- 独立查阅W3C文档
一、表格
1、表格标签
<table>
<tr> --定义行
<th>表头</th> --定义表头
<td>列</td> --定义列
</tr>
</table>
2、表格属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QBak5U68-1619316990285)(/Users/chekaiyue/Desktop/表格属性.png)]
3、表格结构标签
- 用于定义表格的头部,内部必须有
- 用于定义表格的主体,主要用于存放数据
- 以上标签都放在标签中
4、合并单元格
合并单元格的方式
- 跨行合并:rowspan=“个数”
- 跨列合并:colspan=“个数”
合并单元格三部曲
- 先确定是跨行还是跨列
- 找到目标单元格,写上合并方式=合并的单元格数量。比如:
- 删除多余的单元格
二、列表
1、无序列表(重点)
<ul>
<li></li>
</ul>
2、有序列表
<ol>
<li></li>
</ol>
3、自定义列表
<dl>
<dt>定义项目/名字</dt>
<dd>描述每一个项目/名字</dd>
</dl>
三、表单
使用表单是为了收集用户的信息
1、表单的组成
表单是由表单域、表单控件(也称为表单元素)、提示信息3个部分构成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwY3JbWD-1619316990287)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210414110049582.png)]
-
表单域,也就是标签
-
会把范围内的的表单元素提交给服务器
-
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单控件 </form>
2、常用的表单属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqM01ovi-1619316990289)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210414111327482.png)]
3、表单元素
3.1 input表单元素
<input type="属性值" >
type属性:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZFRkApF-1619316990290)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210414111737091.png)]
input的其他属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7I4muAiV-1619316990291)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210414111818115.png)]
3.2 label标签
label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器会自动将焦点转到或选择对应的表单元素上,增加用户体验。
语法:
<label for="sex"></label>
<input type="radio" name ="nan" id="sex" />
3.3 select表单元素
<select>
<option></option>
<option selected="selected"></option> --用selected定义默认选项值
</select>