markdown的文章樣式:字型、顏色、大小、背景色、圖片、縮排
自從我學習程式設計開始,我是一直在用CSDN,但是一直在看大神的部落格,這幾天才開始寫部落格,CSDN提供兩種編輯方式來寫文章。第一種便是xhEditor ;第二種便是markdown。第一種寫文章的方式low爆了,作為程式設計師的我肯定要選一些能夠裝一下逼的方式。而且,markdown確實是用起來更好用。但也遇到不少的問題 ,如:給字型換個字型型別,大小,顏色、縮排等基本的文章樣式,markdown的基本語法根本做不到。
不過幸運的是,markdown的基本語法雖然不支援這些樣式,但markdown支援HTML的語法,這就意味著markdown能夠藉助HTML實現功能擴充套件。就在我滿懷心喜要使用使用我的前端知識來寫出一篇樣式絢麗的文章時,又發現markdown不支援HTML的style屬性,這就意味著幾乎所有樣式是無法實現了。在我閱讀了一些博文和不斷嘗試後,終於是可以實現基本需求的樣式了。
1、縮排 和 空格
這裡的縮排還是得通過空格來實現縮排的,效果就是我這文章的段落首行縮排
  不過幸運的是,....
 
:輸入一個空格
:輸入一個空格
 
:輸入兩個空格
注意:別忘了分號
2、居中
2.1、方式一: <center>內容</center>
2.2、方式二: <div align=center> 內容 </div>
3、字型顏色、大小、字型型別
使用font標籤以及其三個屬性,下面程式碼的效果便是第3個標題
<font color="#0099ff" size=6 face="微軟雅黑">3、字型顏色、大小、字型型別</font>
size:可能的值:從 1 到 7 的數字。瀏覽器預設值是 3。
4、圖片
這裡通過width、height控制圖片的大小
<img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif" width="400" height="400" alt=" 圖片不見了。。。 "/>
alt:是圖片沒有載入成功時,顯示的文字
5、背景色
html的標籤中暫時發現只有兩個標籤有 bgcolor 的屬性(這個屬性可以設定背景色):<body>
<td>
。 經驗證,
<body>
標籤是不行的,而且這樣寫也不合理,所以就只有<td>
標籤了;
<table><tr><td bgcolor="red">紅色背景</td></tr></table>
效果:
紅色背景 |
6、空白行
雖然說markdown能回車換行,但是沒辦法做到n個空白行,而且。換行的辦法就比較多了,因為別忘了,markdown是支援HTML標籤的:
1. 使用塊標籤,撐開一行,如p、div
<p></p>
或
<div></div>
- 簡單點的方法,就直接使用 br 標籤
內容1<br/><br/>內容2
效果:
內容1
內容2
7、文章內容的定位
有時候我們在寫文章時,想提供讀者一個參考。這裡使用的便是a標籤的錨點定位,既可以跳到本頁的某一處,也可以定位到另一個網頁的某一處:
1. 在目標處設定一個id;
2. 使用a標籤,屬性 href =”URL#id”
3. 使用markdown的語法:[文字](#id)
<!-- 這裡的ID就是aaa ,擷取自本文章的首行-->
<span id="aaa">自從我學習程式設計開始</span >
<!-- 注意:不新增URL地址,表示跳轉到本頁的某處。-->
<a href="#aaa">本文的首行</a>
[本文的首行](#aaa)
效果:
本文的首行
最後附上顏色表,可以開始你的表演了。本文底部 ⇓,歡迎討論
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|