VSCode 生成HTML 基本骨架

发布于:2025-03-24 ⋅ 阅读:(32) ⋅ 点赞:(0)

 在VSCode  新建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">

 这个时候就变成

<!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 的主要作用包括:

  1. 实时刷新页面:当检测到项目文件发生变化时(例如 HTML、CSS 或 JavaScript 文件被修改),LiveServer 会自动重新加载(刷新)浏览器中的页面。这使得开发者能够立即看到所做的更改效果,而无需手动刷新页面。

  2. 本地服务器:LiveServer 可以在本地启动一个小型的 Web 服务器,为你的项目提供服务。这对于测试和调试前端代码特别有用,因为它模拟了一个真实的 web 环境,可以更准确地反映出网页在实际部署后的表现。


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

方式一:

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

方式二:

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


网站公告

今日签到

点亮在社区的每一天
去签到