HTML on Last Stand

HTML 5 新特性

Tue, 24 Sep 2024 00:00:00 +0800

HTML5 新特性

语义标签
增强型表单
视频和音频
Canvas绘图
SVG绘图
地理定位
拖拽API
WebWorker
WebStorage
WebSocket

语义标签

语义化标签使得页面的内容结构化，可以使开发者更方便清晰地构建页面的布局

标签	描述
`<header>`	定义了文档的头部区域
`<footer>`	定义了文档的尾部区域
`<nav>`	定义文档的导航
`<section>`	定义文档中的书
`<acticle>`	定义页面独立的内容区域
`<aside>`	定义页面侧边栏内容
`<details>`	定义用户可以看到或隐藏的额外细节
`<summary>`	标签包含details元素的标题
`<dialog>`	定义对话框
`<figure>`	定义自包含内容，如图表
`<main>`	定义文档主内容

增强型表单

HTML5新增input输入特性，改善更好的输入控制和验证

输入类型	描述
color	主要用于选取颜色
date	选取日期
datetime	选取日期（UTC时间）
datetime-local	选取日期（无时区）
month	选择一个月份
week	选择周和年
time	选择一个时间
email	包含email地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码的字段
search	用于搜索域
range	一个范围内数字值的输入域

HTML5也新增了五个表单元素

DOCTYPE

Tue, 24 Sep 2024 00:00:00 +0800

DOCTYPE 是一个声明，位于 HTML 文档的最顶部，指示浏览器使用哪种 HTML 或 XHTML 版本来渲染页面。它的主要作用是确保浏览器以标准模式解析文档，从而避免不同浏览器间的渲染差异。正确使用 DOCTYPE 可以提升页面的兼容性和可访问性。

<!DOCTYPE>声明应该位于HTML文档的第一行，紧接着是<html>标签。

例如，对于 HTML5 文档，你只需写：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document Title</title>
</head>
<body>
 <!-- 页面内容 -->
</body>
</html>

这个声明告诉浏览器该文档是一个HTML5文档。HTML5是最新的HTML标准，它包括了许多现代化的功能，如语义元素、表单控件、音频和视频等。

DOCTYPE 的作用有以下几个方面：

指定 HTML 版本：浏览器根据 DOCTYPE 的声明来确定使用哪个 HTML 版本来渲染页面，从而保证页面在不同的浏览器上显示一致性。
触发标准模式：在 HTML 中，如果省略了 DOCTYPE 声明，浏览器会进入混杂模式（Quirks mode），这种模式下浏览器的渲染方式与早期的浏览器相同，可能导致页面的显示出现不可预测的错误。而指定了 DOCTYPE 声明，则会触发标准模式（Standards mode），使得浏览器按照 HTML 规范的要求进行页面渲染，从而保证页面的稳定性和可靠性。
供浏览器和开发人员参考：DOCTYPE 声明还包含了有关 HTML 文档的元信息，例如所使用的 DTD（文档类型定义），以及其他的元数据信息，这些信息可以供浏览器和开发人员参考，帮助开发人员更好地了解和掌握 HTML 语言的特点和规范。
提高网页加载速度：指定 DOCTYPE 声明可以帮助浏览器更快地加载网页，因为浏览器知道要使用哪种渲染模式，从而更快地解析 HTML 文档。
避免代码错误：指定 DOCTYPE 声明可以帮助开发人员在编写 HTML 代码时遵循标准，避免一些常见的代码错误，例如忘记关闭标签或者使用非法的属性和元素等等。

除了HTML5的<!DOCTYPE>声明之外，还有一些其他版本的HTML和XHTML文档类型声明。这里是一些例子：

1. HTML 4.01 Strict：

语义化

Tue, 24 Sep 2024 00:00:00 +0800

HTML 语义化是什么？

HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。
CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。

为什么需要语义化？

有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。
可读性和可维护性：使用语义化的代码可以增强代码的可读性和可维护性，有利于开发人员理解和维护代码。同时，遵循 W3C 标准的团队可以遵循相同的标准，减少差异化，提高团队的效率和协调能力。
提高可访问性：语义化可以提高网页的可访问性，让页面更容易被搜索引擎、辅助技术（如屏幕阅读器）解析和理解，让更多的人能访问和理解网页。
可间接提升网页的性能：在传统的 HTML 代码中，有时候会存在一些重复的标签和属性，导致代码冗余。使用语义化的 HTML 代码，可以减少这种冗余，让代码更加简洁和高效。
面向未来的 HTML ，浏览器在未来可能提供更丰富的支持。

一些常用的语义化标签及使用场景

布局相关的语义化标签：

<header> 标签：用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息；作用是为页面提供附加的信息或功能，以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。
<aside> 标签：用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。
<section> 标签：用于表页面中的一个独立部分，具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ；并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。
<nav> 标签：用于表示导航菜单，包括主导航、子导航、面包屑导航等。这个标签通常包含链接（<a> 标签）来指向其他页面或网站的部分。
<footer> 标签：用于表示文档的页脚，通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部，并且只应该出现一次。
<main> 标签：用于表示页面中的主要内容区域，是所有主要内容（包括头部、尾部和侧边栏）的容器。每个<main>元素都应该包含独特的内容，这部分内容在页面上是唯一的，且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。
<address> 标签：用于表示联系信息，通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。

举个栗子🌰：

<body>
 <!-- 页面的头部 -->
 <header>
 <h1>欢迎来到我的网站</h1>
 <p>这是网站的标题，用于展示网站的核心信息。</p>
 </header>
 <!-- 导航菜单 -->
 <nav>
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">产品</a></li>
 <li><a href="#">联系我们</a></li>
 </ul>
 </nav>
 <!-- 主要内容区域 -->
 <main>
 <!-- 第一个内容区块 -->
 <section></section>
 <!-- 第二个内容区块 -->
 <section>
 <aside></aside>
 <aside></aside>
 </section>
 </main>
 <!-- 联系信息 -->
 <address>
 <p><strong>联系信息：</strong></p>
 <p>电话：(123) 456-7890</p>
 <p><a href="mailto:example@email.com">example@email.com</a></p>
 </address>
 <!-- 页面的底部 -->
 <footer>
 &copy; 2023 My Website. All rights reserved. | 设计：北冥有锅
 </footer>
</body>

文本相关语义化标签：

figure 和 figcaption、del 和 ins

<figure> 标签：用于处理带有某些嵌入式内容的一组图，照片，代码清单等。表示独立的内容单元，它可以包含任何与主内容相关的附加内容，包括但不限于：文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性，确保它与主内容是相关的，并且不依赖于主内容而存在。
<figcaption> 标签：<figcaption>标签是<figure>元素的一部分，并且它是可选的。它应该包含在<figure>标签内部，作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。
<del> & <ins> 标签：
<del> 用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。
<ins> 用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。
<ins> 与<del> 一起使用时更有用，他们都可以使用CSS属性进行更改。
<ins> 与<del> 的特定属性：
cite:URL => 它指定资源的URL，该URL解释更改或删除文本的原因。
datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。

举个栗子🌰：

HTML 元素分类

Tue, 15 Oct 2024 00:00:00 +0800

根据标签的功能和表现，HTML 标签主要分为以下几类：

1. 块级元素（Block-level Elements）

块级元素通常独占一行，并且可以包含其他块级元素或内联元素，能够扩展至父容器的全部宽度。

特点：
独占一行，默认情况下会在前后产生换行。
宽度默认是父元素的 100%。
可以设置 width、height、margin、padding 等布局属性。
常见的块级元素：
<div>：无特定语义的容器，常用于布局。
<p>：段落标签。
<h1> 到 <h6>：标题标签，按重要性递减。
<ul>、<ol>、<li>：无序、有序列表及其项。
<header>、<footer>、<section>、<article>：HTML5 语义化标签，分别表示页头、页尾、内容区块等。
示例：

<div>
 <h1>标题</h1>
 <p>这是一个段落。</p>
</div>

2. 内联元素（Inline Elements）

内联元素与其他元素排列在同一行，且只占用其内容所需的宽度。它们不会独占一行，不能包含块级元素。

特点：
与相邻的内联元素排列在同一行。
仅占据自身内容的宽度，不会在前后产生换行。
不能设置 width、height（无效），但可以设置 padding 和 margin，只影响水平方向。
常见的内联元素：
<span>：无特定语义的容器，常用于局部样式。
<a>：超链接。
<strong>：表示强调的文本，通常加粗显示。
<em>：表示强调的文本，通常斜体显示。
<img>：图像标签。
<input>：表单输入元素。
示例：

<p>这是一个段落，<a href="#">点击这里</a> 了解更多。</p>

3. 内联块元素（Inline-block Elements）

内联块元素是同时具备内联元素和块级元素特性的元素。它们在布局上是内联的，但表现为块状元素，因此可以设置宽高。

特点：
与其他元素排列在同一行，但可设置宽度和高度。
不会自动换行。
常见的内联块元素：
<img>：虽然图像显示在行内，但可以设置 width 和 height。
<button>：按钮。
<input type="text">：文本输入框。
CSS 设置为 display: inline-block 的元素。
示例：

<span style="display: inline-block; width: 100px; height: 100px; background: red;"></span>

