手摸手教你编写你人生中第一个HTML页面

时间 2019-12-20

原文原文链接

本文是《HTML5与CSS3基础语法自学教程》的第二篇，首发于【前端课湛】微信公众号。

导读：本小节主要讲解 HTML 的基础语法内容，将经过编写第一个 HTML 页面来学习 HTML 的基本结构、<!DOCTYPE> 声明、元素和注释等内容。经过本小节的学习能够对 HTML 的基础语法有个全面的掌握，这也是咱们后续学习 HTML 其余内容时必需要用到的。javascript

提示：学习 HTML 基础语法须要用到开发编辑器，这里使用 Visual Studio Code 编辑器。固然，你也能够选择你更熟悉的开发编辑器来使用。关于 Visual Studio Code 编辑器的基本操做能够参考本小节中扩展阅读。

1. HTML 基本结构

1.1 建立第一个 HTML 页面

打开 Visual Studio Code 编辑器新建一个文件，而且保存为 .html 或 .htm 扩展名的文件。而后，在新建的 HTML 文件中输入 HTML，这时 Visual Studio Code 编辑器会弹出提示框。css

以下图所示展现了输入以后的提示框：html

根据 Visual Studio Code 编辑器的提示，选择【html : 5】这个选项，就建立好了一个 HTML 的基本结构。前端

以下图所示展现了建立以后的 HTML 模板内容：java

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>

说明：【html : 5】选项表示使用 HTML5 版本的模板。

1.2 HTML 模板简要说明

建立了 HTML5 版本的基本结构，接下来咱们以从上到下的顺序，对这个基本结构中比较核心的内容进行简单地初步了解。程序员

1.2.1 <!DOCTYPE> 声明

<!DOCTYPE html>

在 HTML5 基本结构的第一行，这块内容被称为 HTML 声明。HTML 声明的做用是浏览器运行该 HTML 页面时，告知浏览器当前 HTML 页面的版本。浏览器

1.2.2 HTML 基本结构

<html lang="en">

    <head></head>
  
    <body></body>

</html>

除了第一行的 HTML 声明以外，其他内容才算是 HTML 的基本结构。接下来咱们进行分别说明：微信

<html> 元素：表示当前 HTML 页面的根元素，用来包含全部其余 HTML 元素。
<head> 元素：表示当前 HTML 页面的头部，用来定义当前 HTML 页面的基本信息，例如标题、关键字、做者等内容。
<body> 元素：表示当前 HTML 页面的主体，用来定义最终显示在浏览器窗口的内容。

2. <!DOCTYPE> 声明

HTML 页面的第一行通常都是编写 HTML 声明。HTML 声明的做用就是当浏览器运行该 HTML 页面时来告知浏览器当前 HTML 页面的版本，这样浏览器会准确地进行解析并展现其内容。框架

HTML 声明必需要编写在 HTML 页面的第一行，通常都是在 <html> 元素以前。而且 HTML 声明以前不能存在空行或者空格，否则会致使 HTML 声明失效。编辑器

浏览器发展至今，其功能也很是的强大。因此，若是 HTML 页面没有定义 <!DOCTYPE> 声明的话，浏览器也能够正确地解析该 HTML 页面并进行显示。可是，仍是建议在编写 HTML 页面时定义 <!DOCTYPE> 声明。

再有，咱们须要注意 HTML5 版本和 HTML 4.01 版本的声明是不一样的。

以下示例代码所示展现了 HTML5 版本的声明：

<!DOCTYPE html>

HTML 4.01 版本的声明分别存在三个版本。
- HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该声明是严格型约束，该 DTD 文件包含全部 HTML 元素和属性，但不包括展现性的和弃用的元素（好比 font），也不容许框架集（Framesets）。

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

该声明是过渡型约束，该 DTD 文件包含全部 HTML 元素和属性，包括展现性的和弃用的元素（好比 font），但不容许框架集（Framesets）。

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

该声明是框架集约束，该 DTD 等同于 HTML 4.01 Transitional，但容许框架集内容。

