01-列表
1.1 常见列表
1.2 有序列表
直接子元素只能是li
<!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>Document</title>
<style>
ol, li {
padding: 0;
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<h1>电影排名</h1>
<ol>
<li>蜘蛛侠</li>
<li>金刚侠</li>
<li>大话西游</li>
<li>黑客帝国</li>
</ol>
</body>
</html>
1.3 无序列表
直接子元素只能是li
<!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>Document</title>
<style>
ul, li {
padding: 0;
margin: 0;
list-style-type: none;
}
</style>
</head>
<body>
<h1>常见编程语言</h1>
<ul>
<li>js</li>
<li>java</li>
<li>python</li>
<li>go</li>
</ul>
</body>
</html>
1.4 定义列表
直接子元素只能是dt,dd
<!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>Document</title>
<style>
dl, dt, dd {
padding: 0;
margin: 0;
}
dt {
font-size: 20px;
font-weight: 600;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>前端开发</h1>
<dl>
<dt>阶段1: 基础知识</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dt>阶段2: 框架实战</dt>
<dd>Node基础</dd>
<dd>WebPack基础</dd>
<dd>Git源码管理</dd>
<dd>Vue框架</dd>
<dd>React框架</dd>
<dt>阶段3: 进阶</dt>
<dd>TS</dd>
<dd>Vue+TS</dd>
<dd>React+TS</dd>
</dl>
</body>
</html>
02-表格
2.1 表格常见元素
2.2 案例练习
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
/* text-align是可继承属性 */
text-align: center;
}
td {
border: 1px solid #333;
width: 80px;
height: 50px;
line-height: 50px;
}
tr:nth-child(1) {
font-weight: 700;
}
</style>
</head>
<body>
<table>
<tr>
<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>000858</td>
<td>160</td>
<td>8%</td>
</tr>
<tr>
<td>4</td>
<td>东方财富</td>
<td>300059</td>
<td>25</td>
<td>4%</td>
</tr>
</table>
</body>
</html>
2.3 表格的其它元素
上述案例可以实现出来，但是为了更加语义化，CSS还提供了一些别的元素
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
/* text-align是可继承属性 */
text-align: center;
}
td, th {
border: 1px solid #333;
padding: 8px 16px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<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>000858</td>
<td>160</td>
<td>8%</td>
</tr>
<tr>
<td>4</td>
<td>东方财富</td>
<td>300059</td>
<td>25</td>
<td>4%</td>
</tr>
</tbody>
</table>
</body>
</html>
2.4 单元格的合并
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid red;
width: 100px;
height: 30px;
}
/* n只能取0和正整数 */
table tr:nth-child(-n + 2) {
font-weight: 700;
font-size: 20px;
}
/* 此处对上午和下午以及晚自习使用属性选择器最优 */
tr td[rowspan] {
font-weight: 700;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6">课程表</td>
</tr>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td 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 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 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>
</table>
</body>
</html>
3.8.2 选中多个
按shift键可以实现多选
指定显示的个数,size来指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="fruits" id="" multiple size="2">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>
</body>
</html>
3.9 表单综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//antion:填写服务器地址
<form action="http://www.yfc.com/abc">
<!-- 登陆信息 -->
<div>
<label for="username">
用户:
//name属性必须加上,会拼接到action的后面,该属性后面还可以定义提交的方法例如method: post方法,也可以自己定义以什么样的方式打开target:_blank
<input id="username" type="text" name="username">
</label>
</div>
<div>
<label for="passwd">
密码:
<input id="passwd" type="password" name="password">
</label>
</div>
<!-- 性别 -->
<div>
<label for="male">
<input id="male" type="radio" name="sex" value="male">男
</label>
<label for="female">
<input id="female" type="radio" name="sex" value="female">女
</label>
</div>
<!-- 爱好 -->
<div>
<label for="football">
<input id="football" type="checkbox" name="football" checked>足球
</label>
<label for="basketball">
<input id="basketball" type="checkbox" name="basketball">蓝球
</label>
</div>
<!-- 提交表单 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</form>
</body>
</html>
效果如下