markdown 语法

1. 标题

  1. 通常情况下最多用三个“#”
  2. # title1
  3. ## title2
  4. ### title3
  5. #### title4
  6. ##### title5
  7. ###### title6

2. 列表

  1. 无序列表用“- + *”通常使用"-"
  2. 有序列表使用数字加“.”号

2.1 无序

  • 一班
  • 二班
    • 张三
    • 李四
    • 王五
  • 三班

    2.2 有序

  1. 一班
  2. 二班
    2.1张三
    2.2李四
    2.3王五
  3. 三班

3. 代码

代码用“```名称”

  1. <?php
  2. echo "hello world";
  3. ?>

4. 表格

名次高一高二高三
第一名name1name4name7
第二名name2name5name8
第三名name3name6name9

5. 图片

  1. 格式:![说明](路径)

美女

emmet语法

1.快速生成html结构

  1. 输入“html:5”或“!”按“Tab键”

2.元素快速添加属性

“id”和“class”是两个常用属性

  1. "id"属性 div#name{张三} 按回车
  2. "class"属性 div.name{李四} 按回车
  3. 说明:当元素标签为<div>时,可以省去前面的div
  4. 例子:#name{张三} 按回车
  1. <div id="name">张三</div>
  2. <div class="name">李四</div>

3层级关系

  1. 父子关系 ">"
  2. ul>li{item} 按回车
  1. <ul>
  2. <li>item</li>
  3. </ul>
  1. 兄弟关系 "+"
  2. div.num1{张三}+div.num2{李四} 按回车
  3. 因<div>是默认标签所以此处可以省去
  4. .num1{张三}+.num2{李四} 按回车
  1. <div class="num1">张三</div>
  2. <div class="num2">李四</div>
  1. 重复关系 "*"
  2. li*3{item} 按回车
  1. <li>item</li>
  2. <li>item</li>
  3. <li>item</li>
  1. 因此
  2. #box>.num1{这里是标题}+.num2>ul>li*3>a{text} 按回车
  1. <div id="box">
  2. <div class="num1">这里是标题</div>
  3. <div class="num2">
  4. <ul>
  5. <li><a href="">text</a></li>
  6. <li><a href="">text</a></li>
  7. <li><a href="">text</a></li>
  8. </ul>
  9. </div>
  10. </div>
  1. 序号 用“$”和“@”
  2. $”表示递增默认从1开始,
  3. “@”后面连接数字起到定位和正反序的作用,
  4. 当后面的数字为“0”或者正数时候,表示从几开始
  5. 当后面的数字为负数时,表示倒序排列,和结束的位置
  1. .box>ul>li.num*3>a{text$} 1开始 正序
  1. <div class="box">
  2. <ul>
  3. <li class="num"><a href="">text1</a></li>
  4. <li class="num"><a href="">text2</a></li>
  5. <li class="num"><a href="">text3</a></li>
  6. </ul>
  7. </div>
  1. .box>ul>li.num*3>a{text$@0} 0开始 正序
  1. <div class="box">
  2. <ul>
  3. <li class="num"><a href="">text0</a></li>
  4. <li class="num"><a href="">text1</a></li>
  5. <li class="num"><a href="">text2</a></li>
  6. </ul>
  7. </div>
  1. .box>ul>li.num*3>a{text$@5} 5开始 正序
  1. <div class="box">
  2. <ul>
  3. <li class="num"><a href="">text5</a></li>
  4. <li class="num"><a href="">text6</a></li>
  5. <li class="num"><a href="">text7</a></li>
  6. </ul>
  7. </div>
  1. .box>ul>li.num*3>a{text$@-0} 0结束 倒序
  1. <div class="box">
  2. <ul>
  3. <li class="num"><a href="">text2</a></li>
  4. <li class="num"><a href="">text1</a></li>
  5. <li class="num"><a href="">text0</a></li>
  6. </ul>
  7. </div>
  1. .box>ul>li.num*3>a{text$@-3} 3结束 倒序
  1. <div class="box">
  2. <ul>
  3. <li class="num"><a href="">text5</a></li>
  4. <li class="num"><a href="">text4</a></li>
  5. <li class="num"><a href="">text3</a></li>
  6. </ul>
  7. </div>

创建5行8列表格

  1. 表格式样
  1. <table> <!-- 表格标签 -->
  2. <caption></caption> <!-- 标题 -->
  3. <thead></thead> <!-- 表头 -->
  4. <tbody> <!-- 表体 -->
  5. <tr> <!-- 行 -->
  6. <td></td> <!-- 列 -->
  7. <td></td>
  8. </tr>
  9. <tr>
  10. <td></td>
  11. <td></td>
  12. </tr>
  13. </tbody>
  14. </table>
  1. table>caption{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8)
  1. <style>
  2. table{
  3. border-collapse: collapse;
  4. }
  5. table thead{
  6. background-color: yellowgreen;
  7. }
  8. table th,table td{
  9. border: 1px solid #000000;
  10. padding: 5px;
  11. }
  12. </style>
  13. <table>
  14. <caption>学生信息表</caption>
  15. <thead>
  16. <tr>
  17. <th>title</th>
  18. <th>title</th>
  19. <th>title</th>
  20. <th>title</th>
  21. <th>title</th>
  22. <th>title</th>
  23. <th>title</th>
  24. <th>title</th>
  25. </tr>
  26. </thead>
  27. <tbody>
  28. <tr>
  29. <td>item</td>
  30. <td>item</td>
  31. <td>item</td>
  32. <td>item</td>
  33. <td>item</td>
  34. <td>item</td>
  35. <td>item</td>
  36. <td>item</td>
  37. </tr>
  38. <tr>
  39. <td>item</td>
  40. <td>item</td>
  41. <td>item</td>
  42. <td>item</td>
  43. <td>item</td>
  44. <td>item</td>
  45. <td>item</td>
  46. <td>item</td>
  47. </tr>
  48. <tr>
  49. <td>item</td>
  50. <td>item</td>
  51. <td>item</td>
  52. <td>item</td>
  53. <td>item</td>
  54. <td>item</td>
  55. <td>item</td>
  56. <td>item</td>
  57. </tr>
  58. <tr>
  59. <td>item</td>
  60. <td>item</td>
  61. <td>item</td>
  62. <td>item</td>
  63. <td>item</td>
  64. <td>item</td>
  65. <td>item</td>
  66. <td>item</td>
  67. </tr>
  68. <tr>
  69. <td>item</td>
  70. <td>item</td>
  71. <td>item</td>
  72. <td>item</td>
  73. <td>item</td>
  74. <td>item</td>
  75. <td>item</td>
  76. <td>item</td>
  77. </tr>
  78. </tbody>
  79. </table>

更多相关文章

  1. Android属性动画-Property Animation(二) 使用ObjectAnimator完
  2. Android中的常用布局
  3. android Listview 拖动时背景为黑色问题
  4. 使用android快速开发框架afinal的FinalDb操作android数据库
  5. Android(安卓)App 获取 root权限
  6. AndroidUI设计之布局-详细解析布局实现
  7. android中layout_gravity和gravity的区别
  8. Android(安卓)Studio XML布局控件不提示属性以及不换行问题
  9. android中TextView属性方法总结

随机推荐

  1. android中小知识点积累
  2. Android(安卓)网页登录 POST 请求 保存 C
  3. Android Listview 报错 'android.R.id.li
  4. Android MVVM快速开发框架(一)
  5. CM13.0代码下载
  6. android单元测试时,异常情况解决记录
  7. Android(安卓)面试整理
  8. TextUtils用法
  9. Android设置对话框去除黑边
  10. In Depth : Android Boot Sequence / Pro