在Web前端开发中，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页内容和样式的基石。本教程重点讲解了两个非常重要的HTML标签：`<pre>`和`<code>`，它们在展示代码片段或者保留原始格式的文本时起着至关重要的作用。了解并熟练掌握这两个标签，能帮助开发者更好地呈现页面中的编程代码和其他需要保持特定格式的文本。
`<pre>`标签，全称为"预格式化文本"标签，它告诉浏览器以一种固定的、不换行的方式来显示内容。在`<pre>`标签内部的文本会保留所有的空格和换行，这使得它非常适合用来展示编程代码。浏览器会按照在HTML源码中看到的格式来显示文本，而不是根据默认的排版规则。例如，如果你在`<pre>`标签内输入多行代码，浏览器会保持这些代码的原始缩进和换行。此外，`<pre>`标签内的文字通常会采用等宽字体（如Consolas或Courier New），这样可以确保代码中的每个字符宽度一致，方便阅读。
`<code>`标签，代表“计算机代码”，用于表示一小段计算机代码或者需要特殊格式化的文本。它可以被嵌套在其他元素中，比如段落`<p>`、列表`<li>`或者`<pre>`标签内部。相比`<pre>`，`<code>`标签不会保留文本的换行和空格，但会强调文本的特殊性质，通常会改变字体样式使其区别于普通文本。如果要在页面中展示一段代码，同时希望保持原有的缩进和换行，可以先用`<pre>`标签包裹，然后在`<pre>`内部使用`<code>`标签包裹代码。
使用示例：
```html
<pre><code>
function helloWorld() {
console.log("Hello, World!");
}
helloWorld();
</code></pre>
```
在这个例子中，`<pre>`标签确保了代码的格式不受浏览器默认样式的影响，而`<code>`标签则提示浏览器这段文本是代码，可能会以特定的等宽字体显示。
在实际应用中，`<pre>`和`<code>`标签常常配合CSS一起使用，以增强代码的可读性和美观性。例如，可以通过CSS添加背景色、高亮关键字、调整行间距和缩进等。同时，也可以利用JavaScript库如Highlight.js或Prism.js来实现更复杂的代码高亮和语法支持。
了解并熟练运用`<pre>`和`<code>`标签，不仅能够提升代码的可读性，还能让网页中的技术文档和教程更加专业。对于Web前端开发者来说，这是基础技能中的重要一环，也是提高用户体验的关键因素之一。通过观看“Web-前端html+css从入门到精通 116. pre标签与code标签.mp4”这个视频教程，你可以更深入地学习这两个标签的使用方法和实践技巧。
