pug转html怎么加html表格css样式式

来源：蜘蛛抓取(WebSpider) 时间：2018-09-19 08:18 标签： html表格css样式

跟完了Scott老师几年之前关于以及的视频，害怕自己忘性太大，写一个总结记录一下关于pug的使用方法。

当时老师用的还是jade，现在已经改名为Pug了，内容基本没有变化，在node中引用模板引擎的时候要记得使用app.set('view engine', 'pug');然后把所有视图文件的后缀改成.pug。

打开项目所在文件夹，shift+右键打开命令行，输入npm install pug -g就可以在全局安装pug。

但此时如果想在命令行中使用pug命令还是会报错，提示pug不是内部或者外部命令。

接下来，为了便于看到pug生成的HTML文档，可以使用pug -P -w xxx.pug,会自动在xxx.pug文件夹下生成一个xxx.html的文件，-P参数可以让html文档变得有可读性，-w可以实时监控.pug文件的修改，如果有变化就自动更新相应的html文件。常用的还有-o用来指定输出的html的目录。

元素和标签：比如<div>...</div>是一个标签，用来标记div这个块状元素，元素是由开始和结束标签，以及其中包含的内容组成的，许多这样的元素构成了一个html页面。

pug中不管标签是不是自闭和的，只用写元素名就可以，不用关闭，不用写尖括号。但是一定要注意元素的缩进，pug里面用元素的缩进来表示嵌套结构。

属性的语法和CSS是一样的，紧跟着标签写在括号里，用,隔开，class和id比较特殊可以直接拿出来写在元素后面，例如div#pug.pug对于div来说直接写#pug.pug表示的就是一个div标签

二、在标签的下一行，对每一行内容前面加 |

三、在标签的后面加 . 表示之后的的内容全属于这个标签，可以用来添加文字、脚本和样式，但是.和标签之前一定不可以有空格

注：也可以在pug中直接使用尖括号的标签


一、单行注释 //：会输入到html文档中去

二、非缓冲注释 //-：在html文档中是完全隐藏的
//- 我是非缓冲注释

三、块注释 //-：注释掉上层元素，就会默认把父元素包含的内容都注释掉 


 

 四、条件注释：为了兼容IE 比较低的版本，需要加上下面的条件注释，但要注意如果用了条件注释，html标签在节结尾处是需要闭合的。
 


 

 
 


 

 
 

 在pug里面定义变量特别简单，比如- var text = pug
[内容变量]
在其他地方调用这个变量的时候有两种方法，可以直接用等号赋值div=text,也可以使用#{ 变量名}的方法，比如div #{text}，如果#{}内部有函数的话，会先执行{}的操作，再将结果输出，比如div #{text.toUpperCase()}
[属性赋值]
只能使用“=变量名”的方式进行赋值

 
 

 正常开发的时候，我们一般是在后台拿到数据，然后传递到这个模板，有两种方式
 
 

 

 

 注：这里有一点，当外部传入的参数和.pug文件内部定义的参数同名时，会优先选择内部参数。
 
 
 

 假如变量里面带有一些特殊符号，在赋值的时候就会被转义掉，例如定义一个变量：
 
 
 

 直接赋值输出的话，会在页面上打印出来变量内的内容，如果不想做任何转义，可以使用，但这样是非常不安全的
 
 

 如果我们想在变量里输出#{，那我们可以在#{之前加一个 \，比如div \#{cont}
！！但是这里有一个问题！！div \#{cont}以及div \！{cont}的输出内容是一样的？
 
 

 

 

 

 for循环：for前面必须加 -标识，如下就可以取出变量的属性值
 
 

 each循环：-标识可以省略，也可以以此定义两个参数，取出变量的key value值，这里面比较神奇的是，each value,key in test中的value和key不能换位置，否则会出现就去不到正确对应的值
 
 

 注意 each之后的标签要注意缩进，否则会报错
 
 

 
 

 
 
 

 

 if else判断：
if-else的语法和JS原生代码基本一致，if和else前面的 -可以省略，判断主体上的括号也可以省略，写起来非常的方便，也支持unless，不过我觉得那个用起来没有if-else顺手
 
 

 
 

 
 
 

 

 mixin定义和调用：
 
 

 

 
 


 

 


 

 
 


 

 


 

 
 


 

 mixin内联代码块：
