:-)

主题

什么是HTML，什么是XML？

  • HTML（超文本标记语言 - HyperText Markup Language）: 定义网页内容的含义和结构，用来显示数据；

  • XML（可扩展标记语言 - Extensible Markup Language）：用来结构化、存储、传输信息。（基于 XML 的语言，包括SVG, RSS等）；

HTML 全局属性
  • class
  • style
  • id
  • title
  • lang
  • translate
  • accesskey
  • draggable
  • hidden
  • data-*
  • spellcheck
  • tabindex
  • dir
  • role
HTML5 有哪些新特性 ？
  • 新增语义化标签：nav、header、footer、aside、section、article
  • 音频、视频标签：audio、video
  • 数据存储：localStorage、sessionStorage
  • canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
  • input标签新增属性：placeholder、autocomplete、autofocus、required
  • history API: go、forward、back、pushstate
什么是DOM，什么是BOM ？

  • DOM（Document Object Model — 文档对象模型）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

    • Core DOM - 所有文档类型的标准模型
    • XML DOM - XML 文档的标准模型
    • HTML DOM - HTML 文档的标准模型

  • BOM（Browser Object Model — 浏览器对象模型）提供访问和操作浏览器的接口。

BOM常见的对象 ？

  • window：

    • open(URL, name, specs, replace): 打开一个新的浏览器窗口或标签页，并加载指定的URL。
    • close(): 关闭当前窗口。
    • alert(message): 警告框。
    • confirm(message): 显示一个带有指定消息以及确定和取消按钮的对话框。

  • document:

    • images, links, forms, ...

  • navigator：

    • userAgent: 返回一个包含浏览器名称、版本、渲染引擎等信息的字符串
    • language: 返回浏览器的主要语言
    • onLine: 是否联网

  • screen：

    • screen.width 和 screen.height: 分别返回屏幕的宽度和高度（以像素为单位）。

  • location：

    • href: 完整了URL
    • orgin：域名标准形式。包含协议、域名、端口号
    • protocol：当前URL的协议，包括冒号
    • host：域名，含端口号
    • hostname： 域名，不含端口号
    • port：端口号
    • reload(): 方法，重载页面
    • replace(): 用新的文档替换当前文档，不保留历史记录

  • history：

    • history.back(): 加载历史列表中的前一个URL
    • history.forward(): 加载历史列表中的下一个URL
    • history.go(number): 加载历史列表中的某个具体页面，或根据参数（正数或负数）前进或后退指定的页面数
从输入url，到页面的画面展示的过程 ？

判断是否命中缓存 -> DNS解析, 获取IP -> 发起三次握手，建立 tcp 连接， -> 发送 http 请求 -> 服务器返回 response (状态码，响应头、响应体) -> 浏览器接收响应 -> parse HTML -> DOM Tree 、 CSSOM Tree， 加载外部资源 -> render Tree -> layout -> print -> 处理交互（事件，数据更新，重绘重排）-> 页面卸载、资源释放

script 标签中， async 和 defer 两个属性有什么用途和区别 ？
js
// 顺序加载并执行脚本, 阻塞后续的DOM渲染
<script src='xxx'></script>

// async: 异步加载，加载完成后立刻执行，可能会阻塞DOM渲染
<script src='xxx' async></script>

// defer: 异步加载, 会在 DOMContentLoaded 事件之前执行，不会阻塞
<script src='xxx' defer></script>
前端跨页面通信，你知道哪些方法？
  • LocalStorage
  • SessionStorage
  • BroadcastChannel(同源) / postMessage(任何)
  • SharedWorker
  • IndexedDB
  • WebSockets
DOM树
  • DOM树（Document Object Model Tree）是表示 HTML 和 XML 文档的树形结构，它将文档内容分解成一系列节点，包括元素、属性、文本等，每个节点都可以操作并修改。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些 ？

  • 行内元素通常用于在一行内显示，不会独占一行的空间。常见的行内元素有：

    • a, span, strong, em, img, input

  • 块级元素通常会独占一行的空间，并且会在前后创建换行。常见的块级元素有：

    • div，p，h1 - h6，ul，ol，li，table

  • 空元素是指没有内容, 只有一个开启标签, 没有闭合标签的元素。常见的空元素有：

    • hr, br，meta，link，img，input
script 标签为什么建议放在 body 标签的底部 ？

浏览器在渲染 html 的时候是从上到下执行的，当遇到 js 文件的时候就会停止当前页面的渲染，转而去下载 js 文件。如果将 script 标签放在头部，在文件很大的情况下将导致加载时间延长，影响用户体验。可以将 script 标签放在 body 的底部，或者通过defer、async属性将js文件转为异步加载。

