掘金小白，关注社区不久，第一次写专栏就从前端的基础来写起吧 专栏比较多本篇文章是第一篇，后续笔者会陆续不断更新 今天我们从分享最最基础的网页设计基础理论开始吧
导学
很高兴，你开始学习本门课程。HTML是进行网页开发必备的一门语言，在学习这门语言之前，我们会先来了解一下关于网页设计的一些基本的概念，只有充分理解了这些概念，才能在后期的学习中游刃有余。
那么，在‘网页设计基础理论’这个课程中，我们会讲解哪些理论概念呢？
我们会讲解什么网站，什么是网页，常用浏览器介绍，以及什么是HTML, 最后我们还要了解关于Web标准的内容。
在这里，你可能一听到理论概念，是不是会感觉非常的抽象或者是难理解？
其实，这一点你不用担心，在介绍理解概念时，我会用通俗易懂的话来讲解这些内容，让你轻松理解掌握这些概念，为后续的学习打好坚实的基础。
下面，就开始我们这个课程的学习吧！
1、学习目标
你好，从今天开始我们一起学习网页设计这门课程。
在具体学习怎样设计网页之前，我们先来了解一下关于浏览器方面的内容。
在这块内容中，需要你能够做到以下几点：
第一：能够说出常用的浏览器有哪些?
第二：能够说出网页的基本组成。
第三：能说说出Web标准。
在了解以上学习目标后，我们先来学习什么是网页？
2、网页描述
什么是网页？
关于这块内容，在这里我会给你介绍两个概念。
第一个是“网站”，第二个是“网页”
首先先来看一下什么是“网站”？
“网站”，对我们来说是非常熟悉的，如果我现在想买一双鞋子，我可以去“淘宝”这个网站去购买，也可以去“京东”这个网站购买，如果我想学习程序开发，我们可以访问“博学谷”这个网站。
好了，下面我在浏览器中，输入： www.boxuegu.com
会打开‘博学谷’这个网站，如下图所示：
那么，现在我们看到的这个页面，是我们在 www.boxuegu.com 这个网址后看到的第一个页面，所以也称之为‘首页’。
当我们在‘首页’中单击文字或者是图片的时候，会打开另外的网页，所以说‘网站’就是这些网页的集合，也就说‘网站’是有很多很多的‘网页’构成。
而‘网页’就是网站中的一“页”，它是构成网站的基本元素。
好了，我在这问你一个问题，网页中都会有哪些元素呢？
哈哈，你可能会想这个问题太简单了，网页中会有图片，文字，视频，音频等元素组成。
回答的非常正确。
但是，这里还有一个非常重要的元素你没有回答。
那是什么呢？
别着急，我来告诉你，这个元素就是‘链接’
什么是‘链接’呢?
‘链接’指的就是在某个网页中单击文字或者是图片的时候，可以打开另外一个网页，那么这就表明这两个网页建立了一种连接的关系，这就是‘链接’。
也就是说，我们的网站就是通过‘链接’将很多很多的网页进行了连接组合而成的。讲解到这，我相信你已经了解了什么是‘网站’，‘网页’，以及网页是有哪些元素组成的了。现在，你是不是非常着急想知道，怎样开发一个网页或者是一个网站了吧？
要想开发一个网站或者是一个网页，我们就需要去学习一门语言，叫做HTML。
3、 开始了解HTML
HTML指的是超文本标记语言(Hyper Text Markup Language) ,它是用来描述网页的一种语言。
在上面的概念中，有两点需要你理解，第一点：什么是标记语言，第二点：什么是超文本。
理解了这两个概念后，就可以理解什么是HTML了。
下面我们先来看一下什么是标记语言？
标记也可以称之为标签，也就是说如果我现在想在网页中展示一张图片，那么就需要用到图片标签，这时浏览器看
到这个标签后，就知道要显示图片了，也就说标记(标签)决定了浏览器展示什么样的内容。当然HTML中标签有很
多，所以说，我们学习HTML就是要学习这些标签。
那什么是超文本呢？
要理解这个概念，我们首先说一下什么是文本？文本，我们可以简单的理解就是文字，例如，我们使用'记事本'工具所写的文章，小说等都是文本。
那么什么是超文本呢？
超文本是有两层含义：
第一层含义：它不仅指的是文本，还包括了图片，声音，视频，动画等内容，也就是说超越了普通文本的限制。
第二层含义：它可以从一个页面跳转到另外一个页面，实现页面的连接，也就是超级链接文本。关于链接的概念，
在前面的内容中，我们已经解决过了，还记得吗？如果不记得了，可以再复习一下。
以上就是HTML的概念了，你理解了吗？
通过以上关于HTML的讲解，我们也明白了，网页是怎样形成的了。
那么网页是怎样形成的呢？
网页是由网页元素（例如：图片,文字,视频等）组成的，这些元素是利用html标签进行描述，当浏览器看到这些
标签后，就知道显示什么样的内容了，也就是说浏览器可以将这些标签进行解析，然后显示给用户。
通过，上面这张图，我们也明白了，接下来我们要做的事情，就是学些HTML标签，当写好这些标签后，就可以通过浏览器解析这些标签，最后生成网页。
总结：在上面我们主要学习了什么是HTML,在学习这块内容的时候，我们重点要掌握理解的有以下几点：
首先，要理解什么是标记语言。
然后，还要理解什么是超文本。
最后，要理解网页是怎样形成的。
4、常用浏览器
通过前面课程的学习，我们知道了，我们写好的HTML标签，最终会通过浏览器解析成网页，给用户呈现出来。
那么，下面咱们就来看一下，关于浏览器这块内容，我们需要了解的知识点有哪些？
首先，先来了解一下：常用的浏览器有哪些？
然后，了解一下关于浏览器内核的知识点。
4.1 常用浏览器介绍
下面看一下常用浏览器有哪些？
浏览器时网页显示、运行的平台。常用的浏览器有IE, 火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。
在这，你可能会问了，我们在开发网页的时候，使用哪个浏览器呢？是不是上面这些浏览器全部要安装到电脑里呢？
不用全部安装到电脑中，这里我们选择市场占有率最高的浏览器就可以，市场占有率最高的浏览器是【谷歌浏览器】，所以以后我们使用谷歌浏览器来浏览我们写的网页。
你可以通过下面的网站查看浏览器的市场份额：tongji.baidu.com/data/browse…
通过前面的描述，我们可以感觉到浏览器的功能非常的强大，可以将我们写的HTML标签，解析成对应的网页。
那么浏览器为什么会有这么强大的功能呢？就是因为浏览器的内核。
4.2 浏览器内核
浏览器内核，我们也叫做‘渲染引擎’，它的作用：负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面。
常见的内核如下表格所示，这块内容我们只是简单了解一下就可以了。
你可能会问，我们国产浏览器也比较多，那么它们用到的是哪些内核呢？
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。
关于这一小节的内容，在这我们就学完了，在这块内容中，我们主要学习了常用的浏览器有哪些，以及浏览器内核
的作用，那么关于浏览器内核的分类这块内容，我们只是简单的了解一下就可以了。
5、Web标准
在上一小节中，我们学习了常用的浏览器有哪些，也知道了浏览器内核的作用。这里你可能就会问，我们使用HTML编写了一个网页，然后交给不同的浏览器进行解析，那么不同浏览器使用的内核是不一样的，会不会出现不同浏览器最终展示的效果不一样呢？
如果，你有这样的疑问，非常好。
为了解决这个问题，就要求我们写代码的时候一定要符合【Web标准】。Web标准：指的是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。关于Web标准，在这里我们主要学习以下两点：
第一点：为什么需要Web标准
第二点：Web标准的构成。
5.1 为什么需要Web标准
下面，我们先来看一下为什么需要Web标准？
关于这一点，前面我们也提到过，就是说现在浏览器比较多，而这些浏览器是有不同的厂商开发的，而且内核也不
相同，那么在解析同一个网页的时候有可能就会出现些许的差异。
例如：我们写了一段文字，在有的浏览器中展示的是10号字大小，而换了一个浏览器后，变成了20号字大小，你
可以想象一下，是不是会严重影响我们网页的美观，而且用户体验也非常的差。
但是，如果我们写的代码符合了Web标准，那么在不同的浏览器中进行展示的时候，看到的效果是一样的。当然，除了这个好处以外，还有很多其它的好处，随着我们学习的深入，你会有很多的体会。
5.2 Web标准的构成
了解，我们为什么需要Web标准以后，下面我们来学习一下Web标准的构成。Web标准的构成主要包括了：结构(Structure) 、表现（Presentation）和 行为（Behavior）三个方面。
结构其实决定了网页中展示哪些内容，例如，图片、文字等，这块是由HTML来完成的。
如下图所示：
通过上图，我们也可以发现只是将文字，图片展示在网页上，感觉并不是特别好看，而且整个页面显示的比较凌乱。
所以了为了让网页变得更加的漂亮，美观，而且为了让整个页面显示比较的合理，就需要用到：表现。所以说表现，就是对网页上的内容进行修饰。关于这块内容是由后面所学习的CSS来完成的。
下图所展示的是加上了CSS以后，网页展示的效果，你可以与上图进行比较，来体会一下关于CSS的作用。
通过对比，我们可以看出加上CSS样式后，网页变的更加的漂亮，而且页面显示的内容排版也更加的整齐。现在，通过HTML将网页所展示的内容规定好了，并且对网页添加了样式，让其变得更加的漂亮了，那么是不是网页就设计完成了呢？并不是，因为我们在访问一些网站的时候，经常会看到网页上有很多的动态效果，例如：单击按钮更换图片，单击菜单出现下拉菜单等。
如下图所示：
要想实现这种动态就需要用到：行为。
行为，就是实现网页与用户进行交互的这种动态效果。关于这块内容主要用到后面课程所学习的Javascript来完成。通过，结构、表现、行为，这三个方面，可以设计出漂亮美观，布局合理，具有动态效果的网页。
下面，我们在通过一张图，来理解Web标准的这三项内容。
HTML表示结构，也就是网页的内容，就像左上角这张图一样，相当于小鸟的身体。身体已经有了，但是不漂亮。当小鸟全身长满羽毛后，就会变得非常漂亮，而我们前面所说的‘表现’就相当于小鸟的羽毛，起到美化的作用，让我们的网页更加的漂亮。小鸟有了身体和羽毛以后，就可以飞行，那么这就相当于我们前面所讲的‘行为’。
'行为'，类似于动作，也就是让我们的网页具有动态的效果。
所以说，一个完整的网页包含了,HTML(结构)，CSS(表现)，JavaScript（行为）这三部分内容。最后，我问你一个问题，就是‘结构’，表现，行为这三个内容，哪个更加的重要呢？
当然是，结构了，也就是身体是最重要的。所以，我们必须先学好HTML的内容，为后面学习CSS,JavaScript做好准备。
关于这一小节的内容，在这我们已经学习完了，最后做一个总结：首先我们学习了Web标准的概念，那么什么是Web标准呢？
Web标准：指的是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准
化组织。学习完Web标准 后，我们又学习了，‘为什么需要Web标准’和‘Web标准的构成’ 两点内容。
为什么需要Web标准？
因为市场上有很多的浏览器，而这些浏览器是有不同的厂商开发的，为了让不同的浏览器解析同一个网页的时候，最终展示出的效果是一致的，所以必须需要Web标准。
Web标准的构成有哪些呢？Web标准的构成有三点，结构、表现、行为。
6、总结
恭喜你！你已经学完我们网页设计的第一个课程了，现在你已经了解了： 什么是网页和网站？什么是HTML?
常用的浏览器有哪些，以及Web标准的内容。
下面，我们在将这些内容做一个简单的总结，如下图所示：
