当前位置： 首页 > news >正文

夯实前端基础之HTML篇

news 2025/9/19 9:59:39

知识点概览

在这里插入图片描述

HTML部分

1. DOM和BOM有什么区别？

  • DOM（Document Object Model）

当网页被加载时，浏览器会创建页面的对象文档模型，HTML DOM 模型被结构化为对象树

用途： 主要用于网页内容的动态修改和交互，比如网页的局部更新、表单验证、创建动态列表等场景。

在这里插入图片描述

  • 什么是Shadow DOM？和普通DOM树有什么区别？
    • web component做到真正的组件化
    • 原生规范，无需框架
    • 天然与用户隔离，真正意义上的CSS scope
    • 比如常用的video标签，我们通常只能在DOM结构中看到一个video标签，但在设置中选择显示Shadow DOM的时候，能看到它真正的结构

在这里插入图片描述

// 手动实现一个shadow DOM
<body><script>customElements.define("my-shadow-dom",class extends HTMLElement {connectedCallback() {const shadow = this.attachShadow({ mode: "open" });shadow.innerHTML = "this is my shadow DOM！";}});</script><my-shadow-dom></my-shadow-dom></body>

在这里插入图片描述

  • BOM（Browser Object Model）

浏览器对象模型，document也是浏览器的对象

用途： 主要用于用于控制浏览器的行为，如页面导航、获取浏览器信息、管理浏览器窗口大小和位置等操作。

2. HTML中meta有什么作用？

HTML 标签

作用：定义该html文档的元数据（字符集、页面描述、关键词、文档作者和视口设置等）

浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。 --><meta name="keywords" content="css, JavaScript, CSS3"><meta name="author" content="guoshouying"><meta name="description" content="this is my site."><meta http-equiv="refresh" content="10"><!-- 每 10 秒刷新一次文档 -->
</head>

3. HTML5中语义化标签有哪些及特性

优点：1、利于搜索引擎优化SEO，2、方便开发和维护，3、无障碍访问(Accessibility)

在这里插入图片描述

4. 如何检查浏览器是否支持h5

  • 检测特定的html5标签或者API，如 canvas,video,audio等标签，看浏览器能否正确识别
var canvas = document.createElement('canvas'); 
if (canvas.getContext) { console.log("浏览器支持canvas"); 
} else { console.log("浏览器不支持canvas"); 
}

5. 哪些标签可以优化SEO？

  • 元标签（meta）
  • 语义化标签（header，section，article等）- 这些标签能够让搜索引擎更好地理解页面的结构和内容。
  • 链接标签（a）
  • 图像标签（img）- alt属性是搜索引擎理解图像内容与页面相关性的重要依据。

6. 对target='_blank’的理解？有什么安全性问题？如何防范？

作用：在新的窗口中打开链接指向的内容

  • 安全问题
    • 钓鱼攻击风险：打开新的窗口后，通过window.opener可以访问原始窗口对象，进而获取到一些隐私信息，如登录状态，账号信息等，从而进行钓鱼攻击。
    • 跨站脚本攻击（XSS）风险：如果新打开的页面包含恶意脚本，并且能够通过window.opener与原始页面进行交互，就有可能将恶意脚本注入到原始页面中，导致用户信息泄露或者其他安全问题
  • 防范措施
<a href="http://www.baidu.com" target="_blank" rel="norefferrer noopener">打开百度</a>

7. src和href的区别？

  • src（Souce）
    • 常用于img, script, iframe等标签，用于指定要加载到当前元素中的外部资源的位置。加载时，浏览器会停止对HTML文档的解析，直到获取并加载完指定的资源，然后再继续HTML解析。
  • href（hypertext reference）
    • 常用于a（超链接），link标签（链接样式表），用于指定目标资源的位置，这个资源和当前文档是引用关系，浏览器不会暂停HTML解析去执行它。a标签中只有点击的时候才执行加载该页面。对于<link rel="stylesheet" href="styles.css">，浏览器会在后台异步加载样式表，不会阻塞 HTML 文档的解析。
    • href=“javascript:void(0) " 和 href=”#" 有什么区别？
      • href="javascript:void(0) "：表示死链接,通常用于需要在点击链接时执行 JavaScript 代码，但不希望页面有任何跳转或刷新的情况：<a href="javascript:void(0)" onclick="doSomething()">点击我</a>，如果页面javascript被禁用，将不工作。
      • href="#"：锚点，默认是#top,页面会向上滚动，如果页面javascript被禁用，仍然工作。

