一般的教程都从什么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~~今天到这里吧。看了这个,希望你知道,这三种东西每个东西到底做什么。明天开始,不要混淆,就行了。
分享到:
相关推荐
数据结构——————KMP算法
第一个模块——主函数main()的功能是:根据选单的选项调用各函数,并完成相应的功能。第二个模块——Menu()的功能是:显示英文提示选单。第三个模块——Quit()的功能是:退出选单。第四个模块——Create()的...
扫雷机器人第一个 repo,第一个 android——对我放轻松。 截至 2014 年 12 月,我是圣巴巴拉城市学院的一名学生,主修 CS。 没有可执行文件。 如果您有 Java SDK 和 IDE,您应该能够通过运行 mineSweeperAttempt....
Vue@某人,At某人,仿新浪微博@某人,@user,艾特,艾特某人
中国有句俗语叫“三天打鱼两天晒网”。某人从2010年1月1日开始“三天打鱼两天晒网”,问这个人在以后的某一天中是“打鱼”还是"晒网"。
这篇可以看作我之前写的两篇《腾讯产品的第一堂课》和《腾讯的职级系统》的第三篇。因为想简单介绍一下腾讯产品的职级概念。我和梦雨说,一个人觉察自己或他人的天分,不是一下子就发现自己什么做的还不错,而是,你...
C语言程序设计 "实"1.掌握结构体类型的概念和说明方法 " "验"2.掌握结构体变量的定义和引用。结构体类型变量成员的使用。 " "目"3.掌握结构体数组的定义和使用方法。 " "的"4.掌握指向结构体变量的指针变量的概念和...
自己编写的2048小程序,分享出来。有错误可以联系我
欧零3.3开源(某人导航就是二开这个的).zip欧零3.3开源(某人导航就是二开这个的).zip欧零3.3开源(某人导航就是二开这个的).zip欧零3.3开源(某人导航就是二开这个的).zip欧零3.3开源(某人导航就是二开这个的...
假设某人从某天起,开始“三天打鱼两天晒网”,问这个人在以后的第N天中是“打鱼”还是“晒网”? 输入格式: 输入在一行中给出一个不超过1000的正整数N。 输出格式: 在一行中输出此人在第N天中是“Fishing”(即...
中国有句俗语叫“三天打鱼两天晒网”。 某人从1990年1月1日起开始“三天打鱼两天晒网”, 问这个人在以后的某一天中是“打鱼”还是“晒网”?
某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。某人的blog,很不错。...
———————————————— 版权声明:本文为CSDN博主「绯红姜梦」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:...
你可以把网络包分析工具当成是一种用来测量有什么东西从网线上进出的测量工具,就好像使电工用来测量进入电信的电量的电度表一样。(当然比那个更高级) 过去的此类工具要么是过于昂贵,要么是属于某人私有,或者是...
某人从1990年1月1日起开始“三天打鱼两天晒网”,问这个人在以后的某一天中是“打鱼”还是“晒网”。根据题意可以将解题过程分为三步:1)计算从1990年1月1日开始至指定日期共有多少天…… 中国有句俗语叫“三天打鱼...
中国有句俗语叫“三天打鱼两天晒网”。某人从2010年1月1日开始“三天打鱼两天晒网”,问这个人在以后的某一天中是“打鱼”还是“晒网”。用c/C++语言实现程序解决问题。 本例是用c++实现。
DirectX, 某人的学习笔记.DirectX, 某人的学习笔记.
读取某人的消息列表,
某人时间管理课程.doc
小哼先拿出手中的第一张扑克牌放在桌上,然后小哈也拿出手中的第一张扑克牌,并放在小哼刚打出的扑克牌的上面,就像这样两人交替出牌。出牌时,如果某人打出的牌与桌上某张牌的牌面相同,即可将两张相同的牌及其中间...