[!summary]+
本篇是 Mdn 使用 JSON 一文的阅读笔记，对 web 开发中的 JSON 进行了介绍

JSON 简介

JavaScript Object Notation(JSON)是将结构化数据表示为 JavaScript 对象的标准格式，通常用于网页上的表示和传输数据（服务端，客户端），熟悉 JSON 对象的创建，传输，解析，对于 JS 来说也是一门基本功了。

JSON 可以存在单独的文件中，后缀为 .json，同时在进行网络传输时，MIME 类型为 application/json

基本操作介绍

对 JSON 这类标记语言进行的操作通常就是下面的两种：

• 将字符串转换为原生对象的过程称为反序列化(deserialization)
• 将原生对象转换为字符串进行网络传输的字符串的过程则成为序列化(serialization)

因此可以理解为这就是一个 object-string 的相互转换过程，因此在一个语言中如何使用 json 这种标记语言，最核心的就是上述的这两个操作，随着后续的发展，JSON 在除了 js 的其他语言中也被广泛的使用到。

JSON 结构和“语法”

整个 JSON 是一个字符串，其非常类似于 JS 对象字面量的写法（无需命名对象名），且其中仅包含要传输的数据（属性）而不包含方法；

一般而言有两种方法来编写 JSON 文件，一种是类似对象字面量（字典），存储一个单体对象的方式；另一种则是 JSON 数组，最外层用数组的形式，在数组里面可以存储多个单独对象。下面分别给出示例：

单对象形式，对象字面量（like 字典），js 中反序列化获取之后就会得到一个对象，使用对象的方法去调用其中的属性即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
	"squadName": "Super hero squad",
 	"homeTown": "Metro City",
 	"formed": 2016,
 	"menbers": [
	 	{
	 		"name": "Molecule Man",
	      	"age": 29,
	      	"secretIdentity": "Dan Jukes",
	      	"powers": [
	      		"Radiation resistance", "Turning tiny", "Radiation blast"
	      	]
	 	},
	 	{
	 		"name": "Madame Uppercut",
	   		"age": 39,
	   		"secretIdentity": "Jane Wilson",
	   		"powers": [
	     		"Million tonne punch","Damage resistance", "Superhuman reflexes"
	  		]
	 	}
 	]
}

数组多对象形式,下面这种写法也是一种合法的 JSON，js 中反序列化获取后则会得到一个数组对象，使用下标去索引即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[
	{
	   "name": "Molecule Man",
	   "age": 29,
	   "secretIdentity": "Dan Jukes",
	   "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
	 },
	 {
	   "name": "Madame Uppercut",
	   "age": 39,
	   "secretIdentity": "Jane Wilson",
	   "powers": [
	     "Million tonne punch",
	     "Damage resistance",
	     "Superhuman reflexes"
	   ]
	 }
]

同时 JSON 还有以下的一些编写规范：

1. 纯数据，只包含属性不包含方法；
2. 要求字符串和属性名称使用双引号，单引号无效；
3. 错位的 , 和 ; 都可能导致 json 文件出错，要做好检查，可以使用JSONLint 这样的程序来验证；
4. JSON 实际上可以使任何可以有效包含在 JSON 中的数据类型的形式，例如，单个字符串或者单个数字也是一个有效的 JSON 对象；

[!summary]+
JS 中的一切变量皆为对象，可以将对象理解为一个包含相关数据和方法的集合（变量 & 函数）我们也将其称之为属性和方法，就像我们在 python 里做的那样，本篇为 mdn_JS对象基础，mdn_JS对象原型 的阅读笔记

如果 面向对象编程基本概念 不太清楚的话，可以看一下这个链接，了解一下下面这些基本概念：derive 派生 | oriented 面向 | polymorphism 多态 | override 重写/重载 | encapsulation 封装 | private 私有 | delegation 委派 |

从声明对象开始

手动声明对象（字面量）

在 JS 中声明一个对象实际上和声明一个字典一样，使用 {} 就可以声明一个对象，{}中可以包含属性甚至函数，下面给出一个例子：

1
2
3
4
5
6
7
8
9
10

const person = {
	name: ["aiken", "metis"],
	age: 26,
	bio: function () {
		console.log(`${this.name[0]} ${this.name[1]} now is ${this.age} years old`);
	}
	introduce() {
		console.log(`hello! i'm ${this.name[0]}.`);
	}
}

可以看出该声明的对象中，不仅包含属性: name, age, 还包含方法 bio, introduce,可以看出方法存在两种不同的写法，更常用的是第二种简写。

这种手动写出对象的内容来创建的特定对象叫做对象字面量(object literal)，与从定义好的类实例化出来的对象不同。

基于函数来批量声明对象

当我们需要批量创建多个同类对象的时候，按照上面的方法来定义就会显得十分麻烦，这个时候我们可以使用函数来批量声明对象。

1
2
3
4
5
6
7
8
9
10
11
12

