蓝桥杯 web 知识点集合

HTML+CSS

  • HTML 基础标签：包括、、等基础标签，用于构建网页的基本结构。
  • HTML5 新特性：新增语义化标签（如
    、
    ）、多媒体支持（、）、增强型表单元素等。
  • HTML5 本地存储：利用localStorage和sessionStorage在客户端持久化或临时保存数据。
  • CSS 基础语法：选择器、属性、值，如何应用样式到HTML文档中。
  • 盒子模型：理解margin、border、padding和content四个部分对布局的影响。
  • 浮动与定位：使用float、position属性进行页面布局控制。
  • CSS3 新特性：圆角、阴影、渐变背景、过渡效果、动画等。
  • 弹性盒子：使用Flexbox进行高效灵活的布局设计。
  • 媒体查询：响应式设计的基础，根据设备特征应用不同的样式。

JavaScript

  • JavaScript 基础语法：变量声明、条件语句、循环、函数定义等基本概念。
  • DOM 与 BOM：操作文档对象模型(DOM)和浏览器对象模型(BOM)，实现动态交互。
  • JavaScript 内置对象：如Date、Math、Array等对象的使用方法。
  • JavaScript 事件：监听用户交互（点击、输入等），并作出相应处理。
  • JavaScript AJAX：通过异步请求获取或发送数据，无需刷新整个页面。
  • 正则表达式：匹配字符串模式的强大工具，常用于验证输入格式。

Axios

  • Axios 基础语法：一个基于Promise的HTTP客户端，用于浏览器和node.js中发起请求。

ES6

  • let 和 const 命令：块级作用域变量声明方式。
  • class：面向对象编程中的类定义。
  • set 和 map：ES6引入的数据结构，提供更丰富的集合操作。
  • Proxy：用于创建代理对象，拦截并自定义基本操作。
  • 字符串、函数、数组和对象的扩展：ES6对这些类型提供的新方法和功能。
  • 异步编程与模块化：async/await简化异步代码编写，ES6模块化系统组织代码。

Vue.js

  • Vue 核心：Vue框架的核心概念，如响应式数据绑定、组件化开发。
  • Vue 组件：创建可复用的界面组件。
  • vue-router：Vue官方路由管理工具，支持SPA应用导航。

ElementPlus

  • 基础组件：如按钮(Button)、输入框(Input)等常用UI组件。
  • 表单和表格组件：用于快速搭建表单和展示数据。
  • 弹出组件：如对话框(Dialog)、消息提示(Message)等。
  • 导航组件：侧边栏(Sidebar)、面包屑(Breadcrumb)等导航元素。

ECharts

  • ECharts 基础语法：配置项和数据接口的基本使用。
  • ECharts 绘制图表：绘制柱状图、折线图等多种图表类型。
  • ECharts 异步数据加载和更新：处理动态数据展示。
  • ECharts 交互组件：添加交互功能，如缩放、拖拽等。
  • ECharts 事件处理：监听图表上的各种事件。

Node.js

  • Node.js 基础：了解Node.js环境及运行原理。
  • 内置模块使用：如fs(文件系统)、http(网络服务)等核心模块的应用。

Pinia

  • Pinia 核心：作为Vue的状态管理库，替代Vuex的新选择，提供简洁的状态管理模式。

旋转

动画

grid

flex

2.CSS3 [1-5]

（7）CSS 基础语法 [1]
  • 选择器：类选择器（.class）、ID选择器（#id）、标签选择器（tag）。
  • 属性与值：如color: red;、font-size: 16px;。
  • 优先级：内联样式 > ID选择器 > 类选择器 > 标签选择器。
（8）盒子模型 [1]
  • 组成：
    • content：实际内容区域。
    • padding：内边距。
    • border：边框。
    • margin：外边距。
  • 计算宽度：总宽度 = 内容宽度 + 内边距 + 边框 + 外边距。
（9）浮动与定位 [2]
  • 浮动：float: left/right;，常用于布局。
  • 定位：
    • static：默认值。
    • relative：相对定位。
    • absolute：绝对定位。
    • fixed：固定定位。
（10）CSS3 新特性 [3-5]
  • 渐变：线性渐变（linear-gradient）、径向渐变（radial-gradient）。
  • 阴影：box-shadow、text-shadow。
  • 动画：@keyframes定义动画，animation应用动画。
（11）弹性盒子 [3-5]
  • 核心概念：Flexbox是一种高效的布局方式。
  • 容器属性：
    • display: flex;
    • flex-direction、justify-content、align-items。
  • 子项属性：
    • flex-grow、flex-shrink、flex-basis。
（12）媒体查询 [3]
  • 语法： 
    1. @media (max-width: 768px) {
    2.   body { font-size: 14px; }
    3. }
  • 用途：根据屏幕尺寸调整样式，实现响应式设计。

