前言

最近开始写编辑区的渲染，写到代码块的时候，发现单行和多行生成的html是不同的。

单行：

<code></code>
复制代码

多行：

<pre><code></code>
</pre>
复制代码

区别

MDN的文档上有一段话：

To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.

说的是如果你想要显示多行代码的话，用<pre>包裹<code>，<code>元素它只代表一行代码或一个代码短语。

另外<pre>是一个块级元素，而<code>是一个行内元素，这也和上面的描述相符。

如果你想在一行文字中嵌入一行代码或一个短语那么就用<code>，如果想展示多行代码就用<pre>。

转载于:https://juejin.im/post/5cb1d9175188251ad87b174c

pre和code的区别相关推荐

pre textarea code标签区别
这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇. <pre> <t ...
white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的“首行缩进“问题
white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的"首行缩进"问题 white-space相关属性以 ...
Visual Studio和VS Code的区别
1.Visual Studio简介: 是一个集成开发环境--IDE,安装完成后就能直接用,编译工具,调试工具,各个语言的开发工具,都是已经配置好的,开箱即用.适用于macOS/Windows 2.VS ...
visual studio 和visual studio code 的区别
区别有三: 区别一:含义不一样. Visual Studio(简称VS)是美国微软公司的开发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码 ...
iOS 自带地图定位失败原因 Code=0和Code=1区别
2019独角兽企业重金招聘Python工程师标准>>> 1:没有选择位置 Error Domain=kCLErrorDomain Code=0 "The operation ...
Visual Studio 与Visual Studio Code 的区别
Visual Studio是一个集成的开发环境,相对来说比较完整,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等. Visual Studio C ...
Visual Studio和Visual Studio Code的区别
一.含义不一样 (1)Visual Studio(简称VS)是美国微软公司的开发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集 ...
Visual Studio 和 Visual Studio Code的区别?
Visual Studio 是一个全能的,方便的开发环境.即 IDE.像代码自动完成,调试器,数据库集成,服务器设置和配置等. Visual Studio Code( VSCode )只是一个跨平台的 ...
html之code标签和pre标签
文章目录一.两个标签区别 (1)含义 (2)显示区别,上面是pre,下面是code 二.使用white-space 进行样式控制一.两个标签区别字符如下: const str ="[{ ...
零基础学习HTML(8)——pre标签、code标签
文章目录官方资料学习正文注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc. ...

pre和code的区别

前言

区别

pre和code的区别相关推荐

最新文章

热门文章