经过两个版本的 HTML 声明内容，咱们也能够看出 HTML5 版本的声明内容简化了很多。不只没有了版本信息，也不须要约束文件。

说明：约束文件指的是如上述 strict.dtd、 loose.dtd 或者 frameset.dtd 文件。HTML 的约束文件是用来定义 HTML 的元素以及编写规范。

3. HTML 元素

除了 HTML 声明以外，其余内容都是 HTML 元素。首先，须要搞清楚元素（Element）和标签（Tag）之间的区别，以下图所示：

元素（Element）：是用来包含文字、图片或者音视频的内容，通常是由标签和内容组成。
标签（Tag）：是元素的组成部分，通常分为开始标签和结束标签。

3.1 HTML 元素

HTML 元素是 HTML 的重要组成部分之一，以下图所示展现了 HTML 元素的语法结构：

HTML 元素能够分为闭合元素和空元素两种类型：

闭合元素：具备开始标签和结束标签，并且开始标签和结束标签是成对出现的。以下示例代码展现了闭合元素：

<div>文本内容</div>

空元素：只有开始标签，而没有结束标签。以下示例代码展现了空元素：

<input type="text">

注意：在编写 HTML 元素时，若是是闭合元素不要忘记结束标签，若是是空元素不要编写结束标签。目前的开发编辑器会有相应的提示功能。

因为 HTML 是大小写不敏感的，因此 HTML 元素的元素名写成大写或小写都是容许的，例如 <div>、<Div> 和 <DIV> 是同样的含义。

可是 W3C 组织早在 HTML4 版本时，建议元素名使用小写形式。后来出现的 XHTML 是强制元素名必须使用小写形式。因此，元素名的编写仍是尽可能使用小写形式，并且如今的开发编辑器的提供功能也都是小写形式的。

注意： <html> 元素是比较特殊的元素，称为根元素。在一个 HTML 页面中只能存在一个 <html> 元素，即便编写了多个 <html> 元素，运行 HTML 页面时浏览器也会自动忽略。

3.2 HTML 标签

HTML 标签其实是 HTML 元素的组成部分之一，分为开始标签和结束标签。

开始标签（Opening Tag）：表示某个元素是从这里开始的。
结束标签（Closing Tag）：表示某个元素是到这里结束的。

不管是开始标签仍是结束标签都具备的结构：

左尖角号
元素名
右尖角号

以下图所示展现了标签的结构：

而结束标签相比开始标签多了个结束符（/）。以下图所示展现告终束标签的结构：

3.3 HTML 元素的属性

属性是 HTML 元素的重要组成部分，用来定义某个元素的信息。例如为 <div> 元素定义 ID 属性，就是定义了惟一标识。

属性定义在元素的开始标签中，这样不管是闭合元素仍是空元素均可以正常使用属性。属性的语法结构是键值对形式的。以下图所示展现了属性的语法结构：

属性名（attribute name）：其数量和做用都是 HTML 给定的。
属性值（attribute value）：属性对应的值，建议使用一对双引号进行包裹。

注意：不一样的属性，对应不一样类型的值。

与元素的状况相似，属性的编写 W3C 组织也是建议使用小写形式。目前开发编辑器的提示功能也都是提供小写形式的。

同一个元素是容许编写多个不一样的属性的，但在同一个元素中不能同时定义多个相同的属性。再有，HTML 元素的属性能够划分为如下 4 种：

标准（通用）属性：HTML 元素几乎都具备的属性，例如 id、name、style 和 class 属性等。
专有（私有）属性：HTML 中某些元素特有的属性，例如 <form> 元素的 action 属性等。
事件属性：用来为 HTML 元素注册 DOM 事件的属性，例如 onclick 属性等。
自定义属性：第三方框架中为了完成某个特定功能而定义的属性，例如 Vue 框架的 v-if 属性等。

4. HTML 头部

HTML 头部具体是指 <head> 元素以及该元素所包含的全部元素，其做用是用来定义当前 HTML 页面的基本信息，例如 HTML 页面的标题、编写格式、做者、关键字以及描述等内容。

