在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 的主要作用包括:
实时刷新页面:当检测到项目文件发生变化时(例如 HTML、CSS 或 JavaScript 文件被修改),LiveServer 会自动重新加载(刷新)浏览器中的页面。这使得开发者能够立即看到所做的更改效果,而无需手动刷新页面。
本地服务器:LiveServer 可以在本地启动一个小型的 Web 服务器,为你的项目提供服务。这对于测试和调试前端代码特别有用,因为它模拟了一个真实的 web 环境,可以更准确地反映出网页在实际部署后的表现。
favicon.ico
通过在浏览器标签上展示一个独特的图标,可以让用户更轻松地在多个打开的标签页中识别出你的网站。
方式一:
在网站根目录下,放一个favicon.ico文件,浏览器会自动加载这个文件 ,此时文件名字及后辍都是固定的,不能改变
方式二:
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">