计算机网络（视频）-四川省对口招生技能操作（应会）考纲技能通

下面我们继续来看一下CSS来渲染网页的格式。Css classical style sheet层叠样式表适用于增强控制网页显示样式，并能将样式信息与网页内容分离的一种标记语言。在我们正常的写一些网页时，如果我们直接将这个网页的各种格式写在我们的H5标记语言中，那我们就避免不了需要大量的重复的使用。比如当我们刚写完一页网页之后，我们在其中定义了各种各样的格式。当我们再次使用第二张网页，而当我们使用同样的格式时，我们只能重复的将刚才代码重新写一遍。而当我们使用CSS之后，我们就可以在刚才的第一个网页中，我们不我们在其中不写任何的格式信息，而将格式信息写在CSS中。这样当我们写第二页、第三页以后的很多页时，我们都可以直接应用这个CSS文件，就不需要重复的编写这些网页格式代码。就像这里说的，HTML主要用于定义网页的结构，而css则主要用于定义网页各元素的样式。下面我们来看一下，经过CSS文件的渲染，网页格式就得到了优化。这是一页没有经过这个CSS文件渲染的网页，大体的格式是这样的。这里就是我们经过CSS渲染之后的网页，当然CSS炫成什么样，要看我们这个CSS里面的内容写的是什么。下面我们来看一下。打开这个dream wear，我们打开我所编写好的index，这是我的index，就是我们刚才所展示的网页。在这里我们通过了这个选择器。来这个。刚才这这行这行代码是被我删掉了，现在我重新让他写过来。通过这一个选择器，我们就可以选择自己定义的这个文件来渲染我们的主页。可以看一下，这是我的style点CSS。我这里就是用HREF等于这个style点CSS，将它直接链接到我所编写好的这个渲染文件。你点开看一下，在这个渲染文件中，我们首先定义了body，就是主体部分采用怎样的格式，包括它的字体、这个颜色，这个边边缘距离边缘这个距离，它的宽度。然后我们就开始定义这个头部样式，header定义这个列表的样式，包括这个U一的，还有一其他的一些样式，以及包括内容区域的，还有表单的，还有这个按钮的底部的样式。我们将它定义完之后，然后我们就可以回到我们这个index关于body的整体，我们就可以看到是我们这里对应的style。就是我们对应的body，它就是通过这样的方式来选择到具体的部位，来具体的使用更具体的样式。下面我们来看一下。首先这里是我们这里链接到这个CSS文件，我们看一下链接之后它是什么样的，点击。APP12。可以看到这就是我们刚才所这个展示的样子。接下来我们看一下，如果不使用这一句，这个样式会是什么样的，我将它删掉。下面我们再次点击F12。可以看到这时候就比较简陋了，但是大体的它的格式是跟刚才是一样的。也就是说这是我们HTML5所起到的作用，而我们这个CSS并没有起到作用。我们再看一眼，我们把这句话加上，就是应用这个style点SSCSS的文件之后的效果，我们再次看一下。现在我们可以看到，当我们使用完这个CSS之后，它的效果还是非常明显的。好，这就是CSS，我们的学我们对CSS的学习就到这里。 下面我们开始学习HTML5，也就是说我们的网页标记语言。首先我们来学习列表标记，列表标记主要分为三种。第一种是无序列表，使用无序列表时显示出来的效果是在它的列表前方并没有数字或者是其他的序号，它的标记是ul。使用有序的宝石，我们要使用ol就是order list。在我们使用有序列表时，在我们的列表左侧会出现123或者是其他的序号数字。还有一种是定义列表，定义列表就是需要我们首先来定义这个列表的标题，而后再定义内容。下面我们来看一下。好，现在我打开了dream ACS6，也就是我们需要我也就是我们所要使用的软件。现在我们打开了我刚才所编写好的列表代码，然后我们在鼠标在键盘上点击F12。可以看到此时我们的内容已经弹出，这里是对应UL就是没有序号的无序列表。这里OL order list对应的是有序号的，有序列表。这里我们采用的这个定义列表分别是定义的标题，定义的内容。可以看到点击javascript，然后这里的内容是一种叫一元，这就是我们的列表。 下面我们开始学习表格标记。在我们使用网页的过程中，我们可以看到有各种各样的表格。接下来我们就来浅浅的学习一下这个表格是如何生成的，如何出现在我们的网页上的。首先这里是定义了我们这个网页的名字为使用表格。然后这里是定义的这个table，就是我们table的这个表格的开始。他的意思就是说从这个table开始直到这里的斜线table，就是我们整个table的内容，整个表格的内容。这里就是定义了表格的一些属性，比如它的高度、宽度以及它的外边缘外边缘的颜色，像border color就是这里的红色。我们定义为了这个FF000就是我们的红色。然后这里就是它的一些边框的距离是零。接下来我们看第一个，这里是caption，caption的意思就是我们表格的这个标题一般就是居于中位。这里TR指的是这个第一行的这个叫做属性栏，就是第一行咱们设置的姓名、语文、数学这些。然后它的内容我们每定义一个就用这个THTH标记来定义它。那我们定义完第一行的这个标题栏之后，第二行就是内容栏。内容栏我们使用TD包括这里内容栏的第一列、第一行、第二行，第一列就是李宁就出现在这里。而后94分我们可以把也是用TD来括起来，就会出现在这里，87分也是用TD来括起来，TD斜线TD是一对儿。后边的这个王丽的课，他的成绩也是同样的。当我们这个表格结束之后，我们就要使用这个斜线table来表来表示这个表格已经结束。下面我们来实际看一下。打开我们的jam ya这是我刚才写好的代码，下面我们来运行一下，我们边运行边看。可以看到在点击F12之后，我编我所编写的这个使用表格的网页就已经出现在了屏幕上。可以看到这里的语姓名、语文、数学就对应我们第一行的标题栏，这个期末成绩表对应这里的我们的标题，我们整个表格的标题以及这里的内容页。第一行是李0 94、87，注意这里的标签是TD而这个标签是TH，TH代表的是我们第一行的标题栏。最后也不要忘记在写完table之后，要用斜线table来表示结束。好，对于这个表格标签我们就学到这里。 下面我们开始学习超链接标记。对于超链接标记，我们可以定义任意的内容。比如图片，比如文字。我们使用HREF来定义链接方向。比如在这个例子中，我们定义的链接方向是3W点百度点com而后我们定义了这个链接的指向是我们这个百度这张图片。同样我们也可以定义文字，比如单击我访问百度就这行文字，而后也是在左边定义它的链接目标地址。这里同样定义的是3W点百度点com就是百度的网站。下面我们来看一下。打开我们的gm mail软件可以看到这里是我的超链接代码。首先我们这个title设立为了建立超链接，而后在这里就是我们的超链接，超链接的主目录主要内容在这里，我们是把这个图片插入进来，而后在前方我们指定的这个图片指向的位置下面，我们运行来看一下，点击F12。可以看到我们的这个网页直接被唤醒了，我们来点击图片。可以看到此时我们就直接跳转到了百度的首页。又或者我们点击这个文字，可以看到我们同样跳转到了百度的首页，这就是超链接。