4.1 `<head>` 元素

<head> 元素是 HTML 页面基本结构中的组成部分，其做用是定义 HTML 页面的基本信息。可定义在 <head> 元素内的元素有以下：

<title> 元素：定义 HTML 页面的标题，显示在浏览器的标题或标签页上。以下示例代码所示展现了 <title> 元素的用法：

<title>Document</title>

<base> 元素：定义 HTML 页面中全部相对 URL 的根 URL。以下示例代码所示展现了 <base> 元素的用法：

<base target="_blank" href="http://www.example.com/">

注意：一个 HTML 页面只能定义一个 <base> 元素。若是一个 HTML 页面定义了多个 <base> 元素的话，则只有第一个 <base> 元素有效。

<link> 元素：定义 HTML 页面引入的外部资源，比较常见的是引入外部 CSS 文件或图标文件等。

以下示例代码所示展现了经过 <link> 元素引入外部 CSS 文件：

<link href="link-element-example.css" rel="stylesheet">

以下示例代码所示展现了经过 <link> 元素引入外部图标文件：

<link rel="icon" href="favicon.ico">

<style> 元素：定义 HTML 页面的 CSS 样式，通常称为内嵌样式表。以下示例代码所示展现了经过 <style> 元素定义内嵌样式表：

<style type="text/css">
    body {
      color:red;
    }
</style>

<meta> 元素：定义 HTML 页面的元数据信息，例如编码格式、做者、关键字等。以下示例代码所示展现了经过 <meta> 元素的用法：

<meta charset="UTF-8">

<script> 元素：定义 HTML 页面的可执行的脚本，通常多为 JavaScript 脚本。以下示例代码所示展现了经过 <script> 元素定义 JavaScript 脚本代码：

<script type="text/javascript">
    console.log('打印一个测试信息.');
</script>

<noscript> 元素：定义当 HTML 页面的脚本代码不被支持或者浏览器关闭了脚本执行时的替代内容。以下示例代码所示展现了 <noscript> 元素的用法：

<noscript>
    <a href="http://www.example.com/">这是一个连接</a>
</noscript>

<command> 元素：定义 HTML 页面容许用户能够调用的命令。该元素已被废弃！

4.2 `<meta>` 元素

<meta> 元素是用来定义不能由 <base>、<link>、<script>、<style> 和 <title> 元素定义的元数据信息。而且 <meta> 元素是个空元素。

<meta> 元素经常使用的用法以下所示：

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页做者：

<meta name="author" content="KingJ">

每30秒中刷新当前页：

<meta http-equiv="refresh" content="30">

HTML5 版本定义编码格式：

<meta charset="UTF-8">

定义 HTML 页面的视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

提示：除了以上罗列的常见用法以外， <meta> 元素还有不少其余用法，具体的用法在对应的章节进行详细讲解。

5. HTML 注释

与不少开发语言相似，HTML 语言提供了编写注释的语法内容。在浏览器运行 HTML 页面时，浏览器会自动忽略注释里面的内容，用户是看不到 HTML 页面中有关注释的内容的。

当一段内容被  包裹起来时，那么这段内容就是一个注释内容了。以下图所示展现了 HTML 注释的语法结构：

注释能够用来更好地描述某一段 HTML 代码的含义或做用。不管是本身一段时间以后回顾（review）代码，仍是别人处理这段代码，注释都是起到了很大做用的。

说明：编写注释也是程序员在开发工做中的一个优良习惯，但愿你能够学习并保持这一优良习惯。

6. 扩展阅读

6.1 Visual Studio Code 下载与安装

Visual Studio Code 编辑器是 Microsoft 公司在 2015 年 4 月 30 日 Build 开发者大会上推出的一款运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

咱们能够经过访问 Visual Studio Code 编辑器的官网来了解，以下图所示展现了 Visual Studio Code 官网的部分界面：

