HTML文件
HTML文件用于定义网页的结构和内容。HTML文件包含HTML标记，用于创建网页的各个元素，如标题、段落、链接、图像等。HTML文件被浏览器解析和渲染，将其转换为可见网页。
<!DOCTYPE html>
/*声明：用于指定 HTML 文档的版本类型*/
<html>
/*HTML 文档的根元素，包含了整个 HTML 文档的内容*/
<head>
/*包含了与文档相关的元信息和配置项，通常不会在页面中显示出来*/
<title>/*定义了文档的标题，将显示在浏览器的标题栏或标签页中*/
<meta>/*定义文档的元数据，如字符编码、关键词、描述等*/
<link>/*用于引入外部样式表、图标等*/
<script>/*用于引入外部 JavaScript 文件或内嵌脚本*/
</head>
<body>
<header>/*定义页面的页眉部分，通常包含网站的标志、导航等内容*/
<main>/*定义页面的主要内容区域，每个 HTML 文档中只能有一个 <main> 元素*/
<aside>/*定义了页面的侧边栏或附加内容区域*/
<footer>/*定义了页面的页脚部分，通常包含版权信息、联系方式等*/
</body>
</html>
JavaScript文件
JavaScript文件用于为网页添加交互和动态功能。
JS文件包含 JavaScript 代码，可以用于处理用户输入、操作页面元素、发起网络请求、处理数据等等。
JS文件可以直接嵌入HTML中，也可以作为外部文件引入。
变量、函数、对象、类、语句、事件处理、异步操作和回调函数等
Vue文件
Vue是一个流行的 JavaScript 框架，用于构建用户界面。
Vue文件包含HTML、CSS和JavaScript代码，分别用于定义模板、样式和逻辑。
Vue文件通过Vue的编译器或打包工具将其转换为可供浏览器解析的普通HTML和JS代码。
<template>（内容）
<!-- 模板部分，其中包含了组件要渲染的HTML结构，可以在其中编写 HTML 代码，描述组件的外观和布局 -->
</template>
<script>（逻辑结构）
<!-- 脚本部分是组件的 JavaScript 代码，它可以包含组件的逻辑、数据和方法，脚本使用的是 Vue 的语法，可以访问和操作组件的数据和状态 -->
</script>
<style>（样式）
<!--样式部分包含组件的样式规则，用于定义组件的外观和样式 -->
</style>
SVG文件
SVG文件用于描述可缩放矢量图形。
SVG文件使用XML格式，用于定义矢量图形，如图标、图表、矢量图等。
SVG文件在HTML中作为图像元素（例如<svg>）或背景图像使用，可以设置填充、边框、动画等。
声明（DOCTYPE）：用于指定 SVG 文件的类型和版本
开始标签：<svg> 标签是整个 SVG 图形的根元素，它定义了 SVG 图形的属性和命名空间
元素和属性：在 <svg> 标签内，可以定义各种 SVG 元素，每个 SVG 元素可以设置一系列的属性，用来定义元素的样式、位置、尺寸等特性
样式属性：SVG 元素的样式可以通过直接在每个元素上设置属性，如 fill（填充颜色）、stroke（描边颜色）、stroke-width（描边宽度）等
对象属性：SVG 元素还可以设置一些对象属性，如 viewBox（定义可视区域）、preserveAspectRatio（定义缩放行为）等，来控制 SVG 图形的显示和缩放方式
脚本与交互（Scripts & Interactivity）: SVG 文件可以添加脚本和交互功能，例如使用 <script> 标签嵌入 JavaScript 代码来处理事件、动画等
css文件
总结：
- HTML文件适用于定义网页的结构和内容。
- JavaScript文件适用于添加交互和动态功能。
- Vue文件适用于构建基于Vue框架的用户界面。
- SVG文件适用于描述矢量图形。