博客列表 >001.markdown 常用语法及 html 的标签与属性之结构元素

001.markdown 常用语法及 html 的标签与属性之结构元素

清石
清石原创
2020年09月30日 12:46:26570浏览

Markdown常用语法说明与实例演示

以下为详细说明与演示

1. 标题

#输入一级标题, ##输入二级标题,###输入三级标题 …

一级标题演示

二级标题演示

三级标题演示


2. 段落

段落直接书写就可以,行未加 2 个空格,或行与行之间空一行。

这一行为段落演示


3. 文本

文本有*斜体*, **加粗**

斜体演示:斜体

加粗演示:加粗


4. 分隔条

分隔条用--- (不少于 3 个)表示

以下就是分隔条演示


5. 列表

有序:1. ..., 无序:- ... ,支持嵌套

有序列表演示

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3

无序列表演示

  • 无序列表1
  • 无序列表2
    • 二级1
    • 二级2
      • 三级1
      • 三级2

6. 引用

> ..., 可多行,形成一个区块,内部支持列等

这一行为引用演示


7. 代码

单行: `…`, 多行: ```html … ```

单行代码:

<html><head></head><body></body></html>

多行代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>hello!</title>
  5. </head>
  6. <body>
  7. <div>hello!</div>
  8. </body>
  9. </html>

8. 链接

[名称](URL), 或者 \<url>

只显示文本演示
演示

全显示演示
演示https://www.php.cn

只显示链接演示
演示https://www.php.cn


9. 图片

![描述](图片 URL)
以下为图片演示:

图片演示


10. 表格

表格是硬画出来的,详情见实例
第一行|ID|早上|中午|下午|
第二行|---|---|---|---|
第三行|1|ABC|EDF|GHI|JKL|
在竖线之间写内容

演示如下:

ID 早上 中午 下午
1 ABC EDF GHI JKL
2 MNO PQR STU VWX

表格无法设置大小, 列宽,以及行与列的合并
如果有个性化需求, 可直接使用<table>标签


总结

  • markdown 语法规范并不统一,不同的工具预览效果并不一致
  • markdown 允许功能扩展,例如分式,流程图等
  • markdown 是程序员编写技术文档的必备工具,必须熟练掌握它

结构元素演示

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="css/demo1.css">
  6. <title>元素的标签与属性</title>
  7. </head>
  8. <body>
  9. <!-- 页眉 -->
  10. <header>
  11. <h1>&lt; header &gt;</h1>
  12. </header>
  13. <div class="container">
  14. <!-- 边栏 -->
  15. <aside>
  16. <h1>&lt; aside &gt;</h1>
  17. </aside>
  18. <!-- 主体 -->
  19. <main>
  20. <h1>&lt; main &gt;</h1>
  21. <div>
  22. <section><h1>&lt;section &gt;</h1></section>
  23. <section><h1>&lt;section &gt;</h1></section>
  24. </div>
  25. </main>
  26. <!-- 页脚 -->
  27. </div>
  28. <footer>
  29. <h1>&lt; footer &gt;</h1>
  30. </footer>
  31. </body>
  32. </html>

效果图:

结构元素

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