基本骨架
<!DOCTYPE html> <!-- 声明文档类型为 HTML -->
<html lang="en"> <!-- 指定文档语言为英语 -->
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 -->
<title>Document</title> <!-- 设置文档标题 -->
</head>
<body>
</body>
</html>
代码
<meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
在这段代码中：
- 标签用于提供关于网页的元信息。
- charset=“UTF-8” 指定了字符编码为 UTF-8。
代码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 -->
这段 HTML 代码是用来设置网页在移动设备上的视口（viewport）属性的。视口是指浏览器用来显示网页内容的区域。在移动设备上，由于屏幕尺寸和分辨率的差异，如果不做适配处理，网页可能会在移动设备上显示不正常，内容被缩小或者放大，导致用户体验不佳。
这里的 标签用于提供关于网页的元信息，其中 name 属性用于指定元信息的名称，content 属性用于指定元信息的值。
在这段代码中：
- name=“viewport” 指定了这个 标签的名称是 viewport。
- content=“width=device-width, initial-scale=1.0” 指定了视口的属性。
- 其中 width=device-width 表示网页的宽度应该与设备的宽度相等，
- initial-scale=1.0 表示初始的缩放比例为 1.0，即不进行缩放。
这样设置后，网页会根据设备的宽度进行自适应，确保在不同设备上都能够以合适的尺寸和比例呈现，提升用户的浏览体验。