8. script标签中的defer和async的区别？

  • 相同点
    • 都是实现脚本的异步加载，不会阻塞浏览器对HTML文档的解析，在后台下载脚本，提高网页性能及用户体验。
  • 不同点
    • defer：脚本加载完后不会立即执行，等HTML解析完按顺序执行脚本。适用于脚本间有依赖顺序，或者需要操作DOM的场景。
    • async：脚本加载完立即执行，且不按照顺序，哪个下载完的快先执行哪个。适用于不操作DOM的独立脚本，比如广告脚本，第三方统计脚本。

9. 什么是canvas & 什么时候用？

  • 概念
    • h5提供的标签，允许用JavaScript在画布上绘图（形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作）
    • canvas是基于像素的，有一个二维的网格系统，原点为（0，0）在左上角，x轴水平向右，y轴垂直向下。
    • 与SVG相比，SVG是可缩放矢量图形，使用XML来描述图形，可以方便的缩放，修改。canvas绘制的图形基于像素修改比较困难。
  • 使用场景
    • 游戏开发：简单的休闲游戏，如连连看，绘制图形。
    • 可视化开发：柱状图，折线图等各种图表。
    • 图像处理和特效：例如，实现图像的灰度化、模糊处理、旋转、缩放等效果。
    • 动画制作：加载动画，粒子动画（比如模拟雪花飘落、烟花绽放等效果）等。
  • 代码实现 Canvas API
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvss</title>
</head>
<body><!-- 创建canvas元素 --><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvasElem = document.getElementById('myCanvas');// 创建绘图上下文context对象const ctx = canvasElem.getContext('2d');ctx.fillStyle = "#ff0000";   // 设置填充颜色ctx.fillRect(0, 0, 200, 100); // 绘制矩形，fillRect(x, y, width, height)ctx.clearRect(10, 10, 50, 50); // 清除矩形区域，clearRect(x, y, width, height)ctx.strokeStyle = "red";   // 设置边框颜色   ctx.strokeRect(0, 102, 100, 50); // 绘制矩形边框，strokeRect(x, y, width, height)ctx.beginPath(); // 开始绘制路径ctx.moveTo(0,220); // 将画笔移动到指定的坐标点，不进行绘制，主要用于确定线条的起始点ctx.lineTo(150, 220); // 画一条线段到指定位置ctx.stroke(); // 绘制线段// 绘制圆形// x和y是圆心的坐标，radius是半径，startAngle和endAngle是起始角度和结束角度（以弧度为单位），counterclockwise是一个布尔值，用于指定是否逆时针绘制。ctx.beginPath();ctx.arc(100, 300, 50, 0, Math.PI * 2, true); // arc(x, y, radius, startAngle, endAngle, counterclockwise)ctx.stroke();</script>
</body>
</html>

svg和canvas画出的圆形区别

在这里插入图片描述

10. 渐进增强和优雅降级之间的区别？

  • 渐进增强（Progressive Enhancement）
    • 一种网页设计和开发理念。它强调从最基本的、能在所有浏览器和设备上正常工作的核心内容和功能开始构建网页。然后，根据浏览器的能力和设备的特性，逐步添加更高级的样式、交互功能和性能优化。
    • 例如，先构建一个只包含纯文本内容和基本链接的网页，确保它在最古老的浏览器或功能受限的设备（如一些低性能的移动设备）上能够正常访问和理解。之后，再为支持 CSS3 和 JavaScript 的现代浏览器添加样式（如渐变背景、动画效果）和交互功能（如表单验证、下拉菜单的动态效果）。
    • 兼容性好，易于维护和扩展
  • 优雅降级（Graceful Degradation）
    • 优雅降级的理念与渐进增强相反。它是从一个功能齐全、具有高级特性（如复杂的 CSS 样式、大量的 JavaScript 交互）的网站开始构建，然后考虑当浏览器或设备不支持某些高级特性时，如何让网站 “优雅地” 降级，即仍然能够提供基本的、可接受的用户体验。
    • 用户体验优化在先，灵活性。

