Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

30天精通前端开发 #115

Open
unproductive-wanyicheng opened this issue Dec 24, 2021 · 0 comments
Open

30天精通前端开发 #115

unproductive-wanyicheng opened this issue Dec 24, 2021 · 0 comments

Comments

@unproductive-wanyicheng
Copy link
Owner

unproductive-wanyicheng commented Dec 24, 2021 •
edited
Loading

  1. 了解网络通信的几大要素 IP 端口 DNS
    IP：每台联网的设置都有一个分配好的 IP 地址，用来在互联网网络中被别人寻找到它自己的定位
    windows操作下打开任意CMD，输入如下命令看到自己电脑的IP地址
ipconfig

image

端口：某台电脑上的应用程序需要通过网络发送一些消息或者接受一些消息，这时候应该程序需要向操作系统申请：我这个程序需要绑定某个 端口号 如 80 8080 8081 等数字，端口是电脑收到其他电脑的IP发送消息到本机IP后，用来区分该把消息发给哪个程序用的

所以 有了 IP + 端口 这2个元素，一台计算机上的程序就可以跟另外一台计算机上面的程序通过网络进行通信了。

DNS：一个全球范围的域名服务器，也就是一个在运行的网络程序，它也有自己的IP和端口，操作系统知道这些信息，它的作用就是接受 其他人发送给他的一个消息：某个域名 (www.baidu.com) ，然后返回对应域名的IP地址：
windows 下打开CMD输入：

nslookup www.baidu.com

image

总结下：当我们访问 www.baidu.com 的时候，操作系统先通过DNS得到域名的IP，然后大家默认不写端口的话就是80，这样子我们电脑上的网络程序就可以通过 自己的 IP+端口 和 要访问的 IP+端口 建立起通信了，就可以正常发送消息了

练习：

  1. 查看自己电脑的 IP

  2. 查看 www.baidu.com的IP 是多少

  3. 了解服务器和浏览器是什么
    服务器：一种应用程序，别人访问它时它看情况返回对应的资源给对方
    浏览器：一种应用程序，负责主动去访问其他的服务器，把对方返回的一些资源（html js css）等存储并渲染给用户看

总结：浏览器 主动 向 服务器 发送一些消息过去， 说 我想要一个 HTML 页面， 服务器接收到消息后，觉得OK，然后就返回了一堆资源，然后浏览器负责把这些资源渲染给用户
image

练习：
打开浏览器，F12打开开发者工具，访问 www.baidu.com 查看 百度服务器 返回了哪些资源给我们的浏览器

  1. 了解HTTP协议
    浏览器发给服务器的消息是什么格式的？为何保证所有浏览器发给服务器的消息 服务器都可以正常识别并返回内容呢？
    因为他们约定好了消息的格式，也就是 HTTP协议 所规定的内容

我们先来查看HTTP报文的样子：
打开浏览器控制台，直接访问 www.baidu.com
image
image
image

浏览器和服务器的每次通信，其实都是通过这样类似的报文来发送的，浏览器和服务器都可以更改，增加，删除头部字段，放入不同的数据体发送给对方。

具体的HTTP协议每行 每个 字段 每个头部 每个数据的格式 都可以在下面这个网站查找：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP

例如：我想要了解某个头部字段的含义，Host 字段，我们就打开google搜索
image
然后进入
image
进入后如果是英文，可以切换成 中文
image

练习：

  1. 自己阅读完成如下介绍：
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

  2. 学会如何查找某个字段的含义：
    image

  3. 练习：
    用浏览器访问 www.taobao.com
    image
    image

  4. Cookie 是什么 有什么作用？
    请求头的有个字段叫 Cookie 需要重点关注它的 功能 几个特殊字段 使用场景
    问题练习：

  5. cookie的定义，它一般用来做啥

  6. 浏览器啥时候存储它 存储多久

  7. 浏览器访问服务器的时候啥场景会自动带上cookie

  8. 前端如何用代码去修改cookie

  9. 啥时候不能用代码去修改cookie

  10. 了解浏览器是如何组织资源的
    当浏览器得到服务器返回的html(只有html 没有css js 等其他资源)页面的代码时，它就可以准备渲染HTML页面了。
    其他资源有2个是最重要的：
    css是为了让开发者可以控制浏览器如何渲染元素，使用

<link href="http://xxx/xxx/main.css" rel="stylesheet">

这样的特定预发来加载远程css文件，加载完成后会重新渲染页面，当然也可以写在 style 标签中 或者 元素的style属性上面

JS是为了让浏览器可以执行用户的代码，从而达成一定的目的，使用

<script src="javascript.js"></script>

来加载远程的JS文件，加载完成后就会自动执行里面的JS代码片段，当然也可以写在 script 标签内部作为本地js代码执行

js文件的加载默认是同步阻塞加载，意味着如果script后面有个HTML元素，那它前面这个js没加载完成且执行完之前，这个元素都不会被渲染,所以一般都把script文件加载都放在最后的body之前，
js的设置异步加载参考下面地址：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

练习：
打开 www.baidu.com 查看返回的的页面中所有的html标签，观察css js 文件是如何加载的
image

  1. 了解HTML
    已精通
    练习：

  2. 常见的块状元素 有哪些

  3. 常见的行内元素 有哪些

  4. 了解CSS
    已精通
    练习：

  5. 标准盒子模型 和 IE盒子模型 最重要的区别是什么

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="display: inline-block; width:200px; height:200px; background-color: red; padding: 10px; box-sizing: border-box;"></div>
        <div style="display: inline-block; width:200px; height:200px; background-color: yellow;padding: 10px; box-sizing: content-box;"></div>
    </body>
</html>

这个2个盒子表现看起来会一样宽高吗？为什么？
补充阅读

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
  1. z-index如何使用？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

练习 参考文档 写出同样结构的html 观察堆叠效果

  1. css动画怎么画？
    tansform配合transition
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

css3动画

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

模仿文档 写几个简易动画本地

  1. css中有哪几种定位？作用分别是什么？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

练习：跟着文档 自己本地写几种定位效果 查看是否符合自己的预期

重点分割线----------------------------------------------------------------------------

  1. JS 学习
// 基础篇
https://wangdoc.com/javascript/basic/index.html
// 进阶篇
https://es6.ruanyifeng.com/

每天最多只学习3个小时，不要超出时间，剩下的时间全都用来练习当天所学

基础篇练习：

  1. 创造一个包含 100个整数的数组，值分别为 0-99，循环遍历数组打印出这100个整数
  2. 创造一个包含 100个对象的数组，每个对象的 有1个key，{index: 范围同上 0 - 99,}，循环遍历数组打印出这100个对象的key对应的值
  3. 创造一个包含 100个函数的数组，每个函数输出一个整数 分别为 0-99

进阶篇练习：

  1. 了解 JQuery
    跟着文档 https://www.runoob.com/jquery/jquery-tutorial.html (插件部分不看)练习一遍即可

  2. 了解多页应用

  3. 了解单页应用

  4. 了解Node.js

  5. 了解webpack
    官网地址： https://webpack.docschina.org/guides/

  6. 了解 MVVM 框架

  7. 了解 Vue (Angular React)

  8. 精通Vue

  9. 了解 vue-router

  10. 了解 vuex

  11. 了解 一些其他开源vue组件

  12. 了解 前端工程的发布部署如何后端服务器部署结合起来

  13. 京东商城项目实战
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@unproductive-wanyicheng