水车_ ·canvas 学习前提
1. 前言
canvas 属于前端知识，但是学习 canvas 也是需要一些基础的，今天我们就回顾一下学习 canvas 前需要掌握的内容。掌握内容主要分为两部分，分别是 ：
- 什么是 HTML？
- 什么是 JavaScript？
下面我们就简单回顾一下这两个知识点。
2. HTML 基本知识简单回顾
HTML 是一种超文本标记语言（英语：HyperText Markup Language，简称：HTML），它是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
我们来看一个最简单的 HTML 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
2.1 HTML 标签
我们平时看到的 WEB 页面都是由标签嵌套构成的，它们包含在一对尖括号中，例如上面的 <html>、<body> 或者是 <h1>，当然还有我们后面会用到 <canvas> 这个标签，本套课程我们主要围绕 <canvas> 这个标签展开讲解。
2.2 属性
属性是附属在标签上的，对标签进行设定的一个概念。
大多数标签的属性以“名称 = 值”的形式成对出现，由 “=” 分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在 HTML 中可以去掉引号。
这里主要介绍两个所有标签都会有的属性。
- id 属性为元素提供了在全文档内的唯一标识。需要注意的是，一个 HTML 文件中，不同标签的 id 值是不能重复的。
下面这个例子中，我们给 <h1> 这个标签添加了一个 id 的属性，给它赋值为：“head”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<h1 id="head">这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- class 属性提供一种将相似标签分类的方式。多个标签可以定义同样的 class 属性，class 经常被用作于设定 css 相关的样式。
下面这个例子中，我们给两个 <p> 标签都添加了一个 class 的属性，给它赋值为：“paragraph”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<h1 id="head">这是一个标题</h1>
<p class="paragraph">这是第一个段落。</p>
<p class="paragraph">这是第二个段落。</p>
</body>
</html>
3. JavaScript 的基本知识简单回顾
JavaScript 是一种解释型的编程语言，主要应用在 WEB 领域，当然更多应用场景我们这里不做讨论，本教程中，我们只需要知道 JavaScript 可以帮助我们绘制 canvas 画布即可。
JavaScript 代码不管是内嵌还是从外部引入，它都会包含在一个 <script> 的标签中。
我们看一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<h1 id="head">这是一个标题</h1>
<p class="paragraph">这是第一个段落。</p>
<p class="paragraph">这是第二个段落。</p>
<script>
alert("慕课网IMOOC.COM")
</script>
</body>
</html>
运行上面代码，页面会弹出一个提示框，内容为： “慕课网IMOOC.COM”。
当然 JavaScript 不会只有这么点能力，后面我们对 canvas 的所有操作都会用到它，这里就不详细展开讲述了。想要系统学习 JavaScript，可以查看慕课网中相关的课程。
4. 总结
本小节教程主要讲解了学习 <canvas> 之前需要具备的知识。当然 HTML 和 JavaScript 不仅仅是上面讲的这一点内容，随便哪一个展开都是前端不可或缺的一块儿内容。想要走前端这条路的同学，还是需要认真地去学习这些内容。我们本套 <canvas> 课程用到的知识点都属于 HTML 和 JavaScript 的子内容，希望同学们能认真地去学习这块儿内容。
2024 imooc.com All Rights Reserved |