发表于： 2019-10-24 21:54:27
1 957
一、今天完成的事情
表格标签：
表格标签用<table>表示。
一个表格<table>是由每行<tr>组成的，每行是由<td>组成的。
所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是行和列组成的。
在以前，要想固定标签的位置，唯一的方法就是表格，现在可以通过css定位的功能来实现。但是现在在做页面的时候，表格还是有一些作用的。
例如，一行的单元格：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
上面的表格中没有加文字，所以在生成的网页中什么都看不到。
例如，3行4列的单元格：
.png)
上面的表格中好像没有看到边框呀，不急，接下来看看<table>标签的属性。
<table>的属性：
border：边框。单位为像素
style="border-collapse:collapse;"单元格的线和表格的边框线合并
width：宽度，单位为像素
height：高度，单位为像素
bordercolor：表格的边框颜色
align：表格的水平对齐方式，属性值可以是：left、right、center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置。
cellpadding：单元格内容到边的距离，单位为像素。默认情况下，文字是紧挨着左边的那条线的，即默认情况下的值为0.
注意：不是单元格内容到四条边的距离，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0。
bgcolor="#00cc66"：表格的背景颜色
background="路径src/..."：背景图片。背景图片的优先级大于背景颜色
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式（direction），可以取值：ltr ：从左到右 （left to right，默认），rtl：从右到左（right to left）。
既然说dir是公有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右到左开始排列。
单元格带边框的效果，后面加上几个不同的属性值。
.png)
.png)
.png)
.png)
.png)
备注：表格中很细表格边线的制作：
css的写法：
style=“border-collapse：collapse；”
<tr>：行
一个表格就是一行一行组成的。
属性：
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align=“center”：一行的内容水平居中显示，取值：left、center、right
valign=“center”：一行的内容垂直居中，取值：top、middle、bottom
<td>单元格
属性：
align：内容的横向对齐方式。属性值可以填：left ，right，center。
如果想让每个单元格的内容都居中，这个属性太复杂了，以后会用css来解决
valign：内容的纵向对齐方式，属性值可以填：top、middle、bottom
width：绝对值或者相对值（％）
height：单元格的高度
bgcolor：设置这个单元格的背景颜色
background：设置这个单元格的北京图片
单元格的合并：
如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置
效果演示：
.png)
.png)
.png)
.png)
如果是单元格横向合并的话，这一行要合并n个单元格，这一行一定要少n-1个数据。
如果是单元格纵向合并的话，这一列要合并n个单元格，这一列一定要少n-1个数据。
<th>:加粗的单元格。相当于<td>+<b>
属性同<td>标签
<caption>:表格的标题。使用时和 tr 标签并列。
属性：align，表示标题相当于表格的位置。属性值可以是left、right、center、top、bottom
效果演示：
.png)
.png)
表格的<thead>标签、<tbody>标签、<tfoot>标签
这三个标签有与没有的区别：
1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead，tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示
2、当表格非常大内容非常多的时候，如果要用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
举例：
.png)
.png)
框架标签：
如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。
注意：框架标签不能放在<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面。于是：<frameset>和<body>只能二选一。
框架的集合用<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>。
<frameset>：框架的集合
一个框架的集合可以包含多个框架或框架的集合。
属性：
rows：水平分割，将框架分为上下两个部分。写法有两种：
1、绝对值写法：rows="200,*" 其中 * 代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩余的部分
2、相对值写法：rows="30％,*" 其中 * 代表剩余的。这里其实包含了两个框架：上面的框架占30％，下面的框架占70％。
注意：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
未看完：以后再看，先做任务吧！！！
查看学习资料，css概念--css是什么？
CSS（层叠样式表）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS具有以下特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4、层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5、页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。
属性：
属性的名字是一个合法的标识符，它们是css语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color哦是文本的颜色属性，而text-indent则规定了段落的缩进。
掌握一个属性的用法，有六个方面需要了解：
①该属性的合法属性值（legal value）。显然段落缩进属性text-indent只能赋给一个表示长度的值，而表示背景图案的background．image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。
②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续的空白字符被忽略，而且不自动换行。
④该属性的值是否被下一级继承（inherited）。
⑤如果该属性能取百分值（percentage），那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。
⑥该属性所属的媒介类型组（media groups）。
二、明天要做的事情
开始按任务做，先不看基础了，要不太慢了
三、遇到的困难
暂时没有
四、收获
学到html和css的基础知识，还不够全，也不够熟练，应该在之后的学习中好好练习，增加熟练度。
返回列表
评论