html 在页面上创建对象列表并使其可编辑。如下面的代码所示：canvas 和 button 对象是用条件和特征来描述的。

<h1>button with div practice</h1>

<canvas id = "d1" class="pinkback"> </canvas>
<canvas id = "d2" class="aquaback">  </canvas>
<input type="button" value="change color pink" onclick="dopink()">
<input type="button" value="change color aqua" onclick="doaqua()">

css 公开了每个对象和标题的图形属性。这里的结构类似于一个类，其中 {} 指定有用的知识。
使用 css 时，请尝试依赖扩展的参数列表。我推荐 w3schools 来详细了解函数参数。

h1 {
  color: #5f9ea0;
  font-family: courier;
}

canvas {
  width: 80pt;
  heigth: 140pt;
  padding: 5pt;
  border: 1pt solid lightgray;
  front-size: 16pt;
}

.pinkback {
  background-color: #faebd7;
}

.aquaback {
  background-color: #7fffd4;
}

.lightgreen {
  background-color: #90ee90;
}
.khaki {
  background-color: #f0e68c;
}

这是更广泛的调色板颜色描述的示例 (html)：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

最后但并非最不重要的一点是，使用众所周知的 javascript 语言。这将使您能够识别图形模型并在编程结构中使用它们。

function changeColor() {
  dd1=document.getElementById("d1");
  dd2=document.getElementById("d2");

  dd1.className = "GreenL";
  dd2.className = "Khaki";
}

function doPink() {
  var dd1 = document.getElementById("d1");
  dd1.style.backgroundColor = "LightGreen";

  var canvas = document.getElementById("d2");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0,0, canvas.width, canvas.height);
  //canvas.style.backgroundColor = "Khaki";
}

function doAqua() {
  var dd1 = document.getElementById("d2");
  dd1.style.backgroundColor = "Khaki";

  var ctx = dd1.getContext("2d");
  ctx.fillStyle="Brown";
  ctx.fillRect(10,10,60,60);
  ctx.fillRect(80,10,75,75);
  ctx.fillRect(165,10,90,90);

  ctx.fillStyle = "DarkSlateGray";
  ctx.font = "30px Arial";
  ctx.fillText("beaute", 20,135);
}

顺便说一句，为了串联三种描述网页的风格，我建议在早期阶段使用codepen。它将帮助您避免对 js、html 和 css 感到困惑。祝你好运！