天天看点

蜗牛学院 第二天 前端表格

第二天 前端表格

:对字体的设置:字体大小,字体,颜色

属性:基于标签之上,也就是先有标签,再有属性,是对特定事物的描述和刻画。

字体大小:size=”10”:10表示像素,是屏幕大小的单位。

字体:face:只要word文档有的字体,设置上去都能识别,比如:face=”楷体”;

颜色:color=”red”:设置字体的颜色。

标签组合:几种标签一起使用,比如加粗和对字体设置颜色:

这是我的第一个网页:标签组合

标签的解释:放在尖括号里面的特有(浏览器能够识别)单词或者字母:,

,;(这种就是浏览器不能识别的标签)

路径问题:

绝对路径和相对路径

绝对路径:就是以HTTP://或者HTTPS://开头的路径,叫做绝对路径。

相对路径:相对于当前写的HTML代码文件去寻找的路径

../:先找到文件的上层目录,在进行在文件夹里面寻找图片

./或者不写: 表示图片文件和当前代码HTML文件再同一文件夹下面。

图片标签里面的alt属性为:在图片没有加载出来(暂时找不到图片)的时候,就会给出一定的提示信息,提示信息写在引号里面,比如:alt=”图片正在加载中”

图片的title属性:表示鼠标放上去的提示信息,主要提示图片的信息,比如:title=”这是一张背景图片”,鼠标放上去的时候,就会出现引号里面的这句话。

图片标签涉及的单词:img/src/alt/title

href属性值:跳转页面的地址:跟图片的src一样的。

也会存在相对路径和绝对路径

target属性值:设置点击超链接之后,是否打开一个新的网页标签页面。

超链接相关单词:a/href/target

表格:

姓名 性别 年龄 出生年月

使用HTML在网页上编辑一个表格:四行四列的表格;

练习:写一个三行三列的表格;

border:设置表格的边框像素,默认为0(不显示边框)。

cellspacing;单元格的外边距,单元格与单元格之间的一个距离,比如:

1和2这两个中间的横线,就表示两个单元格之间的距离,使用cellspacing来设置,默认像素为2

cellpadding:这是内边距,表示单元格里面的内容部分和单元格的边框之间的距离,例如:

内容部分

上面的单元格中间的四条横线就表示内容部分和单元格的边框的距离,称之为内边距,使用cellpadding属性来设置,默认为0

表头::(相当于td作用一样,作为表头的单元格)表示写入的是表头信息,下面列的名称,比如:姓名、性别等。

合并行和合并列(合并单元格):

合并列:使用属性colspan = “2”:表示占用两个单元格的宽度,在哪一个单元格增加这个属性值,能够实现合并?那个行里面少了单元格,则可以在哪个里面的里面增加属性colspan来设置占用的单元格数。已经存在的列数+colspan里面的值要少于或等于下一行的列数

合并行:使用属性值rowspan=”2”:表示占用两个单元格的高度。什么时候使用?在哪一行多了一行单元格,则在哪个单元格里面加上属性值rowspan=”2”;

解释:合并列

合并行:

注意点:

合并行的时候,只能从上面往下面进行合并,也就是上面比下面的列数多。

列数+合并的数值不能多于表格的总列数或者总行数

设置单元格的高度和宽度:

改变单元格的宽度:使用属性width=”宽度值”;只需要改变第一行第一列的所有宽度即可,如果有多行的列都设置了宽度,则按照最大的一个宽度值来进行设置

改变单元格的高度:使用属性值height=“高度值”,只需要改变所有行的第一列就可以了,如果有多行的列里面都改变了高度值,按照最大的高度设置

单元格内容居中:align = “center”;如果想要表格在网页上面居中,那么在table标签里面加入align=”center”;

总结一下单词:teble/thead/th/tr/td/width/height/align/cellspacing/cellpadding/colspan/rowspan