HTML语义化标签
- 语义化标签是具有明确含义的 HTML 标签，用于描述网页的结构和内容。例如，
<header>表示网页的头部，<nav>表示导航栏，<main>表示主要内容区域，<article>表示一篇独立的文章，<section>表示文档中的一个章节，<aside>表示侧边栏，<footer>表示网页的底部等。语义化标签的用途包括提高网页的可访问性、搜索引擎优化、便于代码维护等。
HTML 中的alt属性和title属性的作用
- 在
<img>标签中，alt属性用于提供图像无法显示时的替代文本，对于可访问性很重要。title属性用于提供当鼠标悬停在元素上时显示的提示文本。
HTML5 离线存储（Offline Storage）
- HTML5 离线存储允许网页在没有网络连接的情况下仍然可以访问。通过使用
Application Cache或Service Worker，可以缓存网页的资源，包括 HTML、CSS、JavaScript、图像等。这样，用户在离线状态下也可以浏览网页的部分内容或执行某些功能。
HTML 中的aria-label和aria-labelledby属性的作用
aria-label和aria-labelledby属性用于为没有文本内容的元素提供可访问性标签。aria-label直接为元素提供一个标签，而aria-labelledby引用一个或多个其他元素的 ID，将这些元素的文本内容作为标签。
在 HTML 中，如何避免常见的安全问题，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）？
- 对于 XSS 攻击，可以对用户输入进行过滤和转义，避免在网页中直接插入不可信的用户输入。对于 CSRF 攻击，可以使用验证码、令牌等方式来验证请求的合法性。
script标签中defer和async的区别
<script>标签用于在网页中引入 JavaScript 脚本
defer和async是<script>标签的两个属性，它们用于控制脚本的加载和执行方式
一、script
- 当浏览器遇到
<script>标签时，会立即停止解析 HTML 文档，开始下载脚本文件，并在下载完成后立即执行脚本。 由于脚本的执行会阻塞页面的解析，所以在脚本执行完成之前，页面的其他部分（如图片、样式等）不会被加载和渲染。 - 这意味着如果脚本文件较大或者网络较慢，会导致页面的加载被阻塞，用户可能会看到空白页面或者长时间的等待。
二、script async
- 脚本会在浏览器继续解析页面的同时异步加载。一旦脚本加载完成，它会立即执行，而不会等待页面的其他部分加载完毕。
- 这意味着脚本的执行时间是不确定的，可能在页面的任何阶段执行，具体取决于脚本的加载速度和其他资源的加载情况。
- 多个带有
async属性的脚本之间的执行顺序是不确定的。它们会在各自加载完成后立即执行，而不考虑在页面中出现的顺序。
三、script defer
- 脚本会在浏览器解析完 HTML 文档后，按照它们在页面中出现的顺序依次执行。
- 这确保了脚本在页面的 DOM 结构完全构建之后才执行，并且会在
document.DOMContentLoaded事件之前执行。
也就是说
script：立即下载并执行，阻塞页面解析。script async：异步下载，下载完成后立即执行，执行顺序不确定。script defer：在页面解析完成后按照顺序执行。
cookie、sessionStorage、localStorage区别
一、cookie
-
cookie是服务器发送到用户浏览器并保存在本地的一小段数据。浏览器会在后续的请求中自动将cookie发送回服务器，以便服务器识别用户身份、保存用户状态等。 -
数据大小限制：一般为 4KB 左右。
-
存储位置：存储在用户的浏览器中，并随请求发送到服务器。
-
可设置过期时间：可以设置
cookie的过期时间，过期后cookie将被自动删除。如果不设置过期时间，cookie将在浏览器关闭时被删除。
二、sessionStorage
-
sessionStorage是 HTML5 新增的一种在客户端存储数据的机制，用于在当前会话期间保存数据。当浏览器关闭时，sessionStorage中的数据将被自动清除。 -
数据大小限制：一般为 5MB 左右。
-
存储位置：存储在用户的浏览器中，仅在当前会话期间有效。
-
页面刷新数据不丢失：在同一浏览器标签页内刷新页面时，
sessionStorage中的数据不会丢失。但在新标签页或关闭浏览器后，数据将被清除。 -
应用场景
- 临时数据存储：用于在当前页面或会话期间保存临时数据，如表单数据、临时状态等。
- 多页面应用中的数据传递：在同一浏览器窗口的多个页面之间传递数据。
三、localStorage
-
localStorage也是 HTML5 新增的一种在客户端存储数据的机制，用于长期保存数据。数据不会因为浏览器关闭而被清除，除非用户手动清除或通过 JavaScript 代码删除。 -
数据大小限制：一般为 5MB 左右。 - 存储位置：存储在用户的浏览器中，长期有效。 - 跨页面访问：在同一域名下的不同页面之间可以共享
localStorage中的数据。
四、三者的区别总结
-
数据生命周期：
-
cookie可以设置过期时间，过期后数据被删除；不设置过期时间则在浏览器关闭时删除。 -
sessionStorage在当前会话期间有效，浏览器关闭时数据被清除。 -
localStorage长期有效，除非用户手动清除或通过代码删除。
-
-
存储大小限制：
-
cookie一般为 4KB 左右。 -
sessionStorage和localStorage一般为 5MB 左右。
-
-
数据共享范围：
-
cookie随请求发送到服务器，不同域名下的服务器可以读取和设置cookie。 -
sessionStorage和localStorage的数据在同一域名下的不同页面之间可以共享。
-
-
安全性：
-
cookie可以被服务器设置为安全的（仅通过 HTTPS 传输），但容易受到跨站脚本攻击（XSS）。 -
sessionStorage和localStorage的数据只能通过 JavaScript 代码访问，相对较安全，但也可能受到 XSS 攻击。
-
canvas 和 svg 的区别
-
Canvas 是 HTML5 中的一个元素，通过 JavaScript 可以在其中使用绘图 API 进行像素级的图形绘制。它就像一块画布，你可以在上面使用各种绘图函数来绘制形状、线条、图像等。工作原理是通过操作像素来绘制图形，每一次绘制都会覆盖之前的内容。如果需要更新图形，通常需要重新绘制整个场景。
-
SVG（可缩放矢量图形）是一种基于 XML 的图形格式，可以直接在 HTML 中使用
<svg>标签插入。SVG 图形是由矢量路径、形状、文本等元素组成，可以通过 CSS 和 JavaScript 进行样式设置和交互操作。工作原理是使用矢量图形描述来绘制图形，无论图形如何缩放都不会失真。
区别
-
图形类型：
- Canvas 是基于像素的位图，适合绘制复杂的图像和动画效果。
- SVG 是矢量图形，适合制作可缩放的图标和图形。
-
交互性：
- SVG 天生具有较好的交互性，可以通过 CSS 和 JavaScript 轻松添加交互效果。
- Canvas 需要通过 JavaScript 手动实现交互功能，相对较为复杂。
-
编辑性：
- SVG 是基于文本的格式，易于编辑和修改。
- Canvas 是通过 JavaScript 代码绘制的，编辑起来相对困难。
-
性能：
- 在绘制大量简单图形时，SVG 可能会比 Canvas 性能稍低，因为 SVG 需要解析 XML 格式。
- 对于复杂的动画和游戏场景，Canvas 通常具有更高的性能。
