W.T.的博客

Every day to be a little better

前端-HTML学习笔记03-表元素

发表于 更新于 分类于
本文字数： 14k 阅读时长 ≈ 13 分钟
列表元素，表格元素，表单元素

1. 列表元素

1.1. 认识列表

  • 场景：在网页中按照行展示关联性的内容。如：新闻列表，排行榜，账单等。

  • 特点：按照行的方式，整齐显示内容

  • 种类：无序列表(新闻列表)，有序列表(排行榜)，自定义列表(网页底部信息)

1.2. 列表的实现方式

  • 事实上现在很多的列表功能采用了不同的方案来实现

    • 方案一：使用div元素来实现(比如汽车之家, 知乎上的很多列表)
    • 方案二：使用列表元素, 使用元素语义化的方式实现

  • 事实上现在很多的网站对于列表元素没有很强烈的偏好

    • 原因是列表元素默认的CSS样式，让它用起来不是非常方便
    • 比如列表元素往往有很多的限制，ul/ol中只能存放li，li再存放其他元素，默认样式等
    • 虽然可以通过重置来解决，但是更喜欢自由的div

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

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

1.3. 有序列表 ol – li

  • 场景：在网页中表示一组有顺序之分的列表，如：排行榜

  • 标签组成

    标签名 说明
    ul - ordered list 表示有序列表的整体，用于包裹li标签
    li - list item 表示有序列表的每一项，用于包含每一行的内容

  • 显示特点

    • 列表的每一项前默认显示序号标识

  • 注意点

    • ol标签中只允许包含li标签
    • li标签可以包含任意内容

1.3.1. 展示

1.3.2. HTML

1
2
3
4
5
6
7
<h2>电影排名</h2>
<ol>
  <li>星际穿越</li>
  <li>盗梦空间</li>
  <li>大话西游</li>
  <li>少年派的奇幻漂流</li>
</ol>

1.3.3. CSS

浏览器自定义

1
2
3
4
5
6
7
8
9
10
11
12
13
ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

1.4. 无序列表 ul - li

  • 场景：在网页中表示一组无顺序之分的列表，如新闻列表

  • 标签组成

    标签名 说明
    ul - unordered list 表示无序列表的整体，用于包裹li标签
    li - list item 表示无序列表的每一项，用于包含每一行的内容

  • 显示特点

    • 列表的每一项前默认显示圆点标识

  • 注意点

    • ul标签中只允许包含li标签
    • li标签可以包含任意内容

1.4.1. 展示

1.4.2. HTML

1
2
3
4
5
6
7
<h2>前端开发技能</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
</ul>

1.4.3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

1.5. 定义列表 dl – dt - dd

  • 场景：在网页的底部导航中通常会使用自定义列表实现

  • 标签组成

    标签名 说明
    dl - definition list 定义列表的整体，用于包裹dt/dd标签
    dt - definition term term是项的意思, 定义列表中每一项的项目名
    dd - definition description 定义列表中每一项的具体描述，是对 dt 的描述、解释、补充

  • 显示特点

    • 列表的每一项前默认显示缩进效果

  • 注意点

    • dl标签中只允许包含dt/dd标签
    • 一个dt后面一般紧跟着1个或者多个dd

1.5.1. 展示

1.5.2. HTML

1
2
3
4
5
6
7
8
9
10
11
<h2>前端开发</h2>
<dl>
  <dt>选项一</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>JavaScript</dd>
  <dt>选项二</dt>
  <dd>C++</dd>
  <dd>C#</dd>
  <dd>Java</dd>
</dl>

1.5.3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
dt {
    display: block;
}
dd {
    display: block;
    margin-inline-start: 40px;
}

1.6. 列表的练习

1.6.1. 展示

1.6.2. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<ul>
  <li>
    <a href="#">
      <span>1</span>
      <p href="#">青海新任书记：不烧“三把火”</p>
      <i class="hot"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <span>2</span>
      <p href="#">青海新任书记：不烧“三把火”</p>
      <i class="new"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <span>3</span>
      <p href="#">青海新任书记：不烧“三把火”</p>
      <i class="hot"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <span>4</span>
      <p href="#">青海新任书记：不烧“三把火”</p>
      <i class="hot"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <span>5</span>
      <p href="#">青海新任书记：不烧“三把火”</p>
      <i class="hot"></i>
    </a>
  </li>
