HTML5学习笔记（六）
2019-08-20 本文已影响0人
理以周
1、被安排得明明白白
1.1 无序列表和有序列表：
- 无序列表(Unordered List):使用ul元素来定义，其中的每个项使用li元素包裹起来；
<!--使用ul元素创建一个无序列表-->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
image.png
- 有序列表(Ordered List)：使用ol元素来定义，列表中每个项使用li元素包裹起来；
<!--使用ol元素创建一个有序列表-->
<ol>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>BootStrapt</li>
<li>Vue</li>
<li>PHP</li>
</ol>
image.png
ol中属性设置：
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为降序。（9，8，7，.....） |
| start | number | 规定有序列表的起始值。 |
| type | 1、A、a、I、i | 规定在列表中使用的标记类型 |
<ol type="I" reversed>
image.png
1.2 两个常用的CSS属性：
- list-style-type：允许你将列表的标志设置为方的、圆的、看不见的...
<!DOCTYPE html>
<html>
<head>list-style-type演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style>
<!--通过list-style-type设置列表的标志-->
ul.a {list-style-type:square;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:circle;}
ul.d {list-style-type:none;}
</style>
</head>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
<ul class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
<ul class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
</body>
</html>
image.png
ul中属性设置：
| 值 | 描述 |
|---|---|
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 阿拉伯数字 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| none | 不使用项目符号 |
| ........ | .... |
- <list-style-image>:列表标志自定义；
<style>
ul{
list-style-image:
url("img/jianshu.png");
width:16px;
height:16px;
}
</style>
1.3 列表嵌套：
<ol>
<li><del>《零基础入门学习c语言》</del></li>
<li>《零基础入门学习汇编语言》</li>
<li>《c++快速入门》</li>
<li>《零基础入门学习DELPHI》</li>
<li>《数据结构和算法》</li>
<li>《win32汇编语言程序设计》</li>
<li>《解密系列》
<ul>
<li>基础篇</li>
<li>调试篇</li>
<li>系统篇</li>
<li>脱壳篇</li>
<li>工具篇</li>
<li>密码学</li>
</ul>
</li>
</ol>
image.png
1.4 定义列表：使用dl元素，还需要dt、dd元素配合使用；
<!--单条术语与描述-->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
</dl>
<!--多条术语，单条描述-->
<dl>
<dt>fishc.com.cn</dt>
<dt>bbs.fishc.com</dt>
<dd>一个神奇的论坛。</dd>
</dl>
<!--单条术语，多条描述-->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
<dd>一个可以结识一群志同道合的朋友的地方。</dd>
</dl>
<!--多条术语，多条描述-->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
<dd>一个可以结识一群志同道合的朋友的地方。</dd>
<dt>ilovefishc.com</dt>
<dd>鱼c工作室的主页。</dd>
</dl>
image.png
2、数据就应该整整齐齐
2.1 表格的制作：
- tr=table row（行）；
- th=table header cell（表头，默认加粗）；
- td=table data cell（数据）
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bellezhou</td>
<td>22</td>
</tr>
<tr>
<td>lily</td>
<td>23</td>
</tr>
</table>
表格比较朴素，连边框都没有：
image.png
增加边框，自动调整表格大小：
<style>
table,th,td{
border:1px solid black;
}
</style>
image.png
边框有两条平行线？ 原来是属于不同元素的边框
<style>
table{
border:1px solid black;
}
th{
border:1px solid red;
}
td{
border:1px solid blue;
}
</style>
image.png
如何把两者合并：
<style>
table{
border:1px solid black;
border-collapse:collapse;
}
th{
border:1px solid red;
}
td{
border:1px solid blue;
}
</style>
image.png
给表格增加标题：
<caption>一个简单的表格</caption>
image.png
完整版创作：
image.png
表格中增加图片、pedding样式调整边距：
<!DOCTYPE html>
<html>
<head>
<title>一个简单的表格</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style>
table{
border:1px solid black;
border-collapse:collapse;
}
th,td{
border:1px solid black;
pedding:5px;
}
caption{
pedding:10px;
}
</style>
</head>
<body>
<table>
<caption>著名男演员</caption>
<tr>
<th>姓名</th>
<th>代表作品</th>
<th>图片</th>
</tr>
<tr>
<td>陈建斌</td>
<td>《甄嬛传》</td>
<td><img src="img/陈建斌.jpg" alt ="著名男演员"width ="150"></td>
</tr>
<tr>
<td>崔弈</td>
<td>《少儿主持节目》</td>
<td><img src="img/崔弈.jpg" alt ="著名女演员"width ="150"></td>
</tr>
<tr>
<td>雷恪生</td>
<td>《少小离家老大回》</td>
<td><img src="img/雷恪生.jpg" alt ="著名男演员"width ="150"></td>
</tr>
<tr>
<td>王学圻</td>
<td>《战争片》</td>
<td><img src="img/王学圻.jpg" alt ="著名男演员"width ="150"></td>
</tr>
<tr>
<td>王志文</td>
<td>《人民的名义》</td>
<td><img src="img/王志文.jpg" alt ="著名男演员"width ="150"</td>
</tr>
</table>
</body>
</html>
image.png
2.2继续表格制作的优化
- thead（表头）；
- tbody（主体）；
- tfoot（表尾）；
<!DOCTYPE html>
<html>
<head>
<title>一个简单的表格</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style>
table{
border:1px solid black;
border-collapse:collapse;
}
thead th{
background:gray;
color:white;
}
tbody th{
background:lightgray;
color:white;
}
th,td{
border:1px solid black;
pedding:5px;
}
caption{
pedding:10px;
}
</style>
</head>
<body>
<table>
<caption>著名男演员</caption>
<thead>
<tr>
<th>评价</th>
<th>姓名</th>
<th>代表作品</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<tr>
<th>著名男演员</th>
<td>陈建斌</td>
<td>《甄嬛传》</td>
<td><img src="img/陈建斌.jpg" alt ="著名男演员" width ="150"></td>
</tr>
<tr>
<th>著名女演员</th>
<td>崔弈</td>
<td>《少儿主持节目》</td>
<td><img src="img/崔弈.jpg" alt ="著名女演员" width ="150"></td>
</tr>
<tr>
<th>著名男演员</th>
<td>雷恪生</td>
<td>《少小离家老大回》</td>
<td><img src="img/雷恪生.jpg" alt ="著名男演员" width ="150"></td>
</tr>
<tr>
<th>著名男演员</th>
<td>王学圻</td>
<td>《战争片》</td>
<td><img src="img/王学圻.jpg" alt ="著名男演员" width ="150"></td>
</tr>
<tr>
<th>著名男演员</th>
<td>王志文</td>
<td>《人民的名义》</td>
<td><img src="img/王志文.jpg" alt ="著名男演员" width ="150"</td>
</tr>
</tbody>
</table>
</body>
</html>
image.png
增加表尾：
<!--添加tfoot元素，以及使用colspan使其表尾横跨4列，和表格一样长，比较美观-->
<tfoot>
<tr>
<td colspan="4">上述资料均为周普莉主观臆断的，不具有权威性，仅供娱乐。</td>
</tr>
</tfoot>
image.png
rowspan实现跨列：
<!DOCTYPE html>
<html>
<head>
<title>一个简单的表格</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style>
table{
border:1px solid black;
border-collapse:collapse;
}
td{
border:1px solid black;
pedding:5px;
}
</style>
</head>
<body>
<table>
<!--修改代码，让中间列纵跨3行-->
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
image.png
批量操作表格行列：
<table>
<!--修改代码，让中间列纵跨3行-->
<!--将第一列的背景颜色设置为红色-->
<!--将第2、3列的背景颜色设置为绿色-->
<colgroup>
<col style="background:red">
<col span="2"style="background:green">
</colgroup>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
image.png