11. 什么是回流和重绘？

  • 回流（重排）Reflow
    • 浏览器重新计算页面中元素的几何属性（如位置，大小等）
      • 修改元素的尺寸、位置、边距、填充等属性.
      • 添加或删除可见的 DOM 元素.
      • 改变元素的字体大小.
      • 页面的尺寸变化（如窗口大小调整）.
      • 获取元素的几何属性（如 offsetWidth、offsetHeight 等）.
    • 比如排队前面的一个人走了，后面所有人都要向前走一步，或者有人插队，后面所有人都要向后退，这就是回流
  • 重绘 Repaint
    • 浏览器重新绘制元素的过程
      • image的宽高定了，只是换了src
      • 改变元素的颜色，边框等属性
      • 修改元素可见性（display:none改为block）
    • 比如排队有人替你占位置，你来了，替你的那个人走了，不影响到后面的人，这就是重绘
  • 优化策略
    • 使用虚拟DOM：现代化前端框架像 React、Vue.js 等都使用了虚拟 DOM 来优化 DOM 更新。当数据发生变化时，框架会先在虚拟 DOM 上进行操作，计算出新旧虚拟 DOM 的差异（这个过程称为 “diffing”），然后只将真正需要更新的部分应用到真实 DOM 上。这样可以避免不必要的 DOM 操作，从而减少回流和重绘。因为在虚拟 DOM 层面，可以高效地比较和计算出最小的更新范围，而不是像直接操作真实 DOM 那样，每次小的修改都可能引发大面积的布局重新计算和重绘。
    • 避免内联样式的频繁修改： 内联样式（通过style属性修改样式）会导致浏览器立即重新计算样式和布局。如果需要频繁地修改元素的样式，最好使用类名切换或者外部 CSS 样式表来控制样式变化。
    • 使用display:none代替visibility:hidden： 缺点：在合适的场景下才能用。
    • 脱离文档流（使用position:absolute或position:fixed）：需要谨慎使用，可能会带来布局上的复杂性。

12. iframe有哪些应用？如何处理iframe通信？

  • 应用
    • 最常见的一种微前端手段
    • 利用iframe开发低代码平台
    • 嵌入第三方内容（如广告，地图，AI助手等）
    • 跨域
  • 通信： window.postMessage方法

iframeA.html

<body>这是页面A<button onclick="onClick()">点击我</button><iframe id="iframe" src="./iframeB.html"></iframe><script>//向iframe发送消息const iframe = document.getElementById("iframe");function onClick() {iframe.contentWindow.postMessage("hello b页面", "*");}//监听iframe里的页面发出的消息window.addEventListener("message", (val) => {console.log("message", val);});</script></body>

iframeB.html

<body>这是页面B<button onclick="onClick()">点击我</button><script>//向父页面发送消息function onClick() {window.parent.postMessage("message", "*");}//接受父页面传来的消息window.addEventListener("message", (val) => {console.log("valll", val);});</script></body>

相关文章：

夯实前端基础之HTML篇

知识点概览 HTML部分 1. DOM和BOM有什么区别&#xff1f; DOM&#xff08;Document Object Model&#xff09; 当网页被加载时&#xff0c;浏览器会创建页面的对象文档模型&#xff0c;HTML DOM 模型被结构化为对象树 用途&#xff1a; 主要用于网页内容的动态修改和交互&…...

编程日记 2025/1/10 5:23:19

VVenC 编码器源码结构与接口函数介绍