Visual Studio Code 编辑器的官网会自动识别咱们当前的操做系统，并提供对应的安装包下载。咱们须要作的就是下载对应版本的安装包到本地电脑，再进行安装便可。

提示：这里有关具体的下载和安装步骤就不作详细说明了，由于很是的简单。

6.2 Visual Studio Code 设置中文界面

通常状况下，安装好的 Visual Studio Code 编辑器的界面就是中文的。但也不妨有特殊状况出现，若是你在安装完 Visual Studio Code 打开后发现界面是英文（或者是任何其余语言）界面能够经过扩展安装中文语言插件来解决。具体能够按照以下步骤进行操做：

提示：如下操做请在你的电脑能够正常联网的状况下进行操做。

a. 打开 Visual Studio Code 编辑器的扩展界面

打开 Visual Studio Code 编辑器以后，咱们能够看到在最左边是有 5 个菜单的。其中第 5 个菜单（图标）表示是扩展，以下图所示展现了扩展菜单所在的位置：

b. 搜索中文语言插件包

在扩展界面的搜索框中，输入【Chinese】关键字来搜索中文语言插件包。搜索结果中的第一个结果通常就是咱们要找的中文语言插件包，以下图所示展现了搜索结果：

在搜索中第一个结果点击【Install】按钮，来安装对应的插件包便可。

c. 重启 Visual Studio Code 编辑器

安装成功以后 Visual Studio Code 编辑器会弹出让你重启编辑器的提示框，以下图所示展现安装插件成功以后的提示框：

这时点击提示框中的【Restart Now】按钮，来重启 Visual Studio Code 编辑器。重启以后，Visual Studio Code 编辑器的界面就成功地改成了中文。以下图所示展现了中文操做界面的 Visual Studio Code 编辑器：

6.3 Visual Studio Code 新建文件

Visual Studio Code 编辑器新建文件有两种方式进行操做：

a. 经过菜单完成新建操做

点击 Visual Studio Code 编辑器顶部菜单中的【文件】，在弹出的菜单中选择【新建文件】选项，完成新建文件的操做。

以下图所示展现了新建文件的菜单位置：

b. 经过快捷键完成新建操做

若是你的操做系统是 Windows 的话，能够经过【Ctrl+N】快捷键直接建立一个新的文件。若是你的操做系统是 Mac OS 的话，能够经过【Command+N】快捷键直接建立一个新的文件。

注意：新建的文件在没有保存的状况下，是没有任何扩展名的。也就是说，新建的文件不属于任何文件类型。

6.4 Visual Studio Code 保存文件

Visual Studio Code 编辑器保存文件有两种方式进行操做：

a. 经过菜单完成保存操做

点击 Visual Studio Code 编辑器顶部菜单中的【文件】，在弹出的菜单中选择【保存】选项，完成保存文件的操做。

以下图所示展现了保存文件的菜单位置：

b. 经过快捷键完成保存操做

若是你的操做系统是 Windows 的话，能够经过【Ctrl+S】快捷键完成保存文件的操做。若是你的操做系统是 Mac OS 的话，能够经过【Command+S】快捷键完成保存文件的操做。

注意：保存文件的时候必定要指定文件的扩展名。若是不指定文件的扩展名，该文件将不属于任何文件类型，而且会影响该文件的内容编写。

7. 总结

本小节从 HTML 基本结构开始讲解，而后根据 HTML 基本结构进行分别讲解，其中包括 <!DOCTYPE> 声明、HTML 元素、HTML 头部以及 HTML 注释等内容。其中：

<!DOCTYPE> 声明：重点在于其做用是什么、用法与注意事项，以及 HTML 4.01 和 HTML 5 两个版本的写法。
HTML 元素：重点在于 HTML 元素的语法结构、分类和分类的特色，以及属性的相关内容。
HTML 头部：重点在于 HTML 头部的做用、包含哪些元素及做用，以及常见的 <meta> 元素的用法。

预告：下一节，咱们介绍 CSS 的基本信息，其中包括 CSS 概念、CSS 的发展历程，以及 CSS 版本的发展历程等内容。