function createPerson(name, age)
{
	const obj = {};
	obj.name = name;
	obj.age = age;
	obj.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
	return obj;
}
const aiken = createPerson('aiken','26');
const metisy = createPerson('metis', '25');

通过函数来声明对象的时候：用首先定义一个空对象，然后去修改对象属性和对象的方法，实现批量处理。

“this” 使用和含义

this 指代代码运行时调用 this 的对象本身，这在定义单个对象字面量的时候可能没什么用，但是当我们有多个对象，这样这种时候通过使用 this，就可以使得函数定义是更通用的，就像上面的例子中，aiken.bio 和 metisy.bio 都能正确的打印出其年纪和名称。

使用类(构造函数)来声明对象

使用类来声明对象是各种编程语言中最通用的一种声明对象的方式，JS 一切皆为对象的设计思想，使得 JS 中定义类的方式和定义函数的方式实际上是十分相似的，这里主要的区分在于用构造函数声明新对象的时候，我们使用 new 关键字。下面给出一个例子：

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name, age)
{
	// 命名类的时候和其他语言一样，使用大写字母开头。
	this.name = name;
	this.age = age;
	this.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
}

const aiken = new Person('aiken', 26);
const metis = new Person('metis', 25);

可以看出，使用构造函数的方式的时候，我们无需指定返回值，但需要使用 new 关键词去声明新的对象。

[!summary]+
web-js 中主要的编程方式就是需要结合browser 的事件和属性来实现对页面的动态控制，事件章节可以说是web 动态编程中的核心部分了，了解主要存在和需要被控制的事件是相当重要的。

常见的浏览器事件

下面列出一些常见的事件类型和具体事件，更多的事件可以参考Mdn，在设计页面的时候可以考虑我们希望获得什么效果来找寻是否有对应的事件来构建对应的动态响应。

在确定了事件之后，就需要对事件附加一个事件处理器（监听器），当事件触发的时候，运行指定的js 代码对该事件做出相应。

事件处理器

[!summary]+
通常而言，我们使用特定的 element 调用 addEventListener(event, function) 添加一个事件监听器，当参数中指定的事件 event 在对应元素上发生，就调用对应的 function 执行相应的变动，如果不是通用的函数，这里经常可以看到使用匿名函数去定义对应的操作。

添加事件处理器

因此对于一个事件而言，实际上包含的操作有以下的几个：找到 DOM 中要操作的对应元素、添加事件监听器、选择对应的事件、定义对应的操作函数；

1

const btn = document.querySelector("button");

1
2
3
4
5
6
7
8

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

1

btn.addEventListener("click", changeBackground);

可以为同一个事件设置多个处理器，也就是添加多个 function，对于添加事件来说其中 addEventListener 是最为通用的，可以绑定多种事件，不过除了 addEventListener 之外，还有一些特殊事件的添加监听的方法，例如 click 事件有一个内联的监听器：onclick。

1

btn.onlick = changeBackground;

虽然有一些示例在 html 中绑定事件内联，但是最好还是分开在 js 中绑定更好。

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 的定义会先于所有的语句执行，声明一个全局的变量。下面简单介绍一下各种不同的数据类型：

对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心，字典也是一种对象，定义方式和 Python 一致：

1
2

let dog = { name: "Spot", breed: "Dalmatian" };
dog.name // 访问name属性。

数值： JS 只有一种数值类型 Number，不需要像 cpp 执行 int 和 float 之类的转换，说到数值类型，就需要对基本的运算符进行说明，这里简单列一下支持的一些运算符类型

基本运算符：和大多数语言的基本运算符保持一致，这里需要特殊说明的只有相等的判断符，区别于其他语言，JS 中使用三个等号来判断相等；

1
2

if a == b:
	print("a is equal to b")

1
2
3
4

if (a === b)
{
	console.log("a is equal to b");
}

这里的函数定义和条件判断都更接近 cpp，使用{}将代码块来区分，而非单纯使用缩进。

[!summary]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

• 响应式设计的历史和思路：
• 媒介查询的入门 与或非等语句
• 传统的布局方法

尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。

[!summary]+
这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：

布局模式介绍

正常布局流：指的是不对页面进行任何布局控制的时候，浏览器默认的 HTML 布局方式，实际上就是按照源码中的先后次序依次出现，在 HTML 布局的过程中，最为重要的就是元素的块和内联两种布局方式。这里需要注意的就是，块的方向和元素的书写方向的关系。

而当我们希望使用 CSS 来改变正常的布局形式的时候，通常会使用以下的一些属性，或者说布局技术，来覆盖掉默认的 HTML 布局行为。

• display 属性：改变元素在 HTML 中的渲染形式，如 block inline inline-block 还有 CSS 引入的 CSS Grid 和 Flexbox.
• float 属性：使用 float 属性能改变块级元素换行的特性，实现类似换行的效果，其值指定其他元素围绕块级元素的哪一边。
• position 属性：利用 position 来设置盒子在盒子中的位置，在嵌套的情况下就可以产生多样的排布
• 表格布局：表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用
• 多列布局： Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。

