使用<pre>标签为你的网页加入大段代码

最新推荐文章于 2024-08-11 15:21:57 发布
最新推荐文章于 2024-08-11 15:21:57 发布
阅读量407 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuan403082010/article/details/79308539
版权
本文介绍了如何利用HTML的<pre>标签在网页中插入并保留代码的原始格式，包括空格和换行。通过示例展示了<pre>标签的使用方法，强调其在展示计算机源代码以及其他预格式文本时的适用性。
摘要由CSDN通过智能技术生成

在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：

最低0.47元/天 解锁文章
1990Scarlett
关注
专栏目录
html pre标签增加行号,仅使用CSS在pre上创建行号
weixin_42336958的博客
06-25 1125
Harry..72为什么计数器不增加？您没有在父标记级别重置或创建计数器.如果pre将以下行添加到选择器,代码将正常工作.如果不在counter-reset父级别创建计数器(使用a ),则每个元素都会创建自己的计数器,然后递增计数器.counter-reset: line;何时创建计数器？counter-reset属性在元素上创建新计数器.计数器和反增量属性操纵现有计数器的值.如果元素上没有给定名...
html pre标签增加行号,vue使用highlight.js 添加行号
weixin_39744894的博客
06-16 809
效果图1587719278(1).jpgmain.jsimport hljs from "highlight.js";import "highlight.js/styles/atom-one-dark.css"; // 样式文件Vue.directive("highlight", function(el) {console.log("自定义指令", el);let blocks = el.quer...
<pre>标签为你的网页加入大段代码
CTI技术与呼叫中心设计
10-15 468
 在上节中介绍加入一行代码的标签为，但是在大多数情况下是需要加入大段代码的，如下图： 怎么办？不会是每一代码都加入一个标签吧，没有这么复杂，这时候就可以使用标签。 语法： 语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。 如下代码： var message="欢迎"; for(var i=1;i<=10;i
【教程】HTML用Jquery为pre标签代码块增加复制代码功能
xfxuezhang.cn
01-20 9168
最简单的实现，兼容性强
jquery.lineline.js插件自定义生成代码行号特效
06-10
一款基于jquery.lineline.js插件实现的自定义代码行号特效，jQuery自动生成代码行号效果，支持textarea，code，pre标签自动渲染。
HTML基础 学习笔记2
weixin_43684054的博客
03-23 257
1.使用<br>标签分行显示文本 如果想让学习笔记1末尾的那首诗诗显示得更美观些，如显示下面效果： 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。 将代码改为： 语法： xhtml1.0写法： <br /> html4....
HTML 入门笔记 － 初识HTML
qianduan666a的博客
07-22 810
HTML 入门笔记 － 初识HTML 基础框架 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标题标签</title> </head> <body> <h1>了不起的盖茨比</h1> <p&.
html的学习笔记
Cnote
06-08 1071
目录 html5基础介绍 制作你的第一个网页 html和css的关系 标签的用法 html5文档结构 html文件注释 html5语义化标签 段落标签 使用<span>标签自定义文字样式 使用<hx>标签为网页增加标题 使用<div>标签自定义块 使用<header>标签定义头部区域 使用<footer>标签定义底部区域 使用<section>定义区段 使用<aside&...
HTML+CSS标签 (2)
delphiwcdj的专栏
02-22 2487
紧接前文HTML+CSS初步 (1)，本文继续学习标签的用法。
html pre标记里内容自动换行
09-28
时候，你可以使用overflow:auto; (当代码超出容器边界的时候，显示滚动框)， 但这个方法也并不适用于所有主流浏览器，一些浏览器会直接截断超出的内容 。我们都知道<pre> 标签可定义预格式化的文本，一个常见应用就是用来表示计算机的源代码。被包围在 pre 元素中
使用pre标签实现html识别文本中换行符,内容超出时并支持自动换行
热门推荐
晏紫苏_cc的博客
12-25 1万+
&lt;pre&gt; 1：第一行文字第一行文字第一行文字第一行文字第一行文字第一行文字第一行文字 2：第二行文字第二行文字第二行文字第二行文字第二行文字第二行文字第二行文字 3：第三行文字第三行文字第三行文字第三行文字第三行文字第三行文字第三行文字 4：第四行文字第四行文字第四行文字第四行文字第四行文字第四行文字第四行文字 &lt;/pre&gt; pre { font-famil...
HTML学习---------1.14 在文本中插入一行或多行代码使用的标签<code> <pre>
iOS技术分享与学习博客
06-05 2495
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行时,用标签,当代码 语法: 插入一行代码: 代码语言 插入多行代码: 代码语言 标签的主要作用:预格式化的文本.被包围在pre元素中的文本通常会保留空格和换行符; 注意: 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是标签的一个常见应用就是
html代码高亮带行号,网页代码高亮并显示行号
weixin_39878698的博客
06-09 859
代码高亮 highlight.js本站代码高亮的插件来自highlight.js。在本页就有实例。使用方法非常简单，推荐以下的做法：1、在下载页面 https://highlightjs.org/download/ 勾选你想要高亮的语言，然后下载js文件，并放到自己的网站。如果只要使用几种基本的语言，可以直接引用官网给的cdn链接。2、在demo页面 https://highlightjs.org...
关于浏览器自动加上<pre>标签
dawuafang
12-28 641
问题场景： 我在 A 页面点击了一个请求，新开一个页面(B)，在后端 通过HttpServletResponse.getWriter().write(html) 的方式，将信息写入到 新开的页面 B 里面;【题外话：这样做的原因是为了解决新开页面被浏览器拦截的问题】 但是在 IE6,7,8 ，ff 都没有问题；但是在chrome 里面，竟然在我新写的内容放在了&lt;pre&gt;标签中； ...
仅通过 css 为代码添加行号 | code line number with CSS only
最新发布
生物信息学专栏(BioMooc)
08-11 449
css 添加代码行号，自增的行号
单个句子<code> 多行代码显示<pre> 键盘输入<kbd>
weixin_30319153的博客
04-20 160
1、用来显示单个句子或者单个单词：<code>……</code> 2、用来显示多行代码：<pre>……</pre> 当行数高度大于340px，自动出现y轴滚动条：<pre class="scrollable">……</pre> 3、用户通过键盘输入的内容，比如ctrl+v：<kbd>如果您需要粘贴功能，快捷键...
php标签嵌入规范,HTML标签嵌套的详细规则
weixin_35591736的博客
03-17 412
这次给大家带来HTML标签嵌套的详细规则，HTML标签嵌套的注意事项有哪些，下面就是实战案例，一起来看一下。最近在重新学习HTML的知识，算是对HTML的一个重新认识吧！别小看了这东西，一切的网页可都是以它为基础的！下面就详细归纳一下HTML标签的嵌套规则吧，希望对大家有所帮助。XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 stro...
pre 显示html代码插件,用<pre>和<code>显示源代码
weixin_29638241的博客
06-07 1188
在HTML中，这个元素表示在其中的内容，保留空格和换行，即保留原来就有的格式信息。而这个元素，就是告诉浏览器，这个元素里面的内容是源代码。由于源代码都有格式，比如换行和空格对齐等，因此在网页上显示源代码，就需要保留这些源代码的格式信息。比如下面这段python实现的冒泡排序算法在网页上的显示：def bubble_sort(array):for i in range(len(array)-1):f...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值