Summary 如果页面的功能较为复杂，且涉及到了从服务端获取数据等操作，如果简单的使用同步编程，等待一个个任务按顺序执行，由于网络或者某些时间复杂度较高的操作，导致网页加载时间过长，或者使用逻辑不合理（加载某些资源的同时无法进行浏览等），因此异步编程的特性在 web 端是十分重要的。 通过异步编程使一个长时间运行的任务运行的同时能够对网页做出其他的操作和对其他事件做出相应，而不需等待该任务完成，以下的这些功能就是最常见需要异步完成的； fetch 发起 http 请求 getUserMedia() 获取用户的摄像头和麦克风 showOpenFilePicker() 请求用户选择文件以供访问。 基于事件处理程序实现异步 事件处理的逻辑实际上也是一种接近异步编程的方式，对应的函数不是即时执行，而是等事件被触发后在进行调用。一些早期的异步 API 就是这样使用事件的。 ...
Summary 本篇是 Mdn 使用 JSON 一文的阅读笔记，对 web 开发中的 JSON 进行了介绍 ...
Summary JS 中的一切变量皆为对象，可以将对象理解为一个包含相关数据和方法的集合（变量 & 函数）我们也将其称之为属性和方法，就像我们在 python 里做的那样，本篇为 mdn_JS对象基础 ，mdn_JS对象原型 的阅读笔记 ...
Summary web-js 中主要的编程方式就是需要结合browser 的事件和属性来实现对页面的动态控制，事件章节可以说是web 动态编程中的核心部分了，了解主要存在和需要被控制的事件是相当重要的。 常见的浏览器事件 下面列出一些常见的事件类型和具体事件，更多的事件可以参考Mdn ，在设计页面的时候可以考虑我们希望获得什么效果来找寻是否有对应的事件来构建对应的动态响应。 ...
JS 基础语法 该部分的学习除了 MDN 的相关知识，会结合数据结构的内容来进行学。 语言的第一印象和 python 有许多相似的地方。语法上可能大差不差，在循环和其他一些变量上又有一些和 C#,CPP 相似的地方。 Basic Rules 基础规则简介 首先介绍基本的编写规则:如注释、缩进规则、变量规则等… 注释：CPP 相同使用 // 和 /* */ 进行行/块注释。 句尾 ; ：单行单条语句结束可以无需 ; (但为了规范和明确可以加上)，同行多个语句可以用 ; 进行语句的区分。 变量 声明变量使用：var , let , const 三个关键词；其中 let 和 const 是相似的，用于声明块级作用域的局部变量，只有在声明的位置之后才能使用，唯一的区别在于 const 声明的常量不能用赋值运算符直接更改，（但如果是个对象，它的属性可以被添加、更新、删除） 变量定义：(另起一个 Paragraph 表示尊重) JS 为非强类型语言(即类似 python 而非 cpp)，为动态类型语言，变量声明无需指定类型。但有以下几个注意的事项： （不推荐）不带关键字的变量声明会默认为全局变量。 （推荐）可以使用 let 或 var 关键字定义变量。 （最推荐）最推荐使用 let 进行变量的声明，var 对变量定义位置的要求更低，使用 var 编写可能会方便，但是在后续维护和阅读中可能会体验很差。使用 let 然后和别的语言一样声明和使用变量。 可以使用 typeof 来检查变量类型 其中对于变量的定义上，Var 和 let 的详细差别可以参考 var与let的区别 ，var变量提升 ，简单的讲 var 的定义会先于所有的语句执行，声明一个全局的变量。下面简单介绍一下各种不同的数据类型： ...
Summary 设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。 ...
响应式设计的历史和思路： 媒介查询的入门 与或非等语句 传统的布局方法 尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。
Summary 这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。 ...
Summary 这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西 ...
Summary 表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性 ，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。 css table{ table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } 当为表格设置初始样式的时候，使用 layout 为 fixed 会使得表格的行为更好预测，避免由于内容产生的畸变导致难以设置或者出现一些奇怪对齐情况，使用 fixed 然后设置每一列的宽度，在对内容进行处理可能更好。 使用 nth-child 设置每一列的宽度，最终相加为 100%，使得在不同分辨率下比较好控制。 border-collapse: collapse; 原本两个格子之间会有两条边线，这样的话可以合并重叠的边线，让表格更符合我们的预期。 使用 text-align 设置对齐方式 使用 thead，tfoot，tbody 来分别设置样式，可以做出类似三线表之类的东西 为标题 caption 设置对应的样式 后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。 ...