在讨论布局时，display 最多用到的属性为 flex 和 grid 属性，利用这两个属性值来改变布局。

[!summary]+
这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西

TODO

• [ ] 后续如果初窥门路了可以研究整理一下如何去找参考文献的思路。
• [ ] 熟练使用使用开发者工具进行网站调试的方式。

  DOC 查找

如何查阅 MDN 是一个很重要的技能（当今确实是可以使用 GPT 替代，但是也要掌握基础技能）：

• 当希望知道一个模块有什么属性可以设置的时候应该在 Modules 中查找对应的模块内容，例如表格的相关属性
• 当希望属性用法的时候才去查看对应的属性

Debug 调试

尝试熟练去使用开发者模式去查看盒模型，调整颜色，布局，查看属性，添加属性等。

编写规范

可以参考: MDN 的 CSS 代码规范的示例的同时，遵循组织 CSS 的一些准则，来确定自己的编写规范。

我的开发流程：

1. 使用 Layer 导入组件库
2. 使用 Layer 设置默认层，包括表格预设，各种预设的东西
3. 使用 Layer 设置主题层
4. 定义 custom 内容，内容的组织可以参考： OOCSS 面向对象的 CSS 设计，或者基于文章结构的组织（基础如 body,h -> 组件，例如不带 index 的列表-> 站点 level 如导航栏 -> 特指内容）

编写过程中：

• 保持命名方式统一
• 添加注释说明各部分内容
• 保持缩进和换行
• 为一些颜色之类的数值设置变量，避免重复修改多个地方

[!summary]+
表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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 设置对应的样式

后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。

[!summary]+
该篇章主要收集一些常见的样式设置的参考页和一些需要记住的重要设置内容，由于不可能记住所有的属性和设置，善用查询可能才是唯一的王道。

CSS 中的值与单位

CSS 中的值与单位 这里介绍常见的一些值和单位，有一些新的可能会有所缺失，但是大部分都有了，这里可以列举几个常见但是之前不理解的。

• em 相对字体大小
• vw 视窗宽度，值为百分比的含义
• 百分比：与父辈容器的百分比
• rgba 或者 rgb 的第四个值代表透明度，十六进制想设置透明度的话，就在后面再加两位 16 进制表示透明度的百分比。

这里倒是提示我们需要有个比较好的取色器或者像 vscode 中的色盘来编写 css，颜色搭配网站在 css 中也是很重要的。

[!summary]+
HTML 和 CSS 中，所有的元素都是基于一个个的 Box 去渲染的，理解盒子模型的设计，才能知道如何进行布局，从而使的页面按照希望的样子呈现，该定义实际上和 HTML 的块级元素和内联元素使完全相对应的。需要注意两者之间的关联性。

块级盒子(Block Box)和内联盒子(Inline Box)

块级盒子和 HTML 中的块级元素使相互对应的，例如 h 和 p 有以下的特点：

• 与其他元素之间会换行
• 因为换行，在内联的方向上（也就是行）会占据所有可用空间，即绝大多数情况下和父容器一样宽。
• width 和 height 属性均可发挥总用
• 内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

内联盒子和 HTML 中的内联元素相互对应，例如 span, em, strong 等，有以下的特点：

• 不会换行
• width 和 height 属性不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

如果希望切换元素的内联或者块级属性，可以通过对盒子的 display 属性设置进行切换，对应的属性值为 inline 和 block，而更有趣的，如果我们希望不换行，但是内联中的 width 和 height 属性起到作用，可以使用 inline-box 属性。

Inline-box 属性在导航栏/链接元素中很常见，我们通过增大内容区域来使得链接存在更大的命中区域，同时不影响别的元素的呈现。

在这里还会看到片一个十分常见的盒子属性 flex 其通常会将外部的显示类型转换为 block，但是内部的显示类型设置为 flex，对其内部的各个子元素，都将转换为 flex 元素，并基于 flex 即弹性盒子的规则进行布局，可以生成更灵活的界面，这个后面在排版部分针对性的了解，这里简单介绍如下：

• flex 会将内部的元素默认沿着行的方向均分切成几个 box，但是具体的切分可以根据后续的属性进行定义。
• 如果希望 flex 的外部为内联的，则使用 inline-flex 属性。

[!summary]+
本章节是额外对于优先级的补充章节，在使用上可能会没有明显的感知，但是从概念上理解 CSS 的优先级和后续复杂项目的开发中还是起到了比较大的作用，该章节介绍层叠层的概念，在原先的优先级判定上添加了层的概念。

层叠概念回顾

该 Section 内容完全摘录自 MDN CSS 教程，也算是对于整体重要性和优先级的一个很好的总结。