VVenC VVenC&#xff08;Fraunhofer Versatile Video Encoder&#xff09;是由德国弗劳恩霍夫海因里希研究所&#xff08;Fraunhofer Heinrich Hertz Institute, HHI&#xff09;开发的一个开源的高效视频编码器。它实现了最新的视频编码标准——Versatile Video Coding (VVC)…...

编程日记 2025/1/10 5:17:13

【C++习题】20. 两个数组的交集

题目&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 链接&#x1f517;&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 代码&#xff1a; class Solution { public:// 函数功能&#xff1a;求两个数组…...

编程日记 2025/1/10 5:15:11

小R的蛋糕分享

小R的蛋糕分享 问题描述 小R手里有一个大小为 n 行 m 列的矩形蛋糕&#xff0c;每个小正方形区域都有一个代表美味度的整数。小R打算切割出一个正方形的小蛋糕给自己&#xff0c;而剩下的部分将给小S。她希望两人吃的部分的美味度之和尽量接近。 我们定义小R吃到的部分的美味度…...

编程日记 2025/1/10 5:09:06

基于Arduino的FPV头部追踪相机系统

构建FPV头部追踪相机&#xff1a;让你置身于遥控车辆之中&#xff01; 在遥控车辆和模型飞行器的世界中&#xff0c;第一人称视角&#xff08;FPV&#xff09;体验一直是爱好者们追求的目标。通过FPV头部追踪相机&#xff0c;你可以像坐在车辆或飞行器内部一样&#xff0c;自由…...

编程日记 2025/1/10 5:07:04

使用 PyTorch 自定义数据集并划分训练、验证与测试集

使用 PyTorch 自定义数据集并划分训练、验证与测试集 在图像分类等任务中&#xff0c;通常需要将原始训练数据进一步划分为训练集和验证集&#xff0c;以便在训练过程中评估模型的性能。下面将详细介绍如何组织数据与注释文件、如何分割训练集和验证集&#xff0c;以及如何基于…...

编程日记 2025/1/10 5:02:57

VSCode 插件

VSCode 插件 1. GitHub Copilot - AI 代码助手 功能&#xff1a;根据上下文提供实时代码补全&#xff0c;支持自然语言转代码&#xff0c;提供符合现代编程规范的建议。进阶技巧&#xff1a; 使用快捷键 Alt ] 切换多个建议。写注释时&#xff0c;描述业务逻辑而不是具体实现…...

编程日记 2025/1/10 4:58:52

Windows使用AutoHotKey解决鼠标键连击现象（解决鼠标连击、单击变双击的故障）

注&#xff1a;罗技鼠标&#xff0c;使用久了之后会出现连击现象&#xff0c;如果刚好过保了&#xff0c;可以考虑使用软件方案解决连击现象&#xff1a; 以下是示例AutoHotKey脚本&#xff0c;实现了调用XButton1用于关闭窗口&#xff08;以及WinW&#xff0c;XButton2也导向…...

编程日记 2025/1/10 4:55:50

Linux 环境（Ubuntu）部署 Hadoop 环境

前置准备 准备三台机器 cat /etc/hosts 192.168.1.7 hadoop-master 192.168.1.11 hadoop-slave01 192.168.1.12 hadoop-slave02Linux 环境 cat /etc/os-release PRETTY_NAME"Ubuntu 24.10" NAME"Ubuntu" VERSION_ID"24.10" VERSION"24.…...

编程日记 2025/1/10 4:54:49

如何在Windows 11 WSL2 Ubuntu 环境下安装和配置perf性能分析工具？

在Windows 11 WSL2 Ubuntu 环境下完整安装和配置perf性能分析工具 一、背景二、准备工作三、获取并编译Linux内核源码四、安装和配置perf五、测试perf六、总结 一、背景 由于WSL2使用的是微软定制的内核&#xff0c;并非标准的Ubuntu内核&#xff0c;因此直接使用apt安装linux…...

编程日记 2025/1/10 4:50:45

Docker运维高级容器技术知识点总结

