博客列表 >7月1号——markdown语法与emmet语法的认识与使用

7月1号——markdown语法与emmet语法的认识与使用

glen
glen原创
2022年07月05日 14:33:32380浏览

markdown语法的使用

一、标题
  1. # #我是一级标题
  2. ## ##我是二级标题
  3. ### ###我是三级标题
  4. #### ####我是四级标题
  5. ##### #####我是五级标题
  6. ###### ######我是六级标题

1、标题用#号进行区分,#号必须在开头,一般情况下,建议三级标题即可。

二、列表
1、无序列表

示例:

  • 班级
    • 初一(2)班
    • 初一(3)班
    • 初一(4)班
  • 姓名
    • 小明
    • 小红
    • 李华
  • 学号
    • 2468
    • 1357
    • 6666

总结:无序列表,(-)+(空格)+(文字) 下级列表:(空格)(空格)+(-)+(空格)+(文字)

2、有序列表

示例:

一. 班级

  1. 初一(2)班
  2. 初一(3)班
  3. 初一(4)班

二. 姓名

  1. 小明
  2. 小红
  3. 李华

三. 学号

  1. 2468
  2. 1357
  3. 6666

    总结:有序列表.(1)+(空格)+(文字)
    下级有序列表.(空格)(空格)+(1)+(.)+(空格)+(文字)


三、单行和多行代码

1.单行:示例:<h1>hello <strong>大家好</strong></h1>

(单行用一个反引号,反引号键在esc键下面,跟~是一个键)

2.多行:
示例:

  1. <h1
  2. style="color:rgb">hello<strong>大家好</strong></h1>
  3. <h1 >PHP中文网真滴好</h1>

(多行,代码块,用三个反引号,```)


四、编辑表格
序号 姓名 地址 电话
1 小明 湖北 12345
2 小红 江苏 24680
3 李华 重庆 23456

五、图片

第二十期

语法: ![文字描述](复制图像链接在此)


二、emmet语法

1.创建html文档结构

html:5或者 ! 皆可创建html文档结构

2.div语法

<div id="李华">李华</div>

div是默认标签,可以不写;id用#表示;内容用{文字,内容}包裹

#box{李华}

3.层级,兄弟,父子
  1. 父子关系 >
  2. >ul>li>a{内容}
  3. 如:<li><a href="">北大清华</a></li>

  1. 兄弟关系用 +
  2. .title{内容}+.url{内容}
  3. 如: <div class="title">北大清华</div>
  4. <div class="url">清华北大</div>

  1. 重复生成用*
  2. ul>li*3>a{hello}
  3. <ul>
  4. <li><a href="">hello</a></li>
  5. <li><a href="">hello</a></li>
  6. <li><a href="">hello</a></li>
  7. </ul>

重复生成* 顺序用$ 顺序起始数 用@

  1. ul>li*5>a{哇塞哇塞、$@4} (从第4开始依次往下排序,升序,4567....)
  2. <ul>
  3. <li><a href="">哇塞哇塞、4</a></li>
  4. <li><a href="">哇塞哇塞、5</a></li>
  5. <li><a href="">哇塞哇塞、6</a></li>
  6. <li><a href="">哇塞哇塞、7</a></li>
  7. <li><a href="">哇塞哇塞、8</a></li>
  8. </ul>

小作业:

创建一个五行八列表格:

  1. <style>
  2. table {
  3. border-collapse:collapse;
  4. }
  5. thead {
  6. background-color:aqua
  7. }
  8. table th,table td {
  9. border: 1px solid;
  10. padding: 8px;;
  11. }
  12. </style>
  13. <table>
  14. <caption> 经管学院学生课程表 </caption>
  15. <thead>
  16. <tr>
  17. <th> 节\周 </th>
  18. <th>周一</th>
  19. <th>周二</th>
  20. <th>周三</th>
  21. <th>周四</th>
  22. <th>周五</th>
  23. <th>周六</th>
  24. <th>周日</th>
  25. </tr>
  26. </thead>
  27. <tbody>
  28. <tr>
  29. <td style="color:blue;">第一节</td>
  30. <td>经济学</td>
  31. <td>经济学</td>
  32. <td>营销学</td>
  33. <td>会计学</td>
  34. <td>统计学</td>
  35. <td>经济学</td>
  36. <td>贸易学</td>
  37. </tr>
  38. <tr>
  39. <td style="color:blueviolet;">第二节</td>
  40. <td>统计学</td>
  41. <td>营销学</td>
  42. <td>经济学</td>
  43. <td>会计学</td>
  44. <td>贸易学</td>
  45. <td>经济学</td>
  46. <td>会计学</td>
  47. </tr>
  48. <tr>
  49. <td>午休啦</td>
  50. <td>午休</td>
  51. <td>午休</td>
  52. <td>午休</td>
  53. <td>午休</td>
  54. <td>午休</td>
  55. <td>午休</td>
  56. <td>午休</td>
  57. </tr>
  58. <tr>
  59. <td style="color:aqua;">第四节</td>
  60. <td>会计学</td>
  61. <td>经济学</td>
  62. <td>会计学</td>
  63. <td>经济学</td>
  64. <td>会计学</td>
  65. <td>经济学</td>
  66. <td>统计学</td>
  67. </tr>
  68. <tr>
  69. <td style="color:brown;">第五节</td>
  70. <td>统计学</td>
  71. <td>统计学</td>
  72. <td>会计学</td>
  73. <td>贸易学</td>
  74. <td>贸易学</td>
  75. <td>会计学</td>
  76. <td>贸易学</td>
  77. </tr>
  78. </tbody>
  79. </table>
  80. </body>
  81. </html>

表格

表格生成代码:table>captipn{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议