1. 表格常用标签及属性
1.1 表格标签基本使用
表格的主要作用是什么?
- 以行、列的方式(表格)整齐地展示数据,例如:股票价格
- 用表格布局页面
表格的基本语法:
<table>
<tr>
<td>单元格内容</td>
... //重复 td → 单元格
</tr>
... //重复 tr → 行
</table>
常用的表格标签有几个?分别代表什么含义?
三个基本的表格标签:
序号 | 标签名 | 说明 |
---|---|---|
1 | table | 表格标签,用于包含多个 tr |
2 | tr | 定义表格中的行,用于包含多个 td |
3 | td | 定义表格中的单元格,用于存放单元格内容 |
注意:
- table 和 tr 是用来搭建表格结构的,不能存放实际内容;
- td 是用来存放单元格数据的。
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
</tr>
</table>
1.2 表头单元格标签
表头标签的作用是什么?
第一行通常用来显示标题而不是实际的数据,这样可以方便用户阅读和理解下放表格数据的含义
标签是什么?
th
同样可以存放内容,但是默认会被加粗并且居中显示。
<table>
<th>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</th>
<tr>
<td></td>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>王五</td>
<td>女</td>
</tr>
</table>
1.3 表格相关属性
表格属性应该写在哪一个标签中?为什么?
属性是用来描述标签的特征(显示效果)的,因此属性都应该写在 table
标签中
属性语法复习:
<table 属性1="值1" 属性2="值2"></table>
注意:
- 属性名不需要引号
- 属性值必须要用引号,通常使用双引号
属性="值"
这种定义方式又被称为键值对 —— 属性名:键 / 属性值:值 / 成对出现- 每一个键值对之间使用空格分隔
表格的常用属性:
属性名 | 属性值 | 描述 |
---|---|---|
align | left 、center 、right | 对齐方式 |
border | 宽度像素值或 “” | 表格边框,默认 “” 无边框 |
width | 像素值 | 宽度 |
height | 像素值 | 高度 |
cellspacing | 像素值 | 单元格之间的间距,默认 2 像素 |
cellpadding | 像素值 | 内容与边框之间的距离,默认 1 像素 |
表格居中显示,设置表格边框、宽度、高度、内容间距和单元格间距。
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="100">
<th>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</th>
<tr>
<td></td>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<td></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<td></td>
<td>3</td>
<td>王五</td>
<td>女</td>
</tr>
</table>
2. 表格结构和常用列表
2.1 表格结构标签
就语义而言,表格可以被划分成哪两个区域?分别对应什么标签?
就语义而言,表格可以被划分成以下两个区域 :
thead
定义表格头部(标题行),必须拥有tr
标签,一般位于第一行tbody
定义表格的主体,通常包含标题行下方的表格数据区域
注意:thead
和tbody
只是用来划分表格结构的,区分标题行和数据区域,不能替代原有的tr
、th
、td
标签的作用。
2.2 合并单元格
合并单元格有那两种方式?
合并单元格的方式:
- 跨行合并(
rowspan
),把多个行的单元格合并 → 纵向合并 - 跨列合并(
colspan
),把多个列的单元格合并 → 横向合并
合并单元格的步骤是什么?
- 明确合并方式(跨行 / 跨列)
- 找到目标单元格
td
,增加合并单元格属性
- 跨行
rowspan="x"
(纵向) - 跨列
colspan="y"
(横向)
<table align="center" width="640" height="240" cellspacing="1" cellpadding="20" border="2">
<thead>
<tr>
<th colspan="4">学生信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名:</td>
<td>巨小帅</td>
<td>班级:</td>
<td>合肥10期</td>
</tr>
<tr>
<td>出生日期:</td>
<td>2000-02-14</td>
<td>性别:</td>
<td>小帅</td>
</tr>
<tr>
<td>手机号:</td>
<td>110</td>
<td>微信号:</td>
<td>119</td>
</tr>
</tbody>
</table>
- 删除多余的单元格
2.3 无序列表
列表的主要是用来做什么的?
列表就是用来布局的,可以整齐、有序的展示数据,用列表做布局会更加自由和方便;
我们一共要学习几种列表?
- 无序列表(
ul
) - 有序列表(
ol
) - 自定义列表(
dl
)
无序列表一共有几个标签?分别是什么,作用是什么?有什么注意事项?
无序列表的的基本语法:
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
两个无序列表标签:
ul
无序列表,只允许包含多个li
标签li
用于存放列表项内容
注意:ul
是用来搭建结构的,不能存放实际内容;ul
只允许包含多个li
标签;li
是用来存放列表项数据的
2.4 有序列表
有序列表和无序列表有什么区别?
有序列表 ol
会在列表项前面自动增加数字排序,并且排序依次递增;
有序列表的的基本语法与无序列表基本一直,只需要把 ul
替换成 ol
即可:
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
有序列表除了序号之外,与无序列表的使用及注意事项有区别吗?
有序列表除了序号之外,与无序列表的使用及注意事项没有区别。
3. 自定义列表和表单
3.1 自定义列表
自定义列表的应用场景是什么?
网站首页下方的网站导航通常可以使用自定义列表来实现
自定义列表的基本语法:
<dl>
<dt></dt>
<dd>
...
</dd>
<dt></dt>
<dd>
...
</dd>
</dl>
注意:虽然一个 dl
中可以包含多个 dt
,但是在实际开发中通常只包含一个 dt
,因为这样更方便布局
自定义列表的标签有几个?分别代表什么含义?
三个自定义列表标签:
序号 | 标签名 | 说明 |
---|---|---|
1 | dl | 自定义列表,只允许包含 dt 和 dd 标签 |
2 | dt | 用于存放关键词(term)内容,与 dd 是兄弟关系,不过后续的 dd 都跟随前面的 dt |
3 | dd | 用于存放前面 dt 关键词的列表项内容 |
3.3 表单使用场景以及分类
表单的应用场景是什么?
在开发网站时,可以使用表单收集用户信息,统一提交给后台处理;
表单由那几部分组成?
表单通常包含 3 个部分:
- 表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性别等完整的用户信息记录;
- 表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,例如姓名;
- 提示信息:提示用户每一个表单控件是收集什么信息的。
3.4 表单域
表单域的作用是什么?
- 实现用户信息的收集与传递,例如收集用户的完整信息,然后统一传递给后台;
- 表单的基本语法:
<form>
... 表单控件 ... 提示信息
</form>
3.5 input 之 type 属性文本框和密码框
表单控件的作用是什么?
用户通过表单控件能够输入或者选择内容,以达到通过表单收集信息的目的。
表单控件可以分为几大类?
表单控件包含以下三大类:
input
输入select
选择textarea
文本域
input
标签的基本语法:
<input type="属性值" />
type
的常用属性值:
类型 | 属性值 | 描述 |
---|---|---|
输入 | text | 输入文字 |
输入 | password | 密码 |
选择 | radio | 单选按钮,多选一 |
选择 | checkbox | 复选框(打勾) |
点击选择文件 | file | 文件上传使用 |
点击 | button | 按钮 |
点击 | image | 按钮 |
表单操作 | submit | 提交,会把数据发送给服务器 |
表单操作 | reset | 重置,会清空表单所有数据 |
4. 表单输入
4.1☆ input 之 type 属性提交和重置按钮
提交按钮的作用是什么?
提交按钮(sumbit) 可以把表单域中的数据提交给后台
重置按钮的作用是什么?
重置按钮(reset) 可以把表单域中的数据清空
value 属性有什么用处?
通过 value
属性可以指定提交按钮或重置按钮中的文字
4.2 input 之 type 属性单选按钮和复选框
单选框的应用场景是什么?
在多选一的时候,使用单选框(radio),例如:性别;
复选框的应用场景是什么?
在多选多的时候,使用复选框(checkbox),例如:爱好。
注意:在开发时,无论是单选还是复选,都不适合提供太多选项
4.3 input 之 name 和 value 属性
哪一个属性能够把表单控件区分开?(不同的控件负责收集不同的信息)
name
属性可以把表单控件区分开value
属性可以记录用户在控件中输入的值或者选择结果
怎样能够在多个单选按钮中,只允许用户选择一项?
同一组单选框或复选框,name
属性的值应该一致
5. 表单输入
5.1 input 之 checked 和 maxlength 属性
checked
属性的应用场景是什么?
- 如果用户要修改之前保存过的信息,
checked
属性可以选中用户之前的选择,例如:修改个人信息 - 用
checked
属性可以帮助用户默认同意用户协议;
maxlength
属性的应用场景是什么?
- 输入框输入项有长度限制时,可以使用
maxlength
属性;
input
标签的常用属性:
属性 | 描述 |
---|---|
type | 类型 |
name | 名称,用于区分控件 |
value | 值,用于记录或设置控件的值 |
checked | 默认选中某个单选或复选框 |
maxlength | 输入框最大输入长度 |
注意:在 H5 中 checked="checked" 可以简写为 checked 。 |
5.2 input 之 type 属性普通按钮和文件域
哪一个属性可以设置普通按钮的显示文字?
用 value
属性可以设置普通按钮的属性值
上传文件的 type
属性值是什么?
上传文件的 type
属性值是 file
;
点击普通按钮能提交表单吗?
点击普通按钮不能提交表单,后续学习了 JavaScript 之后普通按钮就非常有用了。
5.3 label 标签
label
标签的作用是什么?
label
可以和表单中的元素绑定,增加点击范围,提高用户体验
label
标签的使用步骤是什么?
步骤:
- 给要绑定的
input
标签设置唯一的id
属性值; - 使用
<label for="控件id">标签文字</label>
让label
标签与对应控件绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label 标签</title>
</head>
<body>
<form action="demo.php" method="get">
<!-- 必需的 action 属性规定当提交表单时,向何处发送表单数据。 -->
<dl>
<dt><h4>用户信息</h4></dt>
</dl>
用户名:<input type="text" value="请输入用户名" maxlength="6"><br>
<!-- 输入 text 输入文字 -->
密 码:<input type="password" name="password" value="password"><br>
<!-- 输入 password 密码 -->
性别:男<input type="radio" name="sex" checked>女<input type="radio" name="sex">人妖:<input type="radio" name="sex"><br>
<!-- 选择 radio 单选按钮,多选一 -->
爱好:全部<input type="checkbox" name="hobby" checked='checked' id="basketball"><label for="basketball"> 篮球</label><input type="checkbox" name="hobby" id="football"><label for="football">足球</label><input type="checkbox" name="hobby" id="sing"><label for="sing">唱歌</label><input type="checkbox" name="hobby" id="dance"><label for="dance">跳舞</label><input type="checkbox" name="hobby"><br>
<!-- 选择 checkbox 复选框(打勾) -->
文件上传:<input type="file" name="file" id=""><br>
<!-- 点击选择文件 file 文件上传使用 -->
button按钮: <input type="button" value="获取短信验证码"><br>
<!-- 点击 button 按钮 -->
上传头像:<input type="image" value="images"><br>
<input type="submit" value="提交">
<!-- 表单操作 submit 提交,会把数据发送给服务器 -->
<input type="reset" value="重置">
<!-- 表单操作 reset 重置,会清空表单所有数据 -->
</form>
</body>
</html>
5.4 select 下拉表单
下拉列表的应用场景是什么?
选项太多,希望节约空间,提升用户体验时可以使用下拉列表
下拉列表的基本语法:
<select>
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
...
</select>
下拉列表的标签有几个?分别代表什么含义?
-
三个下拉列表的标签:
序号 标签名 说明 1 select
下拉列表 2 option
下拉列表选项,用于存放选项内容 3 selected
属性能够默认选中某一项。 在 H5 中 selected=“selected” 可以简写为 selected。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select 下拉表单</title>
</head>
<body>
选项列表
<select>
<!-- 下拉列表 -->
<option value="">列表1</option>
<!-- 下拉列表选项,用于存放选项内容 -->
<option value="">列表2</option>
<option value="">列表3</option>
<option value="">列表4</option>
<option value="">列表5</option>
<option value="">列表6</option>
<option value="" selected>列表7</option>
<!-- 使用 selected 属性能够默认选中某一项。 -->
</select>
</body>
</html>
附录
1. 标签
表格标签
序号 | 标签名 | 说明 |
---|---|---|
1 | table | 表格标签,用于包含多个 tr |
2 | tr | 定义表格中的行,用于包含多个 td |
3 | td | 定义表格中的单元格,用于存放单元格内容 |
4 | th | 定义表头中的单元格,用于存放单元格内容,默认会加粗并居中显示 |
5 | thead | 定义表格头部(标题行),必须拥有 tr 标签 |
6 | tbody | 定义表格的主体,通常包含标题行下方的表格数据区域 |
列表标签
序号 | 标签名 | 说明 |
---|---|---|
1 | ul | 无序列表,只允许包含多个 li 标签 |
2 | ol | 有序列表,只允许包含多个 li 标签 |
3 | li | 用于存放列表项内容 |
4 | dl | 自定义列表,只允许包含 dt 和 dd 标签 |
5 | dt | 用于存放关键词内容,与 dd 是兄弟关系,不过后续的 dd 都跟随前面的 dt |
6 | dd | 用于存放前面 dt 关键词的列表项内容 |
表单标签
序号 | 标签名 | 说明 |
---|---|---|
1 | form | 定义表单域,统一收集传递数据 |
2 | input | 输入控件,可以是文本框、单选、复选、选择文件、按钮等 |
3 | select | 下拉列表 |
4 | option | 下拉列表选项,用于存放选项内容 |
input
标签的常用属性:
属性 | 描述 |
---|---|
type | 类型 |
name | 名称,用于区分控件 |
value | 值,用于记录或设置控件的值 |
checked | 默认选中某个单选或复选框 |
id | 控件标识,与 label 标签联用 |
maxlength | 输入框最大输入长度 |
input
标签 type
的常用属性值:
类型 | 属性值 | 描述 |
---|---|---|
输入 | text | 输入文字 |
输入 | password | 密码 |
选择 | radio | 单选按钮,多选一 |
选择 | checkbox | 复选框(打勾) |
点击选择文件 | file | 文件上传使用 |
点击 | button | 按钮 |
点击 | image | 按钮 |
表单操作 | submit | 提交,会把数据发送给服务器 |
表单操作 | reset | 重置,会清空表单所有数据 |
2. 快捷键
VSCode 快捷键
快捷键 | 作用 |
---|---|
ctrl + n | 新建文件 |
ctrl + s | 保存文件 |
ctrl + z | 撤销 |
ctrl + shift + z | 恢复撤销 |
ctrl + 加号 / 减号 | 放大 / 缩小 |
ctrl + c / v | 复制粘贴一行(不能选中文字) |
ctrl + x | 删除一行 |
alt + ↑ / ↓ | 上下移动代码 |
alt + shift + ↑ / ↓ | 上下复制一行代码 |
ctrl + / | 注释 |
ctrl + d | 向后多选相同的内容 |
alt + z | 自动换行 |
Emmet 语法
ul>li*6{h$}
dl>dt+dd*3
重点单词
序号 | 英语 | 中文 |
---|---|---|
1 | table | 表格 |
2 | row | 行 |
3 | data | 数据 |
4 | align | 对齐 |
5 | left | 左 |
6 | center | 中 |
7 | right | 右 |
8 | cell | 单元格 |
9 | spacing | 外部彼此间的间距 |
10 | padding | 内边距(填充物)内容距离边框的距离 |
11 | row | 行 |
12 | col / column | 列 |
13 | term | 术语 |
14 | input | 输入 |
15 | select | 选择 |
16 | selected | 已选中 |
17 | area | 区域 |
18 | type | 类型 |
19 | submit | 提交 |
20 | reset | 重置 |
21 | name | 姓名、名称 |
22 | value | 值 |
23 | radio | 单选框 |
24 | checkbox | 多选框 |
25 | option | 选项 |