4. 自闭合元素（Self-closing Elements）

自闭合元素是没有闭合标签的元素，因为它们没有任何内容。这类标签通常用于插入内容或进行控制，而不包含其他内容。

HTML 常见属性

Tue, 15 Oct 2024 00:00:00 +0800

HTML 元素的属性是用于控制元素行为或样式的附加信息。

以下是一些常见的 HTML 属性：

1. 通用属性（Global Attributes）

这些属性几乎可以应用于所有 HTML 元素：

id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。

<div id="main"></div>

class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。

<div class="container header"></div>

style：为元素设置内联样式。

<div style="color: red;"></div>

title：为元素提供额外信息，当鼠标悬停在元素上时显示。

<button title="Click me!">Click</button>

data-*：自定义属性，用于存储私有数据，以 data- 为前缀，可以通过 JavaScript 访问。

<div data-user-id="123"></div>

2. 事件属性（Event Attributes）

这些属性用于处理元素上的事件：

onclick：定义单击事件处理函数。

<button onclick="alert('Clicked!')">Click me</button>

onmouseover：鼠标悬停时触发的事件。

<div onmouseover="console.log('Mouse over')"></div>

onkeydown：按下键盘时触发的事件。

<input type="text" onkeydown="handleKeyDown(event)">

3. 表单相关属性

type：定义输入框类型，例如 text、password、email 等。

<input type="text">

name：定义表单元素的名称，用于表单提交。

<input type="text" name="username">

value：定义表单元素的默认值。

<input type="text" value="Default value">

placeholder：为输入框提供占位符文本，提示用户输入。

<input type="text" placeholder="Enter your name">

disabled：禁用输入元素，使其不可交互。

<input type="text" disabled>

required：标记表单元素为必填项。

<input type="text" required>

4. 链接和资源加载属性

href：用于指定超链接的目标 URL。

<a href="https://example.com">Go to example.com</a>

src：指定图像、脚本或其他资源的路径。

<img src="image.jpg" alt="Image description">

alt：为图像提供替代文本，图像无法加载时显示。

<img src="image.jpg" alt="Alternative text">

rel：指定链接与目标文档的关系，常用于 link 标签和 a 标签。

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

target：定义链接的打开方式，常用值包括 _self（当前窗口）和 _blank（新窗口）。

<a href="https://example.com" target="_blank">Open in new tab</a>

5. 多媒体属性

controls：为 <audio> 或 <video> 元素添加播放控件。

<video src="video.mp4" controls></video>

autoplay：自动播放音频或视频。

<audio src="audio.mp3" autoplay></audio>

loop：音频或视频播放完后重新开始播放。

<video src="video.mp4" loop></video>

muted：自动静音视频或音频。

<audio src="audio.mp3" muted></audio>

6. 图像和媒体相关属性

width 和 height：定义图像或视频的宽度和高度。

<img src="image.jpg" width="200" height="100">

7. iframe 属性

src：定义嵌入的网页 URL。

<iframe src="https://example.com"></iframe>

sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。

<iframe src="https://example.com" sandbox></iframe>

8. 语义化属性

role：为屏幕阅读器和辅助技术提供语义化描述。

<div role="navigation"></div>

9. 布局和可访问性属性

hidden：隐藏元素，元素不会显示在页面中。

<div hidden>This content is hidden</div>

tabindex：定义元素的 tab 键导航顺序。

<button tabindex="1">First</button>
<button tabindex="2">Second</button>

常见考点

1. 全局属性（Global Attributes）

class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？
id：唯一标识元素，id 的作用和注意事项。
style：内联样式的作用及其优先级。
title：为元素提供额外信息（鼠标悬停时显示）。
data- 属性*：自定义数据属性，如何在 JavaScript 中访问 data-* 属性？

2. 事件属性（Event Attributes）

onclick、onmouseover 等事件处理属性。
如何使用事件属性进行事件绑定？
事件属性和 JavaScript 事件监听器（addEventListener）的区别和应用场景。

3. 表单属性

name：用于提交表单数据时作为键名。
action：表单提交的目标 URL。
method：表单的提交方式（GET 或 POST）。
autocomplete：是否启用表单自动填充。
required、pattern、min/max 等 HTML5 校验属性。

4. 输入控件相关属性

value：为输入控件设置默认值。
placeholder：为输入框提供提示文本。
disabled：禁用输入控件。
readonly：只读属性，控件不能被修改。
maxlength/minlength：输入字符长度的限制。
accept：文件上传时，限制允许的文件类型（适用于 <input type="file">）。

5. 媒体元素属性

src：媒体文件的路径（适用于 <img>、<audio>、<video> 等）。
alt：图片无法加载时显示的替代文本。
controls：是否为媒体文件显示默认控制条。
autoplay：媒体文件是否自动播放。
loop：媒体文件是否循环播放。
muted：媒体文件是否静音。

6. 超链接相关属性

href：链接目标的 URL。
target：定义链接打开的方式（如 _blank 打开新窗口）。
download：允许下载链接资源，而不是导航到资源。
rel：定义链接与当前文档的关系（如 nofollow、noopener）。

7. iframe 属性

src：嵌入的文档或网页的 URL。
sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。
allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。

8. 图像和图形属性

srcset：为不同设备提供不同分辨率的图像资源。
sizes：配合 srcset，定义不同视口下图像显示的尺寸。
usemap：指定图片使用的图像映射。
height/width：定义图片或其他元素的高度和宽度。

9. meta 标签属性

charset：指定文档的字符编码（如 UTF-8）。
name 和 content：为文档提供元信息（如 description, viewport）。
http-equiv：配合 content，定义 HTTP 头信息（如 refresh, Content-Type）。

10. 无障碍相关属性

aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。
role：指定元素的功能角色，增强无障碍性。

11. iframe 和图片的懒加载

loading=“lazy”：为图片和 iframe 启用懒加载。

12. 语言和方向属性

lang：指定元素或页面的语言（如 lang="en"）。
dir：指定文本的书写方向（如 ltr 左到右，rtl 右到左）。

表单控件

Wed, 25 Sep 2024 00:00:00 +0800

01、`<form>`表单

表单是比较重要的HTML元素，主要作用是向服务端提交数据。比如结合表单元素input使用，通过内部的button按钮提交（type=“submit”）表单数据。

元素/属性	描述	值/备注
`<form>`	表单元素
action	提交表单的目标（服务端）地址url
method	提交数据的方式，就是数据传输的方式	get：通过URL提交数据 `url?uname=1&age=2`；post，通过HTTP表单数据提交，键值格式。
target	提交数据时打开action url的方式	_self：当前窗口（默认值）；_blank：新窗口
enctype	编码类型（encode type），规定了form表单在发送到服务器时候编码方式，不常用。	application/x-www-form-urlencoded：编码所有字符（默认）；multipart/form-data ：混合类型，表单中有文件上传时使用；text/plain：纯文体，空格转换为 “+” 加号，不对特殊字符编码
submit()	提交表单数据，通过js代码调用
`<fieldset>`	表单分组，默认样式：一个框	便于表单样式管理的语义化元素
form	from的id，当`<fieldset>`不在form中时
disabled	整个分组都不可用
`<legend>`	作为`<fieldset>`的标题，显示在框上	（legend /ˈledʒənd/ 铭文、图例）

<style>
 #form fieldset {
 border: 1px solid skyblue;
 padding: 20px 10px;
 border-radius: 5px;
 text-align: center;
 margin: 10px 0px;
 }
 #form fieldset legend {
 font-size: 1em;
 border: 1px solid rgb(236, 175, 43);
 border-radius: 1em;
 padding: 3px 15px;
 }
</style>
<form id="form" action="#" target="_self" method="post">
 <fieldset>
 <legend>登录</legend>
 <input type="text" name="uname" placeholder="请输入用户名" required maxlength="36">
 <input type="password" name="upwd" required maxlength="12" placeholder="输入密码">
 <input type="submit" value="submit-登录">
 </fieldset>
</form>

📢注意：<form>提交数据时参数名为表单元素的name，因此表单控件须设置name属性。

meta 标签

Tue, 05 Nov 2024 00:00:00 +0800

概览

meta标签一般放在整个html页面的head部分，在MDN中对他这样定义：

meta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。

是不是感觉看起来很抽象？说白了就是为了传达信息。

先看看meta 元素定义的元数据的类型：

如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。
如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
如果设置了 charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

name属性

name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

author

用来表示网页的作者的名字，例如某个组织或者机构。

<meta name="author" content="aaa@mail.abc.com">

description

是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例：

keywords

与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。还是以头条和taobao为例

viewpoint

为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。

可能你也发现了，我们在vscode中自动生成html的代码片段时，会自动生成：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width用来设置 viewport 的宽度为设备宽度;

initial-scale为设备宽度与 viewport 大小之间的缩放比例。

robots

表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。

它的content可以为：

all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
none:搜索引擎讲忽略此网页
index:搜索引擎索引此网页
follow:搜索引擎继续通过此网页的链接索引搜索其它的网页

renderer

用来指定双核浏览器的渲染方式，比如360浏览器，我们可以通过这个设置来指定360浏览器的渲染方式

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv

http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

http-equiv 所有允许的值都是特定 HTTP 头部的名称，

