web concept

前端概念

# CORS

CORS 是一个 W3C 标准, 全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器, 发出 XMLHttpRequest 请求, 从而克服了 AJAX 只能同源使用的限制。。更多内容可参考: 阮一峰-跨域资源共享 CORS 详解 (opens new window)

在浏览器中, 同源策略是一种安全机制, 用于防止在不同源之间共享敏感信息。同源策略要求 Web 应用程序只能从同一来源获取资源, 即协议、主机和端口必须完全匹配。如果从不同源请求资源, 则浏览器会阻止该请求, 并抛出 CORS 错误

CORS 提供了一种机制, 可以在服务器端配置允许从其他源访问其资源。当浏览器发出跨源请求时, 服务器可以返回带有 CORS 标头的响应, 以指示允许哪些源访问该资源。这些标头包括"Access-Control-Allow-Origin"、"Access-Control-Allow-Methods"、"Access-Control-Allow-Headers"等, 用于指示哪些 HTTP 方法、头信息和源被允许访问资源

CORS 的实现取决于浏览器, 但大多数现代浏览器都支持 CORS。在开发 Web 应用程序时, 特别是在使用 AJAX 等技术从不同源获取数据时, 需要了解 CORS 的工作原理, 并在服务器端配置 CORS 以避免 CORS 错误

theorem 常见的 CORS 头信息包括:

Access-Control-Allow-Origin: 指示允许访问资源的源
Access-Control-Allow-Methods: 指示允许的请求方法
Access-Control-Allow-Headers: 指示允许的请求头
Access-Control-Allow-Credentials: 指示是否允许发送凭据(例如 cookie)
Access-Control-Expose-Headers: 指示哪些响应头可以暴露给前端 JavaScript

举例说明 CORS 在实际场景中的作用

假设您有一个 Web 应用程序, 它需要从不同的服务器获取数据或资源。例如, 您可能有一个在线商店, 需要从不同的服务器获取产品列表、图像和其他资源

在此情况下, 同源策略将阻止您的 Web 应用程序从其他服务器获取数据或资源, 因为这些服务器的协议、主机和端口与您的 Web 应用程序不匹配。这会导致浏览器阻止请求, 并抛出 CORS 错误

为了解决这个问题, 您可以在服务器上配置 CORS。通过添加适当的响应标头, 您可以指示浏览器允许您的 Web 应用程序从其他源获取数据或资源。例如, 您可以添加以下响应标头:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type

1
2
3

这些标头指示允许来自 https://example.com 的 GET、POST 和 OPTIONS 请求, 并允许使用 X-Requested-With 和 Content-Type 头。现在, 当您的 Web 应用程序向 https://example.com 发出请求时, 浏览器将允许该请求, 并允许您的 Web 应用程序从其他服务器获取所需的数据或资源

总之, CORS 在实际场景中的作用是允许 Web 应用程序从其他源获取数据或资源, 并促进了不同源之间的跨域数据交换。这为 Web 应用程序的开发和部署带来了更大的灵活性和可扩展性

"跨域问题本质是浏览器的行为, 它的初衷是为了保证用户的访问安全, 防止恶意网站窃取数据", 那想要解决跨域问题就变得很简单了, 只需要告诉浏览器这是一个安全的请求, "我是自己人"就行了, 那怎么告诉浏览器这是一个正常的请求呢？只需要在返回头中设置"Access-Control-Allow-Origin"参数即可解决跨域问题, 此参数就是用来表示允许跨域访问的原始域名的, 当设置为"*"时, 表示允许所有站点跨域访问

# 跨域问题

本文参考链接 (opens new window)

跨域三种情况

在请求时, 如果出现了以下情况中的任意一种, 那么它就是跨域请求:

协议不同: 如 http 和 https；
域名不同
端口不同

跨域问题的解决

这个问题的答案也很简单, 我们之前在说跨域时讲到: 跨域问题本质是浏览器的行为, 它的初衷是为了保证用户的访问安全, 防止恶意网站窃取数据, 那想要解决跨域问题就变得很简单了, 只需要告诉浏览器这是一个安全的请求, "我是自己人"就行了,