下面block中代码块就指+test下面的内容，如果有内容，就将代码块直接放在block的位置，如果没有代码块就执行…所表示的代码
 


 

 
 


 

 

 mixin传递不确定数量的参数：在声明mixin的时候加入参数数量不确定，可以用…items来表示，调用的时候正常带入参数就可以了



 

 

 include包含：解决的是文件和文件之间，文件和区块之间代码复用的问题，可以引入.pug和原生的.html文件。当引入的是.html文件时，一定要记得带上后缀。

 

 
 
 

 block继承：解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码
 
 


 

 
 
 

 在上面图片里面，定义了三个block：scripts、content和footer。
对于footer，没有在index.pug中进行引用，但是生成的index.html中却能看到，也就是说如果子文件没有对父文件的block进行修改，那就是默认引用
对于content，index.html中输出的是在index.pug中修改的内容，所有说如果子文件引用了父文件的block，那么就会用自己的覆盖掉继承过来的内容
对于scripts，如果你只想在父文件中内容的基础上添加一点内容，那就可以考虑使用prepend和append，分别是向block的顶部和底部插入内容，使用它们时可以省略关键字block。

摘要: 像这种弧形，用纯html和css很难写，但是用svg就简单多了。 可以用作图工具画出一个弧形，然后导成svg格式。在页面中，下面的白块就是div+svg构成 （这里用的是pug模板） 两种弧度的切换，主要是在hover的时候修改path值即可（注意两个svg大小一样） 如果不写过渡css，这两种弧形

摘要: 一、box-sizing 属性 规定两个并排的带边框的框 二、align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 值： flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：弹性盒子元素的侧轴（纵

摘要: HTML DOM基础知识 一、什么是DOM？ 1、HTML DOM 定义了访问和操作HTML文档的标准方法。 2、HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 3、通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项

摘要: 一、浮动布局的五个基本特征： 1、任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明。这样就可以为浮动元素定义width和height属性，即使是内联显示元素也可以。 当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。而块状元

摘要: HTML标签的改变：新增标签、重新定义的标签等

摘要: CSS3总结，讲解了css3动画、多列等效果

摘要: css知识点补充，包括css边框、浮动等

摘要: CSS基础，包括CSS背景、文本、字体、轮廓等知识点的讲解。

摘要: HTML5新特性总结，包括视频、音频、画布等标签的使用和案例。

摘要: 归纳了HTML基础标签及其使用案例，包括文本格式化、表格、图像以及基本布局等

摘要: 主要讲解HTML5样式和列表、CSS链接的四种状态等知识

摘要: HTML5中常见的表单标签以及使用案例

WEB前端(高级班)课程大纲

1.Media Query响应式技术，为了解决设备,浏览器,分辨率达不到要求等问题,从 CSS 2.1 开始就定义了各种媒体类型(如显示器,便携浏览器等),允许设计者针对不用的媒体设备进行不同的 CSS 样式设计。

3.jQuery Mobile移动端框架，学习Query Mobile移动端框架中的基本布局、列表、表单、主题、事件等技术点

4.可掌握的核心能力:

（1）能够掌握响应式开发和兼容性开发需求；

（2）能够使用bootstrap框架快速开发；

5.可解决的现实问题：与美工对接，完成网站响应式和兼容性静态页面的开发，为后期编写手机端和PC端页面页面动态效果打基础。

第2阶段MVVM前端框架：

1.Webpack前端打包技术，学习使用 require(XXX) 的形式来引入各模块，学会使用各种健全的加载器（loader）处理这些事情。

2.Vue前端MVVM框架，Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

4.React前端MVVM框架，React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

5.可掌握的核心能力：

（2）掌握模板引擎的操作；

（3）掌握MVVM框架技术

6.可解决的现实问题：框架本身是解决问题的,是效率的体现,学好各种框架有助于你快速高效的开发网站

Pug前端模板引擎 随着前端项目工程化的发展，代码结构越来越复杂，代码却越来越简单，为了将更多的精力集中在业务功能上面，对页面的快速构建需求日益剧增，同js、css一样，html也出现了各种各样的工具，即模板引擎，而Pug前端模板引擎就是其中之一

第3阶段JS后端编程：

2.SocketIO前端通讯技术 Socket又称"套接字"，应用程序通常通过"套接字"向网络发出请求或者应答网络请求，使主机间或者一台计算机上的进程间可以通讯。

3.可掌握的核心能力：

（1）使用nodeJS开发服务器；

（2）掌握网络通讯原理和技术点；

第4阶段JS项目实战：

1.大型前端项目实战，使用前面的所有技术完成一个完整的网站页面，包括页面的布局和特效以及业务流程等，提升开发的能力。

2.可掌握的核心能力：

（1）掌握应对业务编程的能力；

（2）提升实际开发过程中解决问题的能力；

打电话给我时，请一定说明在看到的。

我要回帖

更多关于 html表格css样式 的文章

 

随机推荐