响应式图片

Fri, 27 Sep 2024 00:00:00 +0800

响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

本知识点的主要内容有：

为什么要使用响应式图片
怎么实现响应式图片

1、为什么要使用响应式图片

假如有一张图片的显示宽度为200px，那么，它在 1x（即设备像素比为 1 的显示器）的显示器上，是占了 200 个物理像素（即实际所占的像素）；它在 2x 的显示器上，实际上是占了 400 个物理像素；在 3x 的显示器上，实际上是占了 600 个物理像素；在 4x 的显示器上就是占了 800 个物理像素。

如果这个图片只提供 200 像素的尺寸，那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本，那么在 1x~3x 的设备上会显得多余，因为加载时间会相较长，所以我们要使用响应式图片。

再比如一个场景，相同的banner，在电脑上需要使用大图，但是手机上面使用小图，不然会造成手机上加载慢浪费流量等问题，这也可以使用响应式图片来解决。

2、实现方法

css3 media query

一个办法是使用backgound-image结合媒体查询，如下所示：

.banner{
 background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
 background-image: url(/static/small.jpg);
}

这种方法的缺点是对SEO不太友好，因为如果使用img标签还可以写个alt属性。

picture标签

<picture>
 <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
 <source srcset="banner_w800.jpg" media="(max-width: 800px)">
 <img src="banner_w800.jpg" alt="">
</picture>

如上，如果页面宽度大于800px（PC），则加载大图，而在手机上加载小图。这样写浏览器就只会加载source里面的一张图片。但是如果是用js动态插进去的，它还是会去加载两张，只有写在html里面加载初始化页面的时候才只加载一张。

picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的，picture和source是不会进行layout的，它们的宽和高都是0。

另外使用source，还可以对图片格式做一些兼容处理：

<picture>
 <source type="image/webp" srcset="banner.webp">
 <img src="banner.jpg" alt="">
</picture>

webp在保持同等清晰度的情况下，体积可以减少一半，但是目前只有Chrome支持，Safari和firefox一直处于实验阶段，所以其它的浏览器如firefox将会加载jpg格式的照片：

多媒体技术

Fri, 27 Sep 2024 00:00:00 +0800

对于大多数前端工程师来说，音视频技术是一个比较少涉足的领域，

本知识点主要介绍流媒体技术中的文本、图形、图像、音频和视频多种理论知识，涉及到播放器、web媒体技术、主流框架等内容。

一、音视频基础

1.1 视频

1.1.1 基础概念

码率	单位时间内取样率越大，精度就越高，处理出来的文件就越接近原始文件。
帧率	对视频来说，帧率对应这观看卡顿。帧率越高，流畅度越高，低帧率会造成视觉卡顿。
压缩率	经过压缩后文件的大小 / 原始文件的大小 * 100% = 压缩率。编码压缩越小越好，但压得越小，解压时间
分辨率	用于度量图像内数据量多少的一个参数，和视频清晰度息息相关。

1.1.2 视频容器格式

容器格式相信大家经常见到：
MP4、AVI、FLV、TS/M3U8、WebM、OGV、MOV…

1.1.2 视频编码格式

H.264	目前最流行的编码格式。
H.265	新型的编码格式，高效的视频编码。用来以替代H.264/AVC编码标准。
VP9	VP9是WebM Project开发的下一代视频编码格式。VP9支持从低比特率压缩到高质量超高清的所有Web和移动用例，并额外支持10/12位编码和HDR
AV1	AOM（Alliance for Open Media，开放媒体联盟）制定的一个开源、免版权费的视频编码格式。AV1是google制定的VP9标准的继任者，也是H265强有力的竞争者。

1.2 音频

1.2.1 基础概念

采样率	音频采样率是指录音设备在一秒钟内对声音信号的采样次数，采样频率越高声音的还原就越真实越自然。
采样大小	一秒钟所采的样本数为比特率，每个样本中信息的比特数就是位深，即采样精度，单位为Bit。
比特率	指每秒传送的比特(bit)数，又称数据信号速率。单位为比特/秒、千比特/秒或兆比特/秒。比特率越高，表示单位时间传送的数据就越多。
压缩率	原始音频数据与通过PCM等压缩编码技术压缩后的数据大小的比率

1.2.2 音频容器格式

音频格式也比较常见：WAV、AIFF、AMR、MP3、Ogg…

1.2.3 音频编码格式

PCM	脉冲编码调制(Pulse Code Modulation,PCM)，PCM是数字通信的编码方式之一。
AAC-LC(MPEG AAC Low Complexity)	低复杂度编码解码器（AAC-LC — 低复杂度高级音频编码）是低比特率、优质音频的高性能音频编码解码器。
AAC-LD	（又名AAC低延迟或MPEG-4低延迟音频编码器），为电话会议和OTT服务量身打造的低延迟音频编解码器
LAC（Free Lossless Audio Codec）	免费无损音频编解码器。是一套著名的自由音频压缩编码，其特点是无损压缩。 2012年以来它已被很多软件及硬件音频产品（如CD等）所支持。

1.3 常见标签

1.3.1 `<audio>` 元素

1.3.1.1 基本用途

<audio> 元素用于在网页中嵌入音频内容。它可以播放音乐、播客、音效等。

Canvas 和 SVG

Wed, 09 Oct 2024 00:00:00 +0800

1.Canvas

Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。

工作方式

Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。

常用属性

属性	效果
`fillStyle`	填充颜色。默认为黑色
`strokeStyle`	描边颜色。默认为黑色
`lineWidth`	线条宽度。默认为 1 像素
`lineCap`	线条末端的样式,可选值有 butt、round 和 square。默认为 butt
`lineJoin`	线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。
`miterLimit`	线条相交处的最大斜接长度。默认为 10 像素
`globalAlpha`	绘制的透明度。默认为 1（不透明）
`shadowColor`	阴影颜色。默认为黑色
`shadowOffsetX`、`shadowOffsetY`	阴影的偏移量和模糊程度
`shadowBlur`	模糊程度

优缺点

优点

基于矢量绘制，图形可以自由缩放而不失真
具有良好的跨浏览器兼容性
通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互

缺点

无法处理复杂的交互事件、不支持跨域图像等

使用实例

这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。

Web Storage

Wed, 09 Oct 2024 00:00:00 +0800

一、简介

浏览器本地存储是指浏览器提供的一种机制，允许 Web 应用程序在浏览器端存储数据，以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式：localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。

二、localStorage 和 sessionStorage

2.1、区别

localStorage 和 sessionStorage 的主要区别是生命周期，具体区别如下：

	localStorage	sessionStorage
生命周期	持久化存储：除非自行删除或清除缓存，否则一直存在	会话级别的存储：浏览器标签页或窗口关闭
作用域	相同浏览器，同域名，不同标签，不同窗口	相同浏览器，同域名，同源窗口
获取方式	window.localStorage	window.sessionStorage
存储容量	5M	5M

容量限制的目的是防止滥用本地存储空间，导致用户浏览器变慢。

2.2、浏览器兼容性

1）现在的浏览器基本上都是支持这两种 Storage 特性的。各浏览器支持版本如下：

	Chrome	Firefox	IE	Opera	Safari	Android	Opera Mobile	Safari Mobile
localStorage	4	3.5	8	10.5	4	2.1	11	iOS 3.2
sessionStorage	5	2	8	10.5	4	2.1	11	iOS 3.2

2）如果使用的是老式浏览器，比如Internet Explorer 6、7 或者其他，就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以 localStorage 为例：

跨域通信

Mon, 14 Oct 2024 00:00:00 +0800

什么是跨域

在了解跨域之前，我们必须要了解一下同源策略。跨域问题其实就是浏览器的同源策略造成的。

同源策略

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。

跨源资源共享（[CORS]，或通俗地译为跨域资源共享）是一种基于 [HTTP] 头的机制，该机制通过允许服务器标示除了它自己以外的其他[源] （域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

为什么会产生跨域

下表给出了与 URL wmq.com/dir/page.ht… 的源进行对比的示例:

URL	是否跨域	原因
wmq.com/dir/page.ht…	同源	完全相同
wmq.com/dir/inner/a…	同源	只有路径不同
wmq.com/secure.html	跨域	协议不同
wmq.com:81/dir/etc.htm…	跨域	端口不同 ( http:// 默认端口是80)
news.company.com/dir/other.h…	跨域	主机不同

同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。

同源政策主要限制了三个方面：

当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

有哪些解决跨域的办法

CORS

CORS: 通过设置服务器端的响应头来允许跨域请求。这需要在服务器端进行配置，以允许特定的来源访问资源。例如，在Node.js的Express框架中，可以使用以下代码来设置CORS：

const express = require('express');
const app = express();

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源访问
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的请求头
 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法
 next();
});

// 其他路由和中间件

app.listen(3000, () => {
 console.log('Server is running on port 3000');
});

减少OPTIONS请求次数

在跨域请求中，浏览器会自动处理一些非简单请求的预检流程，这包括"预检请求"（也被称为CORS预检请求）和"OPTIONS请求"。预检请求是发起一个HTTP OPTIONS请求到服务器，以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的，但有时这种额外的请求会导致性能问题。

表单验证

