HTML、CSS和JavaScript入门教程_html css javascript-CSDN博客

如果你希望将 VSCode 的界面设置为中文，可以安装简体中文语言包：
打开 VSCode，点击左侧的扩展按钮。
在搜索栏中输入 Chinese (Simplified)。
安装第一个搜索结果。
安装完成后，按下快捷键 Ctrl+Shift+P，输入 Configure Display Language，选择中文(简体)。
重启 VSCode 以应用更改。

HTML 开发插件

1.3 示例：创建一个简单的网页

HTML Snippets：提供 HTML 代码片段，输入简短的缩写即可快速生成完整的 HTML 结构，例如输入 ! 并按下 Tab 键即可生成完整的 HTML5 模板。
Auto Close Tag：自动闭合 HTML 标签，减少手动输入的工作量。
Auto Rename Tag：自动重命名对应的结束标签，确保标签匹配。
HTML Boilerplate：快速生成 HTML 模板，包括常用的 meta 标签和链接到样式表和脚本。
Prettier - Code Formatter：格式化代码，保持代码整洁

CSS 开发插件
CSS Peek：允许从 HTML 文件中快速跳转到对应的 CSS 样式定义，并提供预览功能。
Live Sass Compiler：如果你使用 Sass 或 SCSS，这个插件可以实时编译文件并生成对应的 CSS。

JavaScript 开发插件
JavaScript (ES6) code snippets：提供 ES6 语法的代码片段，帮助快速编写 JavaScript。
ESLint：用于检查代码规范，确保代码质量

网页预览插件
Live Server：启动一个本地开发服务器，支持自动刷新页面，方便实时查看 HTML、CSS 和 JavaScript 的效果。
Open in Browser：快速将 HTML 文件在浏览器中打开，支持多种浏览器。

一、HTML：构建网页结构

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过一系列的标签（Tags）来定义网页的结构。

1.1 基本结构

一个简单的HTML文件通常包含以下结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</t