有好多次，別人說(shuō)我算不上程序員，因?yàn)槲以谟肏TML + CSS編程。我非常傷心，因?yàn)閯e人都不認(rèn)為我是開(kāi)發(fā)人員。我們討論了好幾個(gè)小時(shí)，網(wǎng)上也有很多關(guān)于這個(gè)話題的討論。但仍然還有人否認(rèn)這一點(diǎn)，那么就讓我們?cè)诒疚闹泻煤锰接懸环?/p>

在深入探討之前，讓我們先來(lái)了解一下HTML + CSS的基礎(chǔ)知識(shí)。

根據(jù)維基百科：

超文本標(biāo)記語(yǔ)言（英語(yǔ)：HyperText Markup Language，簡(jiǎn)稱(chēng)：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。

這意味著你需要使用HTML來(lái)構(gòu)造顯示在網(wǎng)頁(yè)上的文檔。下面是一個(gè)基本的HTML頁(yè)面的例子：

除了HTML之外，你還可以利用CSS來(lái)美化頁(yè)面。這就是為什么我們會(huì)結(jié)合二者使用。

根據(jù)維基百科：

層疊樣式表（英語(yǔ)：Cascading Style Sheets，縮寫(xiě)：CSS；又稱(chēng)串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、階層式樣式表）是一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言。

下面是一個(gè)CSS文件的示例：

