Markdown温故知新(4):更多扩展语法及HTML (2)

HTML 中有很多排版标签,比如换行标签<br/>,甚至还可以在 HTML 中嵌入 CSS 代码,比如通过text-align来实现文本对齐,通过text-indent来实现文本缩进等。

示例一下 CSS 的居中和缩进(截自 MarkdownPad2):

Markdown温故知新(4):更多扩展语法及HTML

5.3、图片及多媒体标签

Markdown 中的图片链接会被转换成 HTML 中的<img>标签。图片链接是 Markdown 中最酷的功能之一,因为从没有任何一个工具能如此方便的将图片嵌入到文档之中,而 Markdown 做到了。但便捷的同时,也意味着功能的欠缺,除了title以外,无法再为图片链接设置其它任何属性,所以转换后的<img>的样式也是默认的。

如果要实现更好的图文混排效果,也可以直接在 Markdown 中输入<img>并自由指定想要的属性。比如通过align指定图片对齐方式,通过width指定图片宽度,通过height指定图片高度,通过border指定图片边框等。

示例一下图片居中和加框(截自 MarkdownPad2):

Markdown温故知新(4):更多扩展语法及HTML

不仅可以在 Markdown 中直接用<img>标签,还可以用<audio>和<video>等多媒体标签。比如通过<video>来嵌入一个视频:

示例一下,输入文本如下:

<video controls> <source src="http://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm"> </video>

显示效果如下:

5.4、锚元素(A 标签)

Markdown 中的文本链接和引用链接最终都会被转化为 HTML 中的 A 标签。在 HTML 中,A 标签的作用是创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。Markdown 的链接实现了 A 标签最基础的功能,但有两个常用的特性尚未充分支持,分别是页内跳转和target属性。

页内跳转功能也叫锚点定位。锚点是超链接的一种,能够直接定位到页面内的某个部分,因此也叫内部链接或页内超链接。在网络上,锚点的应用十分普遍,如跳转到同一页面内不同的位置、跳转到其他页面的特定位置、文章目录等。

锚点的实现方式有三种,由于不方便演示,这里我仅给出实现的代码,有兴趣的朋友可拷贝代码进行尝试。

方式一:通过id属性实现。即把目标位置标签的id属性值写到 A 标签的href属性的末尾。这种方法可以定位到任何类型的 HTML 标签,比较常用的标签有<h>、<a>、<div>、<span>、<font>等等。

<a href="url#锚点名称">跳转链接的文本</a> <h2>目标位置的文本</h2>

方式二:通过name属性实现。即把目标位置标签的name属性值写到 A 标签的href属性的末尾。这种方法只适用于 A 标签。

<a href="url#锚点名称">跳转链接的文本</a> <a>目标位置的文本</a>

方式三:通过 js 脚本实现。

<a href="javascript:void(0)"></a> <div></div>

在 Markdown 中定义一个带锚点的链接的格式是[description](url#anchorName),如果不写url部分,那么url默认就会是当前页的链接,换句话说,该链接就成了一个内部链接。

由于目前很多博客依然不支持 Markdown 的TOC扩展,所以我们只好结合 HTML 的锚点和 Markdown 的内部链接,来手动实现博文的目录功能。

A 标签的target属性用于指定在何处打开链接资源。如果target的值为_blank,则表示在新的窗口打开链接;如果不给target指定值,那么target的默认值就是_selft,表示在当前窗口中打开链接。

而 Markdown 的链接转换成的 A 标签时默认都不带target属性,这也就意味着 Markdown 语法本身不支持链接在新窗口中打开。要实现在新窗口中打开链接的效果,只能直接用 A 标签,然后把target属性的值指定为_blank。

如要在新窗口中打开博客园首页,示例一下,输入文本如下:

<a target="_blank" href="http://www.cnblogs.com/">博客园首页</a>

显示效果如下:

博客园首页

6、总结

本文进一步介绍了几种 Markdown 扩展语法,并着重介绍了如何在 Markdown 中使用 HTML 和 CSS。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyjxxs.html