2021.04.14

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. 先确定是跨行还是跨列
2. 找到目标单元格，写上合并方式=合并的单元格数量。比如：
3. 删除多余的单元格

二、列表

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>

3.4 文本域表单元素