Mon, 14 Oct 2024 00:00:00 +0800

HTML 表单是用于收集用户输入数据的重要元素，通常用于提交到服务器进行处理。它包括一系列控件，如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义，用户可以通过这些控件与网页进行交互。

1. 基础结构

表单通过 <form> 标签创建，表单的 action 属性定义数据提交的目标 URL，method 属性定义提交方式（如 GET 或 POST）。

<form action="/submit" method="POST">
 <input type="text" name="username">
 <input type="submit" value="Submit">
</form>

2. 表单控件

HTML 表单提供了多种用户输入控件：

文本输入 (<input type="text">, <textarea>)
密码输入 (<input type="password">)
单选框和复选框 (<input type="radio">, <input type="checkbox">)
下拉列表 (<select>)
按钮 (<button>, <input type="submit">)
文件上传 (<input type="file">)
隐藏输入 (<input type="hidden">)

3. 表单的属性

action：指定表单数据提交到的 URL。
method：定义提交方式，常用 GET（将数据附在 URL 后）和 POST（将数据放入 HTTP 请求体中）。
enctype：指定数据的编码类型，常用于文件上传（如 multipart/form-data）。
autocomplete：启用或禁用浏览器的自动完成功能。

4. 表单校验

HTML5 引入了许多新的表单校验功能，能够减少 JavaScript 校验代码的复杂度。校验功能包括：

实体字符（转义字符）

Tue, 15 Oct 2024 00:00:00 +0800

HTML 的实体字符（HTML Entities）是用于显示某些特殊字符或符号的编码形式。

HTML 中某些符号具有特殊含义，例如 <, >, & 等字符不能直接在网页内容中使用，所以需要使用实体字符来表示它们。

常见的 HTML 实体字符

空格和控制字符

 ：空格字符 (non-breaking space)

&nbsp; <!-- 表示一个空格 -->

<：小于号 <

&lt;div&gt; <!-- 表示 <div> -->

>：大于号 >

&gt;/div&gt; <!-- 表示 </div> -->

&：与符号 &

&amp; <!-- 表示 & -->

"：双引号 "

&quot;Hello&quot; <!-- 表示 "Hello" -->

'：单引号 '

&apos;Hello&apos; <!-- 表示 'Hello' -->

数学符号

+：加号 +
−：减号 −
×：乘号 ×
÷：除号 ÷

货币符号

&dollar;：美元符号 $
€：欧元符号 €
£：英镑符号 £
¥：日元符号 ¥

其他常见符号

©：版权符号 ©
®：注册商标符号 ®
™：商标符号 ™
§：章节符号 §
°：度数符号 °

希腊字母

α：α
β：β
γ：γ
δ：δ

为什么需要实体字符？

避免 HTML 解析冲突：例如 <, >, & 等符号在 HTML 中有特定的用途，用实体字符可以避免冲突。
显示特殊符号：例如版权符号、商标符号或货币符号等，不能直接在键盘上输入，使用实体字符可以确保正确显示。

常见考点

1. HTML 实体字符的定义与作用

什么是 HTML 实体字符？为什么需要使用它们？
实体字符用于在 HTML 中显示特殊符号（如 <, >, &, " 等）或不可见字符（如空格、换行符等），避免与 HTML 语法冲突。

2. 常见的 HTML 实体字符

<：小于号 <
>：大于号 >
&：与符号 &
"：双引号 "
'：单引号 '
 ：不间断空格

3. Unicode 和 ASCII 编码的实体字符

HTML 支持通过 &#xNNNN;（十六进制）或 &#NNNN;（十进制）表示 Unicode 字符。例如：
- ♥ 或 ♥ 表示 ♥
考察点可能涉及通过实体字符显示 Unicode 表情符号、语言字符等。

4. 转义字符

在 HTML 中如何使用实体字符进行转义？
为什么需要转义符号（如 <, >, &）？特别是在 HTML 元素内嵌 JavaScript 或样式时需要避免歧义。
安全性方面的考量，尤其是防止 XSS（跨站脚本攻击）。

5. 空白字符

 （不间断空格）：防止自动换行或保留多个空格。
&ensp; 和 **&emsp;**：半角和全角空格符号。
实体空白符在排版和布局中的应用（如对齐、占位）。

6. 其他常见实体字符

货币符号：如 ¥（¥）、€（€）。
数学符号：如 ±（±）、×（×）、÷（÷）。
特殊符号：如 ©（©）、®（®）、™（™）。

7. HTML5 实体字符扩展

HTML5 中新增的一些实体字符，如：
- **≤**（≤）和 ≥（≥）
- •（•）用于列表符号
- …（…）省略号

8. 实体字符与浏览器兼容性

浏览器如何处理不支持的实体字符？
考察点可能涉及浏览器对不同编码的支持，以及如何确保兼容性。

9. HTML 实体字符与国际化

如何通过实体字符支持多语言文本？
考察 Unicode 与实体字符在国际化中的应用，如如何使用实体字符表示非 ASCII 字符。

10. HTML 实体字符在输入表单中的应用

在表单中，如何防止特殊字符输入导致 HTML 注入攻击？
使用实体字符保护表单数据的完整性和安全性。

离线存储

Wed, 16 Oct 2024 00:00:00 +0800

HTML5 离线存储是指通过 Web Storage API 提供的一种在客户端本地存储数据的机制，主要有两种方式：localStorage 和 sessionStorage。与传统的 Cookie 相比，Web Storage 提供了更大容量、灵活性，并且数据不会随着 HTTP 请求自动发送到服务器，这可以优化性能和安全性。此外，HTML5 还支持 离线应用缓存（Application Cache） 和 IndexedDB，用于更加复杂的数据存储需求和离线应用。

工作原理

HTML5 的离线存储主要通过以下几个机制来实现数据存储和访问：

localStorage：一种持久性存储机制，数据存储在用户的浏览器中，即使关闭浏览器或重新加载页面，数据也不会丢失，除非明确被删除。其特点是跨页面、跨会话存储数据。
sessionStorage：会话级别的存储机制，只在当前页面的会话期间有效。当会话结束或浏览器窗口关闭时，数据会自动删除。其特点是只能在当前窗口或标签页中存储数据，不能跨窗口或标签页共享。
Application Cache（已被 Service Worker 替代）：允许开发者将网站的某些资源缓存到本地，使得用户即使在离线的情况下也能访问特定页面。虽然该机制已被弃用，但它曾经是实现离线访问的核心。
IndexedDB：一种更为复杂的浏览器内置数据库，支持存储结构化数据，如对象和文件。它适用于更大规模的数据存储需求，并且允许通过索引进行高效的查询和数据操作。

使用方式

1. localStorage

特点：持久性存储，浏览器关闭后数据依然存在，除非手动清除。
使用方式：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
let value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有 localStorage
localStorage.clear();

2. sessionStorage

特点：仅在当前会话期间有效，浏览器关闭或页面重新加载后数据会被清除。
使用方式：

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue');

// 获取数据
let sessionValue = sessionStorage.getItem('sessionKey');

// 删除数据
sessionStorage.removeItem('sessionKey');

// 清空所有 sessionStorage
sessionStorage.clear();

3. IndexedDB

特点：适合存储大量的结构化数据，支持异步 API 和事务。
使用方式： IndexedDB 的使用较为复杂，通常涉及打开数据库、创建事务、存储和检索数据等操作。一个简单的示例如下：

let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
 let db = event.target.result;
 let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
 let db = event.target.result;
 let transaction = db.transaction(['myObjectStore'], 'readwrite');
 let objectStore = transaction.objectStore('myObjectStore');
 objectStore.add({ id: 1, name: 'John Doe' });
};

4. Application Cache（弃用）

特点：通过 manifest 文件指定需要缓存的资源，允许在离线时访问应用。
使用方式：在 HTML 文档中指定 manifest 文件：

<html manifest="app.manifest">

然后在 app.manifest 文件中列出需要缓存的资源：

Web Workers

Wed, 16 Oct 2024 00:00:00 +0800

在浏览器和服务器上，JavaScript程序在单个处理线程上运行。这意味着程序一次只能做一件事。简单来说，你的新电脑可能有32核的CPU，但当JavaScript应用程序运行时，其中31个核心都处于空闲状态。

JavaScript的单线程避免了复杂的并发情况。如果两个线程同时尝试进行不兼容的更改会发生什么？例如，一个浏览器可能在另一个线程重定向到新的URL并从内存中清除该文档时正在更新DOM。Node.js、Deno和Bun都继承了浏览器的单线程引擎。

这不是JavaScript特定的限制。大多数语言都是单线程的，但像PHP和Python这样的Web选项通常在Web服务器上运行，为每个用户请求启动解释器的新线程的不同实例。这会消耗资源，因此Node.js应用程序通常定义自己的Web服务器，该服务器在单个线程上运行，并异步处理每个传入的请求。

Node.js的方法在处理高流量负载时可能更高效，但长时间运行的JavaScript函数会消耗效率收益。

在我们演示如何使用Web Workers解决执行速度问题之前，我们首先要了解JavaScript的运行方式以及为什么长时间运行的函数会引发问题。

JavaScript非阻塞I/O事件循环

你可能会认为一次只做一件事会导致性能瓶颈，但JavaScript是异步的，这就避免了大部分单线程处理问题，因为：

