GAMES202-熟悉HTML基本格式及代码标签（了解向）

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

 参考：

HTML零基础入门教程（详细）_宗而研之的博客

【Html从头开始】-1 HTML文档基本格式_Lizzy_Fly的博客

HTML简介

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

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

展示小案例

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

TEST


 
GAMES202作业0框架学习记录
我是小菜鸡九九
这是我养的猫咪，名字叫做伊万



首先介绍一下HTML的基本组成格式

    具体请查看我的CSDN个人博客链接：
    flashinggg的个人博客链接

上述例子展示出来的样子： 

基本格式

下面介绍以下HTML的基本格式：

1 标记

标记位于文档的最前面，表示当前文档使用的是那种HTML标准规范，上述例子中表示：声明该文档为HTML5文档；

2 标记

标记位于之后，也被成为根标记，用于告知浏览器自己是个HTML文档。标记着HTML文档的结束，在和之间就是文档的头部和内容主体。

3 标记

被称为头部标记，位置紧跟在标记之后，用于标记HTML文档的头部信息，用来封装其他位于文档头部的标记，例如上述例子中出现的、，以及作业9中出现的等。

4 标记

位于文档头部head区域的标记，一般位于标记和标记之间，提供了文档字符集、使用语言等，这些文档的基本信息用户不可见。比如上述例子用了一个字符集utf-8，由于大部分浏览器直接输出中文会乱码，因此需要声明字符集为utf-8.

5 标记

能在栏目上写上需要的文字，例如在作业0里加上如下标记：

    GAMES202-HOMEWORK0

这页面就显示的是：

6 标记

用于为HTML文档定义样式信息：背景background属性（背景色、背景图像等）、边框border和边距margin属性、元素的layout属性等等，具体可参考：HTML DOM Style 对象 (w3school.com.cn)

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

    
        html,
        body {
            margin: 0;
            background-color: black;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #glcanvas {
            top: 0;
            width: 100%;
            height: 100%;
        }
    

7 标记

这部分标记内容就是之前提到的主题内容，用于定义HTML文档所要显示的内容。一个HTML文档只能有一对，且必须在标记内位于头部标记后，与标记是并列的关系。浏览器中显示的所有文本、图像、视频等信息都必须位于标记内，这些也都是最终展示给用户看的东西。

8 标记

用以定义图形，拥有height和width的属性。如作业0中，规定了元素的id，在的还定义了它的height和width。

但是canvas本身没有绘图能力，还需要js来绘制，js就用这个id来查找canvas元素。 

代码标签

下面只介绍基本格式和一些代码标签的运用。

这里就是介绍一些内容里具体出现的一些符号，比如上述例子中出现的：

...——定义大标题，根据标题顺序需要改写后面的序号；

——定义一个段落；

——换行；

——插入图片

——添加链接，上述例子中用了一个target=_blank，表示点击链接后弹出一个页面展示链接网页内容；

style——定义一些属性，比如对齐方式（align）、颜色(color)等；

再比如作业0的index.html中的诸如：

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

总结：对于HTML有以上的知识储备我认为就足够了，HTML还有很多其他的语法这里就不赘述了，详情可参考以下文章：

HTML 基本语法 (w3chtml.com)