博客列表 >Markdown语法小结和HTML标签学习小结

Markdown语法小结和HTML标签学习小结

P粉317509817
P粉317509817原创
2022年03月17日 11:56:59494浏览

Markdown语法小结

1.标题

写法:

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

实例演示

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2.字体

  • 加粗
    要加粗的文字左右分别用两个*号包起来
  • 斜体
    要倾斜的文字左右分别用一个*号包起来
  • 斜体加粗
    要倾斜和加粗的文字左右分别用三个*号包起来
  • 删除线
    要加删除线的文字左右分别用两个~~号包起来

语法:

  1. **字体加粗**
  2. *字体倾斜*
  3. ***字体倾斜加粗***
  4. ~~删除线~~

实例演示:

加粗
斜体
倾斜加粗
删除线

3.列表

3.1 无序列表

语法:
  1. - item1
  2. - item2
  3. - item3
  4. - subitem3-1
  5. - subitem3-2
  6. - subitem3-3
实例演示
  • item1
  • item2
  • item3
    • item3-1
    • item3-2
    • item3-3

3.2 有序列表

语法:
  1. 1. 列表内容
  2. 2. 列表内容
  3. 3. 列表内容
  4. 注意:序号跟内容之间要有空格

实例演示:

  1. 列表内容
  2. 列表内容
  3. 列表内容

列表嵌套
上一级和下一级之间敲三个空格即可

4.分割线

语法:

  1. ----
  2. ***
  3. *****
  4. 这几种写法都可

实例展示:




5.代码

语法:

单行代码

  1. `代码内容`

多行代码

  1. ```)代码类型
  2. 代码块(用```包括起来```)
  3. (```

实例演示

单行代码:
echo "hello"
多行代码:

  1. print("hello world")

5.分割线

语法:

  1. |表头|表头|表头|
  2. |--- |--- |---|
  3. |内容|内容|内容|
  4. |内容|内容|内容|
  5. 第二行分割表头和内容。

实例演示:

姓名 性别 年龄
内容 内容 内容
内容 内容 内容

6.图片和链接

插入图片语法:

  1. ![图片说明](图片url)

实例演示:

19期前端开发

插入链接语法:

  1. <链接>
  2. 网页url用<>框起来

实例演示:

第 19 期: https://www.php.cn/course/1382.html

HTML标签学习小结:

  1. <!-- 文档类型 -->
  2. <!DOCTYPE html>
  3. <!-- ?根元素: lang 页面语言 -->
  4. <html lang="zh-CN">
  5. <!-- 头元素: 页面描述,供浏览器或搜索引擎解析时参考 -->
  6. <head>
  7. <!-- 元标签meta: charset 默认字符集,utf8可表示世界上几乎所有已知语言字符 -->
  8. <meta charset="UTF-8" />
  9. <!-- 浏览器兼容,原用于IE8适配,可确保按IE最高版本来解析页面,可有可无,现在微软也采用了Chrome内核啦 -->
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11. <!-- 视口适配控制: 极其重要,这涉及到三个"视口"类型之间的转换与适配,后面讲到移动端布局更细说 -->
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13. <!-- 页面标题: 显示在浏览器标签页,用于描述页面信息 -->
  14. <title>Document</title>
  15. <!-- 引入外部样式表 -->
  16. <link rel="stylesheet" href="style.css" />
  17. <!-- 引入外部脚本 -->
  18. <script src="outer.js"></script>
  19. </head>
  20. <!-- 主体元素: 页面实际显示的内容,也是开发重点和用户真正关注的部分 -->
  21. <body>
  22. <h1 style="color: red">hello world</h1>
  23. <h1>今晚大家很认真</h1>
  24. <img src="xxx.jpg" alt="" />
  25. <!-- 单标签: 通常用于引用外部资源
  26. 双标签: 内容来自开发者提供 -->
  27. </body>
  28. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议