从0开始学WebGIS：HTML常用标签与快捷键（一）

最新推荐文章于 2024-07-27 15:40:06 发布

Mr_cangc

最新推荐文章于 2024-07-27 15:40:06 发布

阅读量1.3k

点赞数 36

分类专栏：从0开始学WebGIS 文章标签： html 前端 html5 web arcgis

本文链接：https://blog.youkuaiyun.com/Mr_cangc/article/details/136388524

版权

从0开始学WebGIS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在VScode中使用HTML创建网页，包括常用快捷键如Ctrl+/注释代码、Ctrl+Enter换行、Ctrl+S保存和Alt+B运行调试等。通过实例演示了如何编写基础HTML结构并自定义网页标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章我们介绍了VScode的安装与环境配置

从0开始学WebGIS：第一讲WebGIS概述与VScode安装-优快云博客

这次咱们就来看看如何使用html来搭建一个网站！

首先我们来记住几个常用的快捷键！

Ctrl+/ 注释鼠标所在行，选中已注释的代码再次按Ctrl+/即可取消注释，下图绿色代码即为被注释的代码，被注释的代码不会被程序读取，仅作为对代码的介绍

Ctrl+回车键（Enter）任意位置换行，举个例子：如果光标在一行的中间位置，这时候直接按回车键的话光标后面的文字会一起换到下一行，但是如果按住Ctrl再按回车键的话，会直接新建一个空行，真是超级方便！

Ctrl+S 保存，如果没有保存就运行程序的话，运行结果会显示上次已保存代码的结果，所以在运行程序前一定要记得保存哦！

区分是否保存了的标志就是编辑界面菜单栏是否有“小白点”，如下图箭头所指，有小白点则表示没有保存，保存之后小白点会变为“X”号哦！

Alt+B 运行调试，也就是在默认浏览器中打开，当我们成功安装了open in default browser插件后，我们在编程界面右键单击打开右键菜单，会发现出现了 open in default browser这个选项，单击此选项即可实现在网页中查看代码运行结果的操作

记住了这几个常用快捷键后，咱们就开始创建第一个网页吧！

在VScode界面的左上角单击“文件”选项，在下拉菜单中单击“新建文件”选项

在界面中间打开的窗口中输入新建文件的文件名，注意！！！一定要加上“.html”这个后缀名！！！比如我们可以叫"例1.html"，注意“.”一定要是英文格式的哦！然后我们按回车键，在弹出的界面中选择一下这个新建文件的存储路径，点击确定就能开始写代码了！

将输入法调成英文状态，在编程界面第一行输入一个“！”，然后按回车键，这时我们会发现，一个HTML的基础框架就自动搭建好了

下面是自动搭建好的代码以及说明

<!DOCTYPE html>   <!--告诉浏览器我这代码是用html写的-->
<html lang="en">  <!--说明编程语言是“en”英语-->
<head>            <!--头标签，除了标题外其他代码均不在页面内显示-->
    <meta charset="UTF-8">  <!--字符使用中文，不写这句的话打汉字会有乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--设置浏览器的，跟咱没啥关系-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端的设置，和咱也没啥关系-->
    <title>Document</title>   <!--重点！标题标签，修改“Document”位置的文字即可实现对浏览器标题的修改，没有修改的话浏览器标题就会显示Document-->
</head>            <!--头标签结束符，带有“/”的标签都是说明这个标签的内容结束了-->
<body>             <!--身体标签，咱们的代码主要就是在这里写哦！-->
                   <!--在这里进行代码的书写-->
</body>
</html>

我们要做的就是将<title>标签中的白色字符“Document”修改为咱们想要的标题，这里我们改为“这是我的第一个网页！”

然后在<body>后面写一句话，这里我们可以随便写，我写的是“这是我自己的HTML网页哦！”

写的时候记得不用加双引号，直接写就好，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是我的第一个网页！</title>
</head>
<body>
    这是我自己的HTML网页哦！
</body>
</html>

代码写好后我们会发现标题栏旁边有个小白点在提醒咱们程序还没有保存，这时我们按下Ctrl+S键进行保存，然后按Alt+B键运行代码，咱们的第一个网页就出现啦！

大家看网页的标题和内容是不是都变成咱们自己写的话了