如果我在用HTML+CSS編程，那么，我能算是名開發(fā)人員嗎？
作者 | Amadou Ibrahim
譯者 | 彎月，責(zé)編 | 郭芮
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有好多次，別人說我算不上程序員，因為我在用HTML + CSS編程。我非常傷心，因為別人都不認(rèn)為我是開發(fā)人員。我們討論了好幾個小時，網(wǎng)上也有很多關(guān)于這個話題的討論。但仍然還有人否認(rèn)這一點，那么就讓我們在本文中好好探討一番。
在深入探討之前，讓我們先來了解一下HTML + CSS的基礎(chǔ)知識。
根據(jù)維基百科：
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。
這意味著你需要使用HTML來構(gòu)造顯示在網(wǎng)頁上的文檔。下面是一個基本的HTML頁面的例子：
<!DOCTYPE html>
< html>
< head>
<!-- metadata goes here -->
</ head>
< body>
<!-- Page content goes here -->
</ body>
</ html>
除了HTML之外，你還可以利用CSS來美化頁面。這就是為什么我們會結(jié)合二者使用。
根據(jù)維基百科：
層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯(lián)樣式表、串接樣式表、階層式樣式表）是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機(jī)語言。
層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯(lián)樣式表、串接樣式表、階層式樣式表）是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機(jī)語言。
下面是一個CSS文件的示例：
*{
box-sizing: border-box; max-width: 100%;
}
body{
font-size: 1.25rem; padding-bottom: 70px;
background: #fff;
}
編程語言的結(jié)構(gòu)
首先，我不止一次聽說有人認(rèn)為HTML + CSS沒有編程結(jié)構(gòu)。那么編程結(jié)構(gòu)是什么？經(jīng)過一番搜索后，我發(fā)現(xiàn)，現(xiàn)代編程語言的編程結(jié)構(gòu)幾乎都如出一轍。控制結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。別著急，且聽我慢慢道來。
控制結(jié)構(gòu)
控制結(jié)構(gòu)指的是，分析變量并根據(jù)給定的參數(shù)選擇程序執(zhí)行順序的一塊程序。
控制結(jié)構(gòu)包括順序控制、條件控制和循環(huán)控制。下面我來舉例說明。我使用Ruby語言來書寫示例。別擔(dān)心，Ruby很接近英語，非常易于理解。
順序控制：逐條執(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
whilecounter <= 5do
## 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)？維基百科上說：
數(shù)據(jù)結(jié)構(gòu)（英語：data structure）是計算機(jī)中存儲、組織數(shù)據(jù)的方式。
數(shù)據(jù)結(jié)構(gòu)（英語：data structure）是計算機(jī)中存儲、組織數(shù)據(jù)的方式。
簡單來說，數(shù)據(jù)結(jié)構(gòu)表示組織數(shù)據(jù)、定義數(shù)據(jù)類型以及操作數(shù)據(jù)的方法。大多數(shù)編程語言都有不同類型的數(shù)據(jù)，包括字符串、整數(shù)、布爾值、數(shù)組、對象...
那么，HTML + CSS也有這種數(shù)據(jù)結(jié)構(gòu)嗎？此外，還有人說HTML + CSS不具備圖靈完備性——那么，圖靈完備性又是什么？
我的第一反應(yīng)也是發(fā)懵。但經(jīng)過幾個小時的查閱后，我有了大致的了解。
簡而言之，在計算理論里，如果一系列操作數(shù)據(jù)的規(guī)則（如指令集、編程語言、細(xì)胞自動機(jī)）可以用來模擬單帶圖靈機(jī)，那么它是圖靈完備的。
圖靈機(jī)是英國數(shù)學(xué)家艾倫·圖靈于1936年提出的一種將人的計算行為進(jìn)行抽象的數(shù)學(xué)邏輯機(jī)，其更抽象的意義為一種計算模型，可以看作等價于任何有限邏輯數(shù)學(xué)過程的終極強(qiáng)大邏輯機(jī)器。
圖靈機(jī)是一個規(guī)則、狀態(tài)和轉(zhuǎn)換的系統(tǒng)，并不是指真正的機(jī)器。
如此說來，HTML + CSS確實不具備圖靈完備性。因為HTML + CSS無法更改系統(tǒng)狀態(tài)。也無法做出決策或根據(jù)輸入更改狀態(tài)……
那么，我還能說HTML + CSS是編程語言嗎？
CSS的控制結(jié)構(gòu)
是的，你沒看錯，CSS有自己的控制結(jié)構(gòu)方式。下面是一些例子。
順序控制
與其他編程語言一樣，我們可以在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é)果是：
條件控制
@mediascreen and(max-width: 567px) {
// Style 1
}
@mediascreen and(max-width: 900px) {
// style 2
}
在上述代碼中，如果設(shè)備屏幕的最大寬度為567px，則應(yīng)用樣式1；如果最大寬度為900px，則應(yīng)用樣式2。因此，這就是一個條件控制。
@ supports(display: flex) {
navbar{
display:flex;
}
}
對于上述navbar的樣式代碼，如果用戶的設(shè)備支持，則顯示屬性將設(shè)置為“flex”。你甚至可以使用關(guān)鍵字“not”書寫false語句：
@ supportsnot (display: flex) {
div{ float: left; }
}
循環(huán)控制
你是認(rèn)真的嗎？是認(rèn)真的。CSS也有類似循環(huán)的指令。盡管看上去與其他編程語言的循環(huán)有所不同。CSS的循環(huán)指令沒有“for”循環(huán)或“while”循環(huán)。讓我們看一下這段代碼：
lia{
font-weight: 700;
display: block;
padding: 15px;
margin-bottom: 10px;
background: #333;
color:white;
text-align: center;
text-decoration: none;
}
lia.active{
background:red;
color:white;
}
第一段代碼告訴瀏覽器循環(huán)遍歷“l(fā)i”元素內(nèi)所有的“a”元素，然后應(yīng)用給定的樣式。第二段代碼告訴瀏覽器再循環(huán)一遍。如果“a”元素的類為“active”，則應(yīng)用給定的樣式。因此，我結(jié)合使用了循環(huán)和條件控制。
現(xiàn)在你是否同意HTML + CSS具有編程語言結(jié)構(gòu)？你同意？那太好了！我們之間達(dá)成了共識，你可以走了。
哦？你還在繼續(xù)閱讀？你還有疑問？那么就讓我來一一解答吧。
所以，你現(xiàn)在可以接受HTML + CSS是一種編程語言了嗎？
HTML + CSS就是當(dāng)代網(wǎng)頁的“雙俠”（請參照電影《雙俠》）。
對于全世界所有的網(wǎng)站而言，無論其服務(wù)器端的語言是什么，前端都使用了HTML + CSS。
當(dāng)目前為止，互聯(lián)網(wǎng)上的網(wǎng)站數(shù)目高達(dá)17億，供44億用戶使用。而且這個數(shù)字還在不斷增長。
這些網(wǎng)站又分為靜態(tài)網(wǎng)站和動態(tài)網(wǎng)站。靜態(tài)網(wǎng)站僅使用HTML + CSS構(gòu)建。而動態(tài)網(wǎng)站還用到了其他語言。
其他語言是什么意思？
為了讓HTML + CSS大放異彩，你還需要其他的編程語言來潤色。常見的編程語言包括PHP、Python、Ruby、Java等等。Facebook、Twitter、Google和Medium都是動態(tài)網(wǎng)站。他們的網(wǎng)站因結(jié)合了多種語言而得以蓬勃發(fā)展。
感謝您的閱讀。如果你有不同的觀點，請在下方留言。
原文：https://medium/swlh/the-most-used-and-unrecognized-programming-languages-b0882e8c8c6f?