只需要在返回头中设置 Access-Control-Allow-Origin 参数即可解决跨域问题, 此参数就是用来表示允许跨域访问的原始域名的, 当设置为 *时, 表示允许所有站点跨域访问

# referrerpolicy="no-referrer"

RSSHub 里的图片 / 视频地址都是源站地址, 部分有防盗链, 所以 RSSHub 给图片加了 referrerpolicy="no-referrer" 属性来防止跨域问题

referrerpolicy="no-referrer" 是一个 HTML 属性, 用于设置浏览器在加载资源时如何处理 HTTP Referer 头信息

Referer 是一个 HTTP 头部字段, 它包含了请求的来源页面的 URL。当浏览器加载一个网页时, 它会向服务器发送 Referer 头信息, 告诉服务器这个请求是从哪个页面发起的

在某些情况下, 网站希望保护用户的隐私, 不希望将 Referer 信息发送给外部网站。这种情况下, 可以使用 referrerpolicy="no-referrer" 属性来告诉浏览器在加载资源时不发送 Referer 头信息

具体来说, referrerpolicy="no-referrer" 的作用是:

当浏览器加载带有这个属性的资源时, 不会发送 Referer 头信息给服务器
这样可以防止服务器获取到请求的来源信息, 从而保护用户的隐私

在 RSSHub 中, 为了防止跨域问题并保护用户隐私, 给图片和视频资源添加了 referrerpolicy="no-referrer" 属性, 这样加载这些资源时就不会发送 Referer 头信息

# SASS vs CSS

CSS 是基础的样式语言,适用于较小或简单的项目
SASS 是对 CSS 的扩展,适用于需要更复杂样式结构的项目,提供了更强的可维护性和灵活性

# ES 模块

前端 ES 模块是指在前端开发中使用的 ECMAScript(简称 ES)模块系统。ES 模块是 ECMAScript 2015 (ES6) 标准中新增的一项功能, 它提供了一种用于组织、导入和导出 JavaScript 代码的标准化方式

ES 模块的主要特点包括:

模块化: ES 模块允许将 JavaScript 代码划分为多个独立的模块, 每个模块都有自己的作用域, 可以封装代码逻辑和数据
导入和导出: ES 模块提供了 import 和 export 关键字, 用于导入和导出模块中的变量、函数、类等内容。通过导入和导出, 不同模块之间可以互相调用和共享代码
静态解析: ES 模块是静态解析的, 即在编译时就确定了模块的依赖关系和引用关系。这有助于优化代码加载和执行性能, 并提高了代码的可靠性和可维护性
异步加载: ES 模块支持异步加载, 可以动态地在运行时加载和使用模块, 而不会阻塞页面渲染或用户交互

使用 ES 模块可以使前端代码更具有结构化、可维护性和可重用性, 有助于构建复杂的前端应用程序。ES 模块已经成为现代前端开发中的标准, 得到了主流浏览器和 JavaScript 运行时的广泛支持

# ES5/ES6

ES5 和 ES6(也称为 ES2015)是 JavaScript 的两个版本, 它们分别对应 ECMAScript 5 和 ECMAScript 2015 规范。以下是它们的介绍:

ES5(ECMAScript 5)

发布时间: 2009 年
新增特性: 严格模式、JSON 对象、Array.prototype.forEach()、Object.create()、Object.defineProperty()、Function.prototype.bind() 等

ES5 是 JavaScript 的一个重要版本, 它引入了很多新的特性和功能, 提升了 JavaScript 的编程能力和表现力。其中, 严格模式使得 JavaScript 变得更加严谨, 提高了代码的健壮性和安全性, JSON 对象使得在 JavaScript 中处理 JSON 数据变得更加方便, 其他新增方法和属性也大大提高了 JavaScript 在数据处理和面向对象编程等方面的表现力

ES6(ECMAScript 2015)

发布时间: 2015 年
新增特性: 箭头函数、类、模板字符串、解构赋值、let 和 const、for...of 循环、Promise 对象、模块化等

