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