1. 相关声明：找到所有具有匹配每个元素的选择器的声明代码块。
2. 重要性：根据规则是普通还是重要对规则进行排序。重要的样式是指设置了 !important (en-US) 标志的样式。
3. 来源：在两个按重要性划分的分组内，按作者、用户或用户代理这几个来源对规则进行排序。
4. 层：在六个按重要性和来源划分的分组内，按层叠层进行排序。普通声明的层顺序是从创建的第一个到最后一个，然后是未分层的普通样式。对于重要的样式，这个顺序是反转的，但保持未分层的重要样式优先权最低。
5. 优先级：对于来源层中优先权相同的竞争样式，按优先级对声明进行排序。
6. 出现顺序：当两个来源层的优先权相同的选择器具有相同的优先级时，最后声明的具有最高优先级的选择器的属性值获胜。

CSS 渲染过程中会逐步往下选择，如果在中间已经决出了胜负就不会继续往下，例如对一个元素在每个来源中只有一个定义，那么在来源层就可以决出胜负，无需往下了，而若获胜的来源中有多个层定义了同个属性，那么就会对比各个层的优先级，诸如此类。

其他的部分前文已经基本提到了，接下来补充来源和层的两个概念。

![note]+
三个来源中的：’用户代理’指的是浏览器，用户指的是网站访问者，作者指的是网站开发者，浏览器内部将来自这三个来源的样式表进行来源的排序。

来源的优先级排序

有三种层叠来源类型：用户代理样式表、用户样式表和作者样式表。浏览器根据来源和重要性将每个声明分为六个来源分组。有八个优先权级别：六个来源分组、正在过渡的属性和正在动画的属性。优先权的顺序是从具有最低优先权的普通用户代理样式，到当前应用的动画中的样式，到具有最高优先权的重要用户代理样式，再到正在过渡的样式：

1. 用户代理普通样式
2. 用户普通样式
3. 作者普通样式
4. 正在动画的样式
5. 作者重要样式
6. 用户重要样式
7. 用户代理重要样式
8. 正在过渡的样式

用 <style> 元素直接在元素上声明的样式是作者样式。不包括动画和过渡样式，用户代理普通样式具有最低优先权；用户代理重要样式具有最高优先权。

[!note]+

1. 你永远无法记住所有的 CSS 属性，善用参考资料：MDN CSS reference 和 GPT
2. 善用浏览器的开发者面板在页面上及时编辑 CSS。

CSS 运行逻辑

前面在 LearnWeb00-Web入门 中简单提及了浏览器以及 CSS 起了什么作用，这里则是对于 CSS 是如何具体参与进页面的渲染的讲解，包括早该知道的 DOM 的定义也会在这里介绍，是 CSS 是如何运行的读书笔记。

浏览器获取了 HTML 之后：

1. 会拉取其所依赖的所有 CSS，JS 和静态资源（Parser HTML）
2. 解析 HTML 代码，根据其中的 Tag、Class、ID 和相互之间的关系将 HTML 解析成 DOM ，每个元素作为其中的一个节点放进相对应的桶中。（元素桶、ID 桶之类）

紧接着，在拉取完 CSS 之后，浏览器开始解析 CSS，基于 CSS 中的选择器找到每个样式所属的 DOM 节点，并将其添加进去。

最后基于最终的 DOM(Document Object Model) 渲染出完整的页面，这里对 DOM 进行一个简单的解释：

一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

此外浏览器在渲染过程中如果遇到了位置的 CSS 会直接跳过相应的 CSS ，然后渲染下一个规则。

[!summary]+
HTML 中需要使用 CSS 进行样式组合才能得到一个阅读体验较好的表格，目前还是先专注在 HTML 的部分，后面到 CSS 部分的时候再合起来一起看。

本文主要是参考 MDN 范例中的源码以及对应的文章 HTML 表格基础的一篇阅读笔记。

表格基础

从源码开始我们可以看到表格对应的 Tag 核心的一下几个：

• <Table> 包裹整个表格
• <caption> 设置表格的标题
• <tr> 一行一行的包裹表格，全称应该是 table row

可以看到 HTML 中编写表格是使用 <tr> 进行逐行编写的，逐行的描述整个表格：

• 用 <td> 描述表格的内容语义，table data
• 用 <th> 描述表格的标题语义，即首行首列的标题元素 table header

主要的元素就是上面这些，但是复杂的表格包括：合并的单元格（纵向和横向）需要再 th 和 td 中使用额外的属性来定义：colspan 和 rowspan

• colspan="2" 属性定义占据两个单元格宽度（横向合并）
• rowspan="3" 属性定义占据三个单元格的宽度（纵向合并）

然后每个 tr 中排除掉被合并的单元格还需要多少个 td 需要我们自己计算。

HTML 的表格基础样式

可以使用 colgroup 和 col 为整列设置同样的样式，每个 col 元素代表一列，如果需要一条元素定义多列的样式的时候可以使用 span 属性，下述代码会将第二列背景设置为黄色。

