<!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>
hello world
</body>
</html>
（上图为vs code的shift+！默认样式）
<!DOCTYPE html>的作用
<!DOCTYPE>声明位于 HTML 文档中的第一行，处于<html>标签之前。告知浏览器的解析器使用标准模式渲染文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现，是html5标准网页声明。- W3school官网解释
<!DOCTYPE html>
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE>的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
(DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏 览器将使用这些规则检查页面的有效性并且采取相应的措施, DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式。)
<!DOCTYPE> 声明没有结束标签。
<!DOCTYPE> 声明对大小写不敏感。
<html lang="en">的作用
- lang的意思是language，语言的意思，en表示english，如果是中文页面，可改为
<html lang="zh">。 - W3school官网解释
<html lang="en">
HTML 的 lang 属性可用于网页或部分网页的语言，这对搜索引擎和浏览器是有帮助的，根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明。
<head>的作用
- W3school官网解释
<head>
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分: <base>, <link>, <meta>, <script>, <style>以及 <title>。
<title> 定义文档的标题，它是 <head> 部分中唯一必需的元素。
<head> 标签放在文档的开始处，紧跟在<html>后面，并处于 <body> 标签或 <frameset> 标签之前。
请记住始终为文档规定标题！
<meta charset="UTF-8">的作用
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。<meta>标签始终位于 <head> 元素内，通常用于指定字符集、页面描述、关键字、文档作者和视口设置。元数据不会显示在页面上，但机器可解析。
charset="UTF-8"
HTML5设定网页字符集的方式，推荐使用UTF-8,charset是字符集的意思，"UTF-8"是一种针对Unicode可变程度字符编码，也是一种前缀码，一直是万维网最主要的编码形式，（对所有，而不仅是Unicode范围内的编码）（并由WHATWG宣布为强制性的“适用于所有事物(for all things)”，俗称”万国码“，W3C建议UTF-8作为XML文件和HTML文件的默认编码方式，要求所有互联网协议都必须支持UTF-8编码，用它就对了。
<meta http-equiv="X-UA-Compatible" content="IE=edge">的作用
http是超文本传输协议的意思，全称 (Hypertext Transfer Protocol)是一种用于分布式、协作式和超媒体信息系统的应用层协议，什么是应用层？看下面的哔哩哔哩链接（互联网是如何运作的），http是万维网数据通信的基础。equiv翻译为中文是相等的，等值的，当量，等值的意思，http-equiv属性定义了一个编译指示指令。这个属性叫 http-equiv(alent) 是因为所有允许的值都是特定 HTTP 头部的名称。X-UA-Compatible是一种文档模式元标记，元标记有助于在较旧的 IE 浏览器中呈现网页，它允许 Web 作者选择应将页面呈现为哪个 Internet Explorer 版本， 如果指定，则 content 属性必须具有值 "IE=edge"，Compatible是兼容的意思，content="IE=edge"使用edge版本渲染当前页面，content为内容，含量，满足的意思。
<meta name="viewport" content="width=device-width, initial-scale=1.0">的作用
"viewport" 设置视口，视口是网页的用户可见区域。它因设备而异，在手机上会比在电脑屏幕上小，常用于移动端显示优化的，不设置的话，移动设备中便会出现横向滚动条（具体深层次的解释点击下面菜鸟教程的链接）width=device-width设置页面的宽度以跟随设备的屏幕宽度（这将因设备而异），让当前的宽度等于设备的宽度。
initial-scale=1.0设置浏览器首次加载页面时的初始缩放值，为一个数字，可以带小数，在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，除了上面的2个，还有4个分别是：minimum-scale允许用户的最小缩放值,maximum-scale允许用户的最大缩放值,device-height这个属性对我们并不重要，很少使用，user-scalable是否允许用户进行缩放，值为"no"或"yes"，所以也可以这样写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
(博客园的链接为菜鸟教程的原文链接，当然技术这东西，大家尽量带着辩证的思维去看文章就好了）
<title>的作用
<title>标签定义文档的标题，标题必须是纯文本的，页面标题的内容对于搜索引擎优化 (SEO) 非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。在所有 HTML 文档中是必需的，<title>标签是<head>标签中唯一要求包含的东西，只能在<head>标签中出现，定义浏览器工具栏中的标题，提供页面被添加到收藏夹时的标题，显示在搜索引擎结果中的页面标题，一个 HTML 文档中不能有一个以上的 <title> 元素，如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。
<body>的作用
<body> 元素定义文档的主体，元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)，HTML 文档中只能有一个<body> 元素。
ps：不全面，所以配合链接食用比较好，如果有错误或者不严谨的地方，请务必给予指正，十分感谢。
