在编写完代码之后需要保存再打开浏览器才能看到界面的效果，作者在初学网页的时候经常忘记保存代码，导致页面一直不出现效果。所以推荐大家开启vscode里的自动保存。

左上角：文件->勾选自动保存。

image-20220209210119608

创建文件/文件夹

在VSCode中除了在之前介绍的可以直接将文件/文件夹直接拖进vscode以外，还可以快捷的创建文件/文件夹。只需要选中要创建文件/文件夹的父级目录再点击按钮就可以快捷创建。

具体操作如下图：

image-20220209210629269

插件推荐

这里推荐几款目前阶段适合大家的插件。插件这部分我不会一次推荐很多，只会分阶段的推荐，并且讲解每个插件的具体作用。以防大家装了一堆插件，结果连具体插件是做什么的都不知道。（也欢迎大家多多关注作者的干货推荐专栏，里面会推荐很多实用的插件）

Auto Close Tag

自动闭合标签。装上这款插件我们在写标签的时候只需要输入/就可以快速生成闭合标签。

image-20220209211211068

Auto Rename Tag

自动重命名标签。这个插件可以让我们在修改标签时自动帮我们修改另一个。比如 在修改<div>标签为<span>标签的时候，它会自动帮我们把</div>标签替换为</span>标签。

image-20220209211340002

open in browser

快速在浏览器打开，装上这个插件可以让我们在vscode界面中快速打开浏览器

pass：该插件作者在初学的时候出现过快捷键不能正常打开浏览器的情况，解决办法是降低该插件的版本即可。

image-20220209212227345

使用方式：

  • 右键选择

  • 快捷键：Alt + b

image-20220209211720980

image-20220209211958895

Live Server

实时预览，这款插件可以在本地运行一个微型服务器，让我们可以实时预览编辑的效果。（在修改召唤神龙那篇文章中就是用该插件和谷歌的另一个路径映射的插件联动，从而达到修改游戏的效果。有兴趣的同学可以去看看我写的修改召唤神龙的文章）

image-20220209212319330

使用方式：

安装好该插件之后在vscode右下角会出现一个’Go Live’，点击即可。

image-20220209212631953

Path Intellisense

路径联想，在我们引入图片或者其他文件的时候这款软件会为我们提示路径。

image-20220209212732609

HTML常用标签介绍

在网页中，每个html标签被称为元素，每个元素都有对应的属性（关于属性，会在下一篇CSS介绍的文章中详细讲解）

HTML标签的本质是为文本添加语义！

在学习编程的时候会涉及大量的概念，以及一些常用的代码片段。所以建议大家养成记笔记的习惯。

拓展内容

建议大家自主学习gitpage搭建个人博客（后期可能会出教程，等不了的同学可以自行百度，关键词：gitpage搭建个人博客）

同时建议大家学习markdown语法，并选择一款顺手的markdown编辑器。作者使用的是typroa 0.9版本（因为该软件1.0之后的版本收费）

typroa历史版本下载：https://typora.io/releases/all

既然安装了typroa可以自主学习一下图床的概念，再将Typroa和PicGo联动起来

世上无难事，只要肯登攀。 —— 毛泽东《水调歌头·重上井冈山》

pass:以下标签取自菜鸟教程

基本文档标签

文档标题

可见文本…

网页基础的结构，主要需要注意层级结构，以及外部文件是在<head>标签中引入（js文件可以在body中引入）

基本标签

一级标题

二级标题

三级标题

. . .
. . .
六级标题

文本

‘盒子’

这是一个段落。


（换行）

（水平线）

大家在这里可以试试<span>标签和<div>标签有什么区别

提示：行级元素，块级元素（后续DIV+CSS布局章节会详细讲解）

文本格式化

粗体文本

计算机代码

强调文本

斜体文本

键盘输入

预格式化文本

更小的文本

重要的文本

（缩写）

（联系信息）

（文字方向）

（从另一个源引用的部分）

（工作的名称）

（删除的文本）

（插入的文本）

（下标文本）

（上标文本）

链接

普通的链接：链接文本

图像链接： 替换文本

邮件链接： 发送e-mail

书签：

提示部分

跳到提示部分

注意a标签设置跳转的属性是href可不是src。

图片

替换文本

图片这里的话需要注意一点就是文件的引用路径，相对路径和绝对路径是不同的

相对路径和绝对路径的区别：https://blog.csdn.net/qq_34107571/article/details/82834825

./是当前文件夹

…/是上一级文件夹

…/…/是上上一级文件夹

在目前的阶段，图片显示不出绝大部分是因为路径的问题，相对路径需要结合之前推荐的Path Intellisense 路径联想插件多多练习。

pass：使用绝对路径的时候将代码发送给别人，图片会因为路径位置没有对应图片而显示不出来，所以需要注意。其他外部文件（列如CSS、JS文件）在使用绝对路径的时候也会出现这种问题。这点需要注意。

无序列表

    # 前端 # html
    Logo
    技术共进，成长同行——讯飞AI开发者社区

    技术共进，成长同行——讯飞AI开发者社区

    更多推荐

    cover

    智能体（Agent）的记忆架构：深入解析短期记忆与长期记忆

    avatar 讯飞AI开发者社区
    cover

    PHP与人工智能：结合案例与可能性探索

    avatar 讯飞AI开发者社区

    通用人工智能(AGI)发展现状：从科幻到现实的跨越

    通用人工智能(AGI)正从科幻走向现实。2025年，多模态融合、递归推理引擎和能效革命三大技术突破推动AGI发展，国际科技巨头和中国企业加速布局。AI Agent在金融、医疗、教育等领域广泛应用，企业自动化效率显著提升。然而，数据隐私、算法透明度和就业替代等伦理挑战亟待解决。未来，AGI将向多模态量子计算融合、具身智能和世界模型方向发展，需要建立人机协作新模式和完善的政策法规框架。AGI既带来机遇

    avatar 讯飞AI开发者社区