area标签必须配合map和usemap使用，单独无效；usemap值需带#号引用map的name；coords应借助工具生成；shape仅支持rect/circle/poly/default；移动端需加touch-action和focus-visible优化。

area 标签必须配合 map 和 usemap 才能生效

单独写 @#@#@#@#@#@#@#@#@#@0 上传图后画区域，它会输出准确的 coords

若需响应式，改用 SVG 替代 —— SVG 原生支持百分比和视口单位，坐标自动适配

shape 取值只有 rect/circle/poly/defaults，没有 ellipse 或 roundedrect

shape 属性只接受四个固定值：rect（矩形）、circle（圆）、poly（多边形）、default（整个区域）。别指望用 ellipse 画椭圆，也不支持圆角矩形。

实际使用中要注意：

• rect：coords="x1,y1,x2,y2"，左上→右下，顺序不能反
• circle：coords="cx,cy,r"，半径是像素值，不是百分比
• poly：coords="x1,y1,x2,y2,x3,y3,..."，至少 3 组点，首尾不自动闭合，但浏览器会自动连线收口

如果建筑轮廓复杂（比如带弧形外墙的教学楼），poly 是唯一选择，但点越多，手写越容易出错，务必复制粘贴，别手敲。

移动端点击热区小，必须加 touch-action 和 focus-visible 优化

默认 在手机上点击反馈弱，手指稍偏就点空，用户根本不知道哪里可点。这不是 bug，是规范本身没定义触摸行为。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

补救方式有限但有效：

• 给包裹 的容器加 style="max-width:90%"，减少点击延迟
• 为提升可发现性，用 CSS 配合 外部的伪元素或透明 overlay 层（需额外 JS 监听 click 并模拟跳转）
• 避免依赖 :hover 做高亮——移动端没 hover，改用 :focus-visible + tabindex 支持键盘导航

真正难处理的是斜坡、连廊、空中通道这类非正交结构——它们在二维平面图上投影变形严重，靠 无法精确覆盖，这时候该考虑切片地图或 Leaflet 集成，而不是硬调 coords。

@@##@@
<map name="campus-map"><area shape="rect" coords="120,80,220,150" href="library.html" alt="图书馆">
<area shape="circle" coords="400,300,60" href="admin-building.html" alt="行政楼"></map>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！