Html和CSS简介

Html&CSS简介

**话说从今天开始,我们就要开始学习前端的内容啦！默默的问自己一句,有木有很开森！～
好,话不多说,接下来我们进入正题：**

首先,我们将以对Html和CSS的了解为目标,对此作一个简介;
溯古贯今的扒一扒我们的整个学习历程：

第一个问题将从我们学前端时学什么以及学完了能做什么来展开讲述：

那么我们说,我们学完了能做什么呢？
哦,其实不论是我们学前端的、还是学Java、PHP的那帮哥们,我们的最终目的就是为了做软件;
那么既然我们要开发软件,首先我们得知道软件是个什么样子;

所以第二个问题我们将从软件架构的角度来看一下软件的样子

因为是入门,所以上图中的内容不得不详尽的描述一下;当然,其实这些内容对我们来说也相当重要;
首先,软件分为两种架构:分别是基于 客户端/服务器 的 C/S 架构和基于 浏览器/服务器 的 B/S架构;
    先说C/S架构:
        一般来说,我们平常使用的软件都是C/S架构 - 比如说QQ、360、Office以及我们正在使用的XMind;
        先看C:
            C指的是客户端,而所谓的客户端也就是我们在电脑上看到的一个一个的图形化界面实体,那么也就是说我们是通过客户端来使用软件的;
        再来看S:
            S指的是服务器;
            首先,就拿我们平时用的QQ来举例,假如说没有服务器或者干脆说没网那么我们的消息就发不出去,软件就不能用了;
            而服务器是用来处理业务逻辑的,我们要给某个人发消息,那么发给哪个人就是业务逻辑;
            那么其实我们发的消息是先发到了服务器上,然后服务器经过判断以后再转发给目标对象的;所以综上所述,服务器也是不可或缺的;
            另外多提一点,服务器可不是装在我们电脑里边的,但是它究竟在哪儿的这个问题也不是我们需要关心的内容;
        说完了C/S架构是什么,接下来谈一下C/S架构软件的特点:
            首先,软件使用前必须得安装;
                即使不安装,那么我们为了以后要使用这个软件是不是至少也要把安装包下载下来放到电脑的硬盘里是吧;
            另外,软件更新的时候,服务器和客户端需要同时更新;
                先来看我们使用的客户端 - 是不是在我们使用软件的时候可能时不时的碰到这么一种情况:软件会提示我们下载更新;
                然后看服务器 - 既然客户端要更新,那么肯定伴随着原有功能的修改优化以及新功能的添加;那么我们又说这些功能的业务逻辑是由服务器来处理的,所以软件更新的时候必然是客户端和服务器同时更新的这么一种情况;
            然后,软件不能跨平台使用;
                先来解释一个概念 - 平台:平台的意思就是操作系统,所以我们说不同的平台说的就是像Windows、Linux、MacOS、Android以及IOS等不同的操作系统;
                不过你可能要问了,我的电脑上有QQ,而且我的Android手机上也有QQ不是？哈哈,其实我反过来问你,你电脑上的那个QQ能用在你的手机上了不？反之亦然;
                所以说如果要跨平台使用软件,是不是需要针对不同的平台去开发这款软件?可想而知的是,这样开发成本也就越来越高了;
            最后,软件客户端和服务器通信时采用的是自有协议,相对来说比较安全;
                同样的先解释下什么是协议 - 其实协议就如同我们看谍战片时地下党同志间发电报用到的那个密码本;
                有了这个密码本,那么客户端发送给服务器的消息,即使被截获了那么对方也解析不出内容来呀？所以说,自有协议在安全性上就作了很好的保证;
    其次,对比来看B/S架构:
        首先,S同样是指服务器;
        重点来看B:
            首先,B/S架构的软件其实也是C/S,只不过B/S架构的软件,我们使用浏览器作为软件的客户端;
            那么也就是说,我们是通过使用浏览器访问网页的方式来使用软件的;
            到这里,有的同学可能就要问了,我们通过浏览器访问的不是网站吗？这咋摇身一变成软件了呢？
                其实在早期我们的网站确实只能称其为"网站",因为那个时候我们只能看只能浏览网页;
                但是到了现在,就拿我们最最熟悉的淘宝这个网站来看,是不是我们不但能浏览网站上展示出来的商品,而且还能点击查看详情、下单购买并支付甚至是查看快递到哪了呀～
                所以,现在的网站,早就超出了网站本身的概念,它上升到软件的概念层次上也就不足为奇了;
                而且有很多像这样的同类网站 - 比如京东、12306、知乎和新浪微博都能够称得上是基于B/S架构的软件了;
        紧接着谈一下B/S架构软件的特点:
            首先,它不需要安装;
                因为我们通常是这样子去访问网站的 - 打开浏览器->输入网址->然后键入enter就可以访问该网站了;这也就顺应了上边所说的我们是通过浏览器来访问基于B/S架构的软件的;
            其次,软件更新时,客户端不需要更新;
                因为我们能肯定,现在的淘宝网站,绝逼不是阿里开发的初版;而且,每次网站更新的时候, 它也并没有提示我们让我们刷新啥的来更新网站;而是我们每次打开网站的时候它就已经这样了;
            然后最重要的一点,软件可以跨平台,只要系统中有浏览器,就可以使用;
                所以是不是极大的节省了开发成本？！
            最后补充一点:B/S架构的软件,客户端和服务器之间通信采用的是通用的HTTP协议,相对来说不安全;
                这里借用青岛地铁广告一波先：知道您懂得,但是别忘了！
                首先,这个问题是不是一个可以解决的问题？这个协议不安全,但是我们是不是可以通过在代码中加密的方式来提升软件的安全性？
                另外,官方是不是又给我们提供了更加安全的https协议来使用？
                [别问我什么是https协议,我是不会告诉你它是基于http添加了一个安全套接字搞成的～]

