Emmet 使用 lorem 快捷生成随机文本填充html页面

原创 已于 2023-01-02 00:47:37 修改 · 1.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #vscode #前端

于 2023-01-02 00:44:45 首次发布
文章介绍了如何在编程时利用vscode编辑器中的Emmet插件，通过输入lorem相关的指令，快速生成Loremipsum文本，用于填充页面并测试显示效果。支持自定义词数和行数，以及HTML节点内容的生成。

快速使用

在编程中，我们也可以使用Lorem ipsum来填充页面，测试显示效果。主要是通过编辑器中自带的 Emmet 插件，识别以 lorem 开头的短语，生成指定格式的内容。以下介绍均以 vscode 为测试载体。

注意：lorem 短语需要手动输入，复制粘贴不会触发编辑器的 Emmet 识别；在输入后，编辑器出现 Emmet 快捷提示，按回车即可

新建默认数量词语的句子

lorem + Tab/Enter，新建一共30个词语的句子Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ipsam, pariatur illum odit beatae numquam ab fuga voluptas sequi maxime praesentium, atque amet doloribus nostrum, eveniet aliquam perferendis perspiciatis repellat?

新建指定数量词语的句子

loremN，其中 N 是一个数字，代表有 N 个词语(注意不是字符串长度为 N )// lorem10

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, consectetur.

填充指定行数的内容

lorem*N，其中 N 是一个数字，代表有 N 行// lorem*3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nihil sunt voluptatum. Recusandae nihil si

