VSCode 生成HTML 基本骨架

在VSCode 新建html文件中敲一个英文感叹号 !

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

</body>
</html>

上面默认是<html lang="en"> ，可以设置为中文 <html lang="zh-CN">

这个时候就变成

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

上面内容的解释：

|--------------------------------------------------------------------------|---------------------------------------------------------------------------|
| 内容 | 说明 |
| <!DOCTYPE html> | HTML5 文档声明 |
| <html> | 根标签 |
| <html lang="zh-CN"> | 指定文档的语言为简体中文（zh-CN），英文（en）这有助于搜索引擎和屏幕阅读器正确识别页面的语言。 |
| <head> | 文档的头部区域。 |
| <meta charset="UTF-8"> | 指定文档的字符编码为UTF-8。 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 关于视口的元信息。设置了视口宽度等于设备的屏幕宽度，并将初始缩放比例设置为 1.0。这对于响应式设计非常重要，确保网页在移动设备上能够正确显示。 |
| <title> | 显示在浏览器的标签页标题上。 |
| <body> | 用户在浏览器中看到的内容都位于 <body> 标签内。 |

可以安装一个VSCode插件：

LiveServer 是一个非常实用的工具，主要用于在开发过程中提供即时反馈。它通常作为一个扩展或插件集成到代码编辑器中，如 Visual Studio Code (VS Code)。LiveServer 的主要作用包括：

实时刷新页面：当检测到项目文件发生变化时（例如 HTML、CSS 或 JavaScript 文件被修改），LiveServer 会自动重新加载（刷新）浏览器中的页面。这使得开发者能够立即看到所做的更改效果，而无需手动刷新页面。
本地服务器：LiveServer 可以在本地启动一个小型的 Web 服务器，为你的项目提供服务。这对于测试和调试前端代码特别有用，因为它模拟了一个真实的 web 环境，可以更准确地反映出网页在实际部署后的表现。

**favicon.ico **通过在浏览器标签上展示一个独特的图标，可以让用户更轻松地在多个打开的标签页中识别出你的网站。

方式一：

在网站根目录下，放一个favicon.ico文件，浏览器会自动加载这个文件，此时文件名字及后辍都是固定的，不能改变

方式二：

html 复制代码

<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">