</ul>

1.6.3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
body,ul,li,span,a,p {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  width: 400px;
  margin: 0 auto;
}
ul > li {
  font-size: 16px;
  margin: 30px 0;
}
ul > li > a {
  display: inline-block;
  text-decoration: none;
  color: #333;
}
ul > li > a:hover {
  color: red;
}
ul > li > a > p {
  display: inline-block;
}
ul > li > a > span{
  color: #999;

  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;

  font-weight: 700;
}
ul > li:first-of-type > a > span {
  color: red;
}
ul > li:nth-of-type(2) > a > span {
  color: pink;
}
ul > li:nth-of-type(3) > a > span {
  color: yellow;
}

.hot::after,
.new::after{
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  border-radius: 5px;
  margin-left: 10px;
}
.hot::after {
  content: "热";
  background-color: red;
  color: #fff;
}
.new::after {
  content: "新";
  background-color: orange;
  color: #fff;
}

2. 表格元素

2.1. 表格常见的元素

  • 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

  • 标签组成

    标签名 说明
    table 表格整体，可用于包裹多个tr
    tr - table row 表格每行，可用于包裹td
    td - table data 表格单元格，可用于包裹内容

  • 注意点

    • 标签嵌套关系：table > tr > td

2.2. 表格的练习

通过表格元素和CSS完成下面的表格

2.2.1. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
  <tr class="head">
    <td>排名</td>
    <td>股票名称</td>
    <td>股票代码</td>
    <td>股票价格</td>
    <td>股票涨停</td>
  </tr>
  <tr>
    <td>1</td>
    <td>贵州茅台</td>
    <td>600519</td>
    <td>1800</td>
    <td>5%</td>
  </tr>
  <tr>
    <td>2</td>
    <td>腾讯控股</td>
    <td>00700</td>
    <td>400</td>
    <td>3%</td>
  </tr>
  <tr>
    <td>3</td>
    <td>五粮液</td>
    <td>00858</td>
    <td>160</td>
    <td>8%</td>
  </tr>
  <tr>
    <td>4</td>
    <td>东方财富</td>
    <td>30059</td>
    <td>25</td>
    <td>4%</td>
  </tr>
</table>

2.2.2. CSS

  • 这里需要用到一个非常重要的属性

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

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

1
2
3
4
5
6
7
8
9
10
11
table {
  border-collapse: collapse;
}
tr.head {
  font-weight: 700;
}
td {
  text-align: center;
  border: 1px solid #999;
  padding: 8px 16px;
}

2.3. 表格的其他元素

  • 场景：在表格中表示整体大标题和一列小标题

  • 标签组成

    标签名 说明
    captain 表示表格整体大标题，默认在表格整体顶部居中位置显示
    th 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

  • 注意点

    • captain标签书写在table标签内部
    • th标签书写在tr标签内部

  • 场景：让表格的内容结构分组，突出表格的不同部分(头部，主题，底部)，让语义更加清晰

  • 结构标签

    标签名 说明
    thead 表格头部
    tbody 表格主体
    tfoot 表格底部

  • 注意点

    • 表格的结构标签可以省略

2.3.1. 展示

2.3.2. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table>
  <caption>股票排行</caption>
  <thead>
    <tr class="head">
      <th>排名</th>
      <th>股票名称</th>
      <th>股票代码</th>
      <th>股票价格</th>
      <th>股票涨停</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>贵州茅台</td>
      <td>600519</td>
      <td>1800</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>腾讯控股</td>
      <td>00700</td>
      <td>400</td>
      <td>3%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>五粮液</td>
      <td>00858</td>
      <td>160</td>
      <td>8%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>其他</td>
      <td>其他</td>
      <td>其他</td>
      <td>其他</td>
      <td>其他</td>
    </tr>
  </tfoot>
</table>

2.3.3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table {
  border-collapse: collapse;
}
caption {
  font-weight: 700;
  font-size: 20px;
}
tr.head{
  font-weight: 700;
}
th,td {
  text-align: center;
  border: 1px solid #999;
  padding: 8px 16px;
}

