直接拿出网页代码来，然后一点点解释：

<!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>
    <!-- 注释内容 -->
    <a href="http://www.tangjiayan.com"> 糖加盐个人博客 </a>
</body>
</html>

1. 注释

<!-- 注释内容 -->

VScode快捷键：Ctrl + /

2. 元素（elements）

<a href="http://www.tangjiayan.com"> 糖加盐个人博客 </a>

①元素 = 起始标记 + (元素属性) + 元素内容 + (结束标记) 。
元素属性、结束标记不是一定有的，所以加上了括号。
在这里，
起始标记：<a>
元素属性：href=”http://www.tangjiayan.com”
元素内容：糖加盐个人博客，
结束标记：</a>
不同的元素有不同的功能，具体有哪些元素，可以在MDN的这个网页上查看。
有些元素比较特殊，如<meta>，可以看到它没有像</meta>这样的结束标记，我们称这样的元素为空元素，也就是说它没有内容。
内容是指开始标记和结束标记之间的东西，连结束标记都没有，当然也就没有内容。

②属性 = 属性名 + 属性值 。
比如在这里href就是属性名，http://www.tangjiayan.com就是属性值。
属性可以分为局部属性和全局属性。局部属性指某些元素特有的属性，全局属性指所有元素都具有这个属性。

3. 元素的嵌套

①元素不可以相互嵌套。
正：

<div>
  <p>
  </p>
</div>

误：

<div>
  <p>
</div>
  </p>

②父元素、子元素、祖先元素、后代元素、兄弟元素
看这些名词的字面就能知道其意思了，就不解释了。

4. 文档声明

<!DOCTYPE html>

这个东西就是文档声明，也就是HTML代码的第一行。作用是声明当前代码使用的标准，目前是HTML5。

5. <html>、<head>、<body>、<meta>、<title>

①<html>
表示一个HTML文档的根元素（顶级元素），所有其他元素必须是此元素的后代。在HTML语言中可以省略，但最好还是写上。

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

在这里，属性lang表示language，表示该HTML文档是由什么语言书写的。比如这里lang的值是en，表示English，对于中文浏览器，如果安装了一些翻译插件，浏览器在加载这个这个页面时就会触发翻译行为。

②<head>、<body>
这两个元素必须作为<html>的子元素书写。
<head>：这个元素里的内容不会显示在网页页面上，它包含一些配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<body>：文档主体元素，页面上所有要显示的内容都在这里。一般我们写代码就从这里开始写。

③<meta>
这是一个空元素，用来表示元数据，可以理解为一些附加信息，这些信息不会显示在网页上，而是起到一些其他作用。
比如，在VScode的默认HTML模板中，的内容如下：

<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>

其中，
<meta charset=”UTF-8”>是一个字符集声明，声明改文档使用的字符编码是UTF-8。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>用来专门告诉IE浏览器建议使用edge内核。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>用来适配移动端。

④<title>
表示网页标题，显示在浏览器的选项卡上面。

<title> 就是这里 </title>

6. web语义化

语义化可以让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
比如你使用a元素给文本加上超链接时，网页中的文本会显示出下划线。这时我们就要严格根据语义化来理解这个事情：不是因为我想要给文本加上下划线才使用a元素，而是我想让这段文字表示超链接才使用a元素。“超链接”是语义化的问题，“下划线”是CSS的问题。也就是说，不是超链接的元素我可以通过CSS加上下划线样式，是超链接的元素我也可以通过CSS删掉下划线样式。
具体应用如：

  • 搜索引擎优化（Search Engine Optimization，SEO）。
  • 浏览器的阅读模式、语音模式等。