About-Web

这篇博客是博主随便看看网络相关知识的随想页，不会对内容做很多的介绍，一方面因为这个教程已经很好了，不必再花时间重新整理，另一方面作为一个提要也是不错的

而且这个教程的翻译做的也很不错。

权当记录自己的随想。

log：#

  • 2024年8月1日：更新了网络结构理解部分内容。

basic-knowledge:#

web，就我的感觉而言，是一种展示资源、提供交互的技术和协定。只有我们使用相同的理解方式和表达方式，才能有效交流。html规定了资源的组织形式，将想要传输的内容结构化；css给出了展示资源的具体细节，增强表现力；js则是由静态转为动态的关键一步，通过所谓“事件”来实现交互。

web 基本工具：#

html#

css#

javascript：#

主要包括 基本语法/dom/bom；
dom就是你有了对文档内的元素的控制权。
例如document.getElementById(elementId)
例如document.getElementByClassName(ClassName)
最好不要背，学会查

变量：#

js支持字符串，数字，布尔值，数组(但其实更像元组)，和对象。js中一切皆对象，一切皆可存储在变量中访问。
注意var和let的区别，let比较接近以前学习的变量声明。

注释：#

等于C语言

运算符：#

除了(不)等于用(!==)===表示，其他暂时和C语言无异

条件：#

等于C语言

循环：#

等于cpp？
有最简单的for(int i=0)，也有python那种for i in arr;还有foreach(迭代对象内置的迭代函数) 和for of(用在迭代对象中，比如新增的map和set)

函数：#

类似于变量命名，包含的是操作，比如

1
2
3
4
function add(num1,num2){
    let res=num1+num2;
    return res;
}

数据类型：#

值类型和引用类型，除了object都是值类型。

对象：#

js中一切皆对象。

花括号扩起，类似于字典；

列表：#

方括号扩起，类似于列表;

事件：#

表示网站接受到的行为(可以是用户的行为，也可以是网站之间的)

jsx:#

jsx是js的扩展，其目的是方便动态对html的修改。现在动态修改比静态修改丰富太多，从以前的面向网站转向了面向动作设计。

这点好处被用在了react中。

react：#

js的框架，是用来帮助模块化构建ui界面的。使用jsx作为具体的流程描述规则。

最终react会在你给出的root下创建react文件相对应的应用。

echarts，d3，使用npm就可以拿下来。
ui组件：material ui，ant design；

网络结构理解：#

网络模型：#

用来分析网络的模型，实际不一定一样。比较接近现实的是TCP/IP模型，包括

TCP/IP：#

  • 应用层
    • HTTPS
      • HTTP
        • Cookies/Session
      • SSL/TLS
    • websocket等
  • 传输层
    • socket
    • TCP/IP
  • 网络层
  • 数据链路层
    • MAC