*{ box-sizing: border-box; max-width: 100%; } body{ font-size: 1.25rem; padding-bottom: 70px; background: #fff; }

編程語(yǔ)言的結(jié)構(gòu)

首先，我不止一次聽(tīng)說(shuō)有人認(rèn)為HTML + CSS沒(méi)有編程結(jié)構(gòu)。那么編程結(jié)構(gòu)是什么？經(jīng)過(guò)一番搜索后，我發(fā)現(xiàn)，現(xiàn)代編程語(yǔ)言的編程結(jié)構(gòu)幾乎都如出一轍?？刂平Y(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。別著急，且聽(tīng)我慢慢道來(lái)。

控制結(jié)構(gòu)

控制結(jié)構(gòu)指的是，分析變量并根據(jù)給定的參數(shù)選擇程序執(zhí)行順序的一塊程序。

控制結(jié)構(gòu)包括順序控制、條件控制和循環(huán)控制。下面我來(lái)舉例說(shuō)明。我使用Ruby語(yǔ)言來(lái)書(shū)寫(xiě)示例。別擔(dān)心，Ruby很接近英語(yǔ)，非常易于理解。

順序控制：逐條執(zhí)行的指令。在下面的示例中，我們將執(zhí)行一系列指令。

# Sequences control-structures ## Set a new varibale age to 0. age = 0 ## Then another varibale required_age to 15. required_age = 15 ## Print this message "What is your age?" to the user puts "What is your age?" ## Get the user input and store it in age. Type 14 age = gets.chomp.to_i ## Print this message "You are 14 year's old" to the user puts "You are #{age} year's old"

條件控制：如果條件為true，則執(zhí)行此處的代碼。程序根據(jù)條件的結(jié)果，決定要執(zhí)行的代碼塊。

# Condition Control Structure ## Set a new varibale age to 15. age = 15 ## Then another varibale required_age to 16. required_age = 16 ## check if the user age is less than 16 if age < 16 ## If the condition is checked, print the message "Sorry, you can't pass the driver license!" to the user puts "Sorry, you can't pass the driver license!" else ## If the condition is not checked, print this message "Great! You can pass your driver license" to the user puts "Great! You can pass your driver license" end

上述指定的代碼塊將循環(huán)執(zhí)行多次，直到條件成立為止。示例中的條件是“counter”等于5。因此，這則消息輸出了5次。

# Loop Control Structure ## Set a variable "counter" to zero counter = 1 ## Iterate through the loop as long as "counter" is less than 5 while counter <=5 do ## Print "Get your driver license with LicenseGuru" puts "Get your driver license with LicenseGuru" ## Add 1 to the current value of counter counter+=1 end

那么，HTML+ CSS有這樣的控制結(jié)構(gòu)嗎？你怎么看？

數(shù)據(jù)結(jié)構(gòu)

什么是數(shù)據(jù)結(jié)構(gòu)？維基百科上說(shuō)：

數(shù)據(jù)結(jié)構(gòu)（英語(yǔ)：data structure）是計(jì)算機(jī)中存儲(chǔ)、組織數(shù)據(jù)的方式。

簡(jiǎn)單來(lái)說(shuō)，數(shù)據(jù)結(jié)構(gòu)表示組織數(shù)據(jù)、定義數(shù)據(jù)類(lèi)型以及操作數(shù)據(jù)的方法。大多數(shù)編程語(yǔ)言都有不同類(lèi)型的數(shù)據(jù)，包括字符串、整數(shù)、布爾值、數(shù)組、對(duì)象...

那么，HTML + CSS也有這種數(shù)據(jù)結(jié)構(gòu)嗎？此外，還有人說(shuō)HTML + CSS不具備圖靈完備性——那么，圖靈完備性又是什么？

我的第一反應(yīng)也是發(fā)懵。但經(jīng)過(guò)幾個(gè)小時(shí)的查閱后，我有了大致的了解。

簡(jiǎn)而言之，在計(jì)算理論里，如果一系列操作數(shù)據(jù)的規(guī)則（如指令集、編程語(yǔ)言、細(xì)胞自動(dòng)機(jī)）可以用來(lái)模擬單帶圖靈機(jī)，那么它是圖靈完備的。

圖靈機(jī)是英國(guó)數(shù)學(xué)家艾倫·圖靈于1936年提出的一種將人的計(jì)算行為進(jìn)行抽象的數(shù)學(xué)邏輯機(jī)，其更抽象的意義為一種計(jì)算模型，可以看作等價(jià)于任何有限邏輯數(shù)學(xué)過(guò)程的終極強(qiáng)大邏輯機(jī)器。

圖靈機(jī)是一個(gè)規(guī)則、狀態(tài)和轉(zhuǎn)換的系統(tǒng)，并不是指真正的機(jī)器。

如此說(shuō)來(lái)，HTML + CSS確實(shí)不具備圖靈完備性。因?yàn)镠TML + CSS無(wú)法更改系統(tǒng)狀態(tài)。也無(wú)法做出決策或根據(jù)輸入更改狀態(tài)……

那么，我還能說(shuō)HTML + CSS是編程語(yǔ)言嗎？

CSS的控制結(jié)構(gòu)

是的，你沒(méi)看錯(cuò)，CSS有自己的控制結(jié)構(gòu)方式。下面是一些例子。

順序控制

與其他編程語(yǔ)言一樣，我們可以在CSS中逐行執(zhí)行指令。

body{ // Set the background to white color background:#fff; // Set the font size to 20px font-size: 20px; // Set the background to yellow background:yellow; // Set the font size to 14px font-size:14px }

在上述代碼中，第一條指令被覆蓋， 所以最后的結(jié)果是：

條件控制

@media screen and (max-width: 567px) { // Style 1 } @media screen and (max-width: 900px) { // style 2 }

在上述代碼中，如果設(shè)備屏幕的最大寬度為567px，則應(yīng)用樣式1；如果最大寬度為900px，則應(yīng)用樣式2。因此，這就是一個(gè)條件控制。

@supports (display: flex) { navbar{ display:flex; } }

對(duì)于上述navbar的樣式代碼，如果用戶(hù)的設(shè)備支持，則顯示屬性將設(shè)置為“flex”。你甚至可以使用關(guān)鍵字“not”書(shū)寫(xiě)false語(yǔ)句：

@supports not (display: flex) { div { float: left; } /* alternative styles */ }

循環(huán)控制

你是認(rèn)真的嗎？是認(rèn)真的。CSS也有類(lèi)似循環(huán)的指令。盡管看上去與其他編程語(yǔ)言的循環(huán)有所不同。CSS的循環(huán)指令沒(méi)有“for”循環(huán)或“while”循環(huán)。讓我們看一下這段代碼：

li a{ font-weight:700; display: block; padding: 15px; margin-bottom:10px; background:#333; color:white; text-align: center; text-decoration: none; } li a.active{ background:red; color:white; }

第一段代碼告訴瀏覽器循環(huán)遍歷“l(fā)i”元素內(nèi)所有的“a”元素，然后應(yīng)用給定的樣式。第二段代碼告訴瀏覽器再循環(huán)一遍。如果“a”元素的類(lèi)為“active”，則應(yīng)用給定的樣式。因此，我結(jié)合使用了循環(huán)和條件控制。

現(xiàn)在你是否同意HTML + CSS具有編程語(yǔ)言結(jié)構(gòu)？你同意？那太好了！我們之間達(dá)成了共識(shí)，你可以走了。

哦？你還在繼續(xù)閱讀？你還有疑問(wèn)？那么就讓我來(lái)一一解答吧。

如果有人說(shuō)CSS具備圖靈完備性，你會(huì)說(shuō)什么？你無(wú)言以對(duì)，是嗎？事實(shí)上，有一位名叫Eli Fox-Epstein的名人證明了這一點(diǎn)。他進(jìn)行了一項(xiàng)實(shí)驗(yàn)，并證明HTML + CSS具備圖靈完備性，而這個(gè)故事發(fā)生在2011年。有關(guān)的詳細(xì)信息，請(qǐng)點(diǎn)擊這里（https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete）。

所以，你現(xiàn)在可以接受HTML + CSS是一種編程語(yǔ)言了嗎？

HTML + CSS就是當(dāng)代網(wǎng)頁(yè)的“雙俠”（請(qǐng)參照電影《雙俠》）。

對(duì)于全世界所有的網(wǎng)站而言，無(wú)論其服務(wù)器端的語(yǔ)言是什么，前端都使用了HTML + CSS。

當(dāng)目前為止，互聯(lián)網(wǎng)上的網(wǎng)站數(shù)目高達(dá)17億，供44億用戶(hù)使用。而且這個(gè)數(shù)字還在不斷增長(zhǎng)。

這些網(wǎng)站又分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站。靜態(tài)網(wǎng)站僅使用HTML + CSS構(gòu)建。而動(dòng)態(tài)網(wǎng)站還用到了其他語(yǔ)言。

其他語(yǔ)言是什么意思？

為了讓HTML + CSS大放異彩，你還需要其他的編程語(yǔ)言來(lái)潤(rùn)色。常見(jiàn)的編程語(yǔ)言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動(dòng)態(tài)網(wǎng)站。他們的網(wǎng)站因結(jié)合了多種語(yǔ)言而得以蓬勃發(fā)展。