风吹来了 发表于 2020-4-3 08:25:47

【HTML5】第五期

唉,昨晚一不小心睡晚了,有点脑袋昏,哭了。

又是元气满满的一天,你们准备好了吗?

复习单词:paragraph, language, code 。忘了的话可以去上一期的最后看一下,或者直接百度。

之前两期我说了很多次CSS,但是我又暂时没时间出CSS的教程,那咱们想用的话应该怎么办呢???

很简单,用link元素。

你可以直接从网上下载别人已经写好了的CSS文件(CSS文件的扩展名一般都是.css),然后通过link元素将其应用于你的HTML文档中。

举个栗子(这次咱们不吃荔枝了,换个口味):

<linkrel="stylesheet"type="text/css"href="1.css">

咱们先看这个元素的用法,有没有发现和我们前几期讲的元素有什么不一样?

我们以前的元素用法都是两个标签,一个开始便签,一个结束标签(有时候也叫做闭合标签),例如:

<h1>这个标题是什么不重要</h1>
<p>这里面的内容也不重要</p>

看见没?这两个元素的用法都是一个开始标签,一个结束标签,但是我们这个link元素怎么就一个标签呢????

因为link元素属于自闭合元素标签,所以一个就够了。

当然,你有可能见过这种写法:

<linkrel="stylesheet"type="text/css"href="1.css"/>

为什么跟我上面的那个不一样呢?这个嘛,就说来话长了,不过咱们还是长话短说:

看一下我们帖子的标题,叫做HTML5,那么聪明的你应该能想象到这并不是HTML的第一个版本,所以HTML5和以前版本的规则就有些不一样了,HTML5的规范中,推荐自闭合标签不加斜杠,但兼容加斜杠的写法。

也就是说,HTML5虽然不推荐你这么做,但你这么做了它也能接受(主要原因还是为了兼容以前的版本下面的代码)。

好了我们接着回到正题,再看一下代码:

<linkrel="stylesheet"type="text/css"href="1.css">

这个里面的rel, type, href分别又是什么呢??

这三个东西叫做属性,后面跟着的东西是属性的值,属性的值一般都要用双引号括起来。

rel属性指定了被链接的东西和咱们这个html文档的关系,咱们这儿指定的值是stylesheet,意思就是样式表。

然后看type属性,它的意思就是类型,我们链接的是CSS文件,所以它的类型自然也就是CSS,所以值就是text/css。

最后一个href属性,它指定了我们链接的外部文件的地址在哪里,因为我现在假设的是你下载的CSS文件和你现在正在编辑的HTML文件是在同一个文件夹里面,所以就直接写出CSS文件名就能代表它的地址。

如果没有在同一个文件夹下面的话怎么办呢?

要是没有在同一个文件夹下面的话,你就把它拖到同一个文件夹下面不就行了吗?(唉,这个真的不是我不想讲了,实在是今天讲的有点多了,再讲一些恐怕就难以一下子全部消化,所以嘛就只能这样了,具体方法我明天会讲,顺便明天把几个零碎的东西一起说了,放心,不会太多,都是能让你看一遍就记住消化掉的)

噢对了,还有个问题,我们一般link元素都是包含在head元素中的,所以你知道link元素该怎么用进去了吗?你想想自己想一想然后再看下面的。



<!DOCTYPE html>
<html>
<head>
    <title>唉,你随便想个标题吧</title>
    <linkrel="stylesheet"type="text/css"href="1.css">
</head>
<body>
    <h1>我懒了,不想取名字了</h1>
    <p>我懒了,也不想编内容了</p>
</body>
</html>

当然了,这个link元素想要它有效果,那么就必须得在同一个文件夹下面有个名字叫做1.css的CSS文件才行。

好了好了,估计你们可能也觉得今天跟前几天比起来有点多了,也可能累了,那咱们就记几个单词放松一下吧(放心,今天准备的单词都比较短,除了最后一个):

align: 排列
icon: 图标
stylesheet: 样式表

不二如是 发表于 2020-4-3 08:29:59

注意早点休息

风吹来了 发表于 2020-4-3 08:51:32

不二如是 发表于 2020-4-3 08:29
注意早点休息

卧槽,偶像,谢谢谢谢{:10_266:}

weiter 发表于 2020-4-3 12:04:21

大佬,建议把代码放到代码格式框里,更好看,更直观

风吹来了 发表于 2020-4-3 12:28:28

weiter 发表于 2020-4-3 12:04
大佬,建议把代码放到代码格式框里,更好看,更直观

好的,收到,下次一定改!不过我不是什么大佬,真正的大佬在上面呢
页: [1]
查看完整版本: 【HTML5】第五期