ES6 是 JavaScript 的一个重要版本, 它引入了很多新的特性和语法, 使得 JavaScript 更加现代化、简洁化和易读性。箭头函数和模板字符串使得 JavaScript 的函数和字符串处理更加简洁明了, 类和模块化使得 JavaScript 更加面向对象化和模块化, 解构赋值和 let 和 const 则使得 JavaScript 的变量和数据处理更加灵活, Promise 对象则大大简化了 JavaScript 异步编程的模式和写法

总的来说, ES5 和 ES6 都是 JavaScript 的重要版本, 它们各自带来了许多新的特性和语法, 提高了 JavaScript 的表现力和易用性, 使得 JavaScript 成为了一门更加强大、现代化、易读性的编程语言

# react/vue

React 和 Vue 都是非常流行的 JavaScript 前端框架。它们都被广泛应用于构建大型单页应用程序, 具有高度的可组合性和可重用性

以下是一些 React 和 Vue 的区别:

简单性: Vue 通常被认为比 React 更容易学习和使用, 因为它的 API 更加简单和直观。React 则更倾向于使用 JSX 语法来构建组件, 这对于初学者来说可能需要一些时间来适应
性能: React 在处理大型数据和高负载时表现更佳。Vue 也可以实现高性能, 但是在某些情况下, React 可以更好地处理数据的变化和更新
生态系统: React 的生态系统非常庞大, 包括了很多支持工具和库, 例如 Redux、Webpack、Babel 等等。Vue 的生态系统也很强大, 但它相对较小, 更加集中在 Vue 本身和 Vue 插件上
技术栈: React 通常与 JavaScript、TypeScript 等技术栈一起使用, 而 Vue 更加灵活, 可以与许多不同的技术栈集成, 例如 JavaScript、TypeScript、CoffeeScript 等等

总的来说, React 和 Vue 都是非常优秀的前端框架, 选择哪个取决于您的具体需求和喜好

# LDS

在计算机编程中, "LDS" 通常指的是 "Local Data Storage", 也就是本地数据存储。本地缓存是一种在计算机程序中常用的技术, 用于临时存储数据, 以便在稍后的时间快速访问

通过使用本地缓存, 程序可以避免频繁地从远程服务器或磁盘读取数据, 从而提高应用程序的性能和响应速度。当程序需要某些数据时, 它首先会查看本地缓存是否有该数据的副本。如果有, 程序将直接从本地缓存中获取数据, 而不必重新获取远程数据或从磁盘读取

本地缓存通常用于存储临时性的数据, 例如用户的偏好设置、临时计算结果、用户界面状态等。这些数据在程序的执行期间可能会频繁地被读取和写入, 因此将它们存储在本地缓存中可以大大提高应用程序的性能和效率

总的来说, LDS(本地缓存)在计算机程序中是一种重要的技术, 用于临时存储数据并提高应用程序的性能

# SSR/CSR

在 HTML 上, "SSR" 通常指的是"Server-Side Rendering", 这是一种用于构建 Web 应用程序的技术。与前端渲染(Client-Side Rendering)不同, SSR 在服务器端生成 HTML 内容, 然后将其发送到客户端, 这样可以提供更好的首次加载性能、搜索引擎优化(SEO)和用户体验

以下是关于 HTML 中的 SSR 技术的一些介绍:

1.Server-Side Rendering(SSR):

SSR 是一种将 Web 应用程序的页面内容在服务器端进行渲染, 然后将渲染好的 HTML 内容发送到客户端的过程。这使得客户端在加载页面时无需等待 JavaScript 的加载和执行, 提高了首次加载速度

2.优势:

首次加载性能: 因为服务器已经渲染好了 HTML 内容, 用户在访问时可以立即看到页面内容, 无需等待 JavaScript 加载和执行
搜索引擎优化(SEO): 搜索引擎可以更容易地爬取服务器端渲染的内容, 提高页面在搜索结果中的排名
用户体验: 用户不会在加载时看到空白页面或加载中的状态, 提供更好的用户体验