页面导入样式时，使用 link 和 @import 有什么区别 ？
  • link 属于HTML标签，而 @import 是css提供的；
  • 页面被加载时，link 会同时被加载; 而 @import 引用的 css 会等到页面被加载完再加载；
  • @import 只在IE5以上才能识别，而link 无兼容问题；
  • link 方式的样式的权重高于 @import 的权重。
HTML 标签中的 src 和 href 有什么区别 ？

  • href（Hypertext Reference） 是超文本引用，指向资源的位置，建立与目标文件的链接；（同时渲染）

  • src （source） 目的是把资源下载到页面中；（阻塞对文档的处理）

DOCTYPE的作用是什么？

DOCTYPE 是指文档类型声明，用于告诉浏览器当前页面使用的 HTML 版本。它位于 HTML 文档的开头，例如 表示使用HTML5。

什么是HTML5，以及和HTML的区别是什么 ？

HTML5 是 HTML 的新标准，其主要目标是无需任何额外的插件如 Flash 等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

HTML5声明简单（<!DOCTYPE html>, DOCTYPE 声明于文档最前面，告诉浏览器以何种方式来渲染页面），在语义上却有很大的优势。提供了一些新的标签，比如：<header>、<article>、<footer>。

alt 和 title

  • title

    • 网页标题
    • 提供额外的说明信息

  • alt

    • 只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供说明图像的文字信息
Node 和 Element 是什么关系 ？

Element 继承于 Node，具有 Node 的方法，同时又拓展了很多自己的特有方法。Node 的一些方法，返回值为 Node，比如说文本节点，注释节点之类的，而Element的一些方法，返回值则一定是Element。

常见的 input 属性 ？

MDN input

html
<!-- 输入长度 -->
<input maxlength="5" />

<input minlength="5" />

<!-- 禁止自动填充 -->
<input type="text"  autocomplete="off" />

<input type="text"  disabled />

<input type="text"  readonly value="qzjiang" />

<input type="text"  required />
在选择图片后，通过浏览器预览待上传的图片 ？
  • URL.cteateObejectURL
  • FileReader
js
function imgPreview(img) {
  document.querySelector("img").src = URL.cteateObejectURL(img.files[0]);
}


function imgPreview(img) {
  const reader = new FileReader();
  reader.onload = function (imgFile) {
      document.querySelector("img").src = reader.result;
  }
  reader.readAsDataURL(img.files[0]);
}
怎么实现点击回到顶部的功能 ？
  • 锚点
html
<body style="height: 1080px;">
    <div id="top"></div>
    <a href="#top" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>
  • scrollTop
js
  document.body.scrollTop = document.documentElement.scrollTop = 0;
  • scrollTo
js
scrollTo(0,0);
  • scrollBy
js
const top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0, -top)
  • scrollIntoView
js
target.scrollIntoView()
如何实现 SEO 优化 ？

  • URL结构：尽管 SPA 应用主要依赖 JavaScript 来动态加载和渲染内容，但为每个视图或页面创建唯一的 URL 仍然很重要。使用路由库（如React Router、Vue Router等）来为每个视图生成独特的URL，并确保 URL 是语义化的，能够清晰地反映页面的内容。

  • 服务器端渲染（SSR）或预渲染：SPA 应用在初始加载时可能只包含少量内容，这可能导致搜索引擎爬虫无法获取完整的页面内容。为了解决这个问题，可以使用服务器端渲染（SSR）或预渲染技术。SSR在服务器端生成完整的HTML页面，而预渲染则生成静态的HTML快照，这些技术都可以帮助搜索引擎爬虫更好地理解和索引页面内容。

  • 元数据优化：确保每个页面都有适当的标题（<title>标签）、描述（<meta name="description">标签）和关键词（虽然关键词在现代SEO中的权重已经降低，但仍值得考虑）。这些元数据有助于搜索引擎理解页面的内容，并在搜索结果中展示相关信息。

  • 链接结构：构建合理的内部链接结构，使得爬虫能够轻松地在页面之间跳转。同时，积极寻求外部链接，尤其是来自高质量、相关性强的网站的链接，以提高网站的权威性和排名。

  • 内容优化：优质、原创的内容是吸引搜索引擎和用户的关键。确保SPA应用中的每个页面都有独特且有价值的内容，并定期更新和维护这些内容。

  • 网站速度优化：优化 SPA 应用的加载速度和性能，确保用户在访问页面时能够快速加载和浏览内容。这可以通过压缩代码、使用CDN、优化图片等方式实现。

  • 跟踪和分析：使用 Google Analytics 等工具跟踪和分析网站的流量、用户行为等数据，以便了解 SEO 策略的效果，并根据数据进行调整和优化。

