Web开发快速入门

2019-05-13 本文已影响0人熊猫小弟

1. html css js

html–》房屋的框架结构超文本标记语言

标签属性事件

<!DOCTYPE html>

http://www.w3school.com.cn/html/index.asp

css -》房屋的装修和家具

盒模型选择器 class 外联 class内联 style主要的有盒模型相关属性字体相关属性背景相关属性边框相关属性等等

http://www.w3school.com.cn/css3/index.asp

js -》房屋的存储、交互和控制

语法：数据类型变量声明运算符基本语句函数对象内置对象

es6+文档http://es6.ruanyifeng.com/

JavaScript基本语法http://www.w3school.com.cn/js/index.asp

bom dom简介----这俩不属于JavaScript，是浏览器提供的

dom是文档对象 – 主要是针对标签的操作增删改查，属性和事件的读写类比 xml的dom操作。

createElement appendChild removeChild setAttribute getAttribute removeAttribute class 的处理事件的绑定解绑等等

类似 document.title document.body document.getElementById

http://www.w3school.com.cn/js/js_htmldom.asp

2. bom是浏览器对象 – 主要是跟浏览器级别的一些东西

screen 提示窗口的属性事件 history navigator timing cookies storage等等

http://www.w3school.com.cn/js/js_window.asp

3. http协议介绍

http://hostname:port/path?querystring=search&b=b#hash/path/?querystring=xxxx

三次握手时间分布

100+ 200+ 300+ 400+ 500+

4. 浏览器渲染原理

三棵树

渲染流

Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。

Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

5. node 介绍

使用Javascript语法的运行。可以看做一种单线程的java。安装不同的库之后可以完成不同的功能，比如链接mysql、MongoDB、操作本地文件或者远超文件、提供监听某个端口的 http/https/websocket的远超服务

核心：单线程异步

api文档 http://nodejs.cn/api/

npm文档https://www.npmjs.com.cn/

各个版本的下载地址https://nodejs.org/en/download/releases/注意：偶数版本为稳定版，奇数版本为开发版我们现在用的是8.x

6. vue概述

前端开发框架 mvvm

https://cn.vuejs.org/v2/guide/instance.html

实际使用上有两种，一种是直接使用，这种比较原始，使用的人也比较少。略。

另外一种其实是依赖node的预编译开发框架，这个才是大家用的比较多的实际上是vue cli 3

组件和页面