持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

html代码块介绍

在VSCode的html文件中，输入英文的感叹号，VSCode会提供代码提示如下:

其中，！！！三个感叹号代码补全仅为图中第一行代码，即

<!DOCTYPE html>

如果是一个感叹号的代码补全，即为图中全部代码，即

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

代码功能介绍

<!DOCTYPE html>

这是文档类型的说明，告诉浏览器这个html文件的html版本，此处是html5版本。

<html lang="en"></html>

这是网站类型的说明，lang属性en代表网站类型是英文，zh-CN则是中文。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

head标签作用于网页的头部，它的内容不会在正文中显示出来。其中meta标签用于对网站的解释：

1.<meta charset="UTF-8">
charset属性标识网页用的字符编码，默认UTF-8

2.<meta http-equiv="X-UA-compatible" content="IE=edge">
解决IE兼容性问题

3.<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
content属性中，width指宽度，意思是指定宽度=设备宽度;
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。

<title></title>

title标签用于指定网站标题标签内的内容就是浏览器显示的网站标题。

<body></body>

body标签用于放置网页的正文，基础标签的内容我们留在下一篇讲解.

VS Code 快速生成html代码块详解

html代码块介绍

代码功能介绍

感谢支持!