DNS 预解析是什么？怎么实现 ?

DNS 预解析（DNS Prefetch）是前端网络性能优化的一种措施。它根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，从而缩短DNS解析时间，进而提高网站的访问速度。

在解析过程中，浏览器会按照一定顺序（浏览器缓存、系统缓存、路由器缓存、ISP（运营商）DNS缓存、根域名服务器、顶级域名服务器、主域名服务器）逐步读取缓存，直到拿到IP地址。DNS预解析可以有效地将这些步骤提前进行，使得在真正需要访问网站时，DNS解析已经完成，从而减少了用户的等待时间。

使用HTML的link标签实现DNS预解析：

html
<head>
  <link rel="dns-prefetch" href="//www.example.com">
</head>

DNS预解析只对首次访问网站的用户有效，因为对于已经访问过的网站，浏览器和系统缓存中可能已经存有相应的解析结果。此外，为了最大化预解析的效果，开发者需要谨慎选择需要预解析的域名，避免对不必要的域名进行预解析，浪费资源。

iconfont 是什么？有什么优缺点？

IconFont是字体图标，其图标实际上藏在.ttf字体文件里面，因此看着是个图标，但其实却是个文字。IconFont具有矢量性，支持屏幕适配（缩放）和样式控制（如颜色、阴影，甚至浮雕），并且文件较小，通常只有20~50KB，这使得加载速度快，且易于修改。然而，IconFont也存在一些限制，例如它只能是纯色或渐变色，复杂图标无法使用此技术，而且可能存在FOUT（Flash of Unstyled Text）问题，即浏览器先用默认字体渲染，待字体文件下载完毕后再对文字内容进行部分渲染，导致文字出现不可避免的闪烁。

总的来说，IconFont的优点包括易于使用、修改和加载速度快，而缺点则主要体现在颜色限制和可能的闪烁问题上。在使用IconFont时，需要根据项目的具体需求和目标来权衡这些优缺点。

Canvas 和 SVG 有什么区别 ？

Canvas和 SVG 是两种用于在网页上创建图形的不同技术，它们各自具有独特的特点和适用场景。以下是它们之间的主要区别：

  • 绘制方式：

    • Canvas：Canvas提供了一个基于像素的画布，使用JavaScript API进行绘图。绘图过程是在一个离屏的缓冲区上进行的，然后通过一次性将像素数据绘制到屏幕上，呈现出图形效果。
    • SVG：SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种基于XML的矢量图形语言。SVG图形是由形状、路径和文本等基本元素组成的，这些元素都是 DOM 对象，因此可以通过 JavaScript 进行交互操作。

  • 图片格式：

    • Canvas 绘制的图形依赖分辨率，可以以.png和.jpg 等格式保存存储图像，属于位图。
    • SVG 图像是矢量图，可以无限缩放而不会失真。

  • 事件处理：

    • Canvas 不支持事件处理器，这意味着一旦图形绘制完成，就难以与这些图形进行交互。
    • SVG 支持事件处理器，因此可以实现复杂的交互效果，如点击、悬停等。

  • 性能：

    • Canvas 在处理大量图形和动画时性能较好，尤其适合用于图形密集型游戏或需要频繁重绘的场景。
    • SVG 的性能在处理大型渲染区域或复杂交互时表现优秀，如地图应用。

  • 适用场景：

    • Canvas 更适合用于创建动态的、复杂的图形和动画，如游戏、实时渲染等。
    • SVG 则更适合用于创建静态或需要频繁交互的图形，如图标、图表、动画等。
HTML5 的离线储存怎么使用，它的工作原理是什么 ？

离线存储指的是在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

html
<html lang="en" manifest="index.manifest">

在cache.manifest文件中编写需要离线存储的资源：

sh
CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
img 的 srcset 属性的作⽤ ？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。用法如下：

html
<img src="image-128.png" srcset="image-256.png 2x" />

<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

其中 srcset 指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

