大家都知道做网站离不开html和css，那html和css到底是什么，如何理解这两者的关系很多人都搞混淆了。本节米课talk talk我们来看看做网站需要知道的html和css之间的关系和渊源。

大家好，欢迎来到每周四的米课Talk Talk！那今天我跟大家来讲解一下HTML和CSS。

那么HTML和CSS很多朋友都听过，但是还是搞不清楚他们之间的关系怎么样。今天，我争取用最简单的方法去跟大家讲解一下HTML和CSS的关系，争取在后面的几分钟里面让大家明白HTML和CSS到底有什么用。特别是我们做网络营销的话，掌握一些基础的HTML和CSS知识还是很有必要的。

那我们先来看一下子HTML和CSS。我们用形象的方法来捋一下子，他到底在我们的网站里面起到一个什么样的作用。

大家看一下，这边有三幅图。先来看第一幅图，我画得不好，大家可以把它理解为一栋楼的地基，地基的结构。那么这个结构就是HTML，就是我们写的这些内容，表格啊七七八八的这些东西。我们把它称为结构性的东西。

那么结构性的东西写完以后，CSS起到一个什么作用呢？有了结构以后，我们需要给它砌一个外立面，让它有一个外表，那么CSS就起到这样一个作用。

通过CSS代码可以给你的地基一个很好的外表，像这边画了一个红色的大楼，另外一个CSS可以变换的，当你重新写了一段代码之后，网站或者你的这个楼就会变成这个样子，那么这个楼多了两个结构，变得更漂亮更大气一些。那么CSS就是控制你的这个网站的外表的，样式啊一些细致的排版结构，这个是用CSS完成的，这样理解的话大家就知道HTML和CSS之间的一个关系。

那么我们再来深入的看一下到底什么是HTML和CSS。那么这个HTML就是Hyper-Text-Markup-Language，大家分开来读。

我们先来讲一下这个Markup-Language，他是一个标记的语言。我们来看一下这一段，这里是一个P，P代表什么？一个段落，以一个P开头，一个P结尾，中间写了一个“Hello World!”（这里也可以是一段话），也就是说是HTML Structer里面的一段内容。那么这两个P就是一个Markup-Language。

那么在这里需要注意的一个就是，在HTML里面，前面的这个叫做Opening Tag，后面的这个叫Closing Tag。在Closing Tag的时候必须要有一个斜杠(/),这样才是一个完整的语法。我们讲的Markup-Language，这就是HTML里面的M和L的意思。也就是你的代码里面段落。

大家后面想去了解的话就会发现有很多这种Tag，大家做SEO比较熟悉的话像,  这就是一个大的标题，大家都是比较清楚的，还有比较常见的，这些都是非常熟悉的。

OK，那么我们来看一下什么是Hyper Link呢？Hyper Link是指这个页面之间要串联起来，因为我们这个网站肯定不止一个页面，HTML文本里面有很多的文本，你必须要串联起来。

说到这里呢，我们就要来看一下HTML的历史，看看他是怎么来的。HTML呢他是CERN这个公司，80年代欧洲的一个做核研究的一个公司，最初他们去发明这个HTML的时候并不是用于网络，因为那个时候并没有互联网。他只是用来做内部的文本管理的这个HTML，那么Tim Berners-Lee他是把这个HTML整个给规划出来的这个人。

Hyper-Text大家都知道了就是把这些文本串联起来，在互联网上大家都知道叫锚文本对吧。你的页面之间，这个页面要能到达那个页面，那个页面要到到另一个页面，形成一个网络。那么把它叫做Hyper-Text，所以HTML的话他是这么一个意思。

那么这个人他很厉害，Tim Berners-Lee，他不光吧HTML做成了，他还把W3C，W3C大家知道吧，他是现在这个HTML和CSS语言，还有现在很多语言的一个标准的范本。我们经常会用W3C去检查你的代码有没有错误啊，去检查一些东西，W3C就是由Tim Berners-Lee发明的，创造的一个规范的网络语言。

OK，这边就介绍到这里，我们再来看CSS。

CSS的全称是Cascading Style Sheet，CSS就是层叠样式表。

这个大家也要分开来去理解，那么Style Sheet叫样式表，什么叫样式呢？什么是样式表？我们一起来看下面这个代码，乍一看看起来很复杂，看不懂。其实很容易理解，在CSS里面的话，这里第一个P，这个P是指什么？是指我们要引用的HTML里面的Tag。你可以看到在HTML有一个P Tag，那么在这里又有一个P Tag，也就是说，我们要引用HTML里面的这个P Tag。

为什么要引用这个呢？因为我们要为这些字体去添加一些颜色，改变一些字体的大小等等，在CSS里边去调整这些事情。在这里有一个非常重要的Tag，我们要注意，这个{，最主要的目的就是Select，你需要去选择这些P啊，h1等等这些目标Tag（这个我们到后边可以深入的去了解）。

所以这段代码的意思就是：我要选择HTML里面的P。选择完后干什么呢？颜色变成黑色，字体大小变为8px,那么就是通过CSS把HTML里面的这个“Hello world!”的颜色和字体定下来了。那这个是Style Sheet。

那么这个Cascading是什么意思呢？这个是层叠。当然我们讲，这段代码你放到HTML里面也是可以去实现的，但是当这个页面非常多的时候，我们的CSS文件和HTML是分开的。所以的话这个就叫做层叠样式了，因为当你的网站很大的时候可能会有好几个CSS文件，好几个层叠样式表来和你的这个HTML文件一起组合，那么这样子的话就叫做Cascading Style Sheet。

整体的来讲的话，HTML和CSS在过去的十年内一直在用的。现在的话已经有了CSS3和HTML5，这两个是未来互联网的语言，但是咱们国内的浏览器给不给力跟不跟得上就是个问题了。因为这些都是在浏览器里面去读取的，这些东西都是前端的一些东西。

OK，本周到此为止，下个星期四同一时间我们米课Talk Talk再见！

              

---