纯HTML无法实现真正可用的柱状图，必须结合CSS样式与JavaScript逻辑或使用Chart.js等图表库；手动用div模拟存在数据绑定缺失、无坐标轴、不响应式及无障碍支持差等问题。
纯 HTML 本身不能画柱状图——它没有绘图能力，<div> 堆出来的“柱子”只是视觉模拟，不带坐标、数据绑定或交互逻辑。真要实现可用的 bar chart，必须引入 CSS 控制样式 + JavaScript 处理数据和渲染，或者直接用成熟图表库。
<h3>为什么不用 <code><div> 手写“伪柱状图”
<p>有人用固定高度的 <code><div> 加背景色模拟柱子，比如：
<pre class="brush:php;toolbar:false;"><div style="height: 60px; background: #4285f4; width: 40px;"></div></pre>
<p>这种写法的问题很实际：</p>
<ul>
<li>高度需手动换算（比如最大值 100 → 高度 100px，那值为 30 就得设 30px），数据一变就要全改</li>
<li>没坐标轴、没标签、没悬停提示，用户看不出数值和含义</li>
<li>响应式困难：宽度缩小时柱子挤成线，高度比例全乱</li>
<li>无障碍支持为零：<code>screen reader 完全读不出这是图表、数据是什么
推荐方案：用 Chart.js 快速渲染可访问 bar chart
Chart.js 是轻量、默认支持响应式、自带 ARIA 标签、无需手算比例的主流选择。只需三步：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中引入 Chart.js（CDN）：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
- 放一个
<canvas></canvas>容器：<canvas id="myBarChart" width="400" height="200"></canvas>
- 用 JS 初始化图表（自动按数据最大值归一化高度）：
const ctx = document.getElementById('myBarChart').getContext('2d');<br>new Chart(ctx, {<br> type: 'bar',<br> data: {<br> labels: ['Jan', 'Feb', 'Mar'],<br> datasets: [{<br> label: 'Sales',<br> data: [12, 19, 3],<br> backgroundColor: '#4285f4'<br> }]<br> }<br});
注意：width/height 在 <canvas></canvas> 上只是初始像素尺寸，Chart.js 默认启用响应式（responsive: true），会自动缩放适配容器。
如果非要用原生 HTML+CSS 模拟（仅限示意/静态场景）
仅当数据固定、无交互、不需适配、且明确接受维护成本时才考虑。关键控制点：
- 用
flex或grid布局排布柱子，别用浮动或绝对定位 - 高度统一用百分比（如
height: 75%），配合父容器设定max-height和position: relative作基准 - 每个柱子用
<div role="region" aria-label="January: 12 units"> 补基础语义 <li>加 <code>title属性或伪元素显示数值（但移动端不保证触发）：.bar::after { content: attr(data-value); }
这种写法下，data-value="12" 必须和 height 手动同步，漏改一个就图表失真。
真正要用柱状图，别卡在“纯 HTML”上——Chart.js 一行 CDN、十几行配置就能跑起来；想深度定制，选 D3.js；连 JS 都不想碰，就导出 SVG 图片嵌入。最耗时间的从来不是写代码，而是把数据对齐坐标、处理空值、应对小屏幕截断——这些，手写 <div> 一根根调高度时，一个都逃不掉。</div>
