某人专用教程（第1天）——理解前端

一般的教程都从什么http协议啊，html历史啊开始讲的。不过这些都是p话。会做才是最重要的。历史都过去了，未来还没有来。html5，css3神马的，暂时也不要好奇哦~~

 

第一天，咱们先试着理解一些基础概念吧。一张白纸的第一笔，千万表跑偏了。

 

这里指的前端，通俗点儿讲，就是HTML、CSS、JS 三种代码。这三种代码，就是以.html，.css，.js结尾的三种文本文件。随便找个编辑器都能打开。但是一般用个带高亮的编辑器吧。最通俗的，其实还蛮好用的，dreamweaver，特别适合编辑前两种代码。

 

这三种代码，组成了前端的三个部分，也可以说，三个层次。

 

第一个层次是内容层（html）。也就是页面上可以阅读的文本或者图片信息，用户图片，商品图片，什么的。

 

第二个层次是表现层（css）。就是这些内容长的什么模样。比如左右结构的。比如字体有大小，有边距。都是表现。

 

第三个层次是交互层（js）。这个比较复杂了。。最基础的先理解一下，比如tab切换啊，比如二级菜单展开收起啊，比如一个弹出层，比如鼠标移入某个商品才开始loading一张商品大图。这些平时常见的一些交互行为，都是用js完成的。

 

这样看起来很简单不？

 

那么问一个问题吧！

 

商品图片是表现层还是内容层的东西呢？

 

Banner是表现层还是内容层的东西呢？

 

icon是表现层还是内容层的东西呢？

 

想想平时能遇到的各式各样的图片吧。哪些是需要写入css的，哪些是需要写入html的？

 

继续讲。。。。。。

 

这三个层次，按理说，是完全分开的。

 

内容层的东西，主要是跟需求相关的。需求说页面上有什么就是有什么。有表单就是有表单，有文本就是有文本，有列表就是有列表。。就这个意思。

 

表现层的东西，就是UI呈现了。这些内容的UI呈现，主要是靠css完成的。比如红色文字色，比如黑色背景。比如左右结构。你是做设计的。。你懂的。。。

 

上面两个层次，也是有关联的。css是需要针对dom节点操作的（说白了就是div上加个class来控制的）。为了左右结构，就必须左边一个div，右侧一个div。把左侧内容和右侧的内容分别抱起来。

 

由于这样。。我又把内容层分为了两个层面。

 

一个是框架层——根据模块划分，用div这种无语义的标签包起来，专门为了表现层服务。

 

另一个是真正的内容层。这个真正内容层面，就会涉及到“有语义”的标签了。比如商品列表，不管长成什么样子的商品列表，通常我都用ul,li这套标签来表示。。这叫做无序列表。如果是个排行榜，那么它是有顺序的了，会用ol,li这套标签来表示。

 

比如一段文本，就是一个p标签。如果多段文本会有一个背景色，就把这些p标签用一个div包起来，给div一个class。就这样。

 

最后讲讲交互层。。反正我先这么叫着。你加载一段js，就能完成一个二级菜单的展开收起，你不加载，他们就是全部展开的。这个就是js。

 

一个网页，最基础的，就是内容层。

 

我一直理解成功的代码，应该是在只有内容层的时候，就能够让用户看到全部你想要呈现给用户的信息。当然，这种呈现方式肯定不好看，就是大白板+文字和一些图片及表单神马的。而加入了css以后，页面应该是完全可以看的。就算没有js，也能够正常使用。加入js，就变成了完整的一套东西了。

 

仔细想一个问题。。还用可展开收起的二级菜单举例。一个正确的呈现，应该是永远不要在css中直接初始化一些默认隐藏的东西。而是应该在css中是全部显示的，由js控制隐藏。否则，一旦用户采用了nojs的模式，这个用户可能永远不知道你的菜单带有二级的。。。

 

ok~~今天到这里吧。看了这个，希望你知道，这三种东西每个东西到底做什么。明天开始，不要混淆，就行了。