2.4. 单元格合并

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

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

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

    • 跨列合并: 使用colspan
      • 在最左边的单元格写上colspan属性, 并且省略掉合并的td
    • 跨行合并: 使用rowspan
      • 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td

  • 合并单元格步骤

    1. 明确合并哪些单元格

    2. 通过左上原则，确定保留谁删除谁

      • 上下合并 -> 只保留最上的，删除其他
      • 左右合并 -> 只保留最左的，删除其他

    3. 给保留的单元格设置：跨行，跨列合并

      属性名 属性值 说明
      rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
      colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并

  • 注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并，不能跨thead，tbody，tfoot

2.4.1. 跨列 colspan

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <td colspan="2">1-1</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
  </tr>
</table>

2.4.2. 跨行 rowspan

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <td rowspan="2">1-1</td>
    <td>1-2</td>
  </tr>
  <tr>
    <td>2-2</td>
  </tr>
</table>

2.5. 单元格合并练习

2.5.1. 展示

2.5.2. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table>
  <caption>后墙宣传栏</caption>
  <thead>
    <tr class="head">
      <th colspan="4">第1周常规检查</th>
      <th rowspan="2">通知通告</th>
      <th rowspan="2">光荣榜</th>
    </tr>
    <tr class="head">
      <th>班级</th>
      <th>出勤</th>
      <th>纪律</th>
      <th>卫生</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>高一1班</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>高一2班</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

2.5.3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table {
  border-collapse: collapse;
}
caption {
  font-weight: 700;
  font-size: 20px;
}
tr.head{
  font-weight: 700;
}
th,td {
  text-align: center;
  border: 1px solid #999;
  padding: 8px 16px;
}

3. 表单元素

3.1. 认识表单

  • HTML表单元素是和用户交互的重要方式之一
    • 登录页
    • 注册页
    • 搜索栏
    • …

3.2. 常见的表单元素

  • form：表单, 一般情况下，其他表单相关元素都是它的后代元素
  • input：单行文本输入框、单选框、复选框、按钮等元素
  • textarea：多行文本框
  • select、option：下拉选择框
  • button：按钮
  • label：表单元素的标题

3.3. input元素的使用

  • 表单元素使用最多的是input元素
  • type类型的取值和input的其他属性，查看文档

3.3.1. 常见属性

属性名 说明
placeholder 占位符。提示用户输入内容的文本
value 用户输入的内容，提交之后会发送给后端服务器，
name 当前控件的含义，提交之后可以告诉后端发送过去的数据的含义
required 表单拥有该属性表示其内容不能为空，必填
autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，autocomplete=”on”。关闭，autocomplete=”off”。需要放在表单内同时加上name属性，同时成功提交
multiple 可以多选文件提交
disabled 禁用
readonly 只读
checked 默认被选中。只有当type为radio或checkbox时可用

3.3.2. type属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

  • text：文本输入框(明文输入)
  • password：文本输入框(密文输入)
  • radio：单选框
  • checkbox：复选框
  • button：按钮
  • reset：重置
  • submit：提交表单数据给服务器
  • file：文件上传
  • email：限制用户输入必须为email类型
  • url：限制用户输入必须为url格式
  • time：限制用户输入必须为时间类型
  • month：限制用户输入必须为月类型
  • week：限制用户输入必须为周类型
  • date：日期
  • number：限制用户输入必须为数字类型，但不限制 e - 代表科学计数法
  • tel：手机号码
  • color：生成一个颜色选择表单
  • search：键入文字后搜索框内会出现×号可用于清除当前键入的文字

3.3.3. 布尔属性

  • 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
  • 布尔属性可以没有属性值，写上属性名就代表使用这个属性
    • 如果要给布尔属性设值，值就是属性名本身
1
2
3
<input type="text" readonly disabled autofocus>
<!-- 等价于 -->
<input type="text" readonly="readonly" disabled="disabled" autofocus="autofocus">

3.4. 按钮标签 label

  • 场景

    • label元素一般跟input配合使用，用来表示input的标题
    • labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

  • 使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
      <label for="username">
        用户:
    		<input type="text" id="username" name="uname">
      </label>
    </div>
    <div>
      <label for="password">
        密码:
    		<input type="text" id="password" name="pwd">
      </label>
    </div>