对单个单元格设置样式可以仿照使用 style 属性来嵌入对应的 css 样式，包括宽度什么的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

HTML 表格结构化

[!quota]+
由于表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 <thead>、<tfoot> 和 <tbody>，这些元素允许你把表格中的部分标记为表头、表尾、表体三部分。

这样的结构化实际上没有什么默认 style，主要是帮助我们后续定义各个部分的样式。

其他

• 表格元素支持嵌套
• 使用 scope 属性 来支持视障人士来理解这个表格

[!summary]+
接下来主要探讨 HTML 中的多媒体元素，图片、视频、音频以及 iframe 等等。

图片元素 Image

1

<img src="<img_url or location>" />

src：最基本的图片元素仅需一个 src 属性来指向图片资源，这样就可以将图片导入页面中，其中关于 Location 这里有一个 SEO Tips(Google Recommand)：

• 本地存储推荐存储于 images
• 图片的命名更加具备描述性。
• 不要将自己的 SRC 属性指向他人网页上的照片（这种行为为”盗链”）

如图像元素和视频元素这类嵌入的元素，有时候也被成为替换元素：元素的内容和原始尺寸由外部资源所定义，而非元素本身。（可以使用属性或者 CSS 进行控制）

alt：alt 为了视障，节省带宽，浏览器支持问题等原因设置的代替图片出现的描述性文本，推荐根据图片内容进行编写：

• 装饰需求: 使用空的 alt="" 避免输出多余信息，同时推荐将装饰性图片在 CSS 文件中定义而非 html，下文会详细讲解 CSS 设置装饰图片
• 内容需求：如果正文中没有描述，则 alt 对图片进行描述，否则设置为空。

width 与 height ：上文中提到图片的 size 由外部资源决定，单位了适应页面的大小，可以使用 img 标签中的 width 和 height 属性来实现对图片的缩放，同时也会在页面尚未加载完成时预留空间，避免页面结构混乱。（因此无需缩放也建议，获取图片的 size 写入属性。）

title：类似超链接中的 title 属性，可以给照片添加悬停提示，当空间不够时可以通过这种方式来添加部分信息，但不推荐。

figure 与 figcaption：创建一个容器（box），可以为图片在图片下方添加说明，像论文中的那种，对于无障碍用户来说起到和 alt 一样的作用。

1
2
3
4

<figure>
	<img src= "https://the-network-photo" alt="" title="key img", width="400", height="200" />
	<figcaption>通过为网络添加一个低纬嵌入来实现用最小的空间代价控制网路行为</figcaption>
</figure>

figure 中可以存放几张图片、一段代码、音视频、方程、或者任何其他的内容，而不只是单张照片，类似的补充说明的场景都可以使用 figure 元素呈现。

[!summary]+
本章节在 HTML01 的基础上加深对于一些基础概念，标签等的认知，还是以 HTML 编写的基础知识为主。

块级元素和内联元素

块级元素和内联元素就像 Markdown 的内联代码和代码块两种写法，一个需要另起一行且会占据行，下一个元素必须另起一行，如 <p> 段落等。而内联元素就是可以嵌入行内，内联元素前后都无需换行，一般如强调，高亮，超链接一类。

• 正是由于这种结构，块级元素在使用的时候除了内容，往往还承担着网页的结构相关的工作，如页眉，页脚, 列表，导航栏等等；
• 块级元素不会嵌套在内联元素中，但是可能嵌套在另一个块级元素中。
• 内联元素则通常在块级元素中和文本一起使用。

需要注意的是这类元素分类是过时的，HTML 定义了更加详细具体的分类，为了便于理解暂时使用旧的定义来做简单的区分。

布尔属性

前文提到过，属性通常以 k-v 键值对的形式呈现，但是有部分属性是没有值的，其 key 通常与值有着相同的含义，如 disabled，该布尔属性本身就代表着禁用，例如输入框 <input> 禁用就会阻止用户的输入。

1

<input type="text" disabled />

这样就会创建一个无法输入的输入框，通常会以灰色呈现，type 则限制了输入框的输入类型。

[!summary]+
JS 除了 WEB 在现代还有很多 NodeJS 的应用也会使用 JS，这里只介绍 web 相关的 JS 代码编写的部分。

ref: mdn JS 快速入门 | 《数据结构与算法 JavaScript 描述》

Intro

JavaScript 是一门完备的动态编程语言，可以借由诸多开发者编写的大量工具，为网站提供动态交互的特性（结合浏览器应用程序接口 API）主要用到的包括：

• 浏览器应用程序接口（API）：浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
• 第三方 API：让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
• 第三方框架和库：用来快速构建网站和应用。

HTML 引入 JS 代码

为了使得代码更清晰且好组织，本文依然使用引入外部 JS 的办法进行代码结构组织，HTML 中引入相关 JS 的方法和 CSS 的方法类似但略有不同。具体代码如下：

