关于元素和标签,可能傻傻分不清楚,什么是元素,什么是标签,举个例子
比如div是一个块状元素,那么尖括号包起来的是标签,他用来标记这个元素,尖括号里面是元素名,元素是由开始和结束标签组成,用来包含内容的整段代码,整个html文档就是由许许多多这样的元素组成
在jade里面,不管是不是自闭合标签,写法都是一样的,不用关闭,把握好嵌套结构和缩进层次就好了
 
标签知道怎么写了,那么class和id怎么写呢?这个跟css里面定义样式是一样的,分别用.和#来区分,比如为h1这个标签加一个title的calss
h1.title jade study
加一个.,紧贴h1,编译完的html就是
<h1 class='title'>jade study</h1>
id也是同理
h1#title.title jade study
加一个#,紧贴h1,编译完的html就是
<h1 id='title' class='title'>jade study</h1>
*:注意的是,在jade里面,div这个标签比较特殊
div.title#id
=>
<div id='id' class='title'></div>
这个div如果不写元素,也会自动编译成div
.title#id
=>
<div id='id' class='title'></div>
除了把classname和id直接追加到后面呢,还可以用另外一种方式做,还是以h1为例
h1.title.title2#title(class='title3') study
=>
<h1 id='title' class='title title2 title3'>study</h1>
在紧接着地方放一个括号,在扣号里面写一个title3,那id也可以拿到里面去,增加一个id等于title,在括号里面属性与属性之间需要用逗号隔开
h1.title.title2(id='title',class='title3') study
=>
<h1 id='title' class='title title2 title3'>study</h1>
其实看到这里大家就很容易理解了,所有到属性都可以拎到括号里面,只有class和id比较特殊,可以直接在标签后面追加,那么其他属性也是一样的,比如增加一个a标签
a(href='https://www.baidu.com',title='jade study',data-id='1000') link
input(value='123',name='course',type='text')
这些都跟其他标签是一种写法,但是有一种属性未必要加等号,比如默认数据
input(name='type',type='checkbox', checked)
他的默认选中独立写就可以了

最新文章

  1. effective OC2.0 52阅读笔记(七 系统框架)
  2. bat命令之for命令详解
  3. struts2 标签的使用之一 s:if
  4. Zabbix探索:网络设备监控2
  5. 【转载】如何将Emmet安装到到 Sublime text 3?
  6. mysql均衡负载
  7. C++0x新特性
  8. Myeclipse重装后的必要配置
  9. Mysql 自动备份脚本
  10. Nginx日志配置及日志切割
  11. 【G】开源的分布式部署解决方案文档 - 部署Console &amp; 控制负载均衡 &amp; 跳转持续集成控制台
  12. javaScript-什么是变量?
  13. CenOS http 安装与运行
  14. 如何在markdown中打出上标、下标和一些特殊符号
  15. (3)Maven快速入门_3在Eclipse中创建Maven项目打包成jar
  16. c# 设置IE浏览器版本运行程序-设置webBrowser对应的IE内核版本来运行
  17. LOJ #2541. 「PKUWC 2018」猎人杀(容斥 , 期望dp , NTT优化)
  18. numpy-Randow
  19. laravel 赋值
  20. SQL Server 优化总结

热门文章

  1. HTML布局水平导航条2制作
  2. 【JQuery插件】元素根据滚动条位置自定义吸顶效果
  3. orleans 的一种模式
  4. idea安装阿里云插件和sonar插件
  5. QuickTime专业版 pro 注册码
  6. linux下源码安装rabbitMq
  7. Eclipse使用JDBC方式连接SQLServer2017
  8. LeetCode 718. 最长重复子数组(Maximum Length of Repeated Subarray)
  9. LeetCode 896. 单调数列(Monotonic Array)
  10. LocalDate LocalTime LocalDateTime Instant的操作与使用