教你写人生第一个HTML页面

本文是《HTML5与CSS3基础语法自学教程》的第二篇文章，首发于【前端课程战】微信公众号。指南：本节主要讲解HTML的基本语法内容。通过编写第一个HTML页面，您将学习HTML的基本结构、声明、元素和注释。通过本节的学习，我们可以全面掌握HTML的基本语法，这也是我们以后学习其他HTML内容时必须要用到的。提示：学习HTML的基本语法，需要使用开发编辑器，这里我们使用VisualStudioCode编辑器。当然你也可以选择自己比较熟悉的开发编辑器。VisualStudioCode编辑器的基本操作请参考本节延伸阅读。1.基本HTML结构1.1创建第一个HTML页面打开VisualStudioCode编辑器新建一个文件，保存为扩展名为.html或.htm的文件。然后，在新建的HTML文件中输入HTML，VisualStudioCode编辑器会弹出提示框。输入后的提示框如下图所示：根据VisualStudioCode编辑器的提示，选择[html:5]选项，创建一个基本的HTML结构。下图显示了创建的HTML模板的内容：说明：[html:5]选项表示使用HTML5版本的模板。1.2HTML模板简要说明HTML5版本的基本结构已经创建。接下来，我们将从上到下依次简单了解一下这个基本结构的核心内容。1.2.1声明是HTML5基本结构中的第一行，这段内容称为HTML声明。HTML语句的作用是在浏览器运行HTML页面时，告诉浏览器当前HTML页面的版本。1.2.2HTML的基本结构除了第一行HTML声明，其余内容为基本HTML的结构。下面分别进行说明：元素：表示当前HTML页面的根元素，用于包含所有其他HTML元素。元素：表示当前HTML页面的头部，用于定义当前HTML页面的基本信息，如标题、关键字、作者等。元素：表示当前HTML页面的主体,用于定义最终显示在浏览器窗口中的内容。2.声明HTML页面的第一行一般是HTML声明。HTML声明的作用是在浏览器运行HTML页面时，告诉浏览器当前HTML页面的版本，以便浏览器准确解析和显示其内容。HTML声明必须写在HTML页面的第一行，通常在元素之前。并且HTML声明前不能有空行或空格，否则HTML声明无效。浏览器发展至今，功能也很强大。因此，如果HTML页面没有定义语句，浏览器就可以正确解析并显示HTML页面。但是，仍然建议在编写HTML页面时定义声明。同样，我们需要注意HTML5版本和HTML4.01版本有不同的声明。以下示例代码显示了HTML5版本的声明：HTML4.01版本的声明共有三个版本。HTML4.01Strict这个声明是一个严格的类型约束，DTD文件包含所有HTML元素和属性，但不包括表示性的和弃用的元素（如字体），并且不允许框架集（Framesets）。HTML4.01Transitional这个声明是一个过渡约束，DTD文件包含所有HTML元素和属性，包括表示性和弃用的元素（如字体），但不允许框架集（Framesets）。HTML4.01Transitional这个声明是一个框架集约束，此DTD等同于HTML4.01Transitional，但允许框架集内容。通过两个版本的HTML声明内容，我们也可以看出HTML5版本的声明内容已经简化了很多。不仅没有版本信息，也不需要约束文件。注意：约束文件是指上面提到的strict.dtd、loose.dtd或frameset.dtd文件。HTML约束文件用于定义HTML元素和编写规范。3.HTML元素除了HTML声明，其他内容都是HTML元素。首先，你需要了解元素（Element）和标签（Tag）的区别，如下图所示：元素（Element）：用于包含文字、图片，或者音视频内容，一般由标签和内容。标签（Tag）：是元素的组成部分，一般分为开始标签和结束标签。3.1HTML元素HTML元素是HTML的重要组成部分之一。HTML元素的语法结构如下图所示：HTML元素可分为封闭元素和空元素两种：封闭元素：带有开始标签和结束标签，并且开始标签和结束标签成对出现。以下示例代码显示了一个结束元素：