webSocket如何兼容低浏览器 ？

  • 使用 Flash 套接字：Flash 套接字（Flash Socket）是一种在 Flash 中实现的套接字通信方式，可以在不支持 WebSocket 的浏览器中作为备选方案。然而，需要注意的是，Flash 已经在许多浏览器中逐渐被弃用，因此这种方法可能不是长期的解决方案。

  • 使用 polyfill：Polyfill 是一种代码片段（或插件），用于为旧浏览器提供现代浏览器支持的功能。你可以寻找一些 WebSocket 的 polyfill 库，这些库会检测浏览器是否支持 WebSocket，如果不支持，则提供备选方案。

  • 轮询：对于不支持 WebSocket 的浏览器，你可以使用轮询（Polling）作为备选方案。轮询是通过定期向服务器发送请求来检查是否有新的数据。虽然这种方法不如 WebSocket 高效，但在某些情况下可能是可行的。

  • 使用第三方库：有些第三方库（如 socket.io）已经为你处理了浏览器兼容性问题。这些库通常会检测浏览器的功能，并使用最适合当前浏览器的通信方式。例如，如果浏览器支持 WebSocket，则使用 WebSocket；如果不支持，则可能使用 Flash 套接字或轮询。

  • 提示用户升级浏览器：对于仍然使用旧浏览器的用户，你可以考虑提示他们升级到一个更现代的浏览器，以享受更好的功能和性能。

iframe是什么？有哪些优缺点？

iframe 是 HTML 中的一个标签，全称为 Inline Frame，即内联框架。它可以在网页中嵌入其他页面或文档，将其他页面的内容以框架的形式展示在当前页面中。iframe的使用方式是通过在HTML文档中插入标签，并设置相应属性来指定要嵌入的页面地址。

优点：

  • 灵活性：iframe 可以将不同的网页组合在一起，形成一个整体，使得开发人员能够更好地组织和管理网页内容，提高用户体验。
  • 代码复用：可以将一些常用的网页元素（例如导航栏、页脚等）封装成一个独立的页面，然后在其他页面中引用，从而减少代码的重复编写，提高开发效率。
  • 并行加载：当一个页面中包含多个 iframe 时，浏览器可以同时加载这些 iframe 中的内容，从而提高页面的加载速度，这对于包含大量媒体文件或复杂交互的网页尤为重要。
  • 安全性：iframe 可以将不同域名的网页嵌入到同一个页面中，从而实现跨域访问，这种安全性的设计可以防止恶意网站窃取用户的敏感信息。

缺点：

  • 降低性能：每个 iframe 都需要单独加载和渲染，这会导致网页的加载速度变慢，降低性能。此外，iframe 还会阻塞主页面的 onload 事件。
  • SEO问题：iframe 中的内容不会被搜索引擎抓取和索引，这会对网页的 SEO 产生影响。
  • 安全风险：iframe 中的文档可以在外层文档中执行脚本，这可能导致安全风险。
  • 设备兼容性差：很多移动设备（如PDA手机）无法完全显示框架。
  • 浏览器后退按钮无效：iframe 无法实现 frameset 整个页面的前进与后退。
如何禁用a标签跳转页面或定位链接 ？
html
<html>
  <head>
    <style type="text/css">
    .none {
      pointer-events: none;
    }
    </style>
  </head>

  <body>
  <section>
    <a href="javascript:void(0);" >click</a>
    <a href="javascript:;" >click</a>

    <a href="" onclick="return false;">click</a>
    <a href="#" onclick="return false;">click</a>
    </section>
  </body>

  <script>
    document.addEventListener('body', (e) => {
      e.preventDefault();
    })
  </script>
</html>
常用的 meta 元素有哪些 ？

meta元素是 HTML 中，用于提供有关网页的元信息（metadata），如描述、关键字、字符集等。这些元信息对于网页的搜索引擎优化（SEO）、页面编码定义、自动刷新、动态效果实现、页面缓冲控制、网页定级评价以及控制网页显示窗口等方面起着重要作用。meta元素可以向浏览器传递网页的一些信息，使浏览器根据这些信息规定的方式解析和显示网页。

html
<!--  页面视图属性  -->
<!--  width: 宽度  如 device-width 为设备的宽度 -->
<!--  height: 高度   -->
<!--  initial-scale: 初始缩放比例   -->
<!--  maximum-scale: 允许缩放的最大比例   -->
<!--  minimum-scale: 允许缩放的最小比例   -->
<!--  user-scalable: 允许缩放的最小比例   -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!--  编码格式  -->
<meta charset="utf-8">

<!--  作者  -->
<meta name="author" content="qzjiang"> 

<!--  关键字  -->
<meta name="keywords" content="HTML, CSS, JavaScript"> 

<!--  描述  -->
<meta name="description" content="My tutorials on HTML, CSS and JavaScript"> 

<!--  主题色  -->
<meta name="theme-color" content="#222">

<!--  请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明  -->
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">

<!--  可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，会提取相应的信息展现给用户  -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ourvibes.github.io">
<meta property="og:site_name" content="qzjiang">
图片格式的选择？

