HTML table表格 ul/ol/dl列表 form表单 input select textarea

table 表格

<table> 规定表格
- <caption> 规定表头
- <tr> 规定行 table-row

  - <th>规定行列标题格 table-header
  - <td> 规定普通格 table-data

表格划分
<thead> 通常存放 标题格
<tbody 存放内容
<tfoot> 例如 SUM AVG

合并单元格

th和td的属性

span 有跨度的意思

colspan 设置单元格可横跨的列数。 即合并的列数
rowspan 规定单元格可横跨的行数。即合并的行数

<td colspan="3">合并3列</td>
<td rowspan="2">合并2行</td>

设置单元格的边距

通过设置 table的属性 注意不是 style
单元格内边距
cellpadding 规定单元格边沿与其内容之间的空白。
单元格间隙
cellspacing 规定单元格之间的空白。

表格排列方式

居左、居右、居中 通过align属性

table frame属性 外边框的多少

ul/ol li列表

有序/无序列表 ul/ol

自定义列表

dl 自定义列表
dt 列表项
dd 列表项的定义或是描述

dl 一组键值关系 dt>dd 键信息 值信息

---

form 表单

<from>

属性	作用
action 属性	定义在提交表单时执行的动作。
method 属性	规定在提交表单时所用的 HTTP 方法（GET 或 POST）
name	规定识别表单的名称（DOM 可以通过name访问表单：document.forms.name）。
target	规定 action 属性中地址的目标（默认：_self）。
id	额外作用提供给外部表单元素定位form

表单元素

form属性: 对应form的id 规定form外 表单元素所属的表单。

<input> 元素

type属性	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
checkbox	多选框
submit	定义提交按钮（提交表单）
password	密码字段
button	按钮
file

HTML5 新增 type 属性

type属性	描述
color	颜色选择器
number	选择属性 额外设置属性 min=“1” max=“5”
range	进度条 额外设置属性 min=“1” max=“5” [step=“1”]
search	搜索字段
url
email	输入邮箱地址
tel	输入 电话号码的 （目前只有 Safari 8 支持 tel 类型）
date	输入日期
month	设置月份和年份
week	设置第几周和年份
time	设置时间
datetime	选择日期和时间
datetime-local	选择日期和时间（无时区）

注释：老式 web 浏览器不支持的 input 类型，会被视为输入类型 text。

value 属性 input值
placeholder 属性 描述输入字段预期值的提示 适用输入类型：text、search、url、tel、email 以及 password。

name 属性 表单的控件名称，作为键值对的键与表单一同提交。
同一选项的 radio/checkbox 需要设置相同的 name

输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
min	规定输入字段的最小值。
maxlength	规定输入字段的最大字符数。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
multiple	适用于：email 和 file。 是否可以选择多个

<datalist>元素

为 <input> 元素规定预定义选项列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性

<output>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<select> 元素（下拉列表）

<option> 元素定义待选择的选项。
属性
selected=“selected”当前option默认选中
multiple=“multiple”支持多选option（需按住ctrl）
size=“2”，展示两个option选项

id 属性以将其与 <label> 元素关联在一起，提高可及性（accessibility）

---

<textarea> 元素

定义多行输入字段（文本域）
行列设定
rows=“2”
cols=“2”
risize属性：

• none 不能调整元素的尺寸；
• both 可调整元素的高度和宽度；
• horizontal 可调整元素的宽度；
• vertical 可调整元素的高度。