Blogger Information
Blog 5
fans 0
comment 0
visits 2639
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
001.markdown 常用语法及 html 的标签与属性之结构元素
清石
Original
575 people have browsed it

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>

效果图:

结构元素

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:很不错的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post