HTML知识点（三）

1、Canvas和SVG的区别

Canvas

使用是基于像素（位图）的绘图方式。当调用绘图API时，实际是在对一个固定分辨率的像素矩阵进行修改，绘制完成后，这个矩阵的状态就保存在Canvas中。后续的每一次绘制都是在当前画布进行重新绘制。

<canvas id="myCanvas" width="300" height="50" style="border:2px aqua solid;"></canvas>
    <script>
        const  canvas = document.querySelector('#myCanvas')
        const ctx = canvas.getContext('2d')
        ctx.fillStyle = 'green'
        ctx.fillRect(10,10,210,20)
    </script>

SVG

使用的是矢量图形，所有的图形都是由数学公式描述的。图形是无分辨率的，可以无限放大缩小而不会失真。

1
2
3

<svg width="300" height="50" style="border:2px aqua solid;">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

它们的区别

1、渲染模式：

canvas：即时渲染。绘图指令会立即影响画布像素，所有元素成为一个整体的像素图，若改变图形，往往需要清空画布然后重新绘制所有元素。

svg：保留模式。每个图形元素是一个DOM节点，浏览器维护节点信息。需要修改图形只需要更新对应的DOM节点，不必重新绘制整个画面。

2、交互性：

canvas：无法对单个图形元素绑定事件，需要手动进行坐标计算，给整个canvas元素绑定事件，然后在事件处理函数中根据鼠标点击、移动的坐标等判断交互，决定操作。

svg：每个元素是DOM节点，可以直接操作和绑定事件。内置的命中测试使得 SVG 在处理交互时更为便捷和直观。开发者只需将事件直接绑定到具体的 SVG 元素上，而无需手动判断鼠标位置与图形区域的关系。

3、适用场景：

Canvas：更适合需要高性能、频繁更新和复杂动画效果的场景，但在交互性和分辨率适应方面需要开发者额外处理。

SVG：适用于静态图形、矢量图形和需要良好交互体验的场景，但当图形数量巨大时可能会导致性能瓶颈。

2、head标签的作用？

head标签主要用于包含那些不会直接显示在网页内容区域中的信息（元数据），帮助浏览器、搜索引擎、其他外部工具了解页面信息，如何处理页面资源。

定义文档标题（必不可少）
1
<title>Document</title>
声明字符编码（必不可少）
1
<meta charset="UTF-8">

描述网页信息

1	`<meta name="description" content="这是一个示例网页，展示 head 标签的基本用法。">`

引用外部资源

1	`<link rel="stylesheet" href="styles.css">`

其他用途

<style>内嵌css样式、<base>基础链接等。

3、Doctype的作用？

文档声明：告诉浏览器当前页面使用的HTML版本，决定浏览器使用标准模式还是混杂模式进行渲染。

1	`<!DOCTYPE html> #HTML5的简洁声明`

标准模式/严格模式

只要以!Doctype或其他正确的完整的文档声明开始，浏览器一般是标准模式渲染。
怪异模式/混杂模式/兼容模式

Doctype 声明不完整或者书写错误，就自动切换到混杂模式兼容旧版页面。

？DTD是什么？

DTD 是文档类型定义（Document Type Definition）的缩写，用于定义 XML 或早期 HTML 文档的结构和合法内容。早期 HTML 文件可能会包含如下的 DTD 声明：
1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

4、浏览器乱码问题

编码和解码

编码：人类文字转换为二进制数据的过程。不同的字符编码(UTF-8、GBK、ISO-8859-1)规定了不同字符与二进制数据之间的对应关系。

解码：当浏览器或者其他程序打开一个文件时，将文件中的二进制数据转换回人类文字的过程。
乱码

声明的编码（或者没有声明）与文件实际保存时候的编码不一致，浏览器就可能错误地将二进制解析成其他字符，从而乱码。多因字符编码不匹配，包括文件实际编码、HTML 声明和服务器响应头中指定的编码不一致或错误导致乱码。
解决乱码

1、使用统一合适的编码（推荐UTF-8）

2、在head部分添加字符集声明

3、配置服务器返回正确的Content-Type响应头

4、检查引用的外部资源编码是否一致
浏览器解析文档时参考优先级

1、服务器响应头中的编码信息；

2、HTML 文件内 <meta charset="..."> 的声明；

5、渐进增强和优雅降级

它们是两种核心策略，目标是兼容性，确保网站能够在不同浏览器、设备、网络环境下提供最佳的用户体验。

渐进增强（基础到高级）

1、核心理念：先确保网站的核心内容和功能在所有环境下（包括老旧浏览器或低性能设备）都能正常工作，再逐步为支持新特性的现代浏览器添加增强效果（如动画、复杂布局、交互功能等）。优先保障内容的可访问性，再考虑视觉和交互的增强。

2、实现步骤：
- 基础层：使用语义化的 HTML 实现内容和基本功能（如链接、表单提交）。
- 表现层：通过 CSS 增强布局和视觉效果（如响应式设计、动画）。
- 行为层：通过 JavaScript 添加交互功能（如动态加载数据、复杂交互）
优雅降级（高级到基础）

1、核心理念：先为现代浏览器开发完整的功能和视觉效果，再为老旧浏览器提供“降级”方案，确保基本功能可用。优先实现最新技术，再处理兼容性问题。

2、实现步骤：
- 完整功能层：使用最新的 HTML5/CSS3/JavaScript 实现所有功能。
- 降级处理：通过浏览器检测或特性检测（如 CSS Hack、Polyfill），为老旧浏览器提供简化版的功能或界面。

？什么是浏览器检测

识别用户的浏览器类型（Chrome、Firefox、Safari等）和版本号，来决定如何呈现内容或者加载特定代码。

1、User-Agent 检测：每个浏览器在发送请求时都会包含 User-Agent 字符串，这个字符串描述了浏览器的名称、版本号和运行环境（如操作系统）。前端可以通过 JavaScript 获取并分析 navigator.userAgent，从而判断用户的浏览器类型。
1
2
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
console.log(isChrome ? "这是 Chrome 浏览器" : "不是 Chrome 浏览器");
2、使用特定 API：有些浏览器支持特定的 API，检测这些 API 的存在可以帮助判断浏览器类型。例如，通过检测 window.chrome 对象可以判断是否为 Chrome 浏览器。
1
2
3
4
5
if (window.chrome) {
    console.log("这是 Chrome 浏览器 ");
    } else {
    console.log("这不是 Chrome 浏览器");
    }

？什么是特性检测

检测浏览器是否支持某项特性（例如某种 CSS 属性、HTML 元素或 JavaScript API），从而决定是否启用该特性或使用替代方案。

1、CSS 特性检测： CSS.supports 方法
1
2
3
if (CSS.supports("display","grid")){
    console.log("支持CSS Grid")
    }
2、JavaScript 特性检测：
1
2
3
4
5
if(window.fetch){
    console.log("支持fetch API")
    }else{
    console.log("不支持fetch API，使用 XMLHttpRequest 替代")
    }
3、使用Polyfill：Polyfill可以实现一些现代Web特性，如Promise、fetch API等，即使老旧浏览器不支持这些特性。选择合适的Polyfill库，如polyfill.io、babel-polyfill等。在代码中引入Polyfill库。根据需要，在代码中调用Polyfill库提供的特定函数或API。

HTML

#Canvas和SVG的区别 #head标签的作用 #Doctype的作用 #浏览器乱码 #渐进增强和优雅降级

PAT09：数字黑洞上一篇

HTML知识点（二）下一篇