3.实现方式:
前端框架支持: 许多前端框架(如 React、Vue、Angular 等)都提供了 SSR 的支持, 通过服务器端渲染框架可以实现服务器端渲染
服务器配置: 需要在服务器端配置以支持 SSR, 通常需要使用 Node.js 等服务器端技术
路由管理: SSR 通常需要处理路由, 确保服务器端和客户端路由保持同步

4.挑战:
复杂性: SSR 需要服务器端和客户端之间的协调, 可能增加应用程序的复杂性
性能开销: 服务器端渲染需要在服务器上执行额外的计算和渲染, 可能导致性能开销
前后端分离: 如果应用程序已经是前后端分离的, 将其改造为 SSR 可能需要一些工作

5.使用场景:
内容驱动网站: 对于以内容为主要特点的网站, SSR 可以提供更好的 SEO 支持
首次加载性能要求高: 对于要求快速首次加载的应用, SSR 可以提供更好的用户体验

总之, Server-Side Rendering(SSR)是一种在服务器端进行 HTML 渲染的技术, 可以提供更好的首次加载性能和搜索引擎优化。在使用时, 需要考虑应用程序的架构和性能需求, 权衡其优劣势

# 预渲染

预渲染原理

html-pre-render

预渲染工具是一种用于优化网站性能和搜索引擎优化(SEO)的技术, 它的基本原理如下:

构建和打包静态资源: 开发者首先创建一个网站, 然后使用构建工具(例如 Webpack、Parcel 等)将网站的所有资源(HTML、CSS、JavaScript、图片等)打包到一个或多个静态文件中
启动本地 Express 静态服务: 预渲染工具会在本地启动一个 Express 静态服务, 这个服务的作用是托管已打包好的静态资源文件。这样, 用户可以通过访问本地服务来加载网站内容。如何启动 express
启动无头浏览器(例如 Puppeteer): 预渲染工具会启动一个无头浏览器, 例如 Puppeteer。无头浏览器是一个能够以程序化方式运行的浏览器, 通常用于进行自动化测试和页面截图等任务
浏览器请求网页: 无头浏览器会向本地 Express 静态服务发送请求, 请求要渲染的网页。这个请求包括网页的 URL 地址
网页运行时请求首屏接口: 当无头浏览器加载网页后, 网页的 JavaScript 代码会运行。通常, 网页会通过 API 请求数据, 这些数据用于渲染网页的内容。在预渲染中, 网页通常会请求首屏接口, 获取要在首屏显示的数据
渲染首屏内容: 接收到首屏接口返回的数据后, 网页会使用这些数据来渲染网页的首屏内容。这个内容可能包括文章、产品信息、图片等
无头浏览器截屏: 一旦首屏内容被渲染出来, 无头浏览器会执行截屏操作, 将当前网页的内容截取为一张图片
替换原 HTML: 最后, 生成的图片会被嵌入到原始 HTML 中, 替换掉原来的 HTML。这样, 用户在访问网站时, 会首先看到包含内容的首屏图片, 而不需要等待网页的 JavaScript 加载和执行

通过这个过程, 预渲染工具能够显著提高网站的加载速度, 因为用户无需等待 JavaScript 代码执行完毕才能看到内容。同时, 搜索引擎爬虫也能够直接看到渲染后的内容, 从而提高了网站的 SEO 性能

# 面包屑

面包屑(Breadcrumbs)是网站或应用程序界面中的一种导航元素, 通常以一种层次结构的方式显示用户当前所在位置, 帮助用户追踪他们在应用中的导航路径。面包屑通常位于页面的顶部或页面标题下方, 以一系列链接的形式出现, 每个链接表示用户导航的一个级别

面包屑的名称来源于童话故事《汉赛尔与格莱特》(Hansel and Gretel)中的一个情节。在故事中, 汉赛尔和格莱特为了找回回家的路, 故意撒下面包屑来标记自己的路径。面包屑导航类似于这种概念, 帮助用户追踪他们的导航路径

典型的面包屑导航的表示形式如下:

首页 > 分类 > 子分类 > 当前页面