不需要等待用户在网页上点击按钮。浏览器触发一个事件，当点击发生时调用JavaScript函数。
不需要等待Ajax请求的响应。浏览器触发一个事件，在服务器返回数据时调用JavaScript函数。
Node.js应用程序不需要等待数据库查询的结果。运行时在数据可用时调用JavaScript函数。

JavaScript引擎运行一个事件循环。一旦代码的最后一条语句执行完毕，运行时会循环回来，检查是否有未完成的定时器、待处理的回调函数和数据连接，然后根据需要执行回调函数。其他操作系统处理线程负责调用诸如HTTP请求、文件处理和数据库连接等输入/输出系统。它们不会阻塞事件循环。事件循环可以继续执行下一个在队列中等待的JavaScript函数。

实质上，JavaScript引擎的主要责任是运行JavaScript代码。操作系统处理所有其他可能导致引擎调用JavaScript函数的I/O操作。

长时间运行的JavaScript函数

JavaScript函数通常由事件触发。它们会进行一些处理，输出一些数据，并且大部分情况下会在毫秒级别内完成，以便事件循环可以继续运行。

不幸的是，一些长时间运行的函数可能会阻塞事件循环。想象一下，你正在开发自己的图像处理函数（如锐化、模糊、灰度化等）。异步代码可以从文件中读取（或写入）数百万字节的像素数据，这对JavaScript引擎影响很小。然而，处理图像的JavaScript代码可能需要几秒钟来计算每个像素。该函数会阻塞事件循环，直到它完成，其他JavaScript代码无法运行。

在浏览器中，用户将无法与页面进行交互。他们无法点击、滚动或输入，并且可能会看到一个“脚本无响应”的错误，其中有停止处理的选项。
对于Node.js服务器应用程序而言，情况更糟糕。在函数执行时，它无法响应其他请求。如果函数需要花费10秒钟来完成，那么在那个时间点访问的每个用户都必须等待最多10秒钟，即使他们没有处理图像。

你可以通过将计算拆分为较小的子任务来解决这个问题。下面的代码使用传递的imageFn函数，最多处理1,000个像素（从一个数组中）。然后，它使用1毫秒的setTimeout延迟调用自身。事件循环的阻塞时间较短，这样JavaScript引擎可以在迭代之间处理其他传入的事件：

// pass callback function, image processing function, and input image
// return an output image to a callback function
function processImage( callback, imageFn = i => {}, imageIn = [] ) {

 const chunkSize = 1000; // pixels to process per iteration

 // process first chunk
 let
 imageOut = [],
 pointer = 0;

 processChunk();

 // process a chunk of data
 function processChunk() {

 const pointerEnd = pointer + chunkSize;

 // pass chunk to image processing function
 imageOut = imageOut.concat(
 imageFn( imageIn.slice( pointer, pointerEnd ) )
 );

 if (pointerEnd < imageIn.length) {

 // process next chunk after a short delay
 pointer = pointerEnd;
 setTimeout(processChunk, 1);

 }
 else if (callback) {

 // complete - return output image to callback function
 callback( null, imageOut );

 }

 }

}

这种方法可以防止脚本无响应，但不总是切实可行的。单个执行线程仍然会执行所有的工作，即使CPU可能有更多的处理能力。为了解决这个问题，我们可以使用Web Workers。

地理定位

Wed, 16 Oct 2024 00:00:00 +0800

HTML5 提供了地理定位（Geolocation）API，用于获取用户的当前位置。通过这一功能，网页可以访问用户的地理位置信息，进而实现如地图服务、定位推荐、基于位置的广告等功能。该 API 主要依赖设备的 GPS、Wi-Fi、IP 地址、蓝牙等信息来确定位置。

Geolocation API 的基本用法

主要通过 navigator.geolocation 对象来访问地理位置信息，提供了以下三个方法：

getCurrentPosition(success, error, options) 获取用户的当前位置，一次性返回位置信息。
watchPosition(success, error, options) 持续监听用户的位置变化，并且实时返回新的位置信息。
clearWatch(id) 取消 watchPosition 监听的位置变化。

方法的参数说明

success(position)：成功获取位置时的回调函数。position 对象包含位置信息，如经度、纬度、速度等。
error(error)：可选参数，获取位置失败时的回调函数。error 对象包含错误信息，如用户拒绝提供位置或获取超时等。
options：可选参数，包含配置选项，影响获取位置的精度、超时时间等。

使用示例

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(
 (position) => {
 const latitude = position.coords.latitude;
 const longitude = position.coords.longitude;
 console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
 },
 (error) => {
 console.error(`Error Code = ${error.code}: ${error.message}`);
 },
 { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
 );
} else {
 console.log("Geolocation is not supported by this browser.");
}

获取到的 `position` 对象

position 对象包含用户的位置信息，主要属性包括：

拖放API

Thu, 17 Oct 2024 00:00:00 +0800

HTML5 中的拖拽（Drag and Drop，简称 DnD）功能为网页元素提供了原生的拖放支持。通过 HTML5 的拖放 API，开发者可以让元素变得可拖动，并实现拖拽和释放的交互效果。

HTML5 拖拽的基本原理

HTML5 拖拽操作的核心是 dragstart、dragover 和 drop 等事件。以下是拖拽的工作流程：

可拖动元素：使用 draggable="true" 使一个元素可被拖拽。
源元素触发拖拽：当用户点击并开始拖动可拖动元素时，触发 dragstart 事件。
拖拽中：拖拽过程中，目标区域会触发 dragover 事件。
释放元素：当用户释放被拖动的元素到目标区域时，目标会触发 drop 事件。

实现步骤

设置拖拽元素：使用 draggable="true" 使 HTML 元素可拖动。
监听拖拽事件：

dragstart：当拖拽开始时触发。
dragover：在拖拽过程中，拖动到可放置目标区域时持续触发。
drop：当拖动的元素被释放到目标区域时触发。

阻止默认行为：dragover 和 drop 事件默认情况下是禁止的，需要使用 event.preventDefault() 来阻止默认行为，从而允许放置元素。

拖拽的相关事件

dragstart：在拖动开始时触发，用来设置拖动数据（如拖动的数据类型和数据内容）。
dragend：拖动操作结束时触发，可以用来清理状态。
dragenter：当拖动的元素进入目标区域时触发。
dragover：当拖动元素在目标区域上方移动时持续触发，默认情况下不会触发 drop，因此需要通过 event.preventDefault() 来允许放置。
dragleave：当拖动的元素离开目标区域时触发。
drop：当拖动的元素释放到目标区域时触发，可以获取拖动的数据。

拖拽实例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HTML5 拖拽示例</title>
 <style>
 #dragElement {
 width: 100px;
 height: 100px;
 background-color: lightcoral;
 text-align: center;
 line-height: 100px;
 cursor: grab;
 }

 #dropZone {
 width: 200px;
 height: 200px;
 background-color: lightblue;
 margin-top: 20px;
 text-align: center;
 line-height: 200px;
 }
 </style>
</head>
<body>
 <div id="dragElement" draggable="true">拖拽我</div>
 <div id="dropZone">放置到这里</div>

 <script>
 // 获取元素
 const dragElement = document.getElementById('dragElement');
 const dropZone = document.getElementById('dropZone');

 // 拖拽开始事件
 dragElement.addEventListener('dragstart', function(event) {
 // 设置数据，类型和内容
 event.dataTransfer.setData('text', event.target.id);
 });

 // 拖拽过程中在目标上方移动时，必须阻止默认行为
 dropZone.addEventListener('dragover', function(event) {
 event.preventDefault();
 });

 // 放置事件
 dropZone.addEventListener('drop', function(event) {
 event.preventDefault(); // 阻止默认行为
 const data = event.dataTransfer.getData('text');
 const draggedElement = document.getElementById(data);
 event.target.appendChild(draggedElement); // 将拖动的元素放入目标区域
 });
 </script>
</body>
</html>

代码说明

拖拽元素：draggable="true" 使得 #dragElement 可拖动。
拖拽开始：dragstart 事件设置了拖拽的元素数据，存入 dataTransfer 对象中。
允许放置：dragover 事件通过 event.preventDefault() 允许拖拽元素放置在目标区域。
放置元素：drop 事件在目标区域中，通过 event.dataTransfer.getData() 获取拖动的数据并进行处理。

常见考点

1. 基本概念与原理

定义：HTML5 提供了内置的拖拽功能，通过 draggable 属性和 Drag and Drop API 实现元素拖放操作。
原理：拖拽功能依赖一系列事件，如 dragstart、drag、dragend、dragover、drop 等来实现拖放操作。

2. 如何启用拖拽

draggable 属性：默认情况下，HTML 元素是不可拖拽的。要启用拖拽，需要设置元素的 draggable="true"。

<div draggable="true">Drag me!</div>

事件绑定：考察点可能包括如何通过 dragstart 等事件处理拖拽行为。

const draggableElement = document.getElementById('draggable');
draggableElement.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'This is a draggable element');
});

3. Drag and Drop 的核心事件

