html 的基础 表格 列表 图像
一、表格
首先认识一下表格的几个名词： 行 row ，列 column ，单元格 cell
1. 标签及其属性
1.1 表格 table
<table></table>：用于定义表格，表格的绘制也要在这个标签内进行；
属性：
首先，属性是写在开头标签里的，例如：<table border="1" align="center" cellspacing="0" bgcolor="red"> </table>
1）cellspacing：指定单元格之间的距离。属性值为像素值或者百分比。例如：cellspacing=“0” 或者cellspacing=10%
2）cellpadding：指定单元格边框到单元格内容的距离。属性值为像素值或者百分比。例如：cellpaddingg=“0” 或者cellpadding=10%
3）border：指定表格的边框线条粗细。例如：border=“1”
4）align：指定表格在页面的位置（表格整体的水平对齐方式）。属性值有：center（居中）、left（靠左）、right（靠右）、例如：align=“center”
5）bgcolor ：用于表格的整体颜色。例如：bgcolor=“red”
6）width：用于指定表格的整个宽度，属性值为像素值或者百分比。例如：width=“300px” height=“300”
7）height：用于指定表格的整个宽度，属性值为像素值或者百分比。
1.2 表头 caption
<caption></caption>:用于定义表格的表头（表格标题）。其格式上：始终处于表格上方的正中间位置。
例如：<caption>年终数据报表</caption>
1.3 表格头 thead
<thead></thead>:用于定义表格的第一行。其格式上：始终处于单元格的正中间位置。该元素只能包含<tr>、<th>元素。<th>包含的文字默认****居中加粗****
例如：
<thead bgcolor="#0FF">
<tr>
<th>月份</th>
<th>收入（RMB）</th>
</tr>
</thead>
1.4 表格主体 tbody
<tbody></tbody>：定义表格的主体。该元素只能包含<tr>、<td>元素。
例如：
<tbody bgcolor="#9CC">
<tr>
<td>1月</td>
<td>100</td>
</tr>
</tbody>
1.5 表格脚注 tfoot
<tfoot ></tfoot >：定义表格的最后部位。该元素只能包含<tr>、<td>元素。
例如：
<tfoot bgcolor="#FF0">
<tr>
<td>总计（RMB）</td>
<td>60</td>
<td>80</td>
<td>200</td>
<td>240</td>
</tr>
</tfoot>
注释：
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当你创建某个表格时，你也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这个时候使用这三个元素最合适。这三个元素的使用使表格结构更加清晰，对布局排版影响不大，一般可以不用
一般而言，thead、tfoot 以及 tbody 这三个元素是配套使用的，如果不配套使用，不会出现格式错误，但是能更规范。
提示：
HTML5中，删除了<table>中的align、boder、bgcolor等属性，放在了CSS中进行设置。
1.6 行 tr
<tr><tr>：定义表格的行。想一次性打出多行<tr><tr>，可使用：tr*6 效果是一次打出六行<tr><tr>
1.7 列 th 或者 td
<th></th>与<td></td>都定义一个列，区别在于<th>包含的文字默认****居中加粗****。
同样的，想一次性打出多行<th><th>，可使用：tr*6 效果是一次打出六行<th><th>。
1.8 列属性 col
<col> 标签为表格中一个或多个列定义属性值。如需对全部列应用样式， 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
1.9 合并单元格
-
colspan=“2” : 合并列
-
rowspan=“2” : 合并行
使用方法：
colspan用于列元素
<th>或者<td>。例如：<td colspan="4"></td>。rowspan用于列元素
<th>或者<td>。例如：<td rowspan="4"></td>。注意：在使用时，合并行或者合并列时，要把已经被合并的行（列）对应的代码删除或者注释掉（建议注释掉，方便书写和查看）
例如：
<!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> <table width="200" border="1"> <tr> <td colspan="2">学生成绩</td> <!-- <td></td> --> <!-- 原本表格是三行两列的表格，colspan="2"合并第一行的两列，所以要注释或者删除掉第二列的相应代码 --> </tr> <tr> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </table> </body> </html>效果：
如果没有进行删除或者注释代码，得到的错误示范效果为：
2.例题
2.1 例题1
<!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>
<table>
<tr><!--第一行-->
<td> 第一行的第一列 </td>
<td> 第一行的第二列 </td>
</tr>
<tr><!--第二行-->
<td> 第二行的第一列 </td>
<td> 第二行的第二列</td>
</tr>
</table>
</body>
</html>
效果：
总结：
在使用table标签的时候，其属性没有赋值，得到的表格是没有线条的。
2.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>
</head>
<body>
<table border="1px" cellspacing="0px" cellpadding="5px" bgcolor="#EEBABA" width="200px" height="150px">
<tr>
<!--第一行-->
<td> 第一行的第一列 </td>
<td> 第一行的第二列 </td>
</tr>
<tr>
<!--第二行-->
<td> 第二行的第一列 </td>
<td> 第二行的第二列</td>
</tr>
</table>
</body>
</html>
效果：
总结：
表格做出来以后，默认在页面的左上角，使用<table align="center">才能使表格居中。
效果图：
2.3 例题3
<!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>
<table width="100%">
<caption>年终数据报表</caption>
<thead bgcolor="#0FF">
<tr>
<th>月份</th>
<th>收入（RMB）</th>
</tr>
</thead>
<tbody bgcolor="#9CC">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>80</td>
</tr>
</tbody>
<tfoot bgcolor="#FF0">
<tr>
<td>平均月收入 </td>
<td>196.67</td>
</tr>
<tr>
<td>总计</td>
<td>1180</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果：
2.4 例题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>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="160px">
<tr>
<th colspan="7">个人简历</th>
</tr>
<tr>
<td height="40px" align="center">姓名</td>
<td></td>
<td align="center">性别</td>
<td></td>
<td align="center">年龄</td>
<td></td>
<td rowspan="4" align="center">照片</td>
</tr>
<tr>
<td height="40px" align="center">学历</td>
<td></td>
<td align="center">籍贯</td>
<td colspan="3 "></td>
</tr>
<tr>
<td height="40px" align="center">电话</td>
<td></td>
<td align="center">政治面貌</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="40px" align="center">毕业院校</td>
<td colspan="5 "></td>
</tr>
<tr>
<td height="40px" align="center">求职意向</td>
<td colspan="6 "></td>
</tr>
</table>
</body>
</html>
效果图：
二、列表
1.有序列表 ol 与li
type属性：
1 使用数字作为符号（默认）
A/a 使用字母作为符号
I/i 使用罗马数字作为符号
<body>
<ol>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
</body>
效果：
<body>
<ol type="A">
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
</body>
效果：
2. 无序列表 ul 与 li
type属性：
disc 实心圆（默认）
circle 空心圆
square 实心方块
<body>
<ul>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
效果：
<body>
<ul type="square">
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
效果：
3.定义列表 dl 与 dt 、dd
<body>
<dl>
<dt>学院</dt>
<dd>计算机应用</dd>
<dd>电气工程学院</dd>
<dt>专业</dt>
<dd>计算机软件工程</dd>
<dd>电气工程及其自动化</dd>
</dl>
</body>
效果：
4.如何取消序号
使用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>
ul{
/* 普通选择器 */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
效果：
5.列表变成一行（多用于导航条）
使用CSS的浮动（float）：
<!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>
ul {
/* 去除无序列表前面的圆点符号 */
list-style: none;
/* 以下两行代码：使得无序列表的左外边距的距离为0，内边距也是0
（即内容靠左的效果）*/
margin-left: 0px;
padding: 0px;
}
li{
font-size: smaller;
color: #017A85;/* li里内容颜色 */
/* 设置列表变行后，最前面的空格 */
margin-left: 0px;
padding: 5px;
/*全部居左，实现一行的效果 */
float: left;
}
</style>
</head>
<body>
<ul>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
效果图：
三、图像标签 img
<img src="image/1.jpg" alt="电视机" title="电视机" width="200px" height="200px" />
*属性：*
src=“图片路径”
title=“鼠标停在图片上时提示的文字内容”
alt=“图片加载失败时提示的文字内容”
width=“图片宽度”（单位像素px）
height=“图片高度”（单位像素px）
border=”图片边框”（单位像素px）
四、css初识
- css（Cascading style sheets）层叠样式表
- 用来美化网页
1）、 css的三种引入方式
- ① 行内样式:在标签上添加style属性，在style属性里面添加css样式属性,每组样式之间用分号隔开
- 特点： 样式的作用范围只有当前的标签，大量使用行内样式会产生代码冗余，会使结构不清晰
<div style="color: red;font-size: 20px;"> hello world</div>
- ② 内嵌样式: 在head标签之间添加style标签，在style标签之间写入css样式语法
<head>
...
<style>
p{
width:100px;
height:100px;
background-color:yellow;
}
</style>
</head>
- ③ 外链样式： 在head标签之间添加 link标签，通过它的href属性引入一个 .css 的文件,在.css文件中写入样式语法
<head>
...
<link rel="stylesheet" href="./style.css">
</head>
2）、css的基本语法
p{
width: 200px;
height: 50px;
background-color: lightblue;
}
div{
width: 200px;
height: 50px;
background-color: lightblue;
}
选择器{
样式声明;
样式声明;
样式声明;
}
- 选择器：用来找到需要添加样式的标签的一些符号
- 样式声明: 每一组样式声明都需要一个分号结尾,每一组声明由 属性名:值 组成
3）、类选择器
.box{
width:100px;
height:100px;
}
.red{
background-color:red;
}
<div class="box red"> </div>
<div class="box"> </div>
<p class="box red"></p>
- class属性的命名规范
-
可以包含数字、字母、下划线_、连字符-
-
不能以数字开头
-
多个标签可以使用相同的类名
-
每一个标签都可以设置多个类名，多个类名以词列表的形式定义 class=“box red …”
background-color: lightblue;
}div{
width: 200px;
height: 50px;
background-color: lightblue;
}选择器{
样式声明;
样式声明;
样式声明;
}
-
- 选择器：用来找到需要添加样式的标签的一些符号
- 样式声明: 每一组样式声明都需要一个分号结尾,每一组声明由 属性名:值 组成
### 3）、类选择器
.box{
width:100px;
height:100px;
}
.red{
background-color:red;
}
<div class="box red"> </div>
<div class="box"> </div>
<p class="box red"></p>
- class属性的命名规范
- 可以包含数字、字母、下划线_、连字符-
- 不能以数字开头
- 多个标签可以使用相同的类名
- 每一个标签都可以设置多个类名，多个类名以词列表的形式定义 class="box red ..."
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
