haizlin/fe-interview

[html] 第143天 请说说<pre>和<code>标签的区别？

haizhilin2013 opened this issue · 3 comments

haizhilin2013 commented

第143天 请说说 <pre> 和 <code> 标签的区别？

EchoWht commented

pre里的内容会保留换行符和空格，code里的不会保留

  • 👍2
xxf1996 commented

看了下谷歌浏览器关于这两个标签的用户样式：

  • <code>：
code {
    font-family: monospace;
}
  • <pre>：
pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

不难看出code标签仅仅是给文字设置了浏览器的默认等宽字体；而pre标签默认的white-space属性值是pre，即保留连续空白符；

  • 👍3
LiunanYang commented
  • pre标签是块级元素，code标签是行内元素
  • pre的内容保留换行符和空格，code的内容不保留
    单行代码用code，多行代码用pre
  • 👍3