HTML 基本语法与标签 | 01 - HTML 的创建

一、HTML 的创建与浏览

HTML 文件的创建

实际开发中创建 HTML 文件有两种方式，第一种可以使用编辑器 VSCode 安装 ctrl + N 快捷键来创建 HTML 文件，注意 HTML 文件的后缀必须是 .html；第二种方式就是可以直接通过鼠标右键创建新的文件，并把后缀改为 .html 即可。

在创建完 HTML 文件之后，我们可以通过 VSCode 打开，在英文模式下输入 ! 并按住 tab 键就可以自动生成 HTML 的骨架。

首先创建一个文件夹 01_HTML5基本语法与标签，在该文件中创建一个 HTML 文件 01_第一个HTML5页面.html，通过 !+tab 键生成基本的 HTML 骨架。

输入 ! 就会出现提示，可以点击这个提示或者按下 tab 键就可以生成 HTML 骨架：

HTML 骨架代码如下：

如果在输入 ! 时没有相关的提示，可能是因为文件的后缀名不是 .html 导致的。

HTML 文件的浏览

HTML 文件的浏览有两种方式，在 VSCode 界面，可以通过鼠标右键，选择 Open In Default Browser 或者 Open In Other Browser 也就是在默认的或者其他浏览器中打开文件，具体如下：

这种打开访问就是打开一个文件，与直接双击文件打开的效果是一样的。

第二种方式就是通过给 VSCode 安装 Live Server 插件，这个插件可以实时的显示 HTML 文件的更新，自动的刷新网页。

在安装完插件后，在打开 HTML 界面的情况下，可以按住 ctrl+shift+p 键，选择 Open With Live Server 即可在服务器的状态下打开 HTML 文件。

VSCode 插件可以通过这里进行搜索并安装：

安装之后使用 Live Server 打开 HTML 文件：

通过 Live Server 打开 HTML 文件之后，在浏览器的地址栏中会有一个服务器的地址：

而使用双击文件或者 Open In Default Browser 的方式打开 HTML 文件之后，浏览器的地址栏中则是一个具体的文件的绝对路径的地址：

这是这两种打开方式的本质的区别，使用 Live Server 打开文件在 HTML 文件修改并保存后能够实时的更新文件的内容：

而使用双击方式打开或者 Open In Default Browser 的方式则在修改并保存之后需要手动的刷新浏览器才能够看到修改之后的内容：

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！