Web前端从入门到精通-3 html简介

时间:2022-01-15 15:19:01

废了半天劲,上节课,我们终于知道了html文件是怎么来的了

上节课最后介绍的那几款开发工具创建html的方法都大同小异,ctrl+N之后,选择html文件即可

在讲html之前,我们先需要了解一些东西

我们已经在第一课中提到,html也是一种语言

那么,既然是语言,就一定会有语法,也就是规定这么语言怎么说

例如,我们用汉语说一句话:“我 是 中国人”

汉语有主谓宾等的规定

但是,我们把这句话改成日语就成了:仆は 中国人 です

直译过来就成了“我 中国人 是”

倒装是日语语法的规定

可以看出每种语言都有它各自的语法规定

同样,我们的html语言也有规定

其中最显著的规定就是由标签构成,而且绝大多数标签都是成对出现

此时,读者一定有疑问,什么是标签?一对儿标签又作何解释?而且还是绝大多数?难不成有特殊的么?

带着问题,请往下看

html中的标签官方解释是:由尖括号包围的关键词

所谓尖括号,就是<和>,关键词这个东西需要好好说说

我们汉语当中第一人称是不是必须用我或者我们,能用你或者你们吗?

显然不可以,为什么不可以呢?语法规定

html也是一样的道理,如果我希望在一张网页中显示一个超级链接,就必须用a这个关键字

再加上尖括号,就成了<a>

换句话说,关键字就是规定

再举一些例子:<html> <body> <div>等等,这些都是标签

好的,明白了这个问题之后,我们基本上可以对html文件进行一下分析了

此时,我们的头脑里面应该有这么一个印象,html文件是由很多标签构成的,这感觉就对了

打开我们的开发工具,新建一个html文件

很多的开发工具在我们新建了html之后,直接出现了下面这些代码

Web前端从入门到精通-3 html简介

例如,这是Visual Studio的情况

先不要管这么多,我们删繁就简,从简单开始说起

<!DOCTYPE html>
<html lang="en">
</html>

我们先看第一行 <!DOCTYPE html>

DOCTYPE是什么意思呢?它是document type的缩写,翻译过来就是文档类型

后面的html就不用我多解释了,如果希望知道html具体的一些东西,百度一下就知道了

再往下走,我们看到了

<html lang="en">

</html>

这时多了一个lang="en"

先不管它是什么东西

去掉lang="en"之后,我们会发现

<html>

</html>

下面的标签只比上面的标签多了一个反斜杠/

这时我们很自然的可以解释关于html的另外一条规定,那就是绝大多数标签成对出现

不带反斜杠的叫开始标签,带反斜杠的叫结束标签

既然是成对出现,那有开始标签,必然得有结束标签

刚才也回顾了一遍了,绝大多数标签成对出现,有没有不成对出现的呢?

当然有了<!DOCTYPE html>不就是嘛

看到这里,有朋友肯定有疑问了,尖括号里面放的是关键字

那么html也是关键字了是吧?

没错,的确是这样

那html关键字代表什么含义呢?

它就代表我在<html></html>这对标签里面的内容是一个html页面

有了这三行,一个最简单的网页就已经出来了

双击这个html文件,我们可以在浏览器中预览

在这里我就不给大家把预览图贴出来了,因为什么东西都没有,没啥看的

下节课,我们正式往里面加一些内容