导航
用正确的标签做正确的事情
<canvas id="canvas"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 100);
div 和 spanb、font、u 等，改用 css 设置strong 或 em 标签中，strong 默认样式是加粗（不要用 b），em 是斜体（不要用 i 标签）caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 tdinput 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来HTML 结构时，要用语义化标签，给元素写 CSS 类名时，JS 类名、方法名、变量命名等也要遵循语义化原则。不随意取名，不利于后期的代码重构和维护。同时，也最好不要用汉语拼音命名。meta viewport 是一个 HTML 元素，用于控制网页在移动设备上的显示和缩放行为。它通过设置 viewport 元素的属性，告诉浏览器如何调整页面的尺寸和缩放，以适应不同屏幕大小和分辨率的设备。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />
<!-- 网页作者 -->
<meta name="author" content="开源技术团队"/>
<!-- 网页地址 -->
<meta name="website" content="<https://www.baidu.com>"/>
<!-- 网页版权信息 -->
<meta name="copyright" content="2020-2021 demo.com"/>
<!-- 网页关键字, 用于SEO -->
<meta name="keywords" content="meta,html"/>
<!-- 网页描述 -->
<meta name="description" content="网页描述"/>
<!-- 搜索引擎索引方式，一般为all，不用深究 -->
<meta name="robots" content="all" />
<!-- 移动端常用视口设置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!--
viewport参数详解：
width：宽度（数值 / device-width）（默认为980 像素）
height：高度（数值 / device-height）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
-->
能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。
残障人士指的是那些带有残疾或者身体不健康的用户。
e.g. 使用 alt 属性:
<img src="person.jpg" alt="this is a person"/> 有时候浏览器会无法显示图像。
具体的原因有:
如果使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。
在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面你的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建 web worker:
更多：
Using Web Workers - Web APIs | MDN
Data URL 是将图片转换为 base64 直接嵌入到了网页中，使用 <img src="data:[MIME type];base64"/> 这种方式引用图片，不需要再发请求获取图片。
| 特性 | Canvas | SVG |
|---|---|---|
| 图像类型 | 位图（像素） | 矢量图（数学描述） |
| DOM 支持 | 无（无法通过 DOM 操作图形） | 有（每个图形是 DOM 节点） |
| 事件绑定 | 不支持图形单独的事件监听 | 支持图形级事件（如点击路径） |
| 性能 | 高（适合大规模、高频渲染） | 低（DOM 操作开销大） |
| 缩放适应性 | 放大后失真（像素化） | 无限缩放不失真 |
| 导出与存储 | 可导出为 PNG/JPG | 可导出为 SVG 文件或内联使用 |
| 文本渲染 | 弱（依赖像素绘制） | 强（支持原生文本、CSS 样式） |
适用范围：