用 # 號(hào)可表示 1-6 級(jí)標(biāo)題,一級(jí)標(biāo)題對(duì)應(yīng)一個(gè) # 號(hào),二級(jí)標(biāo)題對(duì)應(yīng)兩個(gè) # 號(hào),以此類推。
# 一級(jí)標(biāo)題
## 二級(jí)標(biāo)題
### 三級(jí)標(biāo)題
#### 四級(jí)標(biāo)題
##### 五級(jí)標(biāo)題
###### 六級(jí)標(biāo)題
Markdown 段落沒(méi)有特殊的格式,直接編寫文字就好,段落的換行是使用兩個(gè)以上空格加上回車
當(dāng)然也可以在段落后面使用一個(gè)空行來(lái)表示重新開(kāi)始一個(gè)段落。
Markdown 可以使用以下幾種字體:
*斜體文本*
_斜體文本_
**粗體文本**
__粗體文本__
***粗斜體文本***
___粗斜體文本___
你可以在一行中用三個(gè)以上的星號(hào)、減號(hào)、底線來(lái)建立一個(gè)分隔線,行內(nèi)不能有其他東西。你也可以在星號(hào)或是減號(hào)中間插入空格。下面每種寫法都可以建立分隔線:
***
* * *
*****
- - -
----------
如果段落上的文字要添加刪除線,只需要在文字的兩端加上兩個(gè)波浪線 ~~ 即可,實(shí)例如下:
~~BAIDU.COM~~
下劃線可以通過(guò) HTML 的 <u> 標(biāo)簽來(lái)實(shí)現(xiàn):
<u>帶下劃線文本</u>
Markdown 支持有序列表和無(wú)序列表。無(wú)序列表使用星號(hào)(*)、加號(hào)(+)或是減號(hào)(-)作為列表標(biāo)記:
* 第一項(xiàng)
* 第二項(xiàng)
* 第三項(xiàng)
+ 第一項(xiàng)
+ 第二項(xiàng)
+ 第三項(xiàng)
- 第一項(xiàng)
- 第二項(xiàng)
- 第三項(xiàng)
有序列表使用數(shù)字并加上 . 號(hào)來(lái)表示,如:
1. 第一項(xiàng)
2. 第二項(xiàng)
3. 第三項(xiàng)
列表嵌套只需在子列表中的選項(xiàng)添加四個(gè)空格即可:
1. 第一項(xiàng):
- 第一項(xiàng)嵌套的第一個(gè)元素
- 第一項(xiàng)嵌套的第二個(gè)元素
2. 第二項(xiàng):
- 第二項(xiàng)嵌套的第一個(gè)元素
- 第二項(xiàng)嵌套的第一個(gè)元素
Markdown 區(qū)塊引用是在段落開(kāi)頭使用 > 符號(hào) ,然后后面緊跟一個(gè)空格符號(hào):
> 區(qū)塊引用
> 菜鳥(niǎo)教程
> 學(xué)的不僅是技術(shù)更是夢(mèng)想
顯示結(jié)果如下:
另外區(qū)塊是可以嵌套的,一個(gè) > 符號(hào)是最外層,兩個(gè) > 符號(hào)是第一層嵌套,以此類推退:
> 最外層
> > 第一層嵌套
> > > 第二層嵌套
顯示結(jié)果如下:
區(qū)塊中使用列表實(shí)例如下:
> 區(qū)塊中使用列表
> 1. 第一項(xiàng)
> 2. 第二項(xiàng)
> + 第一項(xiàng)
> + 第二項(xiàng)
> + 第三項(xiàng)
顯示結(jié)果如下:
如果要在列表項(xiàng)目?jī)?nèi)放進(jìn)區(qū)塊,那么就需要在 > 前添加四個(gè)空格的縮進(jìn)。
區(qū)塊中使用列表實(shí)例如下:
* 第一項(xiàng)
> 菜鳥(niǎo)教程
> 學(xué)的不僅是技術(shù)更是夢(mèng)想
* 第二項(xiàng)
顯示結(jié)果如下:
如果是段落上的一個(gè)函數(shù)或片段的代碼可以用反引號(hào)把它包起來(lái)(`),例如:
`printf()` 函數(shù)
顯示結(jié)果如下:
代碼區(qū)塊使用 4 個(gè)空格或者一個(gè)制表符(Tab 鍵)。
實(shí)例如下:
顯示結(jié)果如下:
你也可以用 ``` 包裹一段代碼,并指定一種語(yǔ)言(也可以不指定):
```javascript
$(document).ready(function () {
alert('RUNOOB');
});
```
顯示結(jié)果如下:
鏈接使用方法如下:
[鏈接名稱](鏈接地址)
或者
<鏈接地址>
例如:
這是一個(gè)鏈接 [菜鳥(niǎo)教程](https://www.runoob.com)
顯示結(jié)果如下:
直接使用鏈接地址:
<https://www.runoob.com>
顯示結(jié)果如下:
鏈接也可以用變量來(lái)代替,文檔末尾附帶變量地址:
這個(gè)鏈接用 1 作為網(wǎng)址變量 [Google][1]
這個(gè)鏈接用 runoob 作為網(wǎng)址變量 [Runoob][runoob]
然后在文檔的結(jié)尾為變量賦值(網(wǎng)址)
[1]: http://www.google.com/
[runoob]: http://www.runoob.com/
顯示結(jié)果如下:
Markdown 圖片語(yǔ)法格式如下:

題")
開(kāi)頭一個(gè)感嘆號(hào) !
接著一個(gè)方括號(hào),里面放上圖片的替代文字
接著一個(gè)普通括號(hào),里面放上圖片的網(wǎng)址,最后還可以用引號(hào)包住并加上選擇性的 'title' 屬性的文字。
使用實(shí)例:


顯示結(jié)果如下:
當(dāng)然,你也可以像網(wǎng)址那樣對(duì)圖片網(wǎng)址使用變量:
這個(gè)鏈接用 1 作為網(wǎng)址變量 [RUNOOB][1].
然后在文檔的結(jié)尾位變量賦值(網(wǎng)址)
[1]: http://static.runoob.com/images/runoob-logo.png
顯示結(jié)果如下:
Markdown 還沒(méi)有辦法指定圖片的高度與寬度,如果你需要的話,你可以使用普通的 <img> 標(biāo)簽。
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">
顯示結(jié)果如下:
Markdown 制作表格使用 | 來(lái)分隔不同的單元格,使用 - 來(lái)分隔表頭和其他行。
語(yǔ)法格式如下:
| 表頭 | 表頭 |
| ---- | ---- |
| 單元格 | 單元格 |
| 單元格 | 單元格 |
以上代碼顯示結(jié)果如下:
對(duì)齊方式
我們可以設(shè)置表格的對(duì)齊方式:
-: 設(shè)置內(nèi)容和標(biāo)題欄居右對(duì)齊。
:- 設(shè)置內(nèi)容和標(biāo)題欄居左對(duì)齊。
:-: 設(shè)置內(nèi)容和標(biāo)題欄居中對(duì)齊。
實(shí)例如下:
| 左對(duì)齊 | 右對(duì)齊 | 居中對(duì)齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
以上代碼顯示結(jié)果如下:
不在 Markdown 涵蓋范圍之內(nèi)的標(biāo)簽,都可以直接在文檔里面用 HTML 撰寫。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦
輸出結(jié)果為:
則表達(dá)式是一個(gè)十分強(qiáng)大的工具,可以完成對(duì)字符串的模式匹配以及提取工作,在很多工程中都被廣泛使用,但是我之前對(duì)于Python正則表達(dá)式模塊re的使用都沒(méi)有進(jìn)行一些深入學(xué)習(xí),對(duì)原始字符串之類的了解也比較淺顯,之前有個(gè)同學(xué)問(wèn)到我關(guān)于反斜線\在正則中的一些表現(xiàn)的時(shí)候我也迷惑了,跟周圍人討論后上StackOverflow問(wèn)了一番,對(duì)這方面又多了一些了解,今天跟大家分享。
我們知道,反斜線\在字符串以及正則表達(dá)式中都是完成轉(zhuǎn)義的工作,比如我有一個(gè)字符串s1:
現(xiàn)在這個(gè)字符串s1內(nèi)容為123,如果我想在字符串中保留一個(gè)單引號(hào)',那么我可能的一種做法是使用雙引號(hào)來(lái)包含內(nèi)容,字符串s2:
Python中的單引號(hào)'和雙引號(hào)'其實(shí)都可以用來(lái)指示字符串,我們?cè)诖颂幨褂秒p引號(hào)而不是單引號(hào),原因是因?yàn)槿绻褂脝我?hào)Python解釋器將會(huì)無(wú)法對(duì)這條語(yǔ)句進(jìn)行正常解釋,因?yàn)榫o跟2之后的'被用來(lái)指示字符串結(jié)束,然而后面還剩下3這個(gè)字符,所以會(huì)引發(fā)Syntax Error:
但是,只是使用語(yǔ)句中不包含的那種引號(hào)來(lái)指示字符串有時(shí)候是行不通的,因?yàn)橛袝r(shí)候一個(gè)字符串可能同時(shí)包含單引號(hào)和雙引號(hào),比如字符串1"2'3,所以這時(shí)候我們需要使用反斜線\來(lái)對(duì)內(nèi)容進(jìn)行轉(zhuǎn)義,因此對(duì)于字符串1"2'3,我們可以采用如下表示:
注意我們并沒(méi)有對(duì)字符串內(nèi)容中的雙引號(hào)"進(jìn)行轉(zhuǎn)義,原因同上,字符串使用單引號(hào)指示的,因此雙引號(hào)只會(huì)被認(rèn)為是一個(gè)普通的字符。對(duì)于字符串內(nèi)部的單引號(hào)',為了讓解釋器得知它是一個(gè)普通字符,我們?cè)谄淝懊嬖黾恿艘粋€(gè)反斜線\,\'組合起來(lái)的意思是對(duì)反斜線后面的字符'進(jìn)行轉(zhuǎn)義,可以這樣理解,通過(guò)添加一個(gè)反斜線\,對(duì)于\',你告訴了解釋器:不要按照普通的方式去解釋這個(gè)字符',這樣解釋器就能正確地完成對(duì)該字符串的解釋。
有編程基礎(chǔ)的讀者應(yīng)該會(huì)知道轉(zhuǎn)義這一概念廣泛存在于很多編程語(yǔ)言中,對(duì)\n、\r等字符應(yīng)該有一定了解,類比前面的解釋,\n表示:不要按照普通的方式去解釋這個(gè)字符n。
進(jìn)一步理解,假設(shè)我們從鍵盤輸入了字符串:abc\nde,一共輸入了7個(gè)字符,這7個(gè)字符經(jīng)過(guò)Python解釋器解釋,兩個(gè)字符\和n將會(huì)被轉(zhuǎn)義成一個(gè)字符\n,請(qǐng)?zhí)貏e注意這一點(diǎn),雖然從表面上看是兩個(gè)字符,但其實(shí)\n是一個(gè)特殊的字符,這一點(diǎn)我們可以從以下代碼看出:
有了這些基礎(chǔ),下面我們進(jìn)入到正則的部分。
因?yàn)橛辛薖ython解釋器首先對(duì)字符串的轉(zhuǎn)義,所以正則表達(dá)式模塊re看到的和你輸入的可能有所不同,比如,\n在字符串層被轉(zhuǎn)義成一個(gè)換行字符,然后re看到的是字符\n而不是\和n兩個(gè)字符,看以下代碼:
以上代碼首先定義了一個(gè)前文提到的字符串s,然后使用re模塊的search方法搜索,然后要搜索的字符串是\n,注意我們輸入的是字符\和字符n,然后經(jīng)過(guò)Python解釋器的解釋實(shí)際在內(nèi)存中的是一個(gè)\n字符,因此re模塊看到的是只有一個(gè)字符的字符串\n,而不是兩個(gè)字符,最后完成搜索。
如果我們想匹配字符串\\n,應(yīng)該怎么輸入模式呢?,一種方法是:
對(duì)于字符串\\n,它的內(nèi)容其實(shí)是一個(gè)普通的\字符和一個(gè)換行字符\n,對(duì)于我們輸入的匹配模式\\n,首先經(jīng)過(guò)Python解釋器的字符串解釋,變成了兩個(gè)普通的\字符和一個(gè)換行字符\n,然后這些內(nèi)容通過(guò)re模塊的compile方法,compile方法發(fā)現(xiàn)有兩個(gè)連續(xù)的\符號(hào),因此將在接下來(lái)的匹配中匹配一個(gè)普通的\字符(請(qǐng)注意理解這一點(diǎn)),而\n字符將會(huì)匹配一個(gè)\n字符,因此該模式的匹配內(nèi)容是字符串中的一個(gè)普通\字符和一個(gè)\n字符。當(dāng)然,寫這么多反斜線顯得十分麻煩,所以Python也提供了一種方便的方式,即原始字符串,其格式為在字符串前添加一個(gè)r字符:r'content',通過(guò)這樣的書寫方式,Python解釋器將使用不同的規(guī)則來(lái)解釋轉(zhuǎn)義(原始字符串不能以\符號(hào)結(jié)尾)。因此上述模式可以簡(jiǎn)化為:
讓我們?cè)倩氐狡胀ㄗ址紤]以下代碼:
對(duì)于模式\\\n,經(jīng)過(guò)Python解釋器的解釋將變成一個(gè)普通’`字符和一個(gè)換行字符\n,re模塊的compile方法將會(huì)看到以上解釋結(jié)果,然后該模式組合起來(lái)就是:匹配一個(gè)換行字符\n的轉(zhuǎn)義字符,也就是對(duì)換行字符\n進(jìn)行轉(zhuǎn)義!結(jié)果是:
相關(guān)連接:
https://docs.python.org/3.6/library/re.html
http://stackoverflow.com/questions/33582162/backslashes-in-python-regular-expressions
本文原文地址: http://youchen.me/2017/04/24/Backslashes-in-Python-Regular-Expressions/
信所有已經(jīng)步入Web前端開(kāi)發(fā)領(lǐng)域的同學(xué)們,對(duì)于HTML超文本標(biāo)記語(yǔ)言都不會(huì)感覺(jué)陌生。即便是正準(zhǔn)備開(kāi)始系統(tǒng)學(xué)習(xí)Web前端開(kāi)發(fā)的同學(xué),也多多少少了解這門語(yǔ)言。HTML語(yǔ)言由W3C互聯(lián)網(wǎng)聯(lián)盟制定其使用規(guī)范并對(duì)外發(fā)布。嚴(yán)格來(lái)說(shuō),HTML并不屬于編程語(yǔ)言,更多的是一種帶有“標(biāo)記”性質(zhì)的代碼集合。HTML語(yǔ)言所書寫的HTML文檔也都是由標(biāo)記或標(biāo)記對(duì)組成的。這種語(yǔ)言沒(méi)有邏輯流程,也就是說(shuō)只要書寫正確,瀏覽器就可以直接將最終的效果呈現(xiàn)在頁(yè)面中。
W3C 互聯(lián)網(wǎng)聯(lián)盟
這里,小海老師想帶領(lǐng)大家重溫HTML語(yǔ)言,對(duì)前端開(kāi)發(fā)中常用的HTML標(biāo)記或標(biāo)記對(duì)進(jìn)行總結(jié),對(duì)于標(biāo)記或標(biāo)記對(duì)中用到的屬性進(jìn)行闡述。對(duì)于已經(jīng)在前端開(kāi)發(fā)領(lǐng)域摸爬滾動(dòng)數(shù)年的老手們,這些內(nèi)容一定是已經(jīng)爛熟于心了,因此這篇文章更適合哪些剛剛接觸這個(gè)行業(yè)的新人們。
首先我要說(shuō)明,本文章只收錄了HTML 4版本中包括的常用標(biāo)記對(duì)和屬性,對(duì)于HTML 5新增的標(biāo)記對(duì)和屬性,小海老師會(huì)在后續(xù)的文章中專門進(jìn)行講解。
1、HTML文檔的基本結(jié)構(gòu):
HTML(Hyper Text Markup Language,超文本標(biāo)記語(yǔ)言)在書寫時(shí)應(yīng)該滿足它最基本的結(jié)構(gòu)。HTML文檔就好像人體的結(jié)構(gòu)似的,被分為“文件頭”和“文件體”兩部分。文件頭利用<head></head>標(biāo)記對(duì)來(lái)實(shí)現(xiàn),文件體利用<body></body>標(biāo)記對(duì)來(lái)實(shí)現(xiàn)。
HTML語(yǔ)言的基本結(jié)構(gòu)
2、HTML對(duì)標(biāo)記和標(biāo)記對(duì)的規(guī)定:
HTML語(yǔ)言中大部分的標(biāo)記都是成對(duì)出現(xiàn)的,被人們稱為“標(biāo)記對(duì)”,書寫時(shí)利用尖括號(hào)(也就是小于號(hào)和大于號(hào))來(lái)進(jìn)行包裹。格式為:
<標(biāo)記對(duì)></標(biāo)記對(duì)>
為了和早期的HTML版本兼容,W3C(World Wide Web Consortium,互聯(lián)網(wǎng)聯(lián)盟)在制定HTML標(biāo)準(zhǔn)的同時(shí)還保留了一小部分不成對(duì)的標(biāo)記。因?yàn)椴怀蓪?duì),所以被人們稱為“標(biāo)記”,書寫時(shí)在標(biāo)記的結(jié)束位置應(yīng)該添加一個(gè)反斜杠。格式為:
<標(biāo)記 />
3、HTML對(duì)屬性的規(guī)定:
屬性是為了拓展標(biāo)記的功能書寫在起始標(biāo)記中的,屬性分為“屬性名”和“屬性值”兩部分。屬性之間利用空格隔開(kāi),屬性值應(yīng)該用雙引號(hào)引住,屬性名和屬性值之間利用等號(hào)連接。帶有屬性的標(biāo)記對(duì)格式為:
<標(biāo)記 屬性名1=“屬性值1” 屬性名2=“屬性值2”> </標(biāo)記>
說(shuō)到這里,我們應(yīng)該繼續(xù)介紹HTML中包括的常用標(biāo)記對(duì)與其對(duì)應(yīng)的屬性。這里,首先我們將HTML標(biāo)記對(duì)劃分為以下幾類:
HTML結(jié)構(gòu)標(biāo)記
文本段落標(biāo)記
列表標(biāo)記
超級(jí)鏈接標(biāo)記
圖像標(biāo)記
表格標(biāo)記
表單標(biāo)記
塊標(biāo)記
一、HTML結(jié)構(gòu)標(biāo)記
支撐起HTML文檔結(jié)構(gòu)的標(biāo)記對(duì)包括以下幾個(gè):
<html></html>:所有的HTML代碼必須書寫在該標(biāo)記對(duì)內(nèi)部。
<head></head>:文件頭標(biāo)記對(duì)。
<body></body>:文件體標(biāo)記對(duì)。
<title></title>:文檔標(biāo)題標(biāo)記對(duì)。
<meta />:元信息標(biāo)記。
<link />:用于加載外部CSS文件的標(biāo)記。
<style></style>:用于書寫內(nèi)部CSS代碼的標(biāo)記對(duì)。
<script></script>:用于書寫或加載腳本代碼的標(biāo)記對(duì)。
HTML 結(jié)構(gòu)標(biāo)記
下面羅列了一些常用的結(jié)構(gòu)用法:
1、加載字符集:<meta charset=“utf-8”/>
2、加載地址欄圖標(biāo):<link rel=“shortcut icon” href=“ico_URL” />
3、加載外部CSS文件:<link rel=“stylesheet” type=“text/css” href=“*.css” />
4、加載js文件:<script type=“text/javascript” src=“*.js”></script>
二、文本段落標(biāo)記
用于在頁(yè)面中輸入文本和段落的標(biāo)記對(duì)包括以下幾個(gè):
<h1></h1>:標(biāo)題標(biāo)記對(duì)。共有六個(gè),<h1>到<h6>。
<p></p>:段落標(biāo)記對(duì)。
<font></font>:字體標(biāo)記對(duì)。
<pre></pre>:預(yù)格式化文本標(biāo)記對(duì)。
<center></center>:居中標(biāo)記對(duì)。
<xmp></xmp>:忽略HTML標(biāo)簽標(biāo)記對(duì)。
<!--注釋內(nèi)容-->:注釋標(biāo)記。
文本段落標(biāo)記
除了上述標(biāo)記對(duì)之外,HTML還提供了一部分代碼用于在頁(yè)面中輸入特殊字符。這里我列舉了一部分常用的特殊字符,可以從下圖中看到。
特殊符號(hào)的表示
同時(shí),HTML還提供了一組有關(guān)文本修飾的標(biāo)記對(duì),可以從下圖中看到。
文本修飾標(biāo)記對(duì)
三、列表標(biāo)記
用于在頁(yè)面中顯示列表的標(biāo)記對(duì)包括以下幾個(gè):
<ul></ul>:用于實(shí)現(xiàn)無(wú)序列表的標(biāo)記對(duì)。
<ol></ol>:用于實(shí)現(xiàn)有序列表的標(biāo)記對(duì)。
<li></li>:用于實(shí)現(xiàn)無(wú)序列表和有序列表列表項(xiàng)的標(biāo)記對(duì)。
<dl></dl>:用于實(shí)現(xiàn)定義列表的標(biāo)記對(duì)。
<dt></dt>:用于在定義列表列表項(xiàng)中實(shí)現(xiàn)定義名詞的標(biāo)記對(duì)。
<dd></dd>:用于在定義列表列表項(xiàng)中對(duì)定義名詞進(jìn)行解釋的標(biāo)記對(duì)。
列表標(biāo)記對(duì)
四、超級(jí)鏈接
用于在頁(yè)面中實(shí)現(xiàn)超級(jí)鏈接的標(biāo)記對(duì)只有一個(gè):
<a></a>:實(shí)現(xiàn)超級(jí)鏈接的標(biāo)記對(duì)。
超級(jí)鏈接標(biāo)記對(duì)有以下常用的屬性:
href:用于指定超級(jí)鏈接的目標(biāo)地址。
title:用于指定當(dāng)鼠標(biāo)經(jīng)過(guò)超級(jí)鏈接時(shí)給出的提示語(yǔ)。
target:用于指定打開(kāi)鏈接地址頁(yè)面的方式。
name:用于指定錨的名稱。
超級(jí)鏈接標(biāo)記對(duì)的屬性
五、圖像
用于在頁(yè)面中實(shí)現(xiàn)圖像的標(biāo)記只有一個(gè):
<img />:實(shí)現(xiàn)圖像的標(biāo)記。
圖像標(biāo)記有以下常用的屬性:
src:用于指定圖片所在的路徑和文件名。
width:用于指定圖片的寬度,單位為像素。
height:用于指定圖片的高度,單位為像素。
border:用于指定圖片的邊框粗細(xì),單位為像素。
alt:用于指定圖片的替代文本。
align:用于指定圖片相對(duì)于周圍元素的對(duì)齊方式。
vspace:用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的垂直距離。
hspace:用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的水平距離。
圖像標(biāo)記
由于篇幅問(wèn)題,以上只是HTML常用標(biāo)記對(duì)和屬性的第一部分,接下來(lái)我還會(huì)繼續(xù)發(fā)布第二部分,供廣大前端愛(ài)好者學(xué)習(xí)與參考。
由于考慮到大部分人對(duì)HTML語(yǔ)言的基本使用還是比較熟練的,所以本文僅僅是單純的列出了標(biāo)記對(duì)的名稱和屬性名稱,并沒(méi)有詳細(xì)的講解這些標(biāo)記對(duì)和屬性的使用方法。如果您大部分內(nèi)容都是已經(jīng)掌握了的,甚至是已經(jīng)達(dá)到熟練使用的程度,可以略讀本文甚至忽略本文。如果您剛剛涉足HTML語(yǔ)言,對(duì)本文這種帶有列舉性質(zhì)的具體使用方法并不清除,可以私信我,我可以為您免費(fèi)發(fā)一份我自己編寫的關(guān)于HTML語(yǔ)言較為詳盡的PDF教材。歡迎廣大學(xué)習(xí)者索取。
【未完待續(xù)】
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。