dragstart：用户开始拖动时触发，通常用于设置拖拽的数据和外观。
drag：在拖动过程中持续触发，可用于动态更新拖拽效果。
dragend：拖动结束时触发，可以用于清除拖拽状态。
dragenter：被拖拽的元素进入可放置区域时触发。
dragover：在拖动元素悬停在放置区域时持续触发，通常需要调用 event.preventDefault() 来允许放置。
dragleave：当拖动元素离开放置区域时触发。
drop：用户放开被拖动的元素时触发，用于处理放置操作。

4. 数据传输

dataTransfer 对象：event.dataTransfer 是拖拽过程中传输数据的关键对象。常见考点包括如何通过 dataTransfer.setData() 和 dataTransfer.getData() 方法在 dragstart 和 drop 事件之间传递数据。

// dragstart 中设置数据
event.dataTransfer.setData('text', 'Dragged Data');

// drop 中获取数据
const data = event.dataTransfer.getData('text');

传输多种数据类型：考察如何传输不同的数据类型（如文本、URL、文件等）以及如何处理这些数据。

5. dropzone 区域的设置

允许放置元素：默认情况下，放置区域不会接受被拖拽的元素，需要在 dragover 事件中调用 event.preventDefault() 来显式地允许放置操作。

const dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', (event) => {
 event.preventDefault(); // 允许放置
});

6. 拖拽的样式处理

自定义拖拽效果：通过 event.dataTransfer.setDragImage() 设置自定义的拖拽图片，考察点可能包括如何替换默认的拖拽预览图。

event.dataTransfer.setDragImage(imageElement, offsetX, offsetY);

拖拽时的 CSS 样式：考察如何使用 CSS 类和事件配合，实现拖拽时的视觉效果。

.dragging {
 opacity: 0.5;
}

7. 跨页面或跨应用的拖拽

跨文档拖拽：考察是否了解如何处理跨 iframe 或浏览器窗口的拖拽。
拖拽文件：用户可以将外部文件（如从桌面拖动文件）拖入浏览器的 dropzone，需要处理 dataTransfer.files 属性。

const files = event.dataTransfer.files;

8. 拖拽与输入法的冲突

在移动设备上，拖拽和触摸事件可能存在冲突，因此考察点可能包括如何处理拖拽在移动端的实现或替代方案。

9. 可访问性

键盘可用性：默认拖拽操作主要依赖鼠标，因此考察点可能包括如何使拖拽操作可通过键盘导航，确保网站的无障碍性。
ARIA 支持：在实现拖拽功能时，如何使用 ARIA 属性为屏幕阅读器用户提供反馈是常见的可访问性考察点。

10. 兼容性

浏览器兼容性：HTML5 拖拽在不同浏览器中的支持情况不一致，尤其是在移动端，考察点可能包括如何处理浏览器兼容性问题，特别是在触摸设备上使用拖拽功能时的挑战。

11. 常见的应用场景

文件上传：通过拖拽文件进行上传是常见的考察场景，如何实现文件的拖放上传功能是常见问题。
可拖拽列表：如何通过拖拽重新排序列表项，如实现类似于 Trello 的拖放功能。
游戏和图形界面：拖放在交互式游戏或图形应用中被广泛使用，可能会考察如何通过拖拽元素实现复杂的交互效果。

12. 事件顺序

了解拖拽过程中的事件触发顺序也是一个重要的考察点，常见顺序为：dragstart -> drag -> dragenter -> dragover -> drop -> dragend。

13. 拖拽的取消

取消拖拽：通过调用 event.preventDefault() 可以阻止某些拖拽事件的默认行为，如取消 drop 事件。

14. 使用 JavaScript 框架实现拖拽

有些前端面试可能会考察如何利用 JavaScript 框架（如 React、Vue、Angular）实现拖拽交互，以及如何处理拖拽相关的状态管理和数据绑定。

全屏API

Thu, 17 Oct 2024 00:00:00 +0800

在 HTML 中，可以通过调用浏览器的全屏 API 实现页面或页面中的某个元素全屏显示。全屏 API 是 HTML5 提供的一项功能，允许将元素切换为全屏模式。

使用全屏 API 实现全屏

全屏 API 提供了以下常用方法和属性：

requestFullscreen()：请求将元素设置为全屏模式。
exitFullscreen()：退出全屏模式。
fullscreenElement：返回当前正在全屏显示的 DOM 元素，如果没有元素全屏，则返回 null。
fullscreenchange 事件：当全屏状态发生变化时触发，用来监听进入或退出全屏。

实现全屏的基本步骤

选择你希望全屏的元素。
使用 element.requestFullscreen() 方法来进入全屏。
使用 document.exitFullscreen() 来退出全屏模式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>全屏示例</title>
 <style>
 #fullscreenContent {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 margin: 50px auto;
 text-align: center;
 line-height: 100px;
 }
 </style>
</head>
<body>

 <div id="fullscreenContent">点击全屏</div>
 <button id="exitFullscreenBtn" style="display:none;">退出全屏</button>

 <script>
 const fullscreenContent = document.getElementById('fullscreenContent');
 const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');

 // 进入全屏模式
 fullscreenContent.addEventListener('click', function() {
 if (fullscreenContent.requestFullscreen) {
 fullscreenContent.requestFullscreen();
 } else if (fullscreenContent.mozRequestFullScreen) { // Firefox
 fullscreenContent.mozRequestFullScreen();
 } else if (fullscreenContent.webkitRequestFullscreen) { // Chrome, Safari and Opera
 fullscreenContent.webkitRequestFullscreen();
 } else if (fullscreenContent.msRequestFullscreen) { // IE/Edge
 fullscreenContent.msRequestFullscreen();
 }
 exitFullscreenBtn.style.display = 'inline-block';
 });

 // 退出全屏模式
 exitFullscreenBtn.addEventListener('click', function() {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else if (document.mozCancelFullScreen) { // Firefox
 document.mozCancelFullScreen();
 } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
 document.webkitExitFullscreen();
 } else if (document.msExitFullscreen) { // IE/Edge
 document.msExitFullscreen();
 }
 exitFullscreenBtn.style.display = 'none';
 });

 // 监听全屏状态变化
 document.addEventListener('fullscreenchange', () => {
 console.log('全屏状态发生变化');
 });
 </script>

</body>
</html>

代码解释

进入全屏：点击 #fullscreenContent 的 div 时，调用 requestFullscreen() 方法使该元素进入全屏模式。
退出全屏：点击按钮 #exitFullscreenBtn，调用 document.exitFullscreen() 退出全屏模式。
跨浏览器兼容性：由于部分浏览器的全屏 API 有不同的实现方法，代码中兼容了各个主流浏览器的实现（例如 Chrome, Firefox, Safari, Edge）。
监听全屏状态变化：使用 fullscreenchange 事件来监听当前全屏模式的变化，可以在进入或退出全屏时执行额外操作。

全屏 API 的一些注意事项

全屏 API 只能在用户交互（如点击或按键事件）后触发，不能通过脚本自动进入全屏模式，这是为了防止用户体验被打断。
不同浏览器的全屏 API 实现可能稍有不同，因此通常需要做一些兼容性处理。
在移动端设备上，全屏模式的行为可能与桌面端有所不同。

总结

HTML5 的全屏 API 提供了一种简单而直观的方法来让页面或元素进入全屏模式。通过 requestFullscreen() 方法可以将任意元素全屏显示，exitFullscreen() 则用来退出全屏模式。结合 fullscreenchange 事件可以对全屏状态进行监控，实现更加丰富的交互体验。

与 CSS/JS 的交互

Thu, 17 Oct 2024 00:00:00 +0800

HTML、CSS 和 JavaScript 是前端开发的三大基础技术，它们通过不同的方式相互作用，创建交互性良好的网页。

1. HTML 与 CSS 的交互

HTML 负责定义网页的结构，而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式：

<style> 标签：直接在 HTML 中嵌入 CSS 样式。这种方式将 CSS 写入到 HTML 文件中，但不推荐用于大型项目，因为这会导致样式与结构混杂在一起。

<style>
 h1 {
 color: red;
 }
</style>

<link> 标签：通过 <link> 标签引入外部 CSS 文件。这种方式通常用于大型项目中，将样式与结构分离，维护更加清晰。

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

内联样式：直接将样式属性写在 HTML 标签内。这种方式适合临时的小改动，但不推荐频繁使用，尤其在大型项目中不利于维护。

<h1 style="color: blue;">这是一个标题</h1>

2. HTML 与 JavaScript 的交互

JavaScript 负责操作和控制网页内容，主要与 HTML 进行交互以实现动态效果。以下是交互方式：

<script> 标签：通过 <script> 标签直接在 HTML 中嵌入 JavaScript 代码。此方法会在 HTML 中直接执行 JavaScript，适合小规模的脚本。

<script>
 alert('这是一个弹窗');
</script>

外部 JavaScript 文件：通过 <script> 标签引入外部 JavaScript 文件。这种方式将 JavaScript 逻辑与 HTML 分离，便于维护和重用。

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

DOM 操作：通过 JavaScript 操作 DOM（文档对象模型），动态更改 HTML 元素的内容和属性。例如：

<p id="text">这是原始文本</p>
<script>
 document.getElementById('text').innerText = '这是通过 JS 改变的文本';
</script>

