html5新增标签以及pug模板

1.h5新增标签在IE6,7,8下解决兼容性的问题的方法
引入 htmlshiv.js文件

image.png

2.pug模板
pug模板的好处:
1.无需结束标签
在html中,几乎每个标签都需要写相应的结束标签,这既耗费时间和精力又使代码更加冗长,而且万一忘了写结束标签会导致不可预期又难以定位的错误。相比之下,pug没有结束标签,代码更加简洁高效。

2.强制缩进
强制缩进有人喜欢有人不喜欢,但是它带来的好处却是无可置疑的:它使得团队中所有人的风格都统一了起来,使得阅读别人的代码不再那么恐怖,让所有人都养成了缩进代码的好习惯,也减少了因为代码格式化产生的冲突等问题。

3.代码复用和维护
pug中的include功能让我们可以不再一遍又一遍地写相同的代码,如头部引用和组件模板等。遇到要修改时也不用一个又一个地去搜索和修改每一个地方,只需修改一个地方一次。

4.标签写法与CSS相同
pug中的标签的写法与CSS中的选择器相同,因此写CSS时更加方便,可以直接拷贝tag作为选择器编写样式。

需要构建环境
第一步,下载node.js和 npm
第二步, 按node -v 和 npm -v 查看是否下载成功
第三步, 按 sudo npm install pug-cli -g 全局安装 pug --help 查看是否安装成功
第四步, 创建index.pug 文件 ,pug -P index.pug 将其转换成index.html文件 可以实时查看更改情况的快捷键是 pug -P -w index.pug
格式

image.png

进行项目时可以准备一个副模板layout.pug,并将需要更改的部分用block xxx

image.png

然后创建 index.pug 相同的部分可以用例如include header.pug 来代替 其他部分可以用extends layout 继承

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,144评论 25 709
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 12,525评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,554评论 7 35
  • 就在十分钟前,看着这碗东西,精雕细琢地码着今天的日志,一碗择子豆腐。本臆想着脱胎换骨出一碗清汤荞麦面那文般...
    mango大人阅读 1,823评论 0 0
  • *作者:二马菌,高级策划,实战型资深运营。公众号:三十八度五(ID:almadness),剖析运营密码,分享人生及...
    冯三一阅读 3,652评论 0 0

友情链接更多精彩内容