选择图片格式时，需要考虑多个因素，包括文件大小、图像质量、兼容性以及特定需求。以下是一些常见的图片格式及其特点：

  • JPEG (Joint Photographic Experts Group)

    • 特点：有损压缩格式，适用于摄影图像。它提供了很好的图像质量和可接受的压缩比。
    • 适用场景：用于存储和分享照片，尤其是那些不需要完全无损质量的照片。
    • 注意事项：由于是有损压缩，每次编辑并重新保存JPEG图像时，都会损失一些质量。

  • PNG (Portable Network Graphics)

    • 特点：无损压缩格式，支持透明度和256级灰度。
    • 适用场景：用于需要透明度的图像，如网页图标、按钮或带有半透明效果的图像。
    • 注意事项：PNG文件通常比JPEG文件大，因此在需要较小文件大小时可能不是最佳选择。

  • GIF (Graphics Interchange Format)

    • 特点：支持透明度和动画，使用无损压缩。
    • 适用场景：常用于低分辨率图像、简单的动画和网页图标。
    • 注意事项：GIF只支持256种颜色，因此不适用于需要丰富色彩的图像。

  • SVG (Scalable Vector Graphics)

    • 特点：基于矢量的图像格式，可以无限缩放而不损失质量。
    • 适用场景：用于图标、徽标和其他需要保持清晰度的图像，尤其适合在网页上使用。
    • 注意事项：SVG文件是文本格式的，因此可以编辑和修改，但也可能比位图图像更复杂。

  • WebP

    • 特点：由 Google 开发的现代图像格式，提供有损和无损压缩选项，支持透明度和动画。
    • 适用场景：用于需要高效压缩和良好图像质量的场景，如网页和移动应用。
    • 注意事项：尽管 WebP 在质量和压缩方面表现出色，但并非所有浏览器都原生支持它。

  • HEIC

    • 特点：由 Apple 开发的现代图像格式，采用先进的压缩技术，在图像质量不受损失的同时，能够达到更小的文件大小。
    • 适用场景：图片质量高，文件大小较低
    • 注意事项：兼容性问题
圣杯布局 和 双飞翼布局 ？
  • 圣杯布局
html
<body>
    <div id="header"></div>
    <div id="container">
        <div id="center" class="column"></div>
        <div id="left"   class="column"></div>
        <div id="right"  class="column"></div>
    </div>
    <div id="footer"></div>
</body>

<style>
body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}
</style>
  • 双飞翼布局
html
<body>
  <div id="header"></div>
  <div id="container" class="column">
      <div id="center"></div>
  </div>
  <div id="left"  class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>


<style>
body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}
</style>
web 常见的攻击方式有哪些，以及如何进行防御？
  • SQL注入攻击：攻击者通过在输入域或页面请求的查询字符串中插入恶意的SQL代码，欺骗服务器执行非授权的数据库操作。
  • 跨站脚本攻击（XSS）：攻击者在有漏洞的网站中注入恶意脚本，当其他用户浏览该网站时，恶意脚本会被执行，从而窃取用户信息或进行其他恶意操作。
  • 命令注入攻击：攻击者利用Web应用未对用户提交的数据做过滤或转义的漏洞，向服务器提交恶意命令，以获取敏感信息或执行未授权操作。
  • 跨站请求伪造（CSRF）：攻击者伪造用户请求，诱使用户的浏览器执行未授权的操作，如修改密码、添加管理员等。
  • 目录遍历攻击：攻击者通过构造特定的URL路径，尝试访问服务器上的敏感文件或目录。
  • 暴力破解：攻击者使用大量的认证信息尝试登录系统，直到找到正确的用户名和密码。

为了有效防御这些Web攻击，可以采取以下策略：

  • 输入验证与过滤：对输入进行严格的验证和过滤，确保数据合法和安全。可使用正则表达式、白名单等方式对输入数据进行过滤
  • 参数化查询与预编译语句：对于数据库操作，使用参数化查询和预编译语句，避免将用户输入直接拼接到SQL语句中，从而防止SQL注入攻击
  • 输出转义与编码：对用户输出的数据进行转义和编码处理
  • 安全编码实践：遵循安全编码实践，避免常见的安全漏洞
  • 使用Web应用防火墙（WAF）：WAF能够识别并阻止对网站的恶意请求，提供针对跨站脚本攻击、SQL注入等攻击的防护
  • 定期更新与修补：保持Web应用、服务器和操作系统的更新，及时修补已知的安全漏洞
  • 限制访问权限：合理设置文件和目录的访问权限，避免未经授权的访问和操作

Powered by VitePress.

Copyright © qzjiang | qizhi.jiang@outlook.com