前端入门 | 认识前端基础

用了一些时间断断续续学习前端,初学不久,在这里分享一些对前端的认识。帮助自己梳理思路的同时,也希望能帮助到有兴趣的人。

介绍

Web前端,通俗的说就是平时我们看到的各种浏览器中展示给我们的页面。

  • 简单的页面,比如在微信公众号里面的文章,一篇文章就是一个页面,虽然简单,但是这种页面的重点是给读者显示有价值的文章。
  • 复杂的页面,比如打开淘宝、天猫、京东等网站的页面,由很多东西组成,很复杂,页面制作也比较麻烦。

做设计的人可以先利用设计工具设计出好看好用的模型,然而这些模型如果仅仅由设计师才能欣赏,那受众就太小了,设计中的基本上所有元素都可以由前端实现,借助互联网,将页面展示给所有可用使用互联网的人。

任何工具的作用都有很多,前端也是一个工具,它不仅仅是显示信息,还可用作工作岗位,锻炼我们的思考方式等等。并且,对我而言,前端还可以是一种创作的工具,利用它来实现脑袋中的各种创意。它有多少作用,还需要去不断学习,不断的探索。

结构

前端从大的方面来看,就是html,css,JavaScript组合而成。使用这三者可以做出任何页面。这三者是前端的基础,无论以后学什么东西,这三者都是必须要懂的。

对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置行为。一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。

HTML

html:超文本标记语言,可以指定网页的head、body以及里面的内容。其中“head”部提供关于网页的信息,“body”部分提供网页的具体内容。head内部和body内部都有很多其他的标签可以使用,便于我们阅读。

一些简答的html页面如下


简单的html页面

复杂的html页面,比如简书的页面,可以看到里面html的标签有很多,这里只截取了head标签的内容,body还有很多内容

简书的页面

重点:html主要是知道标签代表的意思,标签在页面中放在哪个位置合适,可以多看一些页面的代码来熟悉。

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS作为皮肤,修饰html页面的样式,css可以指定网页的样子。

我们可以理解为,html是一个没有穿衣服的人,人没有穿衣服就不好看(在公共场合不好看),CSS是衣服,衣服有各种各样,同一个人身上可以穿不同种类的衣服,最后显示不同的样子。也就是CSS的样式不同,作用在HTML身上之后网页的效果就不一样。

CSS主要功能就是给HTML页面添加样式,有了HTML和CSS就可以做出好看的页面了。

CSS演示

在HTML的img标签上加了一些样式,宽度,高度,边框等等。一些细节的用法,需要多看,多练习,才能记住。

CSS语法

CSS文件的内容一般都是如下所示。

一般CSS的长相
JavaScript

JavaScript可以说是前端的灵魂。有了JavaScript,页面就可以做出动态交互,登录页面的时候,JavaScript会向其它计算机通过网络发送我们输入的数据。

总结

html和css主要是记忆类型的东西偏多,需要多写几个页面,参考别人的页面,心中大致知道html大致css的用法,并在遗忘的时候能快速找到方法,最终熟练运用。

JavaScript作为一门独立的语言,功能也很强大。大神们推荐看《JavaScript DOM编程艺术》。

学习网站

在学习的过程中,头脑有时候记不了那么多的东西,留一些网站作为参考。

W3School,有中文的有英文的,基本上涵盖了前端的所有知识点,这一个网站基本就够用的了。

学习CSS布局
SitePoint ,里面很多优质的英文前端文章
CSS Tricks,很多优质的CSS文章
CSS 禅意花园,我还没有看过

最后

我目前学习的时候,先看W3School的一些文章参考,到一些网络课堂上搜一些视频看,边学边做。
等到HTML和CSS学扎实了以后,再学习JavaScript。学习的时候也可以多看一些感兴趣的网站,直接打开浏览器的开发者控制台,然后看页面的代码内容,最后在自己练习。

还有很多不完善的地方,请多多指教,多多指出问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,246评论 24 450
  • 在这里工作,已经两年了,真的很好! 钱不多,舞台不大,工作很安逸。 两年来,最大的收获是,身体健康了,体质变好了。...
    张军辉阅读 117评论 0 0
  • 从未翻开的书 文/唐鹤升 我在整理书籍时,翻出两本学习日语的教材。它们在时间的摧残中已失去了光鲜亮丽外表,书页泛黄...
    唐鹤升阅读 241评论 0 1
  • 《在不安的世界安静的活》是时尚媒体人王欣以他多年的在时尚圈的工作经历与耳闻。小说呈现在大家面前的不仅是名叫林墨的女...
    莲心知为谁苦阅读 303评论 0 2