CSS媒体查询与响应式网页
在当今这个设备多样化的时代，从手机、平板到桌面显示器，用户的屏幕尺寸和分辨率千差万别。为了提供良好的用户体验，我们需要让网页能够根据设备特性自动调整布局和样式，而这正是 CSS 媒体查询（Media Queries） 的用武之地。它是实现响应式网页设计（Responsive Web Design, RWD）的核心技术之一。
一、什么是媒体查询？媒体查询（Media Query） 是 CSS3 引入的一项特性，允许开发者基于目标设备的“媒体特性”（如宽度、高度、分辨率、方向等）有条件地应用不同的 CSS 样式。
换句话说，它就像一组“if 判断语句”，能让网页在不同设备上展现最合适的界面。
二、媒体查询的基本语法123@media [媒体类型] and ([媒体特性]) { /* 条件满足时应用的 CSS */}
媒体类型：常见的有 all（默认）、screen（屏幕）、print（打印）等。
媒体特性：例如 width、max-width、orientation、resolution 等。
示例：
12345@media screen and (max- ...
CSS杂记
链接HTML文件与CSS样式表
在<head>元素里使用<style>元素嵌入样式表
使用HTML元素的style属性设置样式表
将样式表放在外部文件，然后使用@import指令导入HTML文件
将样式表放在外部文件，然后使用<link>元素链接至HTML文件
@import和<link>有什么区别？首先， 是 HTML 提供的标签，属于 HTML 语义结构的一部分，能够并行加载 CSS 文件，加载效率更高，浏览器在解析 HTML 时遇到 标签就会立即开始加载对应的样式文件，有利于页面快速渲染，因此推荐在生产环境中优先使用。而 @import 是 CSS 提供的语法规则，通常用于在一个 CSS 文件中导入另一个 CSS 文件，属于 CSS 级别的语法，加载具有延迟性——只有在外部样式表被解析时才会继续解析 @import 的文件，可能会导致样式闪烁（FOUC）或阻塞渲染，影响性能。此外，旧版本的浏览器（如 IE5）对 @import 的兼容性较差，而 的兼容性更好也更稳定。从可维护性角度看，@import 常用于将 CSS 文件模 ...
HTML的碎碎念
搜索引擎优化SEO大多数网站的新浏览者大都来自搜索引擎，而且搜索引擎的用户往往只会留意搜索结果中排名前面的几个网站，因此网站的拥有者不仅要到各大搜索引擎进行登录，还要设法提高网站在搜索结果中的排名。
搜索引擎优化（SEO）是指通过优化网站结构、内容和性能，使其更容易被搜索引擎识别和索引，从而提高网站在搜索结果中的排名。单页应用（SPA）通常通过 JavaScript 动态渲染内容，搜索引擎在抓取页面时可能无法获取完整的内容，导致内容难以被及时抓取和索引，从而影响 SEO 效果，可以使用服务器端渲染（SSR）或预渲染等技术进行优化。
SSR（Server-Side Rendering，服务端渲染）是一种由服务器在请求时生成完整 HTML 页面的技术。具体来说，当用户访问一个页面时，服务器会先将 JavaScript 渲染出的页面内容生成静态 HTML 返回给浏览器，浏览器拿到后直接展示，再通过 JavaScript 激活页面上的交互功能（称为 hydration）。
全局属性
accessKey：设置将焦点移到元素的按键组合
contentEditable="{ tr ...
Vue(三) ——路由
虽然利用动态组件可以实现组件切换，但是用户刷新网页或者通过URL地址重新访问网页时，组件的切换状态无法保留。为了解决这个问题，可以使用路由实现组件切换。
后端路由和前端路由后端路由比如Node.js环境中的Express框架，服务器收到请求后会通过路由寻找当前请求的URL地址对应的处理程序。
前端路由前端路由的整个过程发生在浏览器端，当URL地址改变时不需要向服务器发起一个加载页面的请求，而是维持当前页面的情况下切换页面中的显示内容。
Hash模式：http://www.example.com/#/user 通过URL中从#开始的部分来切换不同的页面内容。
HTML5模式：http://www.example.com/user 利用HTML5的history.pushState方法来改变URL地址，但是需要服务器端支持。
基本使用
定义路由组件
定义路由链接和路由视图
router-link：导航链接 <router-link to="/user">用户</router-link>
router-view：路由视图 <route ...
Vue（二）——组件
选项式API和组合式API选项式API式一种通过包含多个选项的对象来描述组件逻辑的API，如data、methods、computed、watch等。在组件的初始化阶段，Vue会处理这些选项，吧选项中定义的数据、方法、计算属性、侦听器等内容添加到组件实例上，当页面渲染完成后，通过this关键字可以访问组件实例。
12345678910<script> export default { data(){ return{ } }, methods:{ }, computed:{ }, watch:{ } }</script>
组合式API式将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。
12345678<script> import { computed, ref, watch } from 'vue&#x ...
Vue（一）——开发基础
什么是VueVue是一款用于构建用户界面的渐进式框架。
其中，”渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。
基于MVVM模式的框架。MVVM住要包含：
Model：数据模型，负责业务数据处理
View：视图，用户界面，负责视图处理
ViewModel：视图模型，连接Model和View，负责监听Model或者View的变化。工作原理：DOM Listeners监听DOM变化自动同步Model，Data Bindings监听数据变化自动更新View。
特性：
数据驱动的视图：Vue监听数据变化。当页面数据发生变化时，Vue会自动重新渲染页面结构。
双向数据绑定：数据变化会影响视图，视图变化也会影响数据。
指令：Vue提供了一些指令，用于操作DOM。
插件：Vue Router、Vuex、Pinia等。
Vue3的新特性
体积更小：采取按需编译
性能提升
更好的TypeScript支持
暴露更底层API
更先进组件
提供组合式API
Vue开发环境Node.jsNode.js是一个基于V8引擎的JavaScript运行环境，提供了一些功 ...
关于跨域...
今天整理一些有关于跨域的内容…
为什么需要跨域？浏览器实施同源策略，这是一种基本的安全协议。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。
其中，同源是指两个URL的协议、主机和端口号都一致
为什么浏览器需要这种限制呢？“同源策略”是浏览器的安全机制，其目的是：防止恶意网站读取你登录状态下的敏感信息（如银行、邮件、后台管理等）。举个例子：你在 bank.com 登录了账户，浏览器存有 cookie。如果没有同源限制，恶意网站 evil.com 可以伪造请求读取你的银行账户信息，这就是“跨站请求伪造（CSRF）”的根源之一。
跨域是指当前网页的源和要请求的目标接口的源不一致
由于浏览器同源策略的限制，将存在以下的跨域问题：
无法访问来自不同源网页的Cookie、LocalStorage和IndexedDB，也就是说不同源的网页之间不能共享存储数据
无法操作不同源网页的DOM，每个网页的DOM只能由其自己的脚本访问，不能被其他源的脚本操作。
无法向不同源地址发起AJAX请求，这限制了网页与不同源服务器之间的数据交互。
这些限制在确保Web应用安全性防止恶意 ...
关于JS的更多...
JS模块化JavaScript 模块化体系在长期的实践中逐步演化，主要包括 AMD、CMD、CommonJS、RequireJS、Sea.js 等模块规范或工具，它们从不同场景出发，解决了早期 JavaScript 缺乏模块机制的问题。
CommonJS 是 Node.js 采用的模块化规范，每个文件就是一个模块，通过 require() 引入其他模块，使用 module.exports 导出模块内容。它的特点是同步加载模块，适用于服务器端环境，因为模块文件都存在本地磁盘，加载速度快。其底层本质是将模块包裹在一个函数作用域中运行，通过缓存机制避免重复加载。
AMD（Asynchronous Module Definition） 是为了解决浏览器端模块加载的异步需求而提出的规范。代表实现是 RequireJS。AMD 使用 define(id?, deps?, factory) 定义模块，支持提前声明依赖、异步并发加载模块。这种设计非常适合浏览器环境下的资源按需加载，依赖在模块加载前就被解析出来，利于并发加载优化。但写法相对复杂，阅读性较弱。
CMD（Common Module Defi ...
关于Ajax...
尝试把以前一些很晕的概念连起来…
什么是AJAX？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX是一种在Web应用中通过异步发送HTTP请求向服务器获取内容，并使用这些新内容更新页面中相关部分，而无需中心加载整个页面的Web开发技术，这可以让页面更具响应性，因为只请求了需要更新的部分。
起初，AJAX通过使用XMLHttpRequest接口实现，但是现在，fetch() API更适合用于开发现代Web应用。
XMLHttpRequest:AJAX的最初实现
虽然叫XMLHttpRequest，但是它可以用于请求任何类型的数据，而不仅仅是XML。
甚至支持HTTP以外的协议，比如file和ftp。但是可能受到更多出于安全等原因的限制。
12345678910111213141516// 1. 创建实例化对象const xhr = new XMLHttpRequest();// 2. 初始化请求xhr.open("GET", "/api/user") ...
RESTful架构风格
什么是RESTful？
RESTful是一种接口设计风格，它的核心思想是“资源导向”，我们可以把服务器上的数据看作一个个资源，每个资源用一个 URL 来表示，然后通过标准的 HTTP 方法去操作它，比如用 GET 获取资源、POST 新增资源、PUT 或 PATCH 更新资源、DELETE 删除资源。它强调接口要简洁、统一，并且无状态，也就是说每个请求都应该包含完成这个请求所需要的所有信息，服务器不会去记住之前发生了什么。在实际项目中，RESTful 这种风格很常见，比如我们做一个用户管理的接口，像 GET /users 是获取用户列表，POST /users 是新增用户，GET /users/1 是查某个用户，整体逻辑清晰，前后端对接也方便。
一个用户管理系统
场景设定：开发一个用户管理系统假设正在开发一个“用户管理系统”（User Management System），功能包括：
创建新用户
查询用户信息
更新用户资料
删除用户
管理用户与订单的关系
接下来设计一组接口，供前端页面（或移动端 App）调用。
第一原则： ...