博客列表 >markdown语法学习 和 HTML 小结

markdown语法学习 和 HTML 小结

。。。
。。。原创
2022年03月17日 15:49:43361浏览

markdown 用法

1.标题

例子

标题名

语法[^1]

  1. # 一级标题
  2. ## 二级标题
  3. ### 三级标题
  4. ### 四级标题

2.列表

2.1无序列表

例子

  • 列表1
  • 列表2
  • 列表3
  • 列表4
    • 列表4.1
    • 列表4.2
      语法[^2]
      ``` markdown
  • 列表1
  • 列表2
  • 列表3
  • 列表4
    • 列表4.1
    • 列表4.2
      ```

      2.2有序列表

      例子
  1. 列表1
  2. 列表2
  3. 列表3
  4. 列表4
    1. 列表4.1
    2. 列表4.2
      语法[^3]
      ``` markdown
  5. 列表1
  6. 列表2
  7. 列表3
  8. 列表4
    1. 列表4.1
    2. 列表4.2
      1. ## 3.代码
      2. ### 3.1单行代码
      3. 例子
      4. `int count = 1 ;`
      5. 语法
      6. ``` java
      7. `int count = 1 ;`

      3.2多行代码

      例子
      ```java

int temp ;

temp = a ;

a = b ;

b = temp ;

  1. 语法[^4]
  2. ``` java
  3. {
  4. [```]java
  5. int temp ;
  6. temp = a ;
  7. a = b ;
  8. b = temp ;
  9. [```]
  10. }

4.表格

例子
|id| name| phone | email |
|—-|—-|—-|—-|
|1| 张三 |180**| ####@qq.com|
|2| 李四 |130** |####@163.com|
|3| 王五 |136** |####@qq.com|
语法

  1. |id| name| phone | email |
  2. |---|---|---|---|
  3. |1| 张三 |180********| ####@qq.com|
  4. |2| 李四 |130******** |####@163.com|
  5. |3| 王五 |136******** |####@qq.com|

5.图片[^5]

例子
第十九期_前端开发
语法

  1. ![第十九期_前端开发](https://img.php.cn/upload/course/000/000/041/6209c897986f5556.jpg)

6.链接

例子
课程直播地址 : https://www.php.cn/blog/detail/20178.html
语法
课程直播地址 : <https://www.php.cn/blog/detail/20178.html>

HTML小结

  1. <!-- 文档类型 -->
  2. <!DOCTYPE html>
  3. <!-- ?根元素: lang 页面语言 -->
  4. <html lang="zh-CN">
  5. <!--
  6. 头元素: 页面描述,供浏览器或搜索引擎解析时参考
  7. 语言-国家
  8. zh-CN 代表中国
  9. en 代表英国
  10. en-US 代表美国
  11. ...
  12. -->
  13. <head>
  14. <!-- 元标签meta: charset 默认字符集,utf8可表示世界上几乎所有已知语言字符 -->
  15. <meta charset="UTF-8" />
  16. <!--
  17. 浏览器兼容,原用于IE8适配,可确保按IE最高版本来解析页面,可有可无,现在微软也采用了Chrome内核啦
  18. 编码格式
  19. UTF-8
  20. UTF-16
  21. ISO-8859-1
  22. ...
  23. -->
  24. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  25. <!-- 视口适配控制: 极其重要,这涉及到三个"视口"类型之间的转换与适配,后面讲到移动端布局更细说 -->
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  27. <!-- 页面标题: 显示在浏览器标签页,用于描述页面信息 -->
  28. <title>Document</title>
  29. <!-- 引入外部样式表 -->
  30. <link rel="stylesheet" href="style.css" />
  31. <!-- 引入外部脚本 -->
  32. <script src="outer.js"></script>
  33. </head>
  34. <!-- 主体元素: 页面实际显示的内容,也是开发重点和用户真正关注的部分 -->
  35. <body>
  36. <h1 style="color: red">hello world</h1>
  37. <h1>今晚大家很认真</h1>
  38. <img src="xxx.jpg" alt="" />
  39. <!-- 单标签: 通常用于引用外部资源,也有特殊 像img,script-->
  40. <!--双标签: 内容来自开发者提供 -->
  41. </body>
  42. </html>

[^1]: 一个’#’号代表一级标签 分级不宜过多 一般使用到三级
[^2]: “-“前无空格 为一级列表 加两个空格为二级;”-“后需要 一个空格
[^3]: “.”前无空格 为一级列表 加三个空格为二级;”.”后需要 一个空格
[^4]: “```”跟上 代码类型
[^5]: “[ ]”里的图片说明 在地址失效时显现

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