1

<script src="scripts/main.js" defer></script>

这一段代码可以加在 Head 部分，其中的 defer 属性，及 deferred 延迟，是为了让元素都加载完成后再加载 JS 部分代码，否则最好将 JS 的引入放在 HTML 快要结束的部分（</body> 的前一行）。避免 JS 元素对 HTML 提前进行修改导致 HTML 加载失效。

参考资料：async-defer | Medium

[!summary]+
在前文 web 入门中已经简单介绍了 CSS 是如何起作用，如何与 HTML 进行相互合作的，本篇主要简单介绍如何编写 CSS 文件中的各种样式。

ref: mdn css入门 | MDN css属性大全

在本文及后续的尝试中，都使用单独 CSS 文件外挂的格式，该种格式的结构会更清晰，即将下述代码放入 HTML 文件的 Head 部分。

1

<link rel="stylesheet" href="styles/style.css" />

href 部分需要替换为自己实际存放 css 文件的地址即可，此外也简单重复一下剩下的两种使用 CSS 的方式：内部样式表和内联样式表

• 内部样式表即在 HTML 的 Head 部分添加 <style>your css code</style> 将 CSS 代码都包裹起来
• 内联样式表即在特定元素中定义 style 属性，<p style="your css code"> 在 style 属性中填充需要的 CSS 代码。

接下来进入正文，讲解 css 部分的组成和编写规则。

Pattern 基础范式

The Principle to Write Css.

这是一个最基本的 CSS 结构，更为专业的名称是 CSS 规则集（简称为规则），其组成分成一下几个部分：

• 选择器 Selector：类似表格中的筛选，筛选这个规则使用的范围，针对 Class、ID、Tag 等不同类型有不同的选择器写法
• 属性 Property: 选择要修改的属性，如颜色，大小，位置灯多重类型。
• 属性值 Property value: 各种对应属性的取值，如具体的哪个颜色，字体多大等。
• 声明 Declaration：由属性和属性值组成的一条单独的规则，指定一种特定的样式。

上述结构称为规则集，因为其可以同时包含多个规则（即声明），编写时有以下约定：

• 每个规则使用 ; 作为结尾的分割
• 同一个规则集的规则需要编写在 {} 之中
• 属性和属性值为 K-V 对，声明时使用 : 作为分割符，且属性和值均不区分大小写

注释方法

1
2
3

/*
all between those two symbol is comment.
*/

[!Intro]+
在 Web 入门，How HTML Work 部分已经简单介绍过，HTML 是一种定义内容结构的标记语言，通过一系列标记（确定其表现形式）和对应内容组成的元素，嵌套，排列，构成完整的页面。本文主要是整理和熟悉一下基础的标记元素

REF: HTML 入门

从上述图像可以看到一个基本的 HTML 元素的构成，元素的 Tag 可以包含属性，多个属性之间用空格隔开，Class 属性可以为元素标识名称，进而为其指定 Style 等。

属性通常为 K-V 键值对，attr=”value” 的形式呈现，这里引号可以是单或者双，甚至可以没有，但是没有引号有时候会导致问题，所以建议保持使用引号的风格去编写。

Head/Overview 部分

参考网站中的范例如下，一个基本的 HTML 文件有以下这些可以注意的地方：

1
2
3
4
5
6
7
8
9
10
11

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

• <head> 就如 cpp 中的 head 文件，定义一些不用于向用户显示的内容，给浏览器的关键词，字符集声明，页面描述等内容
• <meta charset="utf-8"> 定义文档使用的字符串编码类型，utf-8 支持世界上大部分语言的渲染，避免因为中文等出现乱码的情况。
• <meta name="viewport" content="width=device-width"> 视口元素，可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
• <title> 对当前网页的描述和注解，显示在标签栏中，以及收藏时显示的文字
• <body> 部分则是包含网站的全部需要显示的内容。

[!summary]+
Familiar with the pipeline of how to build a website, how to organize the files, etc…

Start Design

开始设计一个网站的时候，可以从以下三个方面入手来启动整个开发设计过程：网站的主题->基础的一些内容->整体的外观设计（草稿）

更具体一些：确定完要制作的网页，可以绘制草图有一个粗浅的整体效果，然后指定文本、图像、色彩、字体等资源，就可以开始制作了。

File Structure

关于项目中的文件命名，需要注意的是以下的三点，建议养成这样的规范去建立网页文件夹。

• 建议使用完全小写来命名文件，webserver 是大小写敏感的，所以复杂的大小写关系容易导致访问不到文件。
• 尽量不要使用空格，空格可能会破坏链接被视为两个文件等，如果没有被区分很多服务器也需要使用 %20 对空格进行替换
• 尽量使用连字符代替下划线进行文件命名，google 搜索引擎将连字符作为单词的分割符，而不会识别下划线

而文件存储结构部分，通常而言，有以下的关键文件和文件夹结构，在很多场景下也会将 image 等文件夹放到 static 文件夹中。

