空白折叠 ​

在html源代码中出现的连续空白字符（空格、回车、制表符），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上

该元素通常用于在网页中显示一些代码

pre元素功能的本质：浏览器默认样式white-space: pre;

因此，pre主要用于消除空白折叠，其本身并没有什么语义

为了让浏览器知道我们pre中写的是代码，我们在外部套一层code，如下面这样：

<code>
   <pre>
   	var a = 1;
   	function b() {
   		console.log(a);
   	}
   	b();
   </pre>
</code>

<code>
   <pre>
   	var a = 1;
   	function b() {
   		console.log(a);
   	}
   	b();
   </pre>
</code>

因为code元素的语义是代码片段，所以浏览器一看到code元素，就知道这里写的是代码