html如何显示代码块_html中pre与code标签用法

 的核心作用是原样保留文本中的空白符（空格、制表符、换行），浏览器不会像处理普通段落那样折叠或合并。但它本身不表示“这是代码”，只是个格式容器。常见错误是只用 
 包裹代码却没加 ，导致屏幕阅读器无法识别内容类型，SEO 也丢失语义信息。

实际使用时建议始终嵌套：
...
。这样既保留格式，又明确语义。如果只展示纯文本（比如诗歌、ASCII 图），单独用 
 是合理的。


code 标签必须在 pre 内才能换行显示多行代码
 本身是行内元素，它只告诉浏览器“这段是代码”，但默认会把所有换行当空格处理。直接写：


function hello() {
  console.log('hi');
}
结果是一整行挤在一起。要让换行生效，必须包裹在 
 里：


function hello() {
  console.log('hi');
}
注意：CSS 中 white-space: pre 或 pre-wrap 也能模拟类似效果，但语义和可访问性不如原生 
 组合。


样式控制优先用 CSS，别依赖 pre 的默认缩进
不同浏览器对 
 的默认 margin、font-family 和缩进宽度（如 tab-width）可能不一致。容易踩的坑包括：

未重置 margin 导致上下间距过大
没设 font-family: monospace，代码字体变成衬线体，可读性差
没设 tab-size: 4，导致缩进混乱（尤其从 IDE 复制过来的代码）
没限制宽度或启用换行，长行溢出容器
推荐最小样式配置：
pre code {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}
pre {
  margin: 0;
  padding: 1em;
  background: #f5f5f5;
}

遇到中文或特殊字符乱码，检查 charset 和字体支持
如果代码块里出现方框、问号或豆腐块，大概率是字体缺失或编码声明缺失。确保 HTML 文档开头有：

同时确认所选等宽字体支持中文（比如 'Fira Code' 默认不支持中文，得 fallback 到 'Noto Sans CJK SC' 或 'Microsoft YaHei'）。简单测试方法：在  里放一句中文注释，看是否正常渲染。

复杂点在于字体加载顺序和 fallback 链——不是所有系统都预装了编程常用中文字体，生产环境建议用 @font-face 内联关键字重或明确声明 fallback。
文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《html如何显示代码块_html中pre与code标签用法》文章吧，也可关注golang学习网公众号了解相关技术文章。