1、虚拟机部署和容器化部署的区别是什么&#xff1f; 1、技术基础&#xff1a; <1>.虚拟化技术在物理硬件上创建虚拟机&#xff0c;每台虚拟机运行自己完整的操作系统、从而实现资源隔离。 <2>.容器化技术&#xff1a;将应用程序打包在容器内&#xff0c;在进程空间…...

编程日记 2025/1/10 4:46:41

react-quill 富文本组件编写和应用

index.tsx文件 import React, { useRef, useState } from react; import { Modal, Button } from antd; import RichEditor from ./RichEditor;const AnchorTouchHistory: React.FC () > {const editorRef useRef<any>(null);const [isModalVisible, setIsModalVis…...

编程日记 2025/1/10 4:43:36

LabVIEW轴承性能测试系统

本文介绍了基于LabVIEW的高效轴承性能测试系统的设计与开发。系统通过双端驱动技术实现高精度同步控制&#xff0c;针对轴承性能进行全面的测试与分析&#xff0c;以提高轴承的可靠性和寿命。 项目背景 随着工业自动化程度的提高&#xff0c;对轴承的性能要求越来越高。传统的…...

编程日记 2025/1/10 4:35:28

【《游戏编程模式》实战04】状态模式实现敌人AI

目录 1、状态模式 2、使用工具 3、状态模式适用范围 4、实现内容 5、代码及思路 Enemy.cs EnemyState.cs 6、unity里的设置 7、运行效果展示 1、状态模式 “允许一个对象在其内部状态改变时改变自身的行为。对象看起来好像是在修改自身类。” 就是一个对象能随着自己…...

编程日记 2025/1/10 4:34:27

借助免费GIS工具箱轻松实现las点云格式到3dtiles格式的转换

在当今数字化浪潮下&#xff0c;地理信息系统&#xff08;GIS&#xff09;技术日新月异&#xff0c;广泛渗透到城市规划、地质勘探、文化遗产保护等诸多领域。而 GISBox 作为一款功能强大且易用的 GIS 工具箱&#xff0c;以轻量级、免费使用、操作便捷等诸多优势&#xff0c;为…...

编程日记 2025/1/10 4:28:21

科研绘图系列：R语言科研绘图之标记热图（heatmap）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理画图系统信息参考介绍 科研绘图系列：R语言科研绘图之标记热图（heatmap） 加载R包 library(tidyverse) library(ggplot2) library(reshape)…...

编程日记 2025/1/10 4:27:20

【轻松学C：编程小白的大冒险】--- C语言简介 02

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【轻松学C&#xff1a;编程小白的大冒险】…...

编程日记 2025/1/10 4:22:16

《HeadFirst设计模式》笔记（上）

设计模式的目录&#xff1a; 1 设计模式介绍 要不断去学习如何利用其它开发人员的智慧与经验。学习前人的正统思想。 我们认为《Head First》的读者是一位学习者。 一些Head First的学习原则&#xff1a; 使其可视化将文字放在相关图形内部或附近&#xff0c;而不是放在底部…...

编程日记 2025/1/10 4:20:14

数据结构：ArrayList与顺序表

目录 &#x1f4d6;一、什么是List &#x1f4d6;二、线性表 &#x1f4d6;三、顺序表 &#x1f42c;1、display()方法 &#x1f42c;2、add(int data)方法 &#x1f42c;3、add(int pos, int data)方法 &#x1f42c;4、contains(int toFind)方法 &#x1f42c;5、inde…...

编程日记 2025/1/10 4:17:12

SpringBoot之核心配置

学习目标&#xff1a; 1.熟悉Spring Boot全局配置文件的使用 2.掌握Spring Boot配置文件属性值注入 3.熟悉Spring Boot自定义配置 4.掌握Profile多环境配置 5.了解随机值设置以及参数间引用 1.全局配置文件 Spring Boot使用 application.properties 或者application.yaml 的文…...

编程日记 2025/1/10 4:14:10

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/9/18 23:48:33

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/18 12:56:51

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/8/19 13:48:59

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/9/13 17:38:50