HTML
HTML指的是超文本標(biāo)記語言(Hyper Text Markip Language),它不是一種編程語言而是一種標(biāo)記語言伊脓,通過使用標(biāo)簽來描述網(wǎng)頁。
HTML是網(wǎng)頁的骨架,也是網(wǎng)頁的基礎(chǔ)溺森,作為標(biāo)記性語言具體有如下一些用途
? ? ? ?定義了文檔的信息
<title>? ? ? ? ? 定義了文檔的標(biāo)題
<base>? ? ? ? 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link>? ? ? ? ? ?定義了一個文檔和外部資源之間的關(guān)系
<meta>? ? ? ? 定義了HTML文檔中的元數(shù)據(jù)
<script>? ? ? ? 定義了客戶端的腳本文件
<style>? ? ? ? ? 定義了HTML文檔的樣式文件
CSS
簡介
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計算機語言巫橄。CSS不僅可以靜態(tài)地修飾網(wǎng)頁淘邻,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制湘换,支持幾乎所有的字體字號樣式宾舅,擁有對網(wǎng)頁對象和模型樣式編輯的能力。
發(fā)展歷程
1990年彩倚,Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web筹我。1994年,Web真正走出實驗室帆离。[3]
從HTML被發(fā)明開始蔬蕊,樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制哥谷。最初的HTML只包含很少的顯示屬性岸夯。
隨著HTML的成長,為了滿足頁面設(shè)計者的要求们妥,HTML添加了很多顯示功能猜扮。但是隨著這些功能的增加,HTML變的越來越雜亂监婶,而且HTML頁面也越來越臃腫旅赢。于是CSS便誕生了。
1994年哈坤·利提出了CSS的最初建議压储。而當(dāng)時伯特·波斯(Bert Bos)正在設(shè)計一個名為Argo的瀏覽器鲜漩,于是他們決定一起設(shè)計CSS。
其實當(dāng)時在互聯(lián)網(wǎng)界已經(jīng)有過一些統(tǒng)一樣式表語言的建議了集惋,但CSS是第一個含有“層疊”豐意的樣式表語言孕似。在CSS中,一個文件的樣式可以從其他的樣式表中繼承刮刑。讀者在有些地方可以使用他自己更喜歡的樣式喉祭,在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計雷绢,混合每個人的愛好泛烙。
哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議,1995年的www網(wǎng)絡(luò)會議上CSS又一次被提出翘紊,博斯演示了Argo瀏覽器支持CSS的例子蔽氨,哈肯也展示了支持CSS的Arena瀏覽器。
同年,W3C組織(World WideWeb Consortium)成立鹉究,CSS的創(chuàng)作成員全部成為了W3C的工作小組并且全力以赴負(fù)責(zé)研發(fā)CSS標(biāo)準(zhǔn)宇立,層疊樣式表的開發(fā)終于走上正軌。有越來越多的成員參與其中自赔,例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon)妈嘹,他的努力最終令I(lǐng)nternet Explorer瀏覽器支持CSS標(biāo)準(zhǔn)。哈坤绍妨、波斯和其他一些人是這個項目的主要技術(shù)負(fù)責(zé)人润脸。1996年底,CSS初稿已經(jīng)完成他去,同年12月毙驯,層疊樣式表的第一份正式標(biāo)準(zhǔn)(Cascading style Sheets Level 1)完成,成為w3c的推薦標(biāo)準(zhǔn)孤页。
1997年初尔苦,W3C組織負(fù)責(zé)CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結(jié)果組成了1998年5月出版的CSS規(guī)范第二版行施。
語言特點
CSS為HTML標(biāo)記語言提供了一種樣式描述允坚,定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破蛾号。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素稠项。
總體來說,CSS具有以下特點:
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀鲜结,以及設(shè)置文本和背景屬性的能力展运;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離精刷,以及元素邊框與元素內(nèi)容間的距離拗胜;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果怒允。
易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中埂软,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個專門的CSS文件中纫事,以供HTML頁面引用勘畔。總之丽惶,CSS樣式表可以將所有的樣式聲明統(tǒng)一存放炫七,進(jìn)行統(tǒng)一管理。
另外钾唬,可以將相同樣式的元素進(jìn)行歸類万哪,使用同一個樣式進(jìn)行定義侠驯,也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中,也可以將一個CSS樣式指定到某個頁面元素中壤圃。如果要修改樣式陵霉,我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
多頁面應(yīng)用
CSS樣式表可以單獨存放在一個CSS文件中伍绳,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件乍桂,在任何頁面文件中都可以將其引用冲杀。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。
層疊
簡單的說睹酌,層疊就是對一個元素多次設(shè)置同一個樣式权谁,這將使用最后一次設(shè)置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表憋沿,而某些頁面中的某些元素想使用其他樣式旺芽,就可以針對這些樣式單獨定義一個樣式表應(yīng)用到頁面中。這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫辐啄,在瀏覽器中看到的將是最后面設(shè)置的樣式效果采章。
頁面壓縮
在使用HTML定義頁面效果的網(wǎng)站中,往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式壶辜,這樣做的后果就是會產(chǎn)生大量的HTML標(biāo)簽悯舟,從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中砸民,可以大大的減小頁面的體積抵怎,這樣在加載頁面時使用的時間也會大大的減少。另外岭参,CSS樣式表的復(fù)用更大程度的縮減了頁面的體積反惕,減少下載的時間。
語言標(biāo)準(zhǔn)
在CSS
2.1規(guī)范中演侯,識別符(包括選擇符中的元素名姿染、類、ID)只能包含A~Z蚌本、a~z盔粹、0~9等字符,加上連字符“-”程癌、下劃線“_”舷嗡。識別符不能以數(shù)字開頭,以連字符和下劃線開頭也是不允許的嵌莉。只有屬性进萄、屬性值、單位、偽類中鼠、偽元素和“@”規(guī)則可以由連字符“-”開頭可婶。同時,其他元素名稱援雇、類和ID標(biāo)識符也不允許用連字符開頭矛渴。
CSS的識別符也需要用反斜杠“\”規(guī)避特殊字符,這些規(guī)避字符遵循IS010646規(guī)范惫搏。特殊字符的規(guī)避方法有兩種:第一種方法是遇到特殊字符則在這些字符前直接添加反斜杠具温,例如,“AT&T”變?yōu)椤癆T\&T”筐赔;另一種方法為用反斜杠和Unicode或IS010646等值的十六進(jìn)制數(shù)值一起铣猩,規(guī)避特殊字符,例如茴丰,“AT&T”變?yōu)椤癆T\26T”达皿。
技術(shù)應(yīng)用
網(wǎng)站
在HTML文件里加一個超級鏈接, 引入外部的 CSS 文檔。這個方法最方便管理整個網(wǎng)站的網(wǎng)頁風(fēng)格, 它讓網(wǎng)頁的文字內(nèi)容與版面設(shè)計分開贿肩。只要在一個CSS文檔內(nèi)(擴展名為 CSS) 定義好網(wǎng)頁的風(fēng)格,然后在網(wǎng)頁中加一個超級鏈接連接到該文檔,那么網(wǎng)頁就會按照在CSS文檔內(nèi)定義好的風(fēng)格顯示出來峦椰。
MARKDOWN
簡介
Markdown是一種輕量級標(biāo)記語言,創(chuàng)始人為約翰·格魯伯(英語:John Gruber)尸曼。它允許人們使用易讀易寫的純文本格式編寫文檔们何,然后轉(zhuǎn)換成有效的XHTML(或者HTML)文檔。這種語言吸收了很多在電子郵件中已有的純文本標(biāo)記的特性控轿。
由于Markdown的輕量化冤竹、易讀易寫特性,并且對于圖片茬射,圖表鹦蠕、數(shù)學(xué)式都有支持,目前許多網(wǎng)站都廣泛使用Markdown來撰寫幫助文檔或是用于論壇上發(fā)表消息在抛。 如GitHub钟病、Reddit、Diaspora刚梭、Stack Exchange肠阱、OpenStreetMap、SourceForge朴读、簡書等屹徘,甚至還能被使用來撰寫電子書。
發(fā)展歷程
John Gruber在2004年創(chuàng)造了Markdown語言衅金,在語法上有很大一部分是跟亞倫·斯沃茨(Aaron Swartz)共同合作的噪伊。這個語言的目的是希望大家使用“易于閱讀簿煌、易于撰寫的純文字格式,并選擇性的轉(zhuǎn)換成有效的XHTML(或是HTML)”鉴吹。 其中最重要的設(shè)計是可讀性姨伟,也就是說這個語言應(yīng)該要能直接在字面上的被閱讀,而不用被一些格式化指令標(biāo)記(像是RTF與HTML)豆励。 因此夺荒,它是現(xiàn)行電子郵件標(biāo)記格式的慣例,雖然它也借鑒了很多早期的標(biāo)記語言肆糕,如:Setext般堆、Texile、reStructuredText诚啃。
標(biāo)準(zhǔn)化
Markdown已經(jīng)成為典型的轉(zhuǎn)換為HTML的非正式規(guī)范[1]和參考實現(xiàn)。隨著時間的推移私沮,出現(xiàn)了許多Markdown實現(xiàn)始赎。人們開發(fā)這些主要是由于在基本語法之上需要額外的功能 - 例如表格,腳注仔燕,定義列表(技術(shù)上的HTML描述列表)和HTML塊內(nèi)的Markdown造垛。其中一些行為偏離了最開始的參考實現(xiàn)。與此同時晰搀,非正式規(guī)范中的一些含糊不清引起了人們的注意[2]五辽。這些問題促使Markdown解析器的一些開發(fā)人員努力實現(xiàn)標(biāo)準(zhǔn)化。
2016年3月發(fā)布了RFC 7763和RFC 7764外恕。RFC 7763 從原始變體引入了MIME類型 text/markdown杆逗。RFC 7764討論并注冊了MultiMarkdown、GitHub Flavored Markdown (GFM)鳞疲、Pandoc罪郊、CommonMark及Markdown等變體。[3]
CommonMark
從2012年開始尚洽,包括Jeff Atwood和John MacFarlane在內(nèi)的一群人啟動了標(biāo)準(zhǔn)化工作悔橄。[4]一個社區(qū)網(wǎng)站旨在記錄可用于文檔作者和開發(fā)人員的各種工具和資源,以及各種markdown實現(xiàn)的實現(xiàn)者腺毫。[5]2014年9月癣疟,Gruber反對在這一工作中繼續(xù)使用“Markdown”這個名字,其被更名為CommonMark潮酒。[6]CommonMark發(fā)布了規(guī)范睛挚、參考實現(xiàn)和測試包的幾個版本,并計劃在2018年宣布最終的1.0規(guī)范和測試包澈灼。[7]
GFM
2017年竞川,GitHub發(fā)布了基于CommonMark的GitHub Flavored Markdown(GFM)的正式規(guī)范店溢。[8]除了表格、刪除線委乌、自動鏈接和任務(wù)列表被GitHub規(guī)范作為擴展添加之外床牧,它遵循CommonMark規(guī)范。 [9]GitHub還相應(yīng)地更改了其站點上使用的解析器遭贸,這要求更改某些文檔 - 例如戈咳,GFM現(xiàn)在要求創(chuàng)建標(biāo)題的哈希符號由空格字符分隔。
Markdown Extra
Markdown
Extra是一種輕量級標(biāo)記語言壕吹,基于在PHP(最初)著蛙、Python和Ruby中實現(xiàn)的Markdown。它添加了普通Markdown語法不具備的功能耳贬。內(nèi)容管理系統(tǒng)支持Markdown
Extra踏堡,例如Drupal,TYPO3和MediaWiki咒劲。
它為Markdown添加了以下功能:
HTML塊內(nèi)的markdown標(biāo)記
具有id / class屬性的元素
圍欄代碼塊
表格
定義清單
腳注
縮寫
用途
世界上最流行的博客平臺WordPress和大型CMS如Joomla顷蟆、Drupal都能很好的支持Markdown。完全采用Markdown編輯器的博客平臺有Ghost和Typecho等腐魂。
用于編寫說文檔帐偎,以“README.md”的文件名保存在軟件的目錄下面。
Markdown可以快速轉(zhuǎn)化為演講PPT蛔屹、Word產(chǎn)品文檔甚至是用非常少量的代碼完成最小可用原型
編輯器
Windows
Typora削樊、Simplenote、Laverna兔毒、Boostnote漫贞、Inkdrop、Cmd Markdown眼刃、馬克飛象绕辖、Yu Writer、看云擂红、有道云筆記仪际、為知筆記、螞蟻筆記
MacOS
Typora昵骤、Typed树碱、Ulysses、Falcon
Linux
Atom变秦、GNU Emacs成榜、Remarkable、Haroopad蹦玫、ReText赎婚、UberWriter刘绣、Mark My Words
瀏覽器插件(Chorme內(nèi)核)
Markdown Preview、Markdown Here
Android
Draft挣输、JotterPad X纬凤、堅果云Markdown
iOS
Byword、simplenote撩嚼、堅果云Markdown