列表元素

HTML提供了3组常用的用来展示列表的元素

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

有序列表 – ol – li

ol（ordered list），有序列表，直接子元素只能是li

li（list item），列表中的每一项

无序列表 – ul - li

ul（unordered list），无序列表，直接子元素只能是li

li（list item），列表中的每一项

定义列表 – dl – dt - dd

dl（definition list）

• 定义列表，直接子元素只能是dt、dd

dt（definition term）

• term是项的意思, 列表中每一项的项目名

dd（definition description）

• 列表中每一项的具体描述，是对 dt 的描述、解释、补充
• 一个dt后面一般紧跟着1个或者多个dd

<dl>
	<dt>阶段一：</dt>
	<dd>HTML</dd>
	<dd>CSS</dd>
	<dd>JS</dd>
</dl>

表格常见的元素

table：表格

tr(table row)：表格中的行

td(table data)：行中的单元格

另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

表格的练习

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的

table { border-collapse: collapse; }，合并单元格的边框

表格的其他元素

thead：表格的表头

tbody：表格的主体

tfoot：表格的页脚

caption：表格的标题

th：表格的表头单元格

<table>
	<caption>表格标题</caption>
	<thead>
		<tr>
			<th>单元格1</th>
			<th>单元格2</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的

一个单元格可能会跨多行或者多列来使用;

这个时候我们就要使用单元格合并来完成;

如何使用单元格合并呢?

单元格合并分成两种情况:

跨列合并: 使用colspan

• 在最左边的单元格写上colspan属性, 并且省略掉合并的td;

跨行合并: 使用rowspan

• 在最上面的单元格写上rowspan属性, 并且省略掉后面tr中的td;

常见的表单元素

form：表单, 一般情况下，其他表单相关元素都是它的后代元素

input：单行文本输入框、单选框、复选框、按钮等元素

textarea：多行文本框

select、option：下拉选择框

button：按钮

label：表单元素的标题

input元素的使用

表单元素使用最多的是input元素

input元素有如下常见的属性:

• type：input的类型
  • text：文本输入框（明文输入）
  • password：文本输入框（密文输入）
  • radio：单选框
  • checkbox：复选框
  • button：按钮
  • reset：重置
  • submit：提交表单数据给服务器
  • file：文件上传
• readonly：只读
• disabled：禁用
• checked：默认被选中
  • 只有当type为radio或checkbox时可用
• autofocus：当页面加载时，自动聚焦
• name：名字
  • 在提交数据给服务器时，可用于区分数据类型
• value：取值

type类型的其他取值和input的其他属性, 查看文档:

https://developer.mozilla.org/zhCN/docs/Web/HTML/Element/Input

布尔属性（boolean attributes）

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

布尔属性可以没有属性值，写上属性名就代表使用这个属性

如果要给布尔属性设值，值就是属性名本身

<input type="text" disabled autofocus readonly>
<!--等价于-->
<input type="text" disabled="disabled" autofocus="autofocus" readonly="readonly" />

表单按钮

表单可以实现按钮效果:

• 普通按钮（type=button）：使用value属性设置按钮文字
• 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
• 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

我们也可以通过按钮来实现:

input和label的关系

label元素一般跟input配合使用，用来表示input的标题

labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

radio的使用

我们可以将type类型设置为radio变成单选框:

name值相同的radio才具备单选功能

checkbox的使用

我们可以将type类型设置为checkbox变成多选框:

属于同一种类型的checkbox，name值要保持一致

textarea的使用

textarea的常用属性:

• cols：列数

• rows：行数

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

缩放的CSS设置：

• 禁止缩放：resize: none;
• 水平缩放：resize: horizontal;
• 垂直缩放：resize: vertical;
• 水平垂直缩放：resize: both;

textarea {
  resize: none;
}

select和option的使用

option是select的子元素，一个option代表一个选项

select常用属性

• multiple：可以多选
• size：显示多少项

option常用属性

• selected：默认被选中

form常见的属性

form通常作为表单元素的父元素:

• form可以将整个表单作为一个整体来进行操作;
• 比如对整个表单进行重置;
• 比如对整个表单的数据进行提交;

form常见的属性如下:

• action：用于提交表单数据的请求URL
• method：请求方法（get和post），默认是get
• target：在什么地方打开URL（参考a元素的target）

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>