前端学Markdown

前面的话

??我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML文档。本文将详细介绍Markdown的内容

概述

??Markdown的目标是实现易读易写,一份使用Markdown格式撰写的文件应该可以直接以纯文本发布

??Markdown的语法全由一些符号所组成,它的语法种类很少,只对应HTML标记的一小部分。由于Markdown实际上就是简化版的HTML,所以直接写HTML也是可以的

段落

??不加任何符号的一段字符,就是一个段落。多个段落之间用空行分隔
??[注意]在markdown中,多个空行会合并为一个空行显示

p1   

p2

p3

??输出HTML为

<p>p1</p>
<p>p2</p>
<p>p3</p>

换行

??如果段落之间没有空行,则解析为HTML标签<br>

p1
p2
p3

??输出HTML为

<p>p1<br>
   p2<br>
   p3</p>

标题

??#、##、###、####、#####、######分别对应<h1><h2><h3><h4><h5><h6>。其实我个人感觉,不如直接使用<h>标签方便,特别是到标题3以后

#h1
##h2
###h3
####h4
#####h5
######h6

??输出HTML为

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

区块

??说起区块,可能听说的人比较少。它用‘>‘这个符号来表示,对应于HTML中的<blockquote>标签,用于引用块元素。《Head first HTML And CSS》一书中,还专门针对<blockquote><q>进行了详细的区分,但实际用的比较少
??但是,markdown对应区块引用的实现上,并不能完整表达<blockquote>标签的语义,应该可以引用多个段落,但实际上markdown的‘>‘符号只能引用一个段落

>p1

p2

??输出HTML为

<blockquote>
    <p>p1</p>
</blockquote>
<p>p2</p>

列表

【无序列表】

??无序列表使用星号、加号和减号来做为列表的项目标记

* red
* blue
* green

+ red
+ blue
+ green

- red
- blue
- green

??输出HTML为

<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ul>

【有序列表】

??有序的列表则是使用一般的数字接着一个英文句点作为项目标记

1. Red
2. Green
3. Blue

??输出HTML为

<ol>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ol>

??[注意]如果在项目之间插入空行,那项目的内容会用<p>包起来

分隔线

??可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线

* * *
***
*****
- - -
---------------------------------------

??输出HTML为

<hr>
<hr>
<hr>
<hr>
<hr>

链接

??Markdown支持三种形式的链接语法:行内、参考和自动。行内和参考链接都使用角括号把文字转成链接

??[注意]由于Markdown默认产生的链接是当前页打开,且无法实现_blank,所以,就个人而言还是直接使用<a>更方便

【行内链接】

??行内形式是直接在后面用括号直接接上链接

This is an [example link](http://cnblogs.com/)

??输出HTML为

<p>This is an<a href="http://cnblogs.com/">example link</a></p>    

【参考链接】

??参考形式的链接可以为链接定一个名称,之后可以在文件的其他地方定义该链接的内容。title属性是选择性的,链接名称可以用字母、数字和空格,但是不分大小写

I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].

