CSS之高级元素的使用 (七)：列表元素、表格元素、表格合并、表单元素、表单常见属性
跳转目录
| 篇章 | 知识点 |
|---|---|
| CSS之邂逅(一) | 认识CSS、编写CSS样式、CSS注释、常见的CSS属性 |
| CSS额外知识补充(二) | link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程 |
| CSS属性与选择器(三) | CSS文本属性、CSS字体属性、CSS常见选择器 |
| CSS属性的特性(四) | CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧 |
| CSS盒子模型(五) | 认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing |
| CSS设置背景(六) | background-(image、repeat、size、position、attachment)、background、background-image和img对比 |
| CSS高级元素的使用(七) | 列表元素、表格元素、表格合并、表单元素、表单常见属性 |
| CSS之Emme语法t和结构伪类(八) | 认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用 |
| CSS额外知识补充(九) | border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性 |
| CSS元素定位(十) | 标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index |
| CSS元素浮动(十一) | 认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比 |
| CSS flex布局(十二) | 认识flex布局、flex布局的理解、flex-container属性、flex-item属性 |
1. 列表元素
1.1 有序列表 ol->li (ordered list)
注意:有序列表ol中直接元素只能是li
li 的含义 ==> list item 即表示列表中的每一项
案例演示：
<h1>喜欢的电影排名h1>
<ol>
<li>阿甘正传li>
<li>阿甘正传li>
<li>阿甘正传li>
<li>阿甘正传li>
<li>阿甘正传li>
<li>阿甘正传li>
ol>
可以从上面的案例按出来，ol其实是自带效果的，有时候我们往往不喜欢这样，因此我们会重新给它覆盖样式。
ol,
li {
padding: 0;
margin: 0;
list-style-type: none;
}
1.2 无序列表 ul-> li (unordered list)
注意:无序列表ul中直接元素只能是li，与ol相同的是直接子元素也只能是li
案例演示：
<h1>常见的编程语言h1>
<ul>
<li>JavaScriptli>
<li>JavaScriptli>
<li>JavaScriptli>
<li>JavaScriptli>
<li>JavaScriptli>
<li>JavaScriptli>
<li>JavaScriptli>
ul>
其实无论是有序还是无序列表，或者其它元素，当它们有一些自带的效果我们很难去控制时，我们都习惯于将它们一次性的进行重置，像两个列表元素本质就是list-style-type不同，我们很少使用自带的序号，反而经常使用list-style-type:none;.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
如果我们的确想用序号，现在手动去添加会有点麻烦，等到之后学习js后可以通过循环来添加。
1.3 定义列表 dl->dt&dd（definition list）
注意:定义列表的直接子元素是dt 和 dd
dt 的含义 ==> definition term 即表示列表中每一项的项目名
dd的含义 ==>
- definition description 即表示列表中每一项的具体描述，是对dt的描述、解释、补充
- 一个dt后面跟着一个或者多个dd
案例演示：
<h1>前端开发h1>
<dl>
<dt>阶段1：dt>
<dd>HTMLdd>
<dd>HTMLdd>
<dd>HTMLdd>
<dt>阶段2dt>
<dd>JavaScriptdd>
<dd>JavaScriptdd>
<dd>JavaScriptdd>
dl>
还是喜欢重置，同上
应用场景举例：
1.4 练习案例
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>Documenttitle>
<style>
/* 重置样式 */
body,
ul,
ol,
li,
dl,
dd,
dt,
a {
margin: 0;
padding: 0;
}
ul,
ol,
li,
dl,
dd,
dt {
list-style-type: none;
}
a {
text-decoration: none;
color: #222;
}
/* 自我喜好修改 */
ul>li {
margin: 12px 0;
}
.item>a {
display: inline-block;
height: 24px;
line-height: 24px;
}
ul>li .ranking {
display: inline-block;
width: 24px;
/* font-size: 20px; */
font-weight: 700;
margin-right: 8px;
line-height: 24px;
height: 24px;
text-align: center;
color: #999;
}
ul>li:first-child span {
color: #a82e2e;
}
ul>li:nth-child(2) span {
color: #f04142;
}
ul>li:nth-child(3) span {
color: #ff9a03;
}
.content {
display: inline-block;
}
.content:hover {
color: #F04142;
}
ul>li .icon {
position: relative;
top: 2px;
display: inline-block;
width: 16px;
height: 16px;
}
.new {
background-image: url(./img/new.svg);
}
.hot {
background: no-repeat url(./img/hot.svg);
}
style>
head>
<body>
<ul>
<li class="item">
<a href="#">
<span class="ranking">1span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon hot">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">2span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon hot">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">3span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon new">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">4span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">5span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon new">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">6span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">7span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">8span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon new">i>
a>
li>
<li class="item">
<a href="#">
<span class="ranking">9span>
<div class="content">载39人渔船印度洋倾覆：中国籍17人div>
<i class="icon">i>
a>
li>
ul>
body>
html>
代码编写思路总结：
1.先完成结构
2.重置样式(body,a,ul,ol,li等等)
3.先整体 再局部
备注：样式的添加顺序最好跟页面结构一样，方便查找
4.将重复的逻辑放到一个单独的class中(如上面案例中的.icon)
5.不同的代码提炼到不同的样式中(如案例中的 .hot .new）
备注: 继承的属性优先级是最低的，如果元素本身自己设置了相应的属性肯定会被替换掉的。
2. 表格元素
2.1 表格常见元素
编写表格时使用到的元素：
table=> 表示表格tr=> 表示表格中的一行即 table rowtd=> 表示每一行中的单元格即 table data
表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了
2.2 表格边框 border-collapse
==作用： == 该CSS 属性是用来决定表格的边框是分开的还是合并的
- collapse => 重复边框折叠，或者说合并单元格边框
- separate => 边框分开
表格案例练习：
- 其中表格边框需要通过css进行调整，会使用到
border-collapse
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>Documenttitle>
<style>
table {
padding: 0;
margin: 0 auto;
width: 400px;
height: 200px;
border-collapse: collapse;
}
table tr:first-child {
font-weight: 700;
}
td {
border: 1px solid;
margin: 0;
padding: 0;
text-align: center;
}
style>
head>
<body>
<table>
<tbody>
<tr>
<td>排名td>
<td>股票名称td>
<td>股票代码td>
<td>股票价格td>
<td>股票涨跌td>
tr>
<tr>
<td>1td>
<td>贵州茅台td>
<td>600519td>
<td>1800td>
<td>5%td>
tr>
<tr>
<td>2td>
<td>腾讯控股td>
<td>00700td>
<td>400td>
<td>3%td>
tr>
<tr>
<td>3td>
<td>五粮液td>
<td>000858td>
<td>160td>
<td>8%td>
tr>
<tr>
<td>4td>
<td>东方财富td>
<td>30059td>
<td>25td>
<td>4%td>
tr>
tbody>
table>
body>
html>
2.3 表格的其他元素
如果表格中全部都是tr组成，会导致语义化不明确。因此为了区分表格的各个部分，而衍生出了以下几个标签增加表格元素的语义化。
caption=> 表格的标题thead=> 表格的表头th=> 表格的表头单元格tbody=> 表格的主体tfoot=> 表格的页脚
多了这些标签后，需要注意css属性如何精准的选中想要的元素
3. 表格合并
3.1 单元格合并
如何使用单元格合并呢？首先要搞清楚什么是 跨行 什么是 跨列
- 跨列合并：
colspan跨列是想右跨的 - 跨行合并：
rowspan跨行是向下跨的
单元格合并三步骤：
1.确定“谁” 需要跨列或者跨行
2.确定跨行还是列
3.确定跨几行或者几列
案例练习：
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>Documenttitle>
<style>
table {
width: 500px;
height: 400px;
border-collapse: collapse;
text-align: center;
}
caption,
th,
td {
padding: 5px 0;
border: 1px solid #f00;
}
caption {
font-size: 20px;
font-weight: 700;
border-bottom: none;
}
.morning,
.afternoon,
.night {
width: 100px;
}
style>
head>
<body>
<table>
<caption>课程表caption>
<thead>
<th>th>
<th>星期一th>
<th>星期二th>
<th>星期三th>
<th>星期四th>
<th>星期五th>
thead>
<tbody>
<tr>
<td class="morning" rowspan="4">上午td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td class="afternoon" rowspan="4">下午td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td class="night" rowspan="2">晚自习td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
<tr>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
<td>英语td>
tr>
tbody>
table>
body>
html>
影院案例练习：
- 遇到的问题：如果设置了表格的固定高度，如果所有行的高度总和最低要达到固定高度的值。否则单独修改td过低会不起作用。
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>影院电影放映列表title>
<style>
table {
width: 1000px;
/* height: 300px; */
text-align: center;
border-collapse: collapse;
}
th,
td {
padding: 0;
}
caption,
th,
.start-time {
font-weight: 700;
}
caption {
height: 60px;
line-height: 60px;
font-size: 20px;
}
th {
height: 50px;
line-height: 50px;
background-color: #f5f5f5;
}
td {
height: 55px;
/* line-height: 60px; */
}
tbody>tr:nth-child(2n+1) {
background-color: #f3ecec;
}
tbody>tr:nth-child(2n) {
background-color: #f5f5f5;
}
tbody>tr>td:nth-child(4) {
color: #e73030;
}
.end-time {
margin-top: 5px;
font-size: 13px;
color: #797773;
}
.seat-button {
display: inline-block;
width: 80px;
height: 30px;
color: #fff;
font-size: 14px;
line-height: 30px;
border-radius: 10px;
background-color: #e73030;
text-decoration: none;
}
style>
head>
<body>
<table class="movie-list">
<caption>影院电影放映列表caption>
<thead>
<tr>
<th>放映时间th>
<th>语言版本th>
<th>放映厅th>
<th>售价(元)th>
<th>选座购票th>
tr>
thead>
<tbody>
<tr>
<td>
<div class="start-time">13:15div>
<div class="end-time">15:00散场div>
td>
<td>国语3Dtd>
<td>2号厅td>
<td>¥48.5td>
<td>
<a href="#" class="seat-button">选座购票a>
td>
tr>
<tr>
<td>
<div class="start-time">13:15div>
<div class="end-time">15:00散场div>
td>
<td>国语3Dtd>
<td>2号厅td>
<td>¥48.5td>
<td>
<a href="#" class="seat-button">选座购票a>
td>
tr>
<tr>
<td>
<div class="start-time">13:15div>
<div class="end-time">15:00散场div>
td>
<td>国语3Dtd>
<td>2号厅td>
<td>¥48.5td>
<td>
<a href="#" class="seat-button">选座购票a>
td>
tr>
<tr>
<td>
<div class="start-time">13:15div>
<div class="end-time">15:00散场div>
td>
<td>国语3Dtd>
<td>2号厅td>
<td>¥48.5td>
<td>
<a href="#" class="seat-button">选座购票a>
td>
tr>
<tr>
<td>
<div class="start-time">13:15div>
<div class="end-time">15:00散场div>
td>
<td>国语3Dtd>
<td>2号厅td>
<td>¥48.5td>
<td>
<a href="#" class="seat-button">选座购票a>
td>
tr>
tbody>
table>
body>
html>
4. 表单元素
4.1 认识表单
什么是表单？
- HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单
常见的表单元素 ： form：表单，在一般情况下其他表单元素都是它的后代元素input：输入框（文本输入框，单选框，复选框，按钮等等）textarea：多行文本框select,option：下拉选择框button：按钮label：表单元素的标题
4.2 input元素的使用
以上表单元素中，input的使用频率是比较多的，我们展开理解一下。
input元素的常见属性
| input属性 | 值 | |
|---|---|---|
| type | text password radio checkbox button reset submit file | 文本框 密码框 单选框 复选框 按钮 重置按钮 提交按钮 文件上传 |
| readonly | readonly | 只读 |
| disabled | disabled | 禁用 |
| checked | checked | 默认被选中 |
| autofocus | autofocus | 当页面加载时，自动对焦 |
| name | - | 在提交数据给服务器时，可用于区分数据类型 |
| value | - | 取值 |
疑问：input是替换元素吗？
img是一个可替换元素，行为是非常固定的。input的类型很多，不同的类型展现形式是不同的，不同浏览器的表现可能不一样，因此会很难直接定义成一种类型，我们把它用一个术语 小挂件Widgets来描述。
4.3 布尔属性 (boolean attributes)
有很多元素都是有布尔属性的，在上面input元素中就是这样。如disabled、checked、readonly、multiple、autofocus、selected
什么叫布尔属性？
- 布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身
4.4 表单按钮的使用 input (type=“button”)
表单可以实现按钮的效果
- 普通按钮
type="button"使用value属性设置按钮文字 - 重置按钮
type="reset"重置它所属form的所有表单元素（包括input、textarea、select） - 提交按钮
type="submit"提交它所属form的表单数据给服务器（包括input、textarea、select）
按钮的两种实现方式：
- button 按钮标签，
- input 表单标签
其中，button标签在表单中没有指定类型时，默认值是submit
<form action="">
<input type="text">
<input type="date">
<br>
<button type="button">普通按钮button>
<button type="reset">重置按钮button>
<button type="submit">提交按钮button>
<br>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
form>
4.5 input和label的关系
label元素一般跟input配合使用，用来表示input的标题- label可以跟某个input绑定，点击label就可以激活对应的input变成选中。
<label for="username">
用户名：<input id="username" type="text">
label>
<label for="password">
密码：<input id="password" type="password">
label>
4.6 单选框的使用 input (type=“radio”)
作用 当input表单元素的type类型选择了radio后会以单选框的形式呈现
类型为radio时 input的属性：
name：radio需要name来进行分组，并且在提交报单时各个参数的形式是key=value&key=value，其中的name就是决定了其中的key值。value：道理和name是一样的，我们在浏览器上选择了单选框，同时需要传递相应的数据到服务端，决定了value的值
结合label标签来实现性别选择案例：
<label for="male">
<input type="radio" name="sex" id="male" value="male">男
label>
<label for="female">
<input type="radio" name="sex" id="female" value="female">女
label>
4.7 复选框的使用 input (type=“checkbox”)
作用 当input表单元素的type类型选择了checkbox后会以复选框的形式呈现。
类型为checkbox时 input的属性：
name复选框也是需要使用name分组的value和radio的含义是一致的
案例演练：
<form action="">
<div>您的爱好：div>
<label for="hobby">
<input type="checkbox" id="hobby" name="hobby" value="basketball"> 篮球
<input type="checkbox" id="hobby" name="hobby" value="swimming"> 游泳
<input type="checkbox" id="hobby" name="hobby" value="football"> 足球
<input type="submit" value="提交">
label>
form>
4.8 多行输入文本框 textarea的使用
作用： textarea 表示一个多行输入文本框
textarea常见的属性
cols: 设置文本框的列数rows: 设置文本框的行数
其实就是设置了多行文本框的宽高
案例演练：
<form action="">
<label for="info">
个人简介：
<textarea name="info" id="info" cols="30" rows="10">textarea>
label>
form>
我们可以发现在右下角会两条线，我们可以拖动鼠标调整文本框的宽高。我们也可以在css对它进行缩放设置
resize 缩放的CSS设置
resize:"none"禁止缩放resize:"horizontal"允许水平缩放resize:"vertical"允许垂直缩放resize:"both"允许水平垂直缩放
案例练习：
textarea {
resize: none;
/* resize: horizontal; */
/* resize: vertical; */
/* resize: both; */
}
4.9 下拉菜单 select和option的使用
作用： select 表示一个下拉菜单，option表示里面的每一项
select的常用属性
multiple可以多选size显示多少项
option的常用属性
selected设置默认被选项
案例练习：
<select name="fruits" id="" multiple size="2">
<option value="apple">苹果option>
<option value="orange">橙子option>
<option value="banana">香蕉option>
<option value="melon" selected>西瓜option>
select>
5.form表单常见的属性
作用：form通常作为表单元素的父元素, form可以将整个表单作为一个整体来进行操作,例如重置或提交整个表单。
form的常用属性
action：把该表单里所有收集的信息都提交给里面的地址method：确定发送请求的方式 GET或POSTtarget：发送请求后打开页面的方式，和超链接同理
此图的提交方式为 GET请求，所有的数据都会显示在URL上，容易暴露数据。建议使用POST请求，具体区别到学AJAX时来区分。
案例的代码就不放了，其实现在都不单独使用form的action来发送请求了，一般使用axios那些，但是还是需要掌握一下。
请求方式的对比
