HTML本身并不支持绘制图表，但可以结合JavaScript和CSS来创建曲线图，在本文中，我们将介绍如何使用HTML、CSS和JavaScript库Chart.js来创建一个简单的曲线图。

准备工作

1、确保你的HTML文件中已经引入了Chart.js库，可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2、在HTML文件中创建一个<canvas>元素，用于绘制曲线图：

<canvas id="myChart"></canvas>

创建曲线图

1、在<script>标签中编写JavaScript代码，获取<canvas>元素的引用，并创建一个Chart.js图表实例：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line', // 设置图表类型为曲线图
    data: {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴标签
        datasets: [{
            label: '销售额', // 数据集标签
            data: [12, 19, 3, 5, 2, 3, 7], // y轴数据
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // 曲线区域颜色
            borderColor: 'rgba(75, 192, 192, 1)', // 曲线边框颜色
            borderWidth: 1 // 曲线边框宽度
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // y轴从0开始
            }
        }
    }
});

自定义样式

1、可以使用CSS来自定义曲线图的样式，例如修改曲线的颜色、宽度等，以下是一个示例：

/* 修改曲线颜色 */
.chartline canvas {
    bordercolor: #3498db;
}
/* 修改曲线宽度 */
.chartline .chartarea path {
    strokewidth: 3;
}

2、将上述CSS代码添加到HTML文件的<style>标签中，并为<canvas>元素添加chartline类：

<canvas id="myChart" class="chartline"></canvas>

通过上述步骤，我们已经学会了如何使用HTML、CSS和Chart.js库创建一个简单的曲线图，可以根据需要对曲线图进行进一步的定制，例如修改坐标轴的刻度、添加图例等，希望本文对你有所帮助！