3. JavaScript [1-8]

（7）JavaScript 基础语法 [1]
  • 变量声明：var、let、const。
  • 条件语句：if、else if、switch。
  • 循环：for、while、do...while。
  • 函数：function关键字。
（8）DOM 与 BOM [2]
  • DOM：操作文档对象模型，如document.getElementById()。
  • BOM：操作浏览器对象模型，如window.alert()、location.href。
（9）JavaScript 内置对象 [3]
  • Date：处理日期和时间。
  • Math：数学运算（如Math.random()）。
  • Array：数组操作（如push()、pop()）。
（10）JavaScript 事件 [5]
  • 常见事件：
    • 点击事件：click。
    • 输入事件：input、change。
    • 鼠标事件：mouseover、mouseout。
  • 事件绑定：addEventListener()。
（11）JavaScript AJAX [5-8]
  • XMLHttpRequest：传统的AJAX请求方式。
  • Fetch API：现代异步请求方式。
  • 跨域问题：CORS、JSONP。
（12）正则表达式 [3-5]
  • 语法：/pattern/flags。
  • 方法：
    • test()：测试字符串是否匹配。
    • match()：提取匹配结果。
  • 应用场景：表单验证、字符串解析。

4. ES6 [1-5]

（7）let 和 const 命令 [1]
  • let：块级作用域变量。
  • const：常量，不可重新赋值。
（8）class [2]
  • 定义类： 
    1. class Person {
    2.   constructor(name) {
    3.     this.name = name;
    4.   }
    5.   greet() {
    6.     console.log(`Hello, ${this.name}`);
    7.   }
    8. }
（9）set 和 map [3]
  • Set：集合，元素唯一。
  • Map：键值对集合。
（10）Proxy [4]
  • 拦截操作： 
    1. const handler = {
    2.   get(target, key) {
    3.     return key in target ? target[key] : "Not Found";
    4.   }
    5. };
    6. const proxy = new Proxy({}, handler);
（11）字符串、函数、数组和对象的扩展 [5]
  • 字符串：模板字符串（`Hello ${name}`）。
  • 数组：map()、filter()、reduce()。
（12）异步编程与模块化 [5]
  • 异步：async/await。
  • 模块化：import/export。

5. Axios [2-5]

（6）Axios API [2]
  • 发起GET、POST请求： 
    axios.get('/api/data').then(response => console.log(response.data));
（7）Axios 实例 [3]
  • 创建实例： 
    const instance = axios.create({ baseURL: 'https://api.example.com' });
（8）请求配置 [3]
  • 设置超时时间、请求头等。
（9）默认配置 [3]
  • 全局默认配置： 
    axios.defaults.baseURL = 'https://api.example.com';
（10）拦截器 [5]
  • 请求和响应拦截： 
    axios.interceptors.request.use(config => config);

6. Vue.js [3-10]

（1）Vue 核心语法 [2-4]
  • 数据绑定：v-bind、v-model。
  • 指令：v-if、v-for。
（2）Vue 组件化开发 [5-10]
  • 定义组件： 
    Vue.component('my-component', { template: '
    Hello
    '     });
（3）vue-router(v4.x) [2-5]
  • 路由配置： 
    1. const routes = [{ path: '/', component: Home }];
    2. const router = VueRouter.createRouter({ routes });
（4）pinia 使用 [2-5]
  • 状态管理： 
    const store = defineStore('main', { state: () => ({ count: 0 }) });

7. ElementPlus [1-5]

（1）基础组件的使用 [1-3]
  • 按钮、输入框等。
（2）表单和表格组件 [1-3]
  • 表单验证、分页表格。
（3）反馈组件 [1-3]
  • 对话框、提示框。
（4）导航组件 [1-3]
  • 菜单、面包屑。
（5）组件的二次封装 [3-5]
  • 自定义组件。

8. ECharts [1-5]

（1）ECharts 基础语法 [1-3]
  • 初始化图表： 
    const chart = echarts.init(document.getElementById('chart'));
（2）ECharts 绘制图表 [1-3]
  • 配置项和数据。
（3）ECharts 异步数据加载和更新 [3-5]
  • 动态更新数据。
（4）ECharts 交互组件 [1-3]
  • 工具箱、图例。
（5）ECharts 事件处理 [3-5]
  • 监听点击事件。

9. Node.js [1-5]

（1）Node.js 基础 [1-3]
  • 模块系统：require和module.exports。
（2）内置模块使用(fs、http 等) [3-5]
  • 文件操作：fs.readFile()。
  • 创建服务器：http.createServer()。

注：本文转载自blog.csdn.net的Jasmin Tin Wei的文章"https://blog.csdn.net/2401_84348511/article/details/146886135"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！