用户可以通过面包屑导航点击链接返回到先前的页面, 这在大型网站或应用中对用户导航和定位非常有用。当用户浏览多层次的信息结构时, 面包屑可以帮助他们理解他们所在的位置, 快速导航到其他级别, 而不必依赖浏览器的后退按钮

# 水合率

"水合率"(hydration)是指在客户端渲染(Client-Side Rendering, CSR)和服务器端渲染(Server-Side Rendering, SSR)之间的切换过程。在 Web 开发中, 通常会有两种渲染方式:

客户端渲染(CSR): 在 CSR 中, 页面的初始渲染由浏览器完成, 它从服务器获取 HTML 页面的骨架, 然后使用 JavaScript 来渲染和填充页面内容。这意味着初始加载速度可能很快, 但用户在浏览和与页面交互时, 可能需要等待 JavaScript 加载和执行
服务器端渲染(SSR): 在 SSR 中, 服务器在向浏览器发送 HTML 之前, 先渲染了页面内容。这通常涉及到服务器端使用模板引擎或框架来生成完整的 HTML 页面, 包括内容。这样用户在浏览器中看到内容时, 不需要等待 JavaScript 执行, 因为页面已经包含了渲染好的内容

水合率错误通常发生在从 CSR 切换到 SSR 时, 或从 SSR 切换到 CSR 时。这些错误通常是由于在两种渲染方式中元素 ID 不一致引起的。为了解决这个问题, 需要确保在两种渲染方式之间保持一致的元素 ID, 从而避免水合错误。在服务端渲染(SSR)中, 为了确保与客户端一致的渲染结果, 需要通过注入特定 ID 的方式来处理这些问题

# SPA

Single-page application. link (opens new window)

# ARIA

"aria" 是 Accessible Rich Internet Applications (ARIA) 的缩写。ARIA 是一组用于增强 Web 内容和应用程序可访问性的规范, 它提供了一组属性、角色和状态, 用于向辅助技术(如屏幕阅读器)提供关于网页结构和交互的信息

ARIA 通过在 HTML 元素中添加特定的属性来改善可访问性。这些属性可以用于描述页面元素的角色(role)、状态(state)和属性(property), 以帮助残障用户更好地理解和使用页面内容。例如, 可以使用 aria-label 属性为某个元素提供一个描述性的文本标签, 以便辅助技术可以将其读取给用户

因此, "Adding aria labels" 的意思是在网页中添加 ARIA 标签, 以改善网页的可访问性, 使得用户可以更轻松地使用辅助技术来浏览和交互网页内容

# SVG

SVG(可缩放矢量图形)是一种基于 XML 格式的图像格式, 它使用矢量图形描述来定义图像, 因此可以无损地缩放到任意大小而不失真。SVG 图像通常可以使用文本编辑器或者专门的图形编辑工具创建和编辑

下面是一个简单的 SVG 图像示例, 它绘制了一个蓝色的圆圈:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

1
2
3

让我们解释一下这个 SVG 图像的各个部分:

<svg>: 这是 SVG 图像的根元素, 用于定义一个 SVG 图像。它可以包含各种形状、路径和文本等
width 和 height 属性: 这些属性指定了 SVG 图像的宽度和高度。SVG 图像可以无损地缩放, 但这些属性可以帮助定义 SVG 图像的默认大小
viewBox 属性: 这是一个可选的属性, 用于定义 SVG 图像的坐标系。它指定了一个矩形区域, 其中包含了 SVG 图像的可见部分。在这个例子中, viewBox="0 0 100 100" 表示整个 SVG 图像的坐标范围是从 (0,0) 到 (100,100) xmlns 属性: 这是 XML 命名空间属性, 用于指定 SVG 图像所属的 XML 命名空间。在这个例子中, 它指定了 SVG 图像使用的 XML 命名空间是 http://www.w3.org/2000/svg
<circle>: 这是 SVG 中的一个元素, 用于绘制一个圆。它有 cx 和 cy 属性指定圆心的坐标, 以及 r 属性指定圆的半径。在这个例子中, 圆的圆心是 (50,50), 半径是 40
fill 属性: 这个属性用于指定圆的填充颜色。在这个例子中, 圆被填充成蓝色