3.5. 文本框 text

  • type=”text”
1
<input type="text" name="name" value="123">

3.6. 密码框 password

  • type=”password”
1
<input type="password" name="name" value="123">

3.7. 单选框 radio

  • type=”radio”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form action="/">
      性别：
      <label for="male">
        男
        <input id="male" type="radio" name="sex" value="male" checked>
      </label>
      <label for="female">
        女
        <input id="female" type="radio" name="sex" value="female">
      </label>
    </form>

  • 常用属性

    属性名 说明
    name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
    checked 默认选中

  • 注意点

    • name属性对于单选框有分组功能

    • 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

3.8. 复选框 checkbox

  • 在网页中显示多选多的多选表单控件

  • type=”checkbox”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <form action="/">
      爱好：
      <label for="basketball">
        篮球
        <input id="basketball" type="checkbox" name="hobby" value="basketball" checked>
      </label>
    	<label for="football">
        足球
        <input id="football" type="checkbox" name="hobby" value="football">
      </label>
      <label for="run">
        跑步
        <input id="run" type="checkbox" name="hobby" value="run">
      </label>
    </form>

  • 常用属性

    属性名 说明
    checked 默认选中

  • 注意点

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

3.9. 文本域 textarea

  • 场景：在网页中提供可输入多行文本的表单控件
  • 常见属性
    • cols：规定了文本域内可见宽度
    • rows：规定了文本域内可见行数
  • 缩放的CSS设置
    • 禁止缩放：resize: none;
    • 水平缩放：resize: horizontal;
    • 垂直缩放：resize: vertical;
    • 水平垂直缩放：resize: both;
  • 注意点
    • 右下角可以拖拽改变大小
    • 实际开发时针对样式效果推荐用css设置
1
2
3
4
5
6
<form>
  <label for="info">
    个人描述
    <textarea name="info" id="info" cols="10" rows="10"></textarea>
  </label>
</form>

3.10. 下拉菜单 select

  • 场景：在网页中提供多个选择项的下拉菜单表单控件

  • 标签组成

    • select标签：下拉菜单的整体
    • option标签：下拉菜单的每一项

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

  • select常用属性

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

  • option常用属性

    • selected：默认被选中
1
2
3
4
5
6
<select name="equipment">
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

3.11. 表单按钮

  • type属性值

    type属性值 说明
    submit 提交按钮，点击之后提交数据给后端服务器(包括input、textarea、select)
    reset 普通按钮。默认无功能，之后配合js添加功能
    button 普通按钮。默认无功能，之后配合js添加功能

  • 注意点

    • 如果需要实现以上按钮功能，需要配合form标签使用

  • form使用方法：用form标签把表单标签一起包裹起来即可

    1
    2
    3
    4
    5
    6
    <form>
      <input type="text" name="uname">
      <input type="sumbit" value="提交按钮">
      <input type="reset" value="重置按钮">
      <input type="button" value="普通按钮">
    </form>

  • 也可以通过button实现

    1
    2
    3
    4
    5
    6
    <form>
      <input type="text" name="uname">
      <button type="sumbit">提交按钮</button>
      <button type="reset">重置按钮</button>
      <button type="button">普通按钮</button>
    </form>

3.12. form常见的属性

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

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

  • form常见的属性如下

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

3.12.1. action

  • 规定当提交表单时，向何处发送表单数据
  • 值应该是后端提供的一个url地址，这个地址专门负责接收表单提交过来的数据
  • 当未指定这个数值时，表单提交的默认动作是提交给当前页面url地址

3.12.2. method

3.12.3. target

  • 规定何处打开提交的url
  • 默认是在同一个窗口下
值 描述
_blank 在新窗口中打开
_self 默认。在相同框架中打开
_parent 在父框架集中打开
_top 在整个窗口中打开
framename 在指定的框架中打开

3.12.4. enctype

  • 规定发送表单数据之前如何对数据进行编码
  • 默认情况下值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符
  • 文件上传时，必须将值设置为 multipart/form-data
本文结束  感谢您的阅读