认识HTML文档

不了解互联网和前端的继续，前端大牛可以跳过

学习建议

如果你仅仅是研究图形学算法，可以不用系统学习html知识，套用文件模板就行
如果你想制作漂亮的图形操作界面GUI，那么需要学习小部分html标签，和CSS层叠样式表
网页大致分为两类，一类大家通常见到的内容展示，一类是应用界面，专业属于是单页面应用，就像客户端软件界面一样，查看案例

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <title>Title</title>
6    </head>
7    <body>
8       <h3>这是一个画布</h3>
9       <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
10      <br>
11      宽度：<input type="text" value="500">
12      长度：<input type="text" value="500">
13   </body>
14   </html>

上面的代码显示的是一个结构非常简单的html文档，存储在服务器上，在浏览器上通过域名访问时，会自动下载缓存到本地，浏览器会自上而下阅读解析文件，并在页面显示出来，其中的过程也比较复杂，初学者也不必关心，本节课记住一个网页HTML大致结构就行，<!DOCTYPE html> 表示文档声明，声明是HTML5标准，这是由最初的HTML版本发展而来； html、head、body都是一个开始标签，一个结束标签包含一段代码，head和body元素都包含在父元素html里面，head里面的内容，比如title定义的是网站标题，会显示在浏览器页面标题栏的位置；大家平时都是在body里面写代码内容，比如canvas标签定义一个画布，input标签定义一个文本输入框，非常语言化，没有逻辑上的难度，一个标签，对应一个应用情形，用到的时候直接查手册就行，个人认为学习WebGL计算机图形学的时候没有必要预先系统学习html，学习当前能用到的标签就行，canvas标签写在body里面，脚本语言Javascript的代码会写在script标签里面，然后嵌入body标签里面。当浏览器执行到 <script> 是，浏览器会知道下面要执行的就是脚本语言。

标签、元素、对象、属性

通过标签可以创建一个元素，一个元素你可以理解一个对象，对象具有属性和方法，对象的属性写在开始标签里面，空格间隔开。比如第9行代码canvas标签中width="500" height="500"定义的画布的宽度和高度

样式

除了html的标签，大家也要有样式的概念，比如画布内背景颜色通过style定义，因为样式包含的内容较多，会把所有的元素样式属性写在style里面，第9行代码background-color: blue定义画布为蓝色，除了颜色属性也有很多其它的属性，这里不详细介绍。样式属性style可以集中写在head标签里面，也可以单独创建一个css文件，以后会用到，不展开讲解

html格式

编程语言都有语法，有编写格式，超文本语言HTML一样有书写格式，比如元素属性空格间隔，属性值使用引号标识，canvas、body必须有结束标签，input等标签属于自闭标签，不需要使用结束标签。