事件监听：JavaScript 可以通过事件监听器响应用户的交互。例如：

<button id="btn">点击我</button>
<script>
 document.getElementById('btn').addEventListener('click', function() {
 alert('按钮被点击了');
 });
</script>

3. CSS 与 JavaScript 的交互

JavaScript 也可以与 CSS 进行交互，动态地控制页面的样式。常见的方法有：

SEO

Tue, 05 Nov 2024 00:00:00 +0800

🌻 前言

SEO 代表搜寻引擎最佳化/搜寻引擎优化(英文全名Search Engine Optimization，简称SEO)，是指通过了解搜寻引擎的自然排名的算法逻辑，以提高目标网站在有关搜寻引擎内排名的方式。

网站的 SEO 至关重要，它可以让你的网站获得更好的排名和流量，从而提高网站知名度。对于一些盈利的网站，做好seo，还可以以低成本提高投资回报率。

本文将为你带来非常全面的SEO方案🔥🔥🔥，当然了，网站SEO是长线工作，在做好一些基础的配置之后，更重要的是后期的维护，比如定期更新网站动态文章，不断寻找优质外链资源等🤌。

本文将以三个层面展开：

TDK优化
网站质量
SEO手段（10种手段）

❄️ 一、TDK优化

TDK是Title(页面标题)、Meta Description（页面描述）和Meta Keywords（页面关键词）的缩写，对网站的这三个信息的提炼是网站SEO的重要环节。

但是由于一些原因，各大主流搜索引擎基本都已经大大降低甚至移除了 <keywords> 对排名的影响。例如：

百度：几乎放弃了对标签的参考价值。参考：百度官方称：keywords这个meta标签已经被丢进历史垃圾堆了；
谷歌：目前几乎已经不考虑这个标签对于SEO的作用了，它可能更侧重于内容的相关性以及反向链接的考量。参考：# Google 不会将关键字元标记用于网页排名
必应：目前 keywords 标签仍然对排名有一定影响；

（一）title标签-网站名片

title标签相当于网站的名片，他会直接显示在搜索结果中。一个好的标题势必可以为网站带来流量，从而提升网站排名。
注意：网站标题避免冗长

例如：<title>掘金</title>

（二）META标签-网站信息

META标签是网页head区的辅助性标签，它的作用是经过配置一些参数用以描述页面属性。目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类。

2.1 meta标签如何使用

meta标签的属性有两种：name和http- equiv。

🍀 “name"属性有以下配置项：

Keywords(关键词，现在不再重要了)：逗号分隔的关键词列表（告诉搜索引擎页面是与什么相关的）；
description(网站内容描述，很重要)：页面描述。搜索引擎会把这个描述显示在搜索结果中；
format-detection：格式检测，比如禁止识别电话，邮箱等；
author：作者的名字；
Robots：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引；
theme-color：网站主题色；

<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">

<meta name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。">

<meta name="format-detection" content="telephone=no">

<meta name="author" content="cece">

<Meta name="Robots" Content="Nofollow">
/**
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
*/

<meta name="theme-color" content="#4285f4" />

🍀 “http- equiv"属性有以下配置项：

CSR，SSR和SSG

Tue, 05 Nov 2024 00:00:00 +0800

SPA、MPA、SSR 和 CSR 这几个词可能在你的工作生涯中经常出现，网上相关文章也很多。如果你对这些概念感到模糊或完全不了解，希望本文能帮助你理解这些渲染模式。

SPA 与 MPA

MPA

MPA（multiple page application）称为多页应用, 指的是有多个页面的应用，从技术手段上来讲，你可以这么粗略地理解。

首屏速度快：各个页面相互独立，需要单独维护多个 html 页面，每个请求都直接返回 html。
切换页面比较慢：基于原生浏览器的文档跳转（navigating across documents）。因此每一次的页面更新都是一次页面重载，这将带来巨大的重启性能消耗。
对 SEO 友好：页面在初始时，就具有全部的页面内容而非「无状态」，从而达到更好的收录效果。

SPA

SPA（single page application）称为单页应用。通过 js 去感知到 url 的变化，动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上。此时的路由不是后端来做了，而是前端来做，动态显示需要的组件。

页面切换速度快：路由跳转是基于特定的实现（如 vue-router，react-router 等前端路由），而非原生浏览器的文档跳转，避免了不必要的整个页面重载。
前后端分离：基于前端路由，SPA 与应用后端解耦，使得前端不再依赖于后端的路由分配。
首屏时间慢：首屏除了 html 还要额外请求并执行 js 文件，通过 js 在空页面上渲染首屏。
SEO 不友好：内容都是靠 js 渲染生成出来的，但搜索引擎并不识别这部分内容，导致 SEO 效果差

CSR（Client Side Rendering）

CSR（客户端渲染）是一种在浏览器上执行 JavaScript 以生成 DOM 并显示内容的渲染方法。CSR 更贴近现代前端开发，我们通常使用的 Vue 和 React 默认使用 CSR。其大致流程如下：

浏览器向前端服务器请求 html 和 js
html 页面为空，初始加载不显示任何内容，通过执行 js 渲染内容
通过后端暴露的 API 进行交互

对于典型的 CSR 应用程序，浏览器仅接收一个用作应用程序容器的 HTML 页面，因此也称为单页应用，所以 CSR 的特点与之前提到的 SPA 类似。

浏览器解析 HTML 文件

Tue, 05 Nov 2024 00:00:00 +0800

1. 什么是浏览器解析和渲染HTML

一句话概括：将html代码转换成页面上显示的内容。

表1：形象展示将HTML转换成页面上显示的内容

2. 浏览器解析和渲染HTML过程？

那么浏览器拿到HTML代码后是如何把其转换成页面上显示的内容的？

2.1 宏观描述执行过程

2.1.1 解析和渲染

首先我们来看两个概念，解析和渲染，确切来说是DOM解析和DOM渲染。

DOM解析： 生成DOM tree的过程。就是把你所写的各种html标签，生成一个DOM tree，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰。

DOM渲染： 将DOM tree与css样式结合，生成Render tree，并将其呈现在浏览器页面上。浏览器会把本身默认的样式+用户自己写得样式整合到一起，形成一个CSS tree，而DOM渲染就是指DOM tree 和CSS tree 结合到一起，生成一个Render tree，呈现出一个带有样式的页面。

这里需要注意，DOM解析和DOM渲染由两个不同的线程来完成的，简单说就是二者可以并行进行。

DOM解析通常是由浏览器的主线程来完成的。DOM渲染是由浏览器的渲染线程来完成的。

分离解析和渲染的这种设计使得浏览器能够在解析 HTML 文档的同时将页面渲染到屏幕上，这样用户就能够更快地看到完整的页面了。

2.1.2 宏观描述执行过程

补充了解析和渲染的概念，我们来看看浏览器具体是如何把其转换成页面上显示的内容的。其过程大致分为下图的四步。

图1：浏览器解析和渲染HTML的过程

第一步：将载入的HTML文件解析成DOM树（DOM tree），并且将各个标记标识解析成DOM树的各个节点；在解析HTML的同时会将CSS样式解析成CSS规则（CSS rules）。

第二步：将解析成的DOM树和CSS规则进行关联生成渲染树（Render tree）。

第三步：进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标（这一阶段还是渲染树）

第四步：进入绘制阶段，在这里渲染引擎的工作就结束了，接下来就给用户界面后端（UI Backend）对渲染树的每个节点进行绘制，呈现出页面效果。

2.2 细化执行过程

2.2.1 顺序执行

dom解析过程是从上向下，顺序执行的。顺序执行的意思是一行一行的执行，上一行执行完再执行下一行。

<h1>1<h1>
<h1>2<h1>
<h1>3<h1>
<script></script>
<style></style>
<!-- 先1，再2，再3，按顺序解析。 -->

2.2.2 渐进式

浏览器是渐进式渲染，即边解析边渲染。通俗的说就是，这一行代码解析完，就可以在浏览器的页面渲染展示出来。因为浏览器的解析和渲染由两个不同线程来完成，所以可以实现边解析边渲染。

<h1>1</h1>
<script>debugger</script>
<h1>2</h1>
<script>debugger</script>
<h1>3</h1>
<!-- 先解析渲染出1，再debugger;再解析渲染出2，再debugger;最后解析渲染出3 -->

2.3 问题：css、js会阻塞解析和渲染吗？

这部分内容可参考这篇掘金内容，内含测试代码：关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析 - 掘金

输入 URL 到页面渲染完成

Tue, 05 Nov 2024 00:00:00 +0800

一、网站加载概述

面试过程中，常常遇到这样一道面试题，输入URL到页面加载完毕，浏览器做了哪些工作？

首先输入一个URL，你会看到浏览器上面的标签页出现了一个loading图标，开始时是逆时针旋转，接着顺时针旋转，当前页面消失，显示我们常说的空白页面，接着出现显示我们请求的新页面。此时如果网络很差，你有可能看到短暂的DOM页面，然后再看到渲染后的正常页面，这是从表面看到的加载过程，实际浏览器做的要多得多。

为什么浏览器这么多戏呢？直接显示不好吗，当然不行，就像喝粥，能直接吃米、喝水吗？