[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"

??输出HTML为

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>

【直接链接】

??Markdown支持比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用方括号包起来,Markdown就会自动把它转成链接,链接的文字就和链接位置一样

??[注意]在网址前一定要加http://,否则将不会被识别为URL

<http://cnblogs.com/>

??输出HTML为

<a href="http://cnblogs.com/">http://cnblogs.com/</a>

图片

??图片的语法和链接很像。先是一个惊叹号!,接着一个方括号,里面放上图片的替代文字,接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的‘title‘文字

【行内形式】

![alt text](/path/to/img.jpg "Title")

【参考形式】

![alt text][id]

[id]: /path/to/img.jpg "Title"

??上面两种方法都会输出HTML为:

<img src="/path/to/img.jpg" alt="alt text" title="Title" /> 

代码

【code】

??使用反引号`来标记代码区段<code>,区段内的&、<和>都会被自动的转换成HTML实体

`<p>`段落`</p>`

??输出HTML为

<code><p></code>段落<code></p></code>

【pre】

??如果要建立一个已经格式化好的代码区块,只要每行都缩进 4 个空格或是一个 tab 就可以了,而 &、< 和 > 也一样会自动转成 HTML 实体

<blockquote>
<p>For example.</p>
</blockquote>

??输出HTML为

<pre><code>&lt;blockquote&gt;&lt;p&gt;For example.&lt;/p&gt;&lt;/blockquote&gt;</code></pre>

强调

??Markdown 使用星号*和底线_作为标记强调字词的符号,被*或_ 包围的字词会被转成用 <em>标签包围,用两个* 或_包起来的话,则会被转成<strong>

??如果* 和 _ 两边都有空白的话,它们就只会被当成普通的符号。如果要在文字前后直接插入普通的星号或底线,可以用反斜线:

\*em* **strong*\*

??输出HTML为

<em>em</em><strong>strong</strong>

转义

??在markdown中,有一些符号具有特殊的用途,如\、*等,如果要使用它们的本意,则需要在前面加一个反斜杠\来实现

??Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

空两格

??使用markdown排版时,很常用的需求是实现首行缩进,一般使用两个全角空格&emsp$emsp来实现

注意

??在博客园中使用markdown写博客时,由于没有即时显示的功能,经常因为多敲了几个空格,而被解析为<br>的情况

时间: 2024-10-25 10:25:11

前端学Markdown的相关文章

前端学HTTP之网络基础

显示目录 目录 [1]网络 [2]OSI [3]TCP/IP 前面的话 HTTP协议对于前端工程师是非常重要的.我们在浏览网站时,访问的每一个WEB页面都需要使用HTTP协议实现.如果不了解HTTP协议,就不可能了解网站的本质.在学习HTTP之前,本文先介绍一些网络基础知识 网络 简单地说,网络就是在一定的区域内将两个或两个以上的计算机以一定的方式连接起来,以供用户共享文件.程序.数据等资源.下面就几种常见的网络类型及分类方法做简要介绍 1.按覆盖范围分 局域网(local area netwo

前端学PHP之Smarty模板引擎

前面的话 对PHP来说,有很多模板引擎可供选择,但Smarty是一个使用PHP编写出来的,是业界最著名.功能最强大的一种PHP模板引擎.Smarty像PHP一样拥有丰富的函数库,从统计字数到自动缩进.文字环绕以及正则表达式都可以直接使用,如果觉得不够,SMARTY还有很强的扩展能力,可以通过插件的形式进行扩充.另外,Smarty也是一种自由软件,用户可以自由使用.修改,以及重新分发该软件.本文将详细介绍Smarty模板引擎 概述 Smarty是一个php模板引擎.更准确的说,它分离了逻辑程序和外

前端学HTTP之数据传输

× 目录 [1]客户机处理 [2]集线器处理 [3]路由器1处理[4]路由器2处理[5]交换机处理[6]服务器处理[7]反向传输 前面的话 上一篇中,介绍了网络基础.本文将详细介绍客户机在浏览网页abc.com时,数据在网络中的传输过程 以图为例,PC1通过HTTP协议访问位于Server上的网页.那么,网页数据在网络中是如何传输的呢?下面是具体的实现步骤 步骤一:客户机处理 HTTP协议的职责是生成针对目标WEB服务器的HTTP请求报文,该报文就是需要传递的数据 下沉到传输层后,由于HTTP协

前端学PHP之自定义模板引擎

什么是网站模板?准确地说,是指网站页面模板,即每个页面仅是一个板式,包括结构.样式和页面布局,是创建网页内容的样板,也可以理解为已有的网页框架.可以将模板中原有的内容替换成从服务器端数据库中动态内容,目的是可以保持页面风格一致 PHP是一种HTML内嵌式的在服务器端执行的脚本语言,所以大部分PHP开发出来的Web应用,初始的开发模板就是混合层的数据编程.虽然通过MVC设计模式可以把程序应用逻辑与网页呈现逻辑强制性分离,但也只是将应用程序的输入.处理和输出分开,网页呈现逻辑(视图)还会有HTML代

前端学PHP之正则表达式函数

前面的话 正则表达式不能独立使用,它只是一种用来定义字符串的规则模式,必须在相应的正则表达式函数中应用,才能实现对字符串的匹配.查找.替换及分割等操作.前面介绍了正则表达式的基础语法,本文将详细介绍正则表达式函数 匹配与查找 [preg_match()] preg_match()函数用来执行一个正则表达式匹配,搜索subject与pattern给定的正则表达式的一个匹配.返回pattern的匹配次数.它的值将是0次(不匹配)或1次,因为preg_match()在第一次匹配后将会停止搜索.preg

前端学HTTP之web攻击技术

前面的话 简单的HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击的对象.应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用等资源才是攻击目标.本文将详细介绍攻击web站点的手段 总括 与最初的设计相比,现今的Web网站应用的HTTP协议的使用方式已发生了翻天覆地的变化.几乎现今所有的Web网站都会使用会话(session)管理.加密处理等安全性方面的功能,而HTTP协议内并不具备这些功能 从整体上看,HTTP就是一个通用的单纯协议机制.因此它具备较多优势,但是在安全

前端学HTTP之日志记录

前面的话 几乎所有的服务器和代理都会记录下它们所处理的HTTP事务摘要.这么做出于一系列的原因:跟踪使用情况.安全性.计费.错误检测等等.本文将谥介绍日志记录 记录内容 大多数情况下,日志的记录出于两种原因:査找服务器或代理中存在的问题(比如,哪些请求失败了),或者是生成Web站点访问方式的统计信息.统计数据对市场营销.计费和容量规划(比如,决定是否需要增加服务器或带宽)都非常有用 可以把一个HTTP事务中所有的首部都记录下来,但对每天要处理数百万个事务的服务器和代理来说,这些数据的体积超大,很

前端学数据库之子查询

查询数据库,当查询条件比较复杂时,常常需要用到子查询.子查询(Subquery)是指出现在其他SQL语句内的SELECT子句.本文将详细介绍子查询 定义 子查询(Subquery)是指出现在其他SQL语句内的SELECT子句 SELECT * FROM t1 WHERE col1 = (SELECT col2 FROM t2); 其中,SELECT * FROM t1,称为外层查询(Outer Query/Outer Statement),SELECT col2 FROM t2,称为子查询(Su

前端学PHP之正则表达式基础语法

前面的话 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本模式的程序性描述.正则表达式有三个作用:1.匹配,也常常用于从字符串中析取信息:2.用新文本代替匹配文本:3.将一个字符串拆分为一组更小的信息块.本文将详细介绍PHP中的正则表达式基础语法 [注意]关于javascript的正则表达式的详细信息移步至此 历史 在PHP中有两套正则表达式函数库,两者功