1 新手请从这里开始！

1.1 JavaScript 基础

我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。

2 HTML——构建 Web

2.1 HTML 介绍

无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
实体引用：在 HTML 中包含特殊字符：

原义字符

等价字符引用

<

<

>

>

“

"

’

'

&

&

原义字符	等价字符引用
<	`<`
>	`>`
“	`"`
’	`'`
&	`&`

2.2 多媒体与嵌入

<iframe> 元素出现了（连同其他嵌入内容的方式，如 <canvas>、<video> 等），它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 <img> 或其他元素一样。<iframe> 现在经常被使用。
网络安全的一个很好的经验法则是“你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。”

3 CSS——设计 Web

3.1 CSS 第一步

CSS 是一门基于规则的语言——你能定义用于你的网页中特定元素样式的一组规则。比如“我希望页面中的主标题是红色的大字”。
CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为层叠（cascade）和优先级（specificity）。后面的样式会替换样式表中较早出现的冲突样式，这就是层叠规则。一个类被认为是更具体的，因此它比元素选择器优先级更高，所以它取消了其他冲突的样式声明。

Figure 3.1: CSS 是怎么工作的？

如果一个浏览器在解析 CSS 规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的 CSS 声明。相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个 CSS 选择器。

3.2 CSS 基础

当使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators

4 JavaScript——用户端动态脚本

4.1 JavaScript 第一步

JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interface，API）将为你的代码提供额外的超能力。
每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。
JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。
脚本调用策略小结：
- async 和 defer 都指示浏览器在一个单独的线程中下载脚本，而页面的其他部分（DOM 等）正在下载，因此在获取过程中页面加载不会被阻塞。
- async 属性的脚本将在下载完成后立即执行。这将阻塞页面，并不保证任何特定的执行顺序。
- 带有 defer 属性的脚本将按照它们的顺序加载，并且只有在所有脚本加载完毕后才会执行。
- 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
- 如果脚本需要等待页面解析，且依赖于其他脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 的相应 <script> 元素中。

Note

先去学 Shiny 了。

--- title: "学习 Web 开发" date: "2023-12-17" date-modified: "2023-12-27" image: "cover.png" categories: - HTML - CSS - JavaScript --- ```{r} #| include: false 1 + 1 ``` ::: {.callout-note title='Progress'} `r stfun::progress(3.1, 11, stop = TRUE)` ::: ::: {.callout-tip title="Learning Source"} - <https://developer.mozilla.org/zh-CN/docs/Learn> ::: # 新手请从这里开始！ ## JavaScript 基础 - <p>我们将 `<script>` 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。</p> # HTML——构建 Web ## HTML 介绍 - 无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。 - 实体引用：在 HTML 中包含特殊字符： <table class="table"> <thead> <tr> <th>原义字符</th> <th>等价字符引用</th> </tr> </thead> <tbody> <tr> <td><</td> <td><code>&lt;</code></td> </tr> <tr> <td>></td> <td><code>&gt;</code></td> </tr> <tr> <td>"</td> <td><code>&quot;</code></td> </tr> <tr> <td>'</td> <td><code>&apos;</code></td> </tr> <tr> <td>&</td> <td><code>&amp;</code></td> </tr> </tbody> </table> ## 多媒体与嵌入 - `<iframe>` 元素出现了（连同其他嵌入内容的方式，如 `<canvas>`、`<video>` 等），它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 `<img>` 或其他元素一样。`<iframe>` 现在经常被使用。 - 网络安全的一个很好的经验法则是“你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。” # CSS——设计 Web ## CSS 第一步 - CSS 是一门基于规则的语言——你能定义用于你的网页中特定元素样式的一组规则。比如“我希望页面中的主标题是红色的大字”。 - CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为**层叠**（cascade）和**优先级**（specificity）。后面的样式会替换样式表中较早出现的冲突样式，这就是**层叠**规则。一个类被认为是更具体的，因此它比元素选择器优先级更高，所以它取消了其他冲突的样式声明。 ![CSS 是怎么工作的？](images/rendering.svg){#fig-css-work width=85%} - 如果一个浏览器在解析 CSS 规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的 CSS 声明。相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个 CSS 选择器。 ## CSS 基础 - <p>当使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。</p> <https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators> # JavaScript——用户端动态脚本 ## JavaScript 第一步 - JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interface，API）将为你的代码提供额外的超能力。 - 每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。 - JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。 - 脚本调用策略小结： - `async` 和 `defer` 都指示浏览器在一个单独的线程中下载脚本，而页面的其他部分（DOM 等）正在下载，因此在获取过程中页面加载不会被阻塞。 - `async` 属性的脚本将在下载完成后立即执行。这将阻塞页面，并不保证任何特定的执行顺序。 - 带有 `defer` 属性的脚本将按照它们的顺序加载，并且只有在所有脚本加载完毕后才会执行。 - 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 `async`。 - 如果脚本需要等待页面解析，且依赖于其他脚本，调用这些脚本时应使用 `defer`，将关联的脚本按所需顺序置于 HTML 的相应 `<script>` 元素中。 ::: {.callout-note} 先去学 Shiny 了。 :::