前端之旅

偶然的机会,接触到百度名下的前端技术学院。有些遗憾没能在大学四年接触到这个平台,现在只能抽空开始前端知识的系统学习。

发生了什么

不管是点击某个链接,还是在地址栏输入地址访问,还是在微信公众号的页面浏览,你都是在访问存储在服务器上的某个网页。那么访问过程中大致发生了什么?

你通过某种操作(点击,回车,或者触摸)告知你的浏览器你将要访问哪个网页。

你的浏览器将你的操作翻译为一段代码发送给存有网站的服务器(一台或者几千台高性能计算机)

服务器在接受代码后,将会把自己存有的网页生成一段新的代码,这个过程中服务器也许会向数据库查询一些信息(比如私人定制的广告),再插入这段代码中,使得这段代码因人而异。

浏览器接受到代码后,将这段代码绘制成漂亮的网页展示出来。

而我们要学的前端技术,就是上述的步骤3中服务器返回的代码应该长什么样子才能被浏览器正确的绘制。

前端包括三大技术,HTML+CSS+Javascript。

HTML

HTML(the Hypertext Markup Language),中文是超文本标记语言,是描述网页结构的语言。比如你所看到的这篇博文,HTML文件中就包括网页的标题、作者、简单的描述信息、网页各个按钮的内容、博文的标题、正文、网页的脚注等等。

但是HTML只是单纯的描述网页的结构,一般不包括网页上的各个元素应当如何显示。一些诸如博文的字体、按钮的颜色、按钮在网页的上方还是下方、网页在手机和电脑上应当如何显示等等涉及到样式的信息都在另一个文件中存储。

CSS

CSS(Cascading Style Sheets) 覆叠样式表,是一个描述网页上的各个元素应当如何显示的文件。

将CSS与HTML分开,或者说将网页的结构和样式分开,一个最显著的优点就是你可以很方便的调整显示的样式,以及可以很方便的套用别人已经调好的样式。

比如想将所有的按钮调成红色,只需在CSS中添加 即可,而不必逐个调整HTML中所有出现的按钮。

Javascript

Javascript 是描述网页如何响应你的操作的语言。诸如点击按钮弹出一个警示对话框之类的工作就交给了Javascript来描述。

总结

所以HTML包含了网页中有哪些内容,他们的结构如何。CSS包含了这些内容应当如何显示的信息。而Javascript则负责响应你的操作,让网页动起来。这三个文件都包含在了服务器传给浏览器的代码之中。

如何学习前端技术

百度的前端技术学院提供了很好的学习路线图和学习指引,只需要按部就班的学习即可掌握前端技术。

更为重要的是,在学习的过程中要注意掌握高效学习的各种技巧,包括:

撰写学习笔记并与他人分享

学习概念的同时要思考为何提出这样的概念,有没有别的替代

Talk is cheap, show me the code.

本文将不定时更新。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180606G0RKKD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券