表格标签

表格的作用

表格标签用于展示数据

<table></table>标签定义一个表格

<tr></tr>标签表示一行(table row)

<td></td>标签表示一个单元格(table data)

<th></th>标签表示表头单元格(table header)，内容会加粗居中展示

表格属性

• align：对齐方式
• border：边框
• cellpadding：边缘与内容之间的距离(默认 1 像素)
• cellspacing：单元格之间的距离(默认 2 像素)
• width：表格宽度

表格标签结构

• <table></table>
• <thead></thead>
• <tbody></tbody>

合并单元格

合并单元格方式：

• 跨行合并：rowspan=“个数”
• 跨列合并：colspan=“个数”

列表标签

列表的作用

列表标签用于布局

列表分类

• 无序列表：<ul></ul>、<li></li>
• 有序列表：<ol></ol>、<li></li>
• 自定义列表：<dl></dl>、<dt></dt>、<dd></dd>

自定义列表用于对名词或者专业术语进行解释

表单标签

表单的作用

表单标签用于收集用户信息

表单组成

• 表单域：<form></form>
• 表单控件：表单元素
• 提示信息：

表单域属性

• action：提交地址
• method：提交方式(get/post)
• name: 表单域名称

input 表单元素

input 元素作用

input 元素用于收集用户信息

input 标签属性

• type：
  • button：按钮
  • cehckbox：复选框
  • file：文件选择
  • hidden：隐藏
  • image：图片
  • password：密码
  • text：文本
  • radio：单选框
  • reset 重置按钮
  • submit：提交按钮
• name：name是表单的名字，单选框必须有相同的名字才可以实现多选一
• value：表单的默认值，使用placeholder更好
• checked：规定 input 元素首次加载时自动被选中
• maxlength：输入字段中字符最大长度

label 标签

label 标签用于 input 聚焦

通过label标签的for属性与input标签的id属性

<lable for="sex">男</lable> <input type="radio" id="sex"/>

select 下拉表单元素

下拉表单元素的作用

如果有多个选项提供用户选择，节约空间

标签

1
2
3
4
5

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

属性

option标签有一个selected="selected"属性，表示默认选中

textarea 文本域元素

textarea 使用场景

当用户要输入的内容比较多时，不应使用text类型的input标签，而是应该使用textarea标签