标签：HTML 代码的树状结构 2. 属性：紧跟着标签写在括号里，用,隔开(不加逗号也是允许的)，class和id可以直接写在元素后面，例如#pug.pug表示的就是一个div标签 3....直接在标签后面加文本，注意文本和标签之间要有空格 b. 在标签的下一行，对每一行内容前面加管道符号（|） c. 大的纯文本块只需要在标签后面紧接一个点 . （在标签和点之间不要有空格）。...块内的纯文本内容必须缩进一层 注意：空格控制 Pug 删掉缩进，以及所有元素间的空格。...Pug 保留符合以下条件的元素内的空格： 一行文本之中所有中间的空格； 在块的缩进后的开头的空格； 一行末尾的空格； 纯文本块、或者连续的管道文本行之间的换行。 4....继承与扩展 解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码 //父文件.pug block test 代码块1 //子文件.pug extends 父文件.pug
使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷 用法: Vue 的用法没有变化: pug"> transition(name="sider")...: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析,详细可查看官方文档 vue-cli 2+ 配置: 下载包: npm i -D pug pug-html-loader...在build/webpack.base.conf.js 的 module 中添加规则: module: { rules: [ { test:/\.pug$/,...loader: "pug-html-loader" }, // 省略其他规则 ] } 好了启动或重启项目,即可开心的尝试了 vue-cli 3 配置: 由于 cli 升级到...3了,相关配置发生了很大的改变,所以要和2的更改不同: 下载包: npm i -D pug pug-html-loader pug-plain-loader 和2比多了一个 pug-plain-loader
标准文档流的一些微观现象 1. 空白折叠现象 1）标签与标签之间紧密连接，网页上两个内容也是紧密连接，中间没有空格。 2）标签与标签之间中间有一个空格，网页上两个内容之间也有一个空格的间隙。...3）标签与标签之间有一个以上的空格（n>1），网页上两个内容之间也只有一个空格。 通过第3)个现象可知，多出的空格折叠了，这就是所谓的空白折叠现象。 2....高矮不齐，底边对齐 网页上的两个不同的内容出现高低不同时，底边对齐。如图： 3. 自动换行 块级元素和行内元素 在HTML中，我们已经将标签分为了：文本级、容器级。...默认的宽度，就是文字的宽度。 CSS的分类和HTML分类很像，就p不一样：所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素；所有的容器级标签都是块级元素。...行内元素可以设置成块级元素 语法为：display:block; “block”是“块”的意思。让标签变为块级元素。
字体 要加粗的文字左右分别用两个星号包起来,不能加空格 这是加粗的文字2 将需要设置为斜体的文字两端使用1个星号或者下划线夹起来,不能加空格 这是倾斜的文字2 这是倾斜的文字2 要倾斜和加粗的文字左右分别用三个星号包起来...这是斜体加粗的文字 要加删除线的文字左右分别用两个连续的波浪号号包起来 这是加删除线的文字 大于号加空格表示块注释 在引用的文字前加大于号即可。...列表嵌套, 上一级和下一级之间的“- + * ，数字加点 ”敲三个空格即可 无序列表用 - + * 任何一种都可以, 注意：- + * 跟内容之间都要有一个空格 在文字开头添加(*, +, and -)...，注意type后的冒号与文本之间一定要有个空格。...语法要点说明 summary：折叠语法展示的摘要 details：折叠语法标签 pre：以原有格式显示元素内的文字是已经格式化的文本。 blockcode：表示程序的代码块。 code：指定代码范例。
这个 div 包含两个标签 p。外部 div 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。...margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。...我们在 p 的上方和下方看不到任何灰色。 ? 防止 margin 折叠 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。...两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 产生折叠的必备条件：margin必须是邻接的!
24:内测版v0.02 实现离线头像和在线头像区分显示 自动计算在线头像人数并显示在分组栏 2022-06-23:内测版v0.01 实现侧栏友链通讯录 点击查看参考教程 参考方向 教程原贴 参考了折叠框的语法...HTML 标签 参考了PC版腾讯QQ的通讯录样式 腾讯QQ界面 店长的碎碎念 感觉好久好久没有写友链魔改和侧栏魔改的教程了，之前都是在捣鼓各种各样的API插件。...然后我这次写的时候发现，我本地的widget文件夹里居然就剩下SAO相关的侧栏卡片pug文件了。看来我插件化的还是很勤快的嘛。...不过SAO UI PLAN相关的内容还不打算做插件化，一方面我当初写的代码还比较差，一方面最近看到yamapink用vue封装的SAO UI，顿时萌生了我也要用vue来封装我所有的魔改教程的兴趣。...，可以在[Blogroot]\source\_data\link.yml中给他添加一个离线的标签,例如： name: 小冰博客 #152 + offline: true link: https:
，选择User、Workspace 配置tab标签后，点击图示按钮，即可打开settings.json配置文件 ?...prettier.useTabs": false, // 设置是否使用tab键缩进行，默认为false，即不使用 "prettier.bracketSpacing": true, // 在对象，括号与文字之间加空格...": "prettier", // 设置vetur默认使用 prettier格式化代码 "vetur.format.options.tabSize": 2, // 设置tab键占用的空格数，该配置将被所有格式化器继承...": false } 为啥说是特殊呢，因为这两个配置项，可以被所有格式化器继承，但是也有例外，如下： 当存在本地配置(比如.prettierrc)时，Vetur会优先使用本地配置。...、混合标签和空格、引用样式等)，包括JavaScript，Flow，TypeScript，CSS，SCSS，Less，JSX，GraphQL，JSON，Markdown。
right">这是一个右对齐 这是一个左对齐 这是一个左对齐 图片 换行 markdown换行有两种方式: 段内换行是两个空格加上一个回车...只有 2 点限制：(1)Html 的块级元素必须用空行和 Markdown 的内容分隔开。(2)Html 标签前后没有空格。...这是一个文档 折叠列表 利用markdown的网页插入功能，可以实现在markdown中拥有折叠列表: 折叠文本折叠代码块 主要使用的是`html5` 中的`details`标签 对上述进行灵活变通，...，后边跟用{}、[]包裹着节点处的内容，然后‘—’表示节点之间的连接线段，长度用字符串长度代表，连接方式也在字符串中有所体现。...最后||包裹的内容表示在连接线段上的内容，记得与节点声明隔一个空格。 图片 表格文件 Markdown 的表格用‘|’表示列，用三个或者多个连字符并排表示列标题，常见的表格形式如下。
这个 div 包含两个标签 p。外部 div 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。...margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。...这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。...两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 产生折叠的必备条件：margin必须是邻接的!...如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。
支持 - coco玛奇朵崩溃日志现在显示 Windows 的版本。 文本输入 - 长空格和短空格字符现在使用 （Alt+Ctrl+空格） 和 （Alt+Shift+空格）输入。...搜索结果将显示具有匹配名称的文件夹。 将完整路径显示为已筛选项的工具提示。 查找文件 - 右键单击文件以在系统文件浏览器中突出显示该文件。 标签 - 您可以右键单击以删除标签。...浏览器 - 添加到选项卡“冻结”的“冻结”选项会导致浏览器停止保存状态，无论文件夹是否折叠。 “折叠结构”按钮充当冻结状态的还原。 钢琴卷 显示 - 在音符转调期间自动滚动钢琴卷。...新运算符 - fmod - 两个操作数（Floating & Modulo）、两个操作数 （SHL & SHR） 和按位运算符（Shift Left & Shift Right）。...粗拍 - coco玛奇朵添加了一个新的预设，杂耍科学。 声音字体播放器 - 添加了程序模式选项以确定如何触发补丁。 展示台 - 为 Dubswitcher 添加了新的后期处理效果。
CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下： ?...一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。...我们要的是单行显示，所以使用 span 标签就能实现我们要的效果，但是还要 不换行，这时就要利用 CSS 的 white-space 属性了，它会告诉浏览器遇到 空格 该怎么处理（这里的空格不是单纯意义上的空格...它的默认值是 nomal ，就是遇到空格字符就会折叠，而另外一个属性 nowrap 恰好与它相反，意思是不折叠一直显示，刚好满足我们的需求。...二、菜单可以左右滑动 CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。
接下来说明如何使用，我将创建网站的基本布局，并从服务器渲染数据。首先，从服务器渲染数据。...Pug Pug - 以前名为 Jade，也是一个受欢迎的 Node.js 视图引擎项目。...，Pug 的代码是如此清晰、简洁和易于理解。...Pug 的工作方式与 Python 语言大致相同，即使用缩进或空格。 Hbs (Handlebars.js) ? Hbs(Handlebars) 要使用此模板，需要把引擎视图设置为 hbs。...使你的 JavaScript 代码简单易读 Node.js多线程完全指南 deno如何偿还Node.js的十大技术债 实战！
PUG SPAR（场景、位置、属性、关系） 数据集用于评估视觉语言模型，展示了如何使用合成数据来解决当前基准测试的局限性。...下图说明了Meta如何使用虚幻引擎和示例图像来生成PUG数据集。 合成图像数据集为设计和评估深度神经网络提供了非常多的优势。...合成数据集能根据需要渲染尽可能多的数据样本，还可以精确控制每个场景并产生细粒度的标注数据标签，精确控制训练和测试之间的分布变化，以隔离感兴趣的变量以进行合理的实验。...如何创建自己PUG数据集 而且，Meta还详细介绍了如何利用虚幻引擎来建立自己独有的PUG数据集。...该表列出了可以通过虚幻环境加载的所有资源。如果您想添加新字符，只需在表中创建一个新条目即可。
Esc - 退出插入模式 编辑文本 r - 替换当前字符 R - 在 ESC 按下之前，替换多个字符 J - 将下一行合并到当前行, 并在两部分文本之间插入一个空格 gJ - 将下一行合并到当前行,...两部分文本之间不含空格 gwip - 重新调整段落 g~ - 大小写转换操作修饰符 gu - 小写操作修饰符 gU - 大写操作修饰符 cc - 将光标所在的行删除, 然后进入插入模式 c$ or C...dd - 剪切当前行 2dd - 剪切 2 行 dw - 剪切当前单词 diw - 删除光标处的单词 daw - 删除光标处的单词及其前后的空格 :3,5d - 删除 3 到 5 行 :....:tabo[nly] - 关闭其他标签 :tabdo command - 在所有标签中执行命令 (例如 :tabdo q 关闭所有标签) 寄存器 :reg[isters] - 显示寄存器内容 "xy...删除光标位置的折叠 za - 展开 & 关闭光标位置的折叠 zo - 展开光标位置的折叠 zc - 关闭光标位置的折叠 zr - 展开同级的所有折叠 zm - 关闭同级的所有折叠 zi - 开启 & 关闭折叠功能
gJ 同 J ，不过合并后不留空格。...:tabc[lose] -- 关闭当前的标签页。 :tabo[nly] -- 关闭其它的标签页。 :tabs -- 列出所有的标签页和它们包含的窗口。...在vimrc中添加set fileencoding=ucs-bom,utf-8,cp936，vim会根据要打开的文件选择合适的编码。 注意：编码之间不要留空格。 cp936对应于gbk编码。...折叠 zf -- 创建折叠的命令，可以在一个可视区域上使用该命令； zd -- 删除当前行的折叠； zD -- 删除当前行的折叠； zfap -- 折叠光标所在的段； zo -- 打开折叠的文本...； zc -- 收起折叠； za -- 打开/关闭当前折叠； zr -- 打开嵌套的折行； zm -- 收起嵌套的折行； zR (zO) -- 打开所有折行； zM (zC) -- 收起所有折行
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。...HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。 顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。 p标签是一个文本级标签。...a href=""> 2 3 段落段落段落段落段落段落 4 5 列表标签 无序标签 无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的...，但是语义变了，div中的所有元素是一个小区域。...1 nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。 所以： 1哈 哈 空出了4个字的格，可以防止空白折叠现象。
(包括空白字符) diw: 删除整个单词文本，但是保留空格字符不删除 d2w: 删除从当前光标开始处的2个单词 d$: 删除从光标到一行末尾的整个文本 d0: 删除从光标到一行开头的所有单词 dl: 删除当前光标处的字符...放弃缓冲区的修改，恢复到文件打开时的状态 :edit file 编辑另一个文件 :wnext 保存当前缓冲区的修改并跳转到缓冲区列表中的下一个文件 :set autowrite：自动保存 标签页与折叠栏...标签页的新建：tabedit file/tab split 标签页的切换: tabn/tabp 按键：gt/gT 标签页的关闭: tabclose 关闭当前的标签页，:tabonly 创建一个折叠:...zf200G: 将光标和200行之间的代码折叠起来 折叠的打开与关闭 za: 打开和关闭折叠 zr/zm: 一层一层地打开和关闭折叠 zR/zM: 分别打开和关闭所有的折叠 折叠键的光标移动 zj...: 跳转到下一个折叠处 zk: 跳转到上一个折叠处 删除折叠 zd: 删除光标下的折叠 zD: 删除光标下的折叠以及嵌套的折叠 zE: 删除所有的折叠标签 创建的折叠当退出vim之后就失效了。
添加标签云 使用命令进行安装插件 cnpm install hexo-tag-cloud --save 打开Butterfly/layout/includes/widget/card_tags.pug文件...，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔 if site.tags.length .card-widget.card-tags .card-content .item-headline...这里会看到你刚刚添加的所有图标 接下来就是为你的图标创建一个项目，名称随意。创建完成后你将看到如下页面 3....也称多色图标，由于不是通过类名，而是使用了 svg 标签，因此需要通过脚本的方式动态插入。...### 标题美化处的修改 butterfly 主题的标题标签前有一个图标，如何为其更改为阿里 iconfont 呢？
我们需要想办法把这个属性复制到任何从基组件扩展的组件上。 我们需要想办法将不同输入表单的 HTML 结构插入到 template 标签之中。...，我们如何让每个子组件都继承基组件的 props 属性呢？...我们要么完全继承自基组件, 要么重新定义template选项并覆盖它，那我们如何合并它呢？ 我的解决方式是使用 Pug 预处理器....h4 block input 注意以下几点: 我们添加 lang="pug"到 template 标签是为了让 vue-loader 使用 pug 语法来处理我们的模板..." :placeholder="placeholder"> 总结 运用上述策略我们可以构建出另外拥有私有属性和响应 HTML 结构的两个子组件 SurveyInputSelect 和 SurveyInputRadio
下边的示例展示了这两个方法，以及更通用的 、所有 Collection 类型都包含的addAll() 方法： // collections/AddingGroups.java // Adding groups...使用组合，可以选择要公开的方法以及如何命名它们。...最小的值具有最高的优先级（如果是 String ，空格也可以算作值，并且比字母的优先级高）。...标准 C++ 类库中的的集合并没有共同的基类——集合之间的所有共性都是通过迭代器实现的。...Rat 1:Manx 2:Cymric 3:Mutt 4:Pug 5:Cymric 6:Pug 7:Manx */ 两个版本的 display() 方法都可以使用 Map 或 Collection 的子类型来工作
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
