GAMES202-HTML基本格式及代码标签（了解向）
九九v99
编辑于 2022年07月02日 22:51
收录于文集
共5篇

本篇博客的目的很简单：GAMES202的作业0总也绕不过html，索性依据作业0扫个盲，简单了解html的格式和简单的用法，不至于拿到代码什么都看不懂，看完后作业0的框架总是能看懂的了。

HTML简介

实现作业0是通过index.html这个文件操作的，那么.html格式到底是什么？

HTML，全称Hyper Text Markup Language，是用来描述网页的一种标记语言，并非编程语言，主要通过html标记对网页中的内容进行描述，允许格式化文本，添加图片，创建链接，输入表单等等，浏览器可以读取和显示。html文档也被叫做web页面。

展示小案例

先根据学习来的知识写一个简单的html文档：

代码块
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小案例

基本格式

下面介绍以下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>标记：

代码块
HTML
自动换行
复制代码
<title>
    GAMES202-HOMEWORK0
</title>
复制成功

这页面就显示的是：

添加一个title

6 <style></style>标记

用于为HTML文档定义样式信息：背景background属性（背景色、背景图像等）、边框border和边距margin属性、元素的layout属性等等。

比如作业0中定义了body的边距为0、背景颜色为黑、高宽百分比、规定如何处理不合适元素的内容。还定义了在body中定义的Canvas对象glcanvas的属性：

代码块
HTML
自动换行
复制代码
    <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。

代码块
HTML
自动换行
复制代码
<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中的诸如：

代码块
HTML
自动换行
复制代码
<script src="lib/three.js" defer></script>
<script src="lib/OrbitControls.js" defer></script>
复制成功

都是在.html文件中通过相对地址引入three.js文件。

对于HTML，有以上的知识储备我认为就足够了，当然这只是冰山一角，HTML还有很多其他的语法，这里就不赘述了。

html GAMES202
本文为我原创，未经授权禁止转载
cv17380927