本篇博客的目的很简单：GAMES202的作业0总也绕不过html，索性依据作业0扫个盲，简单了解html的格式和简单的用法，不至于拿到代码什么都看不懂，看完后作业0的框架总是能看懂的了。
参考：
【Html从头开始】-1 HTML文档基本格式_Lizzy_Fly的博客
HTML简介
实现作业0是通过index.html这个文件操作的，那么.html格式到底是什么？
HTML，全称Hyper Text Markup Language，是用来描述网页的一种标记语言，并非编程语言，主要通过html标记对网页中的内容进行描述，允许格式化文本，添加图片，创建链接，输入表单等等，浏览器可以读取和显示。html文档也被叫做web页面。
展示小案例
先根据学习来的知识写一个简单的html文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<h1 style="text-align:center">GAMES202作业0框架学习记录</h1>
<p style="color:blue;text-align: center;">我是小菜鸡九九</p>
<p>这是我养的猫咪，名字叫做伊万</p>
<img src="src/1.jpg"/>
<img src="src/2.jpg"/>
<img src="src/3.jpg"/>
<h1 style="text-align:center">首先介绍一下HTML的基本组成格式</h2>
<p>
具体请查看我的CSDN个人博客链接：<br>
<a href="https://blog.csdn.net/qq_41835314?type=blog "target="_blank">flashinggg的个人博客链接</a>
</p>
</body>
</html>上述例子展示出来的样子：
基本格式
下面介绍以下HTML的基本格式：
1 <!DOCTYPE>标记
<!DOCTYPE>标记位于文档的最前面，表示当前文档使用的是那种HTML标准规范，上述例子中表示：声明该文档为HTML5文档；
2 <html></html>标记
<html>标记位于<!DOCTYPE>之后，也被成为根标记，用于告知浏览器自己是个HTML文档。</html>标记着HTML文档的结束，在<html>和</html>之间就是文档的头部和内容主体。
3 <head></head>标记
<head>被称为头部标记，位置紧跟在<html>标记之后，用于标记HTML文档的头部信息，用来封装其他位于文档头部的标记，例如上述例子中出现的<title>、<meta>，以及作业9中出现的<style>等。
4 <meta></meta>标记
位于文档头部head区域的标记，一般位于<head>标记和<title>标记之间，提供了文档字符集、使用语言等，这些文档的基本信息用户不可见。比如上述例子用了一个字符集utf-8，由于大部分浏览器直接输出中文会乱码，因此需要声明字符集为utf-8.
5 <title></title>标记
能在栏目上写上需要的文字，例如在作业0里加上如下<title>标记：
<title>
GAMES202-HOMEWORK0
</title>这页面就显示的是：
6 <style></style>标记
用于为HTML文档定义样式信息：背景background属性（背景色、背景图像等）、边框border和边距margin属性、元素的layout属性等等，具体可参考：HTML DOM Style 对象 (w3school.com.cn)
比如作业0中定义了body的边距为0、背景颜色为黑、高宽百分比、规定如何处理不合适元素的内容。还定义了在body中定义的Canvas对象glcanvas的属性：
<style>
html,
body {
margin: 0;
background-color: black;
height: 100%;
width: 100%;
overflow: hidden;
}
#glcanvas {
top: 0;
width: 100%;
height: 100%;
}
</style>7 <body></body>标记
这部分标记内容就是之前<html>提到的主题内容，用于定义HTML文档所要显示的内容。一个HTML文档只能有一对<body></body>，且必须在<html>标记内位于<head>头部标记后，与<head>标记是并列的关系。浏览器中显示的所有文本、图像、视频等信息都必须位于<body>标记内，这些也都是最终展示给用户看的东西。
8 <canvas>标记
用以定义图形，拥有height和width的属性。如作业0中，规定了元素的id，在<head>的<style>还定义了它的height和width。
<canvas id="glcanvas"></canvas>但是canvas本身没有绘图能力，还需要js来绘制，js就用这个id来查找canvas元素。
代码标签
下面只介绍基本格式和一些代码标签的运用。
这里就是介绍一些内容里具体出现的一些符号，比如上述例子中出现的：
<h1></h1> <h2></h2>...——定义大标题，根据标题顺序需要改写后面的序号；
<p>——定义一个段落；
<br>——换行；
<img/>——插入图片
<a></a>——添加链接，上述例子中用了一个target=_blank，表示点击链接后弹出一个页面展示链接网页内容；
style——定义一些属性，比如对齐方式（align）、颜色(color)等；
再比如作业0的index.html中的诸如：
<script src="lib/three.js" defer></script>
<script src="lib/OrbitControls.js" defer></script>
都是在.html文件中通过相对地址引入three.js文件。
总结：对于HTML有以上的知识储备我认为就足够了，HTML还有很多其他的语法这里就不赘述了，详情可参考以下文章：
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