您可以通过修改 SVG 图像的属性和元素来创建各种形状和图案。SVG 图像还支持使用路径 (<path>) 元素来绘制复杂的形状。如果您想要使用 SVG 图像, 但不愿手动编写 SVG 代码, 您也可以使用图形编辑软件(如 Adobe Illustrator、Inkscape 等)来创建 SVG 图像, 并将其导出为 SVG 文件

# PhantomJS (opens new window)

PhantomJS - Scriptable Headless Browser

PhantomJS is an optimal solution for:

Page automation Access webpages and extract information using the standard DOM API, or with usual libraries like jQuery.
Screen capture Programmatically capture web contents, including SVG and Canvas. Create web site screenshots with thumbnail preview.
Headless website testing Run functional tests with frameworks such as Jasmine, QUnit, Mocha, WebDriver, etc.
Network monitoring Monitor page loading and export as standard HAR files. Automate performance analysis using YSlow and Jenkins.

# iframe

在 HTML 中, iFrame(内联框架)是一种用于嵌入另一个 HTML 文档的标记元素。iFrame 允许你将一个独立的 HTML 文档嵌入到当前页面中的特定区域, 这个区域被定义为 iFrame 的内容区域。以下是 iFrame 在 HTML 中的主要角色和用途:

嵌入外部内容: iFrame 最常见的用途是嵌入来自不同源(即不同的域)的外部内容, 例如其他网站、视频、地图等。这使得你可以在自己的网页中嵌入其他网站的内容, 或者在网页中显示来自不同服务提供商的内容, 而无需离开当前页面
创建内联框架: iFrame 允许你创建一个内联框架, 其中可以加载独立的 HTML 文档。这个内联框架在当前页面中具有自己的独立的文档流, 可以包含独立的 HTML、CSS 和 JavaScript 代码。这对于分隔不同部分的内容或加载与主页面无关的内容非常有用
与第三方服务集成: 通过嵌入第三方提供的 iFrame 代码, 你可以轻松地将其服务集成到你的网页中。例如, 许多社交媒体平台提供了嵌入式 iFrame 代码, 使你可以在网页上显示社交媒体帖子、评论框等内容
实现可重用性: iFrame 可以用于创建可重用的组件或小部件, 这些组件可以在多个页面中使用。通过将 iFrame 内嵌到不同的页面中, 你可以在多个地方显示相同的内容, 而不必重复编写代码

尽管 iFrame 提供了灵活性和功能强大的嵌入功能, 但它也需要小心使用。由于可以嵌入来自不同源的内容, 因此可能存在安全风险, 例如跨站点脚本(XSS)攻击。因此, 在使用 iFrame 时, 需要确保信任和验证嵌入的内容, 以防止潜在的安全问题

示例

<iframe
    id="iframe"
    border="0"
    allowfullscreen="allowfullscreen"
    mozallowfullscreen="mozallowfullscreen"
    msallowfullscreen="msallowfullscreen"
    oallowfullscreen="oallowfullscreen"
    webkitallowfullscreen="webkitallowfullscreen"
    src="https://www.xiaobaotv.app/player/?url=https://m3u.haiwaikan.com/xm3u8/1fcd9754fbddc95816b5196c622486d14ed3dc0d139d4c37c33aba2d477ced499921f11e97d0da21.m3u8&amp;next=/vod/play/89562-1-236.html"
    width="100%"
    height="100%"
    marginwidth="0"
    framespacing="0"
    marginheight="0"
    frameborder="0"
    scrolling="no"
    vspale="0"
    noresize=""
>
</iframe>

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

这个 <iframe> 元素是一个嵌入式框架, 用于在当前 HTML 页面中嵌入其他网页或资源。下面是对该 <iframe> 的分析:

ID: iframe, 这是该 <iframe> 元素的唯一标识符, 可以用 JavaScript 或 CSS 等前端技术来操作该元素
URL: src="https://www.xiaobaotv.app/player/?url=https://m3u.haiwaikan.com/xm3u8/1fcd9754fbddc95816b5196c622486d14ed3dc0d139d4c37c33aba2d477ced499921f11e97d0da21.m3u8&next=/vod/play/89562-1-236.html", 指定了要在 <iframe> 中加载的外部资源的 URL。在这个例子中, 它加载了一个视频播放器, 并指定了要播放的视频资源的 URL
宽度和高度: width="100%" height="100%", 指定了 <iframe> 的宽度和高度为其父元素的 100%。这使得 <iframe> 元素会占据其父元素的全部可用空间
其他属性: border="0"、allowfullscreen、mozallowfullscreen、msallowfullscreen、oallowfullscreen、webkitallowfullscreen、marginwidth="0"、framespacing="0"、marginheight="0"、frameborder="0"、scrolling="no"、vspale="0"、noresize, 这些属性指定了 <iframe> 的边框、是否允许全屏、边距、边框间距、滚动条等其他属性设置

总的来说, 这个 <iframe> 元素用于在当前页面中嵌入一个视频播放器, 并加载指定的视频资源

# uniapp

uni-app 是 DCloud 公司发布的一款前端开发框架,用于解决前端开发中的一些痛点。 https://juejin.cn/post/6997817935825747976 (opens new window)

# HTML Entity

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (😉. https://developer.mozilla.org/en-US/docs/Glossary/Entity (opens new window)

如

&: 的实体为 &, 表示为, Interpreted as the beginning of an entity or character reference.

# Blob URL

Blob URL 是一种用于表示二进制数据(例如文件、图片、视频等)在 Web 上的临时引用。它通常由浏览器生成并在客户端使用,不需要通过服务器提供实际文件。Blob URL 的生成和使用主要通过 JavaScript 的 Blob API 和 URL API 实现。jump

# rem 单位

什么是 1rem？

rem 是一种 CSS 长度单位,全称是 "root em",它基于 HTML 根元素 (<html>) 的字体大小进行计算

1rem 等于根元素字体大小(<html> 的 font-size)
如果没有特殊设置,浏览器的默认根字体大小通常是 16px

如何计算 1rem 的值？

查看根元素的 font-size：

html {
    font-size: 16px; /* 默认 */
}

1
2
3

在这种情况下：

1rem = 16px
2rem = 32px
0.5rem = 8px

如果更改根元素的 font-size：

html {
    font-size: 20px;
}

1
2
3

那么：

1rem = 20px
0.5rem = 10px
1.5rem = 30px

使用场景

优点：

全局一致性：使用 rem 定义尺寸,可以通过调整根字体大小来统一控制整个页面的布局比例
响应式设计：配合媒体查询,调整根元素的 font-size,可以让布局或文字大小适配不同屏幕

html {
    font-size: 16px; /* 默认 */
}

@media (max-width: 600px) {
    html {
        font-size: 14px; /* 小屏幕时调整比例 */
    }
}

1
2
3
4
5
6
7
8
9

易维护：与 px 不同,当页面整体需要缩放时,无需修改每个组件的尺寸

示例：

html {
    font-size: 10px; /* 设置为 10px,方便换算 */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 2rem; /* 20px */
}

p {
    margin-bottom: 1rem; /* 10px */
}

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

rem 与其他单位的比较

单位	描述	依赖	特点
`px`	像素单位,固定大小。	无	精确,但不易响应式
`em`	相对于父元素的字体大小	父元素字体大小	层级嵌套时计算复杂
`rem`	相对于根元素的字体大小	根元素字体大小	全局一致,适合响应式设计
`%`	相对于父元素的字体大小(用于 `font-size` 时)。	父元素字体大小	主要用于相对调整字体大小
`vw/vh`	相对于视口宽度(vw)或高度(vh),1vw = 1% 视口宽度。	视口大小	用于全屏布局,和字体关联性不强

小结

rem 是一个强大且灵活的单位,特别适合响应式设计
通常建议在根元素设置一个合理的 font-size,如 16px 或 10px,便于计算
使用 rem 时搭配媒体查询,可以方便地根据设备尺寸调整整体布局比例

#concept

上次更新: 2025/07/17, 17:31:43

← web javascript 入门指南→