Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

EchoWht

EchoWht commented on Sep 6, 2019

@EchoWht

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

xxf1996

xxf1996 commented on Sep 6, 2019

@xxf1996

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

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

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

LiunanYang

LiunanYang commented on Sep 6, 2019

@LiunanYang
  • pre标签是块级元素,code标签是行内元素
  • pre的内容保留换行符和空格,code的内容不保留
    单行代码用code,多行代码用pre
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@EchoWht@xxf1996@LiunanYang

        Issue actions

          [html] 第143天 请说说<pre>和<code>标签的区别? · Issue #1157 · haizlin/fe-interview