前端学习基础—VScode环境配置及html基础知识
作为初学者，一个好的开发环境能极大地提高理解与学习的效率，本文分享我的VScode环境配置方法，涵盖插件、主题、快捷键等，希望能助你快速搭建舒适边界的前端学习环境。
一、VSCode环境配置
首先找到vscode插件商店，在这里我们可以找到我们所需要的插件，且安装便捷。
1.核心插件推荐
(1)基础必备
-
Chinese：vscode汉化包（英文好的可跳过）。
-
Open in browser：在html文件内右键点击Open in Default Browser（或Alt+B），即可从vscode快捷打开html网页文件。
-
Live Preview：在html文件内右键点击显示预览，即可实时在vscode预览HTML页面（无需保存自动刷新），相较于广为人知的Live Serve更为方便快捷。（严重推荐）
(2)HTML/CSS增强
-
Auto Rename vTag：自动修改配对的HTML标签。
-
HTML CSS Support：CSS类名智能补全。
-
Auto Rename Tag：标签自动同步重命名：修改 HTML/XML 的起始标签（如
<div>）时，闭合标签（</div>）自动同步更新。（严重推荐）
(3)效率工具
-
Path Intellisense：文件路径自动补全
-
Bracket Pair Colorizer：彩色括号配对，避免嵌套混乱
个性化插件
- One Dark Pro：选择你喜欢的暗色主题。
- 或打开设置，点击右上角「打开设置(json)」自己配置。
快捷键
| 功能 | 快捷键（Windows） |
|---|---|
| 快速打开终端 | Ctrl+` |
| 格式化代码 | Shift+Alt+F |
| 行注释/取消注释 | Ctrl+/ |
| 多光标编辑 | Ctrl+Alt+↑/↓ |
| 跳转到定义 | F12 |
| 重命名变量 | F2 |
二、html入门知识
1.HTML 简介
(1)什么是 HTML？
-
全称：HyperText Markup Language（超文本标记语言）
-
作用：定义网页的结构和内容（如文本、图片、链接等）。
-
特点：
-
由一系列标签（
<tag>）组成。 -
文件扩展名为
.html或.htm。 -
通过浏览器解析渲染成可视化页面。
-
(2)HTML 文档基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>网页标题</title>
</head>
<body><!-- 页面内容写在这里 -->
</body>
</html>-
<!DOCTYPE html>：声明文档类型为 HTML5。 -
<html>：根标签，lang属性指定语言（如zh-CN中文）。 -
<head>：存放元信息（标题、字符集、CSS/JS 链接等）。 -
<body>：页面可见内容区域。
2.常用 HTML 标签
(1)文本标签
| 标签 | 说明 | 示例 |
|---|---|---|
<h1> ~ <h6> | 标题（重要性递减） | <h1>标题</h1> |
<p> | 段落 | <p>段落内容</p> |
<br> | 换行（空标签） | 第一行<br>第二行 |
<hr> | 水平分割线 | <hr> |
<strong> / <b> | 加粗（语义化/纯视觉） | <strong></strong> |
<em> / <i> | 斜体（语义化/纯视觉） | <em></em> |
(2)列表标签
-
无序列表：
<ul><li>项目1</li><li>项目2</li> </ul> -
有序列表：
<ol><li>第一步</li><li>第二步</li> </ol>
(3)链接
-
普通链接：
<a href="https://example.com" target="_blank">访问示例</a>-
target="_blank"：在新标签页打开。
-
3.HTML 语义化
| 标签 | 说明 |
|---|---|
<header> | 页眉（标题/导航） |
<nav> | 导航栏 |
<main> | 页面主要内容 |
<article> | 独立内容（如博客文章） |
<section> | 文档中的节（如章节） |
<aside> | 侧边栏（广告/附加信息） |
<footer> | 页脚（版权/联系方式） |
4.HTML 实用技巧
(1) 注释：<!--内容-->
<!-- 这是注释，不会显示在页面中 -->(2)特殊字符
| 显示 | 代码 | 说明 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| 空格 | | 不间断空格 |
注意：VSCode 本身是一个轻量级的跨平台代码编辑器，默认不包含任何语言的编译器或解释器。
-
前端开发（HTML/CSS/JavaScript）：无需额外配置，可直接使用。
-
C/C++ 开发：需额外安装编译器（如 Windows 下的 MinGW/MSVC、Linux 下的 GCC、macOS 下的 Clang），并配置环境变量和 VSCode 的
tasks.json/c_cpp_properties.json文件。
本文的环境配置仅针对前端开发参考使用，其他语言需单独设置编译和调试环境。