如果我在用HTML+CSS編程,那麼,我算是名開發人員嗎?
有好多次,別人都說我算不上程式設計師,因為我在用HTML + CSS編程。我非常傷心,因為別人都不認為我是開發人員。我們討論了好幾個小時,網上也有很多關於這個話題的討論。但仍然還有人否認這一點,那麼就讓我們在本文中好好探討一番。
在深入探討之前,讓我們先來了解一下HTML + CSS的基礎知識。
HTML:
超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標準標記語言。
這意味著你需要使用HTML來構造顯示在網頁上的文檔。下面是一個基本的HTML頁面的例子:
<!DOCTYPE html><html><head> <!-- Metadata goes here --></head><body> <!-- Page content goes here --></body></html>
除了HTML之外,你還可以利用CSS來美化頁面。這就是為什麼我們會結合二者使用。
CSS:
層疊樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的計算機語言。
下面是一個CSS文件的示例:
*{ box-sizing: border-box; max-width: 100%;}body{ font-size: 1.25rem; padding-bottom: 70px; background: #fff;}
1. 程式語言的結構
不止一次聽說有人認為HTML + CSS沒有編程結構。那麼編程結構是什麼?經過一番搜索後,我發現,現代程式語言的編程結構幾乎都如出一轍。控制結構和數據結構。
控制結構
控制結構指的是,分析變量並根據給定的參數選擇程序執行順序的一塊程序。
控制結構包括順序控制、條件控制和循環控制。舉例說明。我使用Ruby語言來書寫示例。Ruby很接近英語,非常易於理解。
順序控制:逐條執行的指令。在下面的示例中,我們將執行一系列指令。
# 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 userputs "What is your age?" ## Get the user input and store it in age. Type 14age = gets.chomp.to_i## Print this message "You are 14 year's old" to the userputs "You are #{age} year's old"
條件控制:如果條件為true,則執行此處的代碼。程序根據條件的結果,決定要執行的代碼塊。
# 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 16if 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
上述指定的代碼塊將循環執行多次,直到條件成立為止。示例中的條件是「counter」等於5。因此,這則消息輸出了5次。
# Loop Control Structure## Set a variable "counter" to zerocounter = 1## Iterate through the loop as long as "counter" is less than 5while 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+=1end
那麼,HTML+ CSS有這樣的控制結構嗎?你怎麼看?
數據結構
什麼是數據結構?
數據結構(英語:data structure)是計算機中存儲、組織數據的方式。
簡單來說,數據結構表示組織數據、定義數據類型以及操作數據的方法。大多數程式語言都有不同類型的數據,包括字符串、整數、布爾值、數組、對象...
那麼,HTML + CSS也有這種數據結構嗎?此外,還有人說HTML + CSS不具備圖靈完備性——那麼,圖靈完備性又是什麼?
簡而言之,在計算理論里,如果一系列操作數據的規則(如指令集、程式語言、細胞自動機)可以用來模擬單帶圖靈機,那麼它是圖靈完備的。
圖靈機是英國數學家艾倫·圖靈於1936年提出的一種將人的計算行為進行抽象的數學邏輯機,其更抽象的意義為一種計算模型,可以看作等價於任何有限邏輯數學過程的終極強大邏輯機器。
圖靈機是一個規則、狀態和轉換的系統,並不是指真正的機器。
如此說來,HTML + CSS確實不具備圖靈完備性。因為HTML + CSS無法更改系統狀態。也無法做出決策或根據輸入更改狀態……
那麼,我還能說HTML + CSS是程式語言嗎?
2. CSS的控制結構
CSS有自己的控制結構方式。下面是一些例子。
順序控制
與其他程式語言一樣,我們可以在CSS中逐行執行指令。
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}
在上述代碼中,第一條指令被覆蓋, 所以最後的結果是:
條件控制
@media screen and (max-width: 567px) { // Style 1}@media screen and (max-width: 900px) { // style 2}
在上述代碼中,如果設備螢幕的最大寬度為567px,則應用樣式1;如果最大寬度為900px,則應用樣式2。因此,這就是一個條件控制。
@supports (display: flex) { navbar{ display:flex; }}
對於上述navbar的樣式代碼,如果用戶的設備支持,則顯示屬性將設置為「flex」。你甚至可以使用關鍵字「not」書寫false語句:
@supports not (display: flex) { div { float: left; } /* alternative styles */}
循環控制
你是認真的嗎?是認真的。CSS也有類似循環的指令。儘管看上去與其他程式語言的循環有所不同。CSS的循環指令沒有「for」循環或「while」循環。讓我們看一下這段代碼:
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;}
第一段代碼告訴瀏覽器循環遍歷「li」元素內所有的「a」元素,然後應用給定的樣式。第二段代碼告訴瀏覽器再循環一遍。如果「a」元素的類為「active」,則應用給定的樣式。因此,我結合使用了循環和條件控制。
現在你是否同意HTML + CSS具有程式語言結構?
哦?你還在繼續閱讀?你還有疑問?那麼就讓我來一一解答吧。
如果有人說CSS具備圖靈完備性,你會說什麼?你無言以對,是嗎?事實上,有一位名叫Eli Fox-Epstein的名人證明了這一點。他進行了一項實驗,並證明HTML + CSS具備圖靈完備性。
所以,你現在可以接受HTML + CSS是一種程式語言了嗎?
HTML + CSS就是當代網頁的「雙俠」。
對於全世界所有的網站而言,無論其伺服器端的語言是什麼,前端都使用了HTML + CSS。
目前為止,網際網路上的網站數目高達17億,供44億用戶使用。而且這個數字還在不斷增長。
這些網站又分為靜態網站和動態網站。靜態網站僅使用HTML + CSS構建。而動態網站還用到了其他語言。
其他語言是什麼意思?
為了讓HTML + CSS大放異彩,你還需要其他的程式語言來潤色。常見的程式語言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動態網站。他們的網站因結合了多種語言而得以蓬勃發展。
那麼,現在你還認為使用HTML+CSS編程的我不算是一名開發人員嗎?