最低0.47元/天 解锁文章
【Vscode】快速生成用于排版效果测试的随机文本
XavierJ的博客
03-20 5449
引言 Vscode 中编写 HTML 时，输入 lorem 可自动生成“乱数假文”，即乱序的并没有实际含义的文本，但可提高排版测试的效率。 但 Vscode 自带的 lorem 仅支持 HTML 文件，不支持其它格式的文件，比如 Markdown 等。 因此，这里推荐 Vscode 中两款用于生成“乱数假文”的插件，一个用于英文，另一个是中文的。 插件 Lorem ipsum 拓展中心搜索该插件名称并安装。Ctrl+Shift+P 调出控制台。 Lorem Ipsum: Insert a line（插.
前端编码中快速填充内容--乱数假文
九天翔龙的技术博客
12-06 1198
在代码里使用乱数假文很简单，在VScode、webstorm、HBuilder之类的现代编辑器中，直接输入 lorem 或者 lorem 按下 tab 或者 enter，即可快速生成文本。这种方式虽然方便，但是文字效果看上去还是太单调了，而且如果对文字字数有要求，还要考虑文字的个数。不过，有了 VSCode 之类的编辑器，就方便多了，可以快速填充文本，即使用“乱数假文”。如，要在一个div里填充文本，我们可能会这样写。写前端页面的时候，如果要快速插入图片，可以使用。如果要输入中文的乱数假文呢？
9 个实用的 VSCode 扩展插件，让你的开发工作更轻松
热门推荐
前端达人
02-19 1万+
这些扩展将帮助您提高工作效率、改进工作流程VSCode 是几乎所有编程语言中最受欢迎的 IDE 之一。它简单、强大，有很多很酷的特性，而且是微软的产品。所以对于任何开发人员来说，它都是一个很棒的工具。通过安装其市场上可用的各种免费扩展，可以自定义 VS Code 并使其更适合您的工作流程。这些扩展将添加更多自定义功能，这肯定会帮助您进行编码，比如更快地开始编写代码！它会变得更漂亮，让人更加愉悦，因...
使用emmet如何生成lipsum的随机内容
weixin_34014555的博客
10-03 250
emmet不会解析(即扩展)大括号中的内容, 它只是把大括号中的内容当成纯粹的字符串, 当成 literal的文本, 不会当成lipsum的缩写, 不会进行扩展. 要扩展, 就必须把lorem, lipsum写在大括号的外面, 也就是说, lipsum和lorem 是关键字, 相当于 p, div 等标签一样, 不是 实际的内容, 所以不能放在 大括号中 同时 又要表示是前面标签元素的 内容, ...
Emmet语法
david2000999的博客
11-04 348
Emmet语法1.1 快速生成HTML结构语法1.2 快速生成CSS样式语法1.3 快速格式化代码 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法. 快速生成HTML结构语法 快速生成CSS样式语法 1.1 快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div> 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3
HTML中使用Lorem语法快速生成随机文本
本项目所涉及的Lorem生成规则正是Emmet标准功能的一部分，但通过封装成独立项目代码的形式，可能进一步扩展了原有能力，例如支持自定义词汇库、多语言占位文本、语义化文本生成策略，或集成到特定开发框架中作为模块...
JS-Lorem：通过HTML类自动填充占位符文本的轻量级解决方案
JS-Lorem 是一个专为前端开发人员设计的轻量级 JavaScript 工具，其核心目标是通过极简的方式实现占位符文本（Lorem Ipsum）的自动化填充，从而显著提升网页开发过程中的效率与流畅性。该工具的核心机制在于：开发者...
【VS Code】使用Emmet插件编写HTML/CSS代码的快捷技巧
memcpy0的博客
07-15 1531
文章目录1. 快速生成HTML基本框架2. 快速输入成对标签3. 快速输入多个重复成对标签4. 快速输入父子关系标签5. 快速输入兄弟关系标签6. 快速输入标签及有序自增的类名7. 快速输入多标签内默认文字8. 小结 1. 快速生成HTML基本框架 在VS Code中新建一个 .html 空白文件，然后输入 ! ，弹出提示： 此时按下tab键或enter键，即可生成HTML的基本框架： 2. 快速输入成对标签 输入标签名： 然后按下tab键或enter键即可生成成对标签： 3. 快速输入多个重复成对
html随机测试文本
最新发布
07-24
以下是一个简单的 HTML 示例，展示如何使用 `Lorem Ipsum` 填充页面内容： ```html <!DOCTYPE html> <html lang="en"> <title>Lorem Ipsum 示例 <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...
html lorem自动填充,使用 lorem 快捷生成随机文本填充页面
weixin_42116791的博客
06-03 1025
开发网页时，需要临时添加一些测试文字来添充页面内容，这时就可以考虑使用哑元文本 “Lorem ipsum”背景介绍Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中，在电脑排版盛行之后，这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以...
Lorem-crx插件
04-06
语言:English 用lorem ipsum文本替换页面上的所有文本。 右键单击任何页面，在上下文菜单中，您将看到“转换页面到Lorem”菜单项。 单击此处后，扩展将将页面上的所有文本转换为Lorem IPSUM文本。 注意：刷新页面后，没有更改是永久性的，并且会在页面刷新后消失。
emmet 常用字符串
_Fozzz的博客
09-08 245
在HBuilder编辑器下，以集成emment 写好字符串后按"tab"键，自动生成!:h5文档字符串:div.myClass_$*3>div#myId_$*5 结果: ![这里写图片描述](http://img.blog.youkuaiyun.com/20160908223149131) 解释: .:生成class属性 #:生成id属性 $:从1开始自增 *:重复次数 >:子节点
java使用apache-commons-lang3生成随机字符串（可自定义规则）
longge93的博客
09-14 363
在日常开发中，我们经常会遇到生成随机字符串的需求。可能是大小写字母+数字，也可能是其他各种字符。作为一个常用功能，我们完全没必要自己实现，有很多优质的类库已经做的很完善了。本文介绍的就是apache-commons-lang3类库的随机字符串方法。 通过Maven pom安装 <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</a
html lorem自动填充,Fixie.js 自动填充内容的插件
weixin_36354355的博客
06-03 496
Fixie.js是一个自动填充HTML文档内容的开源工具官方网址地址：http://fixiejs.com/Fixie.js 下载地址 fixie_jb51.rar为什么使用Fixie？当我们设计网站的时候，由于无法确定最终填充的内容，经常需要添加一写lorem ipsum(关于Lorem ipsum)到页面里面来预览一下页面的展现效果。问题来了，添加过多的无聊的内容，使得我们的HTML文档变得臃...
1、Emmet语法
qq_62865634的博客
08-20 269
本文仅仅简单介绍了快速生成HTML结构语法、css样式语法。
在HTML中快速生成随机文本（lorem的4种用法）
weixin_45610943的博客
05-16 1236
效果：指定生成多行文本，每行几个单词。用法3： .>lorem*n。效果：自动生成30个单词。用法1：lorem回车。效果：指定生成单词个数。用法2：loremn。
Emmet语法（快速生成HTML结构语法、快速生成CSS样式语法）
IT之一小佬的博客
01-11 1122
1. 快速生成HTML结构语法 生成标签直接输入标签名按tab键即可 比如div然后tab键，就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 比如div*3就可以快速生成3个div3． 如果有父子级关系的标签，可以用> 比如ul > li就可以了 如果有兄弟关系的标签，可以用＋ 比如div+p 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了 如果生成的div类名是有顺序的...
PHP随机插入字符串到HTML中，跳过HTML标签
Rock的专栏
05-12 2199
function randomInsert($txt,$insert){//txt 内容；insert要插入的关键字，可以是链接，数组     //将内容拆分成数组，每个字符都是一个value，英文，中文，符号都算一个，只能在utf-8下中文才能拆分     preg_match_all("/[\x01-\x7f]|[\xe0-\xef][\x80-\xbf]{2}/", $txt,
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值