学html5不得不说的html5shiv.js和pug

一.html5shiv.js

首先来说一下关于html5语义化的问题，语义化虽然很好，可是却存在很多兼容问题，经常听见有人抱怨这该死的IE6,7,8,这个时候就要html5shiv.js出马了，这也是一个大趋势，它的作用是使低版本浏览器支持html5语义化的标签。
下载html5shiv.js链接：http://www.bootcdn.cn/html5shiv/
复制<script>标签，将他引入到自己编写的html中，这样你写的所有html5的语义标签任何版本的浏览器都能解析。

s.png

二.pug(jade)

pug大家可能听起来很陌生，但说起jade大家一定是耳熟能详吧，其实pug就是jade,由于版权等相关问题，就改名为pug.关于安装pug以及环境的配置都比较简单，下面就分享一下pug的基本用法。

1.创建一个pug文件，文件名为：layout.pug

1创建规范为：1.结构靠缩进 2.属性用() 3.文字内容用空格

doctype html
html
  head
      meta(charset="utf-8")
      title 这是pug的练习
      link(rel="",href="")
  body
      //-h1 今天学了pug,美滋滋
      div(class='div1 auto xxx')
      div#div1
      p.
          xxxx
          xxxx
          xxxx
      h2 哈哈
      strong 你好

2.打开终端进入pug文件目录

首先找到文件所在的具体位置然后使用语句生成对应的html文件：

pug -P layout.pug

3.如果不想在当前目录生成html文件，而是想在自定义目录a下生成的html文件，使用语句：

pug index.pug -o a

4.生成的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>这是pug的练习</title>
    <link rel="" href="">
  </head>
  <body>
    <div class="div1 auto xxx"></div>
    <div id="div1"></div>
    <p>
      xxxx
      xxxx
      xxxx
    </p>
    <h2>哈哈</h2><strong>你好</strong>
  </body>
</html>

5.include语句调用

    include header.pug

6.block语句的作用是将一段pug语句封装成一块

doctype html
html
    head
    meta(charset="utf-8")
    block source       
        title 首页
        link(href="css/index.css",rel="stylesheet")
    body
        block li
        p hello world
        p hfdjs

在其他bug文件里可以继承这个文档所有属性，语法如下：

extends layout.pug
block source          //继承的内容可修改
block li             //继承的内容可修改