在用户输入URL到页面展示，浏览器要先向服务器获取前端资源，然后再将服务器返回的字节流转化成对应的页面，每一阶段都需要浏览器对应的能力进行处理的。

作为前端开发，了解整个过程其实很重要，只有知道了浏览器加载页面的整个过程，才能在开发中避免可能跳的坑，才能在发现问题后迅速定位问题，才能在性能优化时提出更多的解决方案。

比如下面问题，看了文章相信你就知道了为什么了

为什么会存在空白页面？(为了解决这个问题，各大厂都在实践各种方案）
为什么js要在Dom后面引入
为什么有个页面崩溃会导致多个页面崩溃
浏览器的缓存策略是怎样的？
为什么我们常常修改host就可以访问对应的域名
等等

二、浏览器的多进程架构

为了看懂下面的内容，这里必须要了解下现代浏览器的多进程架构，进程和线程的关系等知识点。

浏览器也是从单个进程架构一步步迭代到现代的多进程架构。

如上图，我们可以看到线程和进程的关系

通常一个程序实例就是一个进程，浏览器会为他分配内存空间。
一个进程间的数据是共享的，单线程就是一个进程包含一个线程，一个线程处理所有的任务
多线程就是，一个进程中包含多个线程可以同时执行任务，共享数据和内存
线程不能单独存在，必须依附于进程，一个线程失败，会导致进程执行失败，进程销毁，内存会被立即回收。

1、进程

下图是我们打开一个掘金首页后，再打开任务管理器，观察发现，此时浏览器包括的进程有很多，浏览器主进程，GPU进程，网络进程，存储进程，音频进程，渲染进程，多个插件进程。

这些进程负责的功能如下：

进程	说明
浏览器进程	负责浏览器各个子进程的通信，处理浏览器界面，包括地址栏等
渲染进程	也就是我们看到的图中的标签页进程，也就是我们常说的浏览器内核，v8就在这个进程。主要负责解析html、js、css渲染页面等
网络进程	负责发起网络请求，解析返回头信息
GUI进程	负责将渲染进程生成的图块转化成位图

渲染进程是运行在沙箱之中的，可以执行js，但是不能获取系统权限，和浏览器进程通过IPC通讯。这是为了保证浏览器进程的安全，锁进沙箱，即使有恶意代码，也不能突破沙箱读取或写入系统信息。

2、线程

通过上图，我们已经知道线程是不能独立存在的，必须依附于进程。这里我们主要关注下渲染进程，因为他的主要工作就是：完成页面的渲染和展示。

如图，我们可以看到渲染进程包括很多线程，除了图上展示的，还有合成线程等，各有各的作用，具体内容，我们将会在后面一章节，浏览器渲染原理分析中在来讨论。

三、浏览器请求的具体流程

从用户输入域名到浏览器渲染页面完成的过程，可以分为以下几个部分：

1、输入信息处理
2、网络请求
3、服务器返回请求资源
4、浏览器渲染

这里每一步涉及到的知识都非常多，其中缓存也在每个阶段占了很大比重，接着展开描述前三个阶段：

1、地址栏输入信息处理

当输入一个URL，浏览器会判断输入信息是检索信息还是请求URL

如果是检索的信息，就构建请求搜索的URL，调用浏览器默认的搜索引擎进行检索。
如果符合URL格式，浏览器主进程就通过IPC通信机制将URL发送给网络进程。

2、网络进程发起网络请求

1）网络进程首先会查找浏览器缓存，判断缓存是否存在，是否过期

如果存在且不过期，就直接返回缓存信息。具体的缓存策略可以接着看下面的浏览器缓存策略

2）如果没有缓存或过期，就开始进行DNS解析

DNS解析的过程也很复杂，最终目的就是拿到目标主机的IP地址，具体的解析过程可以看下面的域名解析

3）建立http连接或https连接

http通过三次握手建立连接
https需要建立TLS连接，浏览器会验证网站的数字证书是否合法，是否到期，是否安全等，这里https有自己的一套认证逻辑，我们重点不在这一块。
这里两个问题常被问到，不了解可以学习一下
- http和https的区别？
- 简述三次握手、四次挥手？

4）发送请求

网络进程会构建http请求头，向服务器发送实际请求

5）网络传输，服务器处理，返回对应的资源

请求从应用层发出，经过运输层、网络层、物理层、数据链路层找到服务器，服务器拿到请求信息，返回对应的资源
这里的服务器可能是代理服务器，也可能是CDN节点，会判断当前数据是否存在缓存，如果有缓存且有效，直接返回（具体看配置的缓存策略），否则才会从服务器获取。
网络传输数据也是很复杂的过程，具体可以看下面简单的介绍计算机网络体系模型

3、服务器返回对应资源

1）处理返回信息

HTML 面试题

Mon, 01 Jan 0001 00:00:00 +0000

共 77 道 HTML 面试题。答案默认折叠，便于先自行作答。

1. SPA和MPA的区别？

难度：1 · 类型：QA

题目要点

SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。

参考答案

SPA 和 MPA 的区别，表面看是“页面跳转方式不同”，本质上是前端与服务器在渲染职责、路由控制以及资源加载策略上的分工差异。理解这一点，才能在具体业务中做出合理选择。

SPA（Single Page Application）只有一个 HTML 入口，首屏加载时会拉取完整的 JavaScript 应用骨架，之后的页面切换通过前端路由完成。URL 的变化并不会触发浏览器重新请求文档，而是由前端框架根据路由状态切换视图并复用已有资源。这种模式的优势在于页面切换流畅、状态可以在客户端长期保留，复杂交互体验更接近原生应用，非常适合后台系统、强交互工具型产品。但代价也同样明显：首屏资源压力大，SEO 先天不足，对 JS 执行和异常处理的依赖极高，一旦主 bundle 出现问题，整个应用都无法正常工作。

MPA（Multi Page Application）则以“页面”为核心单元。每一次导航都会向服务器请求一个新的 HTML 文档，路由和渲染主要由服务端控制。页面之间天然隔离，资源和状态会随页面刷新而重置。这种模式的优势在于首屏直观、SEO 友好、容错性强，适合内容型站点、营销页和对搜索引擎依赖较高的业务场景。但在交互复杂度上，MPA 往往需要付出更多成本，例如重复加载公共资源、跨页面状态共享困难，整体体验也更接近传统 Web。

从工程角度看，SPA 和 MPA 的差异还体现在构建和部署方式上。SPA 更强调前端工程化和运行时能力，构建目标是一个可长期运行的客户端应用；MPA 更强调页面级拆分和服务端模板渲染，前端更多是增强层而非控制中心。在现代实践中，两者并非对立关系，常见的折中方案包括 SSR、SSG 以及“多入口 SPA”，试图在交互体验和首屏性能、SEO 之间取得平衡。

因此，选择 SPA 还是 MPA，并不存在绝对优劣，关键在于业务目标：是以复杂交互和状态管理为核心，还是以内容分发和搜索可见性为核心。

2. 常见的H5标签有哪些，你是怎么用的

难度：1 · 类型：QA

题目要点

常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签；实际使用中优先考虑语义表达和可访问性，而非样式；充分利用表单和媒体标签的原生能力以减少 JS 复杂度；canvas 与 svg 需根据场景选择；合理使用语义化标签能显著提升页面质量和长期可维护性。

HTML on Last Stand

HTML 5 新特性

HTML5 新特性

语义标签

增强型表单

DOCTYPE

语义化

HTML 语义化是什么？

为什么需要语义化？

一些常用的语义化标签及使用场景

布局相关的语义化标签：

文本相关语义化标签：

figure 和 figcaption、del 和 ins

HTML 元素分类

1. 块级元素（Block-level Elements）

2. 内联元素（Inline Elements）

3. 内联块元素（Inline-block Elements）

4. 自闭合元素（Self-closing Elements）

HTML 常见属性

1. 通用属性（Global Attributes）

2. 事件属性（Event Attributes）

3. 表单相关属性

4. 链接和资源加载属性

5. 多媒体属性

6. 图像和媒体相关属性

7. iframe 属性

8. 语义化属性

9. 布局和可访问性属性

常见考点

1. 全局属性（Global Attributes）

2. 事件属性（Event Attributes）

3. 表单属性

4. 输入控件相关属性

5. 媒体元素属性

6. 超链接相关属性

7. iframe 属性

8. 图像和图形属性

9. meta 标签属性

10. 无障碍相关属性

11. iframe 和图片的懒加载

12. 语言和方向属性

表单控件

01、<form>表单

meta 标签

概览

name属性

author

description

keywords

viewpoint

robots

renderer

http-equiv

响应式图片

1、为什么要使用响应式图片

2、实现方法

css3 media query

picture标签

多媒体技术

一、音视频基础

1.1 视频

1.1.1 基础概念

1.1.2 视频容器格式

1.1.2 视频编码格式

1.2 音频

1.2.1 基础概念

1.2.2 音频容器格式

1.2.3 音频编码格式

1.3 常见标签

1.3.1 <audio> 元素

1.3.1.1 基本用途

Canvas 和 SVG

1.Canvas

工作方式

常用属性

优缺点

优点

缺点

使用实例

Web Storage

01、`<form>`表单

1.3.1 `<audio>` 元素

一、简介

获取到的 `position` 对象