pre标签用于预格式化文本，保留空格换行，适合多行代码；code标签表示内联代码，具有语义化作用；二者结合使用可提升可读性、可访问性和SEO效果。
在HTML中，pre 和 code 标签用于语义化地展示代码内容，正确使用它们不仅能提升可读性，还能增强网页的可访问性和SEO效果。
理解 pre 与 code 的语义角色
pre 标签表示“预格式化文本”，浏览器会保留其中的空格和换行，适合展示需要保持原始格式的内容，比如代码片段、ASCII艺术等。code 标签则表示一段内联的计算机代码，具有语义上的“这是代码”的含义。
两者常结合使用：用 pre 包裹多行代码以保留格式，内部用 code 明确其为代码内容。
正确的语义化结构写法
展示多行代码时，推荐结构如下：
立即学习“前端免费学习笔记（深入）”；
Hello World
说明：
启科网络PHP商城系统
下载
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
- pre 确保换行和缩进不被浏览器忽略
- code 告诉浏览器和辅助技术“这是一段代码”
- 通过 class 添加语言类型（如 language-html）便于后续语法高亮处理
内联代码使用 code 即可
如果只是在段落中提到某个函数名或标签，使用 code 就足够了：
请调用 initApp() 函数来启动程序。
这样既保持了语义清晰，又无需预格式化。
配合其他元素提升可访问性
对于复杂代码示例，可加入 figure 和 figcaption 提供标题说明：
function greet(name) {
return "Hello, " + name;
}
这种结构让屏幕阅读器能更好理解代码块的上下文。
基本上就这些。合理组合 pre、code、figure 等标签，能让代码展示更专业、更易维护。
