米课talk talk 第9期 html和css是什么?

大家都知道做网站离不开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再见!

上一篇:
下一篇:
分享到
              
Author:MRHUA (Mr.Hua's Google+)
版权属于: 米课外贸培训
版权所有,转载时必须以链接形式注明作者和原始出处及本声明。


如果你喜欢Mr.Hua的文章和视频教程,强烈建议订阅我们的半月刊(请使用常用信箱):
This entry was posted in 米课talk talk 视频系列.

8 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. 确实,如华先生所分析的css与html的理论那样,网站建设过程中用好的程序去设计和搭建网站是网络营销的基础。

  2. 蚂蚁在线 says:

    基础学习真的很重要

  3. Serina says:

    正想学习点建站基础常识呢, 就来了这篇, 真是及时雨,简单易懂, 感激涕零啊········

  4. 阿里嫂子 says:

    谢谢华老师分享,看您的文章和视频已经2个多月了,彻底的佩服您的专业和分享精神。虽然米课是收费的,我相信也是超值的,正在向公司申请批准加入,谢谢你的分享。

  5. magento says:

    你好,麻烦问下您在使用的这个web视频播放器叫什么名字?用户体验看起来非常棒!

  6. 夏沛 says:

    真的是很无私奉献,敬业!
    最近工作压力,事事都不顺心,还好有Mr.hua的博客让我静下心来学习,Thank you very much !

  7. Mary says:

    mrhua的网站为啥没有搜索框呢,有时候想回头看看以前的文章,让我好找呀~

  8. Foloni says:

    :)如果却是觉得米课是超值,干嘛不自己付费呢。真是无语。还要向公司申请。真是倒。


Warning: in_array() [function.in-array]: Wrong datatype for second argument in /home/mrhuanetcmzrph4u0a8nmept/wwwroot/wp-includes/class.wp-dependencies.php on line 213