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

本文和大家分享的主要是主要是html5中html5shiv.jspug相关内容,一起来看看吧,希望对大家学习html5有所帮助。

  .html5shiv.js

  首先来说一下关于html5语义化的问题,语义化虽然很好,可是却存在很多兼容问题,经常听见有人抱怨这该死的IE6,7,8,这个时候就要html5shiv.js出马了,这也是一个大趋势,它的作用是使低版本浏览器支持html5语义化的标签。

  复制<script>标签,将他引入到自己编写的html中,这样你写的所有html5的语义标签任何版本的浏览器都能解析。

s.png

  .pug(jade)

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

  1.创建一个pug文件,文件名为:layout.pug

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

  doctype htmlhtml

  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 htmlhtml

  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             //继承的内容可修改

 

来源:简书

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值