• index.html
• styles: 存放 css 文件
• images: 存放图片等媒体资源文件
• scripts: 存放 js 等脚本代码文件

资源的文件路径一般而言以 html 为 Basepath，然后根据上下级关系确认索引地址即可。

[!summary]+
Web 前端开发者路线学习，基本的目的是能够为自己想做的项目搭建前端界面，从 web 开始再到各个移动设备的前端 UI，基于 Mdn 课程，Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构，在搭建过程中结合具体的项目，包括自己部署的界面去逐步实践，完善和熟悉整个知识体系和技术栈，并通过和现代 AI 辅助工具的合作，建立自己独立的前端开发流。

• Roadmap For Beginner
• Roadmap For All
• Mdn Web Tutor

Be Ready 准备以及基础了解

• 基础：开发环境准备、页面设计、文件架构规划（由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的）
• 语言：HTML 、CSS、JS 三驾马车为一个网页必不可少的要素，通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML，HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面，因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件，并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。

[> [!summary]+

this article purpose is to build an authority page for stable diffusion webui using nginx & python/js. Which can publish my personal stable diffusion server. Wrote by GPT(try).

Introduction

In the digital age, the security and user-friendliness of web services are not just conveniences; they are necessities. Balancing robust security protocols with an engaging user experience is key to maintaining both the integrity and popularity of any online service. This blog post dives into the intricacies of securing web services using Nginx for authentication, coupled with designing an appealing frontend. Our journey begins with a practical scenario:

publishing a stable diffusion webUI service, accessible only to an authenticated audience.

Setting Up Nginx for Secure Authentication

Nginx excels in serving web pages and as a reverse proxy, providing enhanced security through authentication mechanisms. Let’s explore a typical Nginx configuration for secure authentication:

• /verify_token: This block forwards authentication requests to a dedicated server. By excluding the request body and focusing on essential headers, it ensures that only valid, authenticated requests proceed.

1
2
3
4
5
6
7
8

location = /verify_token {
    proxy_pass http://{your_auth_server}:2424;
    proxy_pass_request_body off;
    proxy_set_header Content-Length "";
    proxy_set_header X-Original-URI $request_uri;
    proxy_set_header X-Original-Remote-Addr $remote_addr;
    proxy_set_header X-Original-Host $host;
}

• /login: Catering to login requests, this configuration forwards the necessary details to the authentication server, preserving crucial information about the request’s origin.

1
2
3
4
5
6
7

location /login {
    proxy_pass http://{your_auth_server}:2424;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

• Error Handling (@error401): A clever redirect mechanism that guides unauthenticated users to the login page, keeping the original URL intact.

1
2
3

location @error401 {
    return 302 {your_domain}/login;
}

• Root Location (/): The gateway to your service, which rigorously checks each request for authentication, granting access only to verified users.

1
2
3
4
5
6
7
8
9
10

location / {
    auth_request /verify_token;
    error_page 401 = @error401;
    proxy_pass http://{your_server}:2323/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

This setup not only fortifies your service against unauthorized access but also maintains a seamless user experience, redirecting unauthenticated users without hassle.

Intro 问题描述

以 emby 为例，学习如何对这种自托管的服务，请求验证网站的软件进行破解，破解的整体思路分为以下的两类：

一种是改客户端，一种是改服务端。两种方式的最终原理一样，都是搭建仿冒认证服务器，客户端访问伪服务器拿到授权信息；【3】

因此无论是那种方法我们都需要搭建伪验证服务器：所以以下的操作是必须的：

1. 抓取定位到验证服务器的地址，并获取验证服务器返回的验证信息格式；
2. 使用 Nginx 搭建虚拟的验证服务器，使其返回激活/验证信息；

如果是修改客户端，则在搭建完验证站后需要：

• 修改 Host 文件，将请求验证服务器的请求劫持到本地搭建的服务上；
• 需要伪服务器和客户端都要安装自签名证书

如果是修改服务端，则后续需要：

• 修改服务端源文件，将默认的认证服务器 mb3admin.com 地址直接改成伪服务器
• 这样就不需要安装自签名证书

如果是使用 Docker 进行部署的 emby 可以使用别人修改好的服务端的镜像进行部署安装（like 开心版）

本文主要介绍验证服务器的搭建、修改客户端的方法，以及一些其他的注意事项；

本系列主要介绍通过公网的 ipv6 访问局域网设备并部署自己的服务供公网访问；本篇是其中的第三篇，以 DDNS-go 开源项目为例，部署动态域名解析服务，自动更新主机记录值。

jeessy2/ddns-go: 简单好用的DDNS。自动更新域名解析到公网IP(支持阿里云、腾讯云、Dnspod、Cloudflare、Callback、华为云、百度云、Porkbun、GoDaddy、Google Domain) (github.com)

该工具使用起来非常简单，推荐需要动态域名解析的可以尝试使用该工具，简单介绍工具的使用如下：

配置 DDNS-GO

前往 release 页面下载对应系统的版本：

解压后双击打开 ddns-go.exe 会自动弹出配置的界面：locahost:9876,选择需要解析域名的 DNS 服务商，选择创建密钥并填入对应的密钥。

选择需要启用的 ipv4或者 ipv6解析服务,填写需要解析的域名（每个域名单独另起一行）

其他的保持默认即可，在这里完成了基础配置以后，记得点击保存，之后便可以安装对应的服务，使其后台自动更新，windows 使用管理员打开 powershell 或者 cmd，到对应目录下执行命令如下

1

.\ddns.go.exe -s install -f 10 -cacheTimes 360

通过合理的配置 -f 和 -cacheTimes 可以实现 IP 变化即时触发更新且不会被 DDNS 服务商限流, 例如 -f 10 -cacheTimes 360 效果为每 10 秒检查一次本地 IP 变化, 每小时去公网对比一下 IP 变化

详细的配置可参考置顶的官网连接。

Fi

本系列主要介绍通过公网的 ipv6 访问局域网设备并部署自己的服务供公网访问；本篇是其中的第二篇，以腾讯云和 Nginx 为例，介绍如何将服务部署到 https://域名 。

需要以下的事前准备：

• 腾讯云/阿里云/Cloudflare 等随便一个地方购买一个自己的域名
• 公网 ipv4/ipv6 地址
• 本地部署一个服务以供测试

Nginx(Docker) 安装

这里选择 Docker 来分离安装 Nginx 服务，Docker 部署的优势这里就不再赘述，这里建议使用 portainer 进行容器管理和运行状态查看。

首先创建存放 Nginx 配置文件和证书文件的目录，后续挂载给 Nginx Contrainer 使用：

1
2

mkdir -p /home/username/docker-file/nginx/conf.d
mkdir -p /home/username/docker-file/nginx/cert

配置文件存放到 conf.d 中，各种 SSL 证书则存放到 cert 文件夹中；

接着部署 Nginx，这次先不挂载目录，将 Nginx 中一些默认配置拷贝出来，以供后续使用和修改：

1
2
3

# run会自己执行镜像拉取，pull可以不执行
# docker pull nginx
sudo docker run --name nginx -p 80:80 -d nginx 

将配置文件复制出来：

1
2
3

sudo docker cp nginx:/etc/nginx/conf.d/default.conf /home/username/docker-file/nginx/conf.d/default.conf
sudo docker cp nginx:/etc/nginx/nginx.conf /home/username/docker-file/nginx/conf.d/nginx.conf
sudo docker cp nginx:/etc/nginx/mime.types /home/username/docker-file/nginx/conf.d/mime.types

基于原始的配置文件挂载后查看 nginx 是否正常运行：

1
2

sudo docker rm -f nginx
sudo docker run --name nginx -p 80:80 -p 443:443 -v /home/username/docker-file/nginx/conf.d/nginx.conf:/etc/nginx/nginx.conf -v /home/username/docker-file/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf -v /home/username/docker-file/nginx/conf.d/mime.types:/etc/nginx/mime.types -v /home/username/docker-file/nginx/cert:/etc/nginx/cert -d nginx

参考资料：使用docker部署nginx并配置https - 逊老头 - 博客园 (cnblogs.com)

本系列主要介绍通过公网的 ipv6 访问局域网设备并部署自己的服务供公网访问；本篇是其中的第一篇，以电信宽带为例，说明如何开启 ipv6 服务和外网访问放行。

开启 IPV6 服务主要需要修改两个地方的配置：光猫开启桥接模式和 IPV6 、路由器修改为 pppoe 拨号模式以及防火墙设置；这里以本人的电信光猫和小米路由器为例：

背景介绍

需要在外网访问部署于家庭内网的一些服务，考虑了以下的几个方案，决定使用 ipv6作为核心

光猫设置

查看光猫背面的管理员 url，进入光猫管理界面，登录超级管理员账户（非普通账户，会跳转到更详细的管理页面，大部分同地区的超级管理员账户应该是一致的，不对可以询问下宽带师傅）

• 管理地址通常为：192.168.1.1
• 超级管理员账号：useradmin
• 超级管理员密码：nE7jA%5

开始之前准备 PPPoe 拨号的帐号和密码，不知道的话等询问好了再开始操作。

在天翼网关->网络->网络设置中进行如下的操作：（这里可以尝试改成 pppoe 并通过开发者模式查看密码，不知道密码不要轻易进行后续操作）

1. 连接名称选择 +++INTERENT_R_VID_41
2. 连接模式从路由改为桥接
3. IP 模式确认为 IPv4&IPv6
4. 点击保存/应用

在天翼网关->状态->网络侧信息中检查 IPv4 和 IPv6 是否都开启成功：

参考资料：个人宽带如何开启IPv6网络访问