上面说完了做什么,下面就是怎么做了 - 所以第三个问题,看一下软件的开发流程

如上图所示,先大致描述一下软开流程:
    1. 网页设计师根据需求设计网页,要知道这一步得到的也仅仅是张图片而已;
    2. 就是作为前端工程师的我们要做的事情了,即将第一步的图片转化成静态网页;
    3. 把我们写好的静态网页交给后台,变静态网页为动态网页;
接下来说一下其中可能涉及到的其他问题:
    1. 前面说到我们需要把写好的静态网页交给后台,那么问题来了:假如说我们的代码写的足够漂亮,结构、表现以及行为三者分离简直连自己都能被折服;
       但是,我们知道,后台那帮哥们一般都是一帮不太讲究的人,怎么说呢,这要从他们怎么写代码来谈,而他们写代码一般就是怎么方便怎么来,所以这常常导致了我们写的很好的代码到最后在他们手里被改的面目全非;
    2. 其实,上面说的只是传统的前端工程师所采用的与后台交接的方式;
       那么到了现在,为了避免这个问题,作为前端工程师的我们干脆就不再把代码交给后台工程师,而是我针对所要的数据给后台工程师提需求,通过后台工程师提供的接口来展示数据的一种方式了;
    3. 另外,我们知道我们在学习前端的过程中需要学习JavaScript这门语言,它用来处理页面跟用户的交互效果;除了它以外,还有一门语言叫做Node.js,那么它是js用来写服务器的,那么我们前端正好会js,所以到现在我们就可以做到让后台那帮哥们彻底滚蛋了;
    4. 可想而知,如果想要达到这个技术水平,那对我们要求就会非常之高了,因为不但要求我们会写页面,而且又要会写后台代码,除此以外还要会点设计;

那这就不免会引出第四个问题：前端技术好学吗 ？

1. 我们选择前端,可能就是因为觉得它好学;
2. 其实这是我们的一个误区,因为我们觉得前端好学,其实是跟Java相比较来看的;
   我们说Java难,其实Java是入门难,只要入了门,那作为Java工程师的他们,往后的道路将会很平坦、一马平川;
3. 而对于前端工程师的我们呢:
   首先,如前所述:我们需要和设计师以及后台工程师做衔接,所以这两方面的技术我们都要懂一些;
   另外,因为接下来我们开始写页面,而写页面的特点是所见即所得,所以我们会觉得很简单、另外后面在学习CSS和JavaScript的时候也是如此,但是！越往后学就感觉越学不过来、越往后学越觉得难！
   其实这也是前端内容的一个特点,所以至此送给在座的各位一句砥砺人心的话:既然选择了做程序猿我们就要不断的学习,不断的汲取知识！

先前说我们需要学习的内容有好多,所以接下来问题又来了 - 我们到底要学什么呢？

首先,根据W3C标准,一个网页主要由三部分组成 - 结构、表现及行为;
1. W3C是用来定义网页开发标准的一个组织;
2. 结构、表现及行为又对应了三种技术 - Html、CSS、JavaScript;
3. 接下来以人体为例贯释下什么是网页中的结构、表现及行为;
   3.1.结构类似于人体的骨架,定义了人体中的各个部分 - 头、肩、胳膊、腿...
       而在网页中Html用于定义网页的标题、段落、图片以及超链接, 它们就表达了网页的结构;
   3.2.另外我们知道,人体光有骨架是不可行的,如果大街上走的都是一个一个骨架的话,想想都觉得慎得慌～
       所以,我们还需要给他贴上皮肤、穿上衣服打扮的好看一些;
       那么在网页中CSS就用于描述它的表现 - 也就是我们所看见的东西,比如文字的大小、背景色...
   3.3.那么现在假如说人有了骨架、皮肤,穿上了衣服化好了妆,但是躺在床上不能动的话能不能行?当然不可以！至少还是挺吓人的～
       所以,我们还需要让他动起来～
       而我们在网页中,使用JavaScript来处理用户和浏览器之间的交互效果,比如说点击按钮弹出一个对话框、点击按钮显示一个动画...

那么紧接着总结一下我们本阶段的学习内容～

这一阶段,我们学习html和css的基础知识,也就是们所说的so easy的那部分;
主要内容如下：
    1. Html
    2. CSS
    3. 网页布局

另外,提一下这个阶段过程中我们要用到的工具：

学习HTML和CSS开发我们不需要太复杂的工具尤其是前一阶段，我们主要使用的工具有：
    1. 浏览器 - 火狐、IE、Chrome;
    2. 编辑器 - 记事本、NotePad++、HBuilder;
    3. 调试工具 - FrieBug;
    4. 图片工具 - PhotoShop;

不要着急,这里借用我们”开大会”时老板的一个口头禅 - 接下来我挑重点的说,再有个两三分钟吧,说完了我们下班～

前面我们提到了一个组织:W3C - 万维网联盟:
    万维网联盟World Wide Web Consortium;
    W3C专门为了定义网页相关的标准而成立;
    W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准;
另外,我们还需要了解的另外一个组织是 - WhatWG：
    网页超文本应用技术工作小组(WHATWG);
    是一个以推动网络HTML5标准为目的而 成立的组织。在2004年，由Opera、 Mozilla基金会和苹果这些浏览器厂商组成;
    好,这些都是无关重要的内容,大家可以下班啦～