前端入门第一天

前言

前不久在网上看到一篇Hexo建站的教程,顺手给自己建了个个人博客
有还算扎实的c++/java/python/andorid基础,整个建站过程还算顺利
从此沉迷web编程,但是我感觉用现成的框架,总有点那啥受制于人的感觉
打算好好学一下前端,由于在实验室跟着老师做项目一直没有时间
但是万万没想到,心心念念的前端,开始正式开始系统学习居然是在忙到炸的期末考试周
在此要先pick一下百度前端技术学院,可以说是我的前端入门导师了哈哈哈,不bb了,
正式开始。

首先我们要知道访问网站的具体过程

比如,输入http://www.zhihu.com/question/22689579
访问过程如下图所示

浏览器和服务器交流,服务器和数据库交流(有时候数据库就在服务器那台机子上)
浏览器给服务器发一个请求,服务器不是一看就知道怎么响应的。
首先这些请求和响应要有一个通用的写法,也就是要有一个协议,常用的是HTTP协议。
像最前面的图,服务器的响应写了一个状态码200 OK,是HTTP协议里约定俗成的一个东西,
服务器写200 OK在响应里,表示“你请求的这个东西我有”,
如果是404 Not Found,就是“你请求的这个东西我这里没有”。
HTTP响应里还包括很多东西,比如Content-type表示服务器发过来的文件类型是什么(文本?动画?图片?音频?)
形象化Http响应,大概这样:

然后我们来了解前端三剑客

  1. html 接上图,服务器返回html(就是上图HTTP响应的body里的内容)文件 后,电脑拿到html后,浏览器就会对它进行解析渲染,html是一种文本标记语言,举个栗子:
  2. css 浏览器拿到这些代码之后,分析一下给你渲染好页面显示出来,
    但是如果没有用css,效果是这样的,按照浏览器默认的样式显示
    出列表、图片、超链接、输入框、按钮等等:

    是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式,
    现行通用的规定样式的语言是CSS,我们可以用它写一些定义样式的代码,
    在 html 文件里用一个标签把这些规定样式的CSS代码与表达内容语义的HTML代码关联起来,
    然后你就能看到一个符合人类正常审美的页面了:

    插一句:CSS 代码的格式基本是
    属性 : 值
  3. javascipt(js)有了表示内容和语义的 HTML,规定样式的 CSS,
    得到的是一个静态的页面,没什么动画(其实用 CSS 还是可以有一些动画的,不过这个跑题了),
    按 F5 才会刷新数据,于是我们有了 Javascript(js)来给页面添加一些动态的效果
    浏览器都会帮你实现一些 JS 可以用的工具(函数,对象什么的),
    你只要写一些js的代码,保存在xxx.js 里,在html文件中用 <script>关联进来就可以用了
  4. 在前端三剑客bb了怎么多,可以用一句很形象的话来归纳之:
    前台三剑客,html是名词,css是形容词,javascript是动词。三个互相配合才是一句子
    就问形不形象

    立个Flag

    考虑到三周的期末周,就立一个这样的flag吧:
    暑假每天至少学习前端两个小时,争取下学期开始学完!

    致谢

    最后实名pick一下小姐姐张秋怡,
    感谢她的精彩回答
    我只是个搬运工
    只不过经过自己的理解稍作了修改
    2018/6/12 00:31初稿
    欢迎评论啊

本文标题:前端入门第一天

文章作者:月小水长

发布时间:2018年06月11日 - 23:06

最后更新:2019年04月10日 - 18:04

原始链接:https://inspurer.github.io/2018/06/11/前端入门第一天/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的赞助将鼓励我继续创作!
-------------本文结束感谢阅读-------------