天天看點

HTML + CSS 為何得不到程式設計界的認可?

如果我在用HTML+CSS程式設計,那麼,我能算是名開發人員嗎?

HTML + CSS 為何得不到程式設計界的認可?

作者 | Amadou Ibrahim

譯者 | 彎月,責編 | 郭芮

文章連結:

https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9849512306568556625%22%7D&n_type=1&p_from=4

以下為譯文:

有好多次,别人說我算不上程式員,因為我在用HTML + CSS程式設計。我非常傷心,因為别人都不認為我是開發人員。我們讨論了好幾個小時,網上也有很多關于這個話題的讨論。但仍然還有人否認這一點,那麼就讓我們在本文中好好探讨一番。

在深入探讨之前,讓我們先來了解一下HTML + CSS的基礎知識。

根據維基百科:

超文本标記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于建立網頁的标準标記語言。

這意味着你需要使用HTML來構造顯示在網頁上的文檔。下面是一個基本的HTML頁面的例子:

HTML + CSS 為何得不到程式設計界的認可?

除了HTML之外,你還可以利用CSS來美化頁面。這就是為什麼我們會結合二者使用。

層疊樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式清單、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字型、間距和顔色等)的計算機語言。

下面是一個CSS檔案的示例:

HTML + CSS 為何得不到程式設計界的認可?

程式設計語言的結構

首先,我不止一次聽說有人認為HTML + CSS沒有程式設計結構。那麼程式設計結構是什麼?經過一番搜尋後,我發現,現代程式設計語言的程式設計結構幾乎都如出一轍。控制結構和資料結構。别着急,且聽我慢慢道來。

控制結構

控制結構指的是,分析變量并根據給定的參數選擇程式執行順序的一塊程式。

HTML + CSS 為何得不到程式設計界的認可?

控制結構包括順序控制、條件控制和循環控制。下面我來舉例說明。我使用Ruby語言來書寫示例。别擔心,Ruby很接近英語,非常易于了解。

順序控制:逐條執行的指令。在下面的示例中,我們将執行一系列指令。

HTML + CSS 為何得不到程式設計界的認可?

條件控制:如果條件為true,則執行此處的代碼。程式根據條件的結果,決定要執行的代碼塊。

HTML + CSS 為何得不到程式設計界的認可?

上述指定的代碼塊将循環執行多次,直到條件成立為止。示例中的條件是“counter”等于5。是以,這則消息輸出了5次。

HTML + CSS 為何得不到程式設計界的認可?

那麼,HTML+ CSS有這樣的控制結構嗎?你怎麼看?

資料結構

什麼是資料結構?維基百科上說:

資料結構(英語:data structure)是計算機中存儲、組織資料的方式。

簡單來說,資料結構表示組織資料、定義資料類型以及操作資料的方法。大多數程式設計語言都有不同類型的資料,包括字元串、整數、布爾值、數組、對象...

那麼,HTML + CSS也有這種資料結構嗎?此外,還有人說HTML + CSS不具備圖靈完備性——那麼,圖靈完備性又是什麼?

我的第一反應也是發懵。但經過幾個小時的查閱後,我有了大緻的了解。

簡而言之,在計算理論裡,如果一系列操作資料的規則(如指令集、程式設計語言、細胞自動機)可以用來模拟單帶圖靈機,那麼它是圖靈完備的。

圖靈機是英國數學家艾倫·圖靈于1936年提出的一種将人的計算行為進行抽象的數學邏輯機,其更抽象的意義為一種計算模型,可以看作等價于任何有限邏輯數學過程的終極強大邏輯機器。

圖靈機是一個規則、狀态和轉換的系統,并不是指真正的機器。

如此說來,HTML + CSS确實不具備圖靈完備性。因為HTML + CSS無法更改系統狀态。也無法做出決策或根據輸入更改狀态……

那麼,我還能說HTML + CSS是程式設計語言嗎?

CSS的控制結構

是的,你沒看錯,CSS有自己的控制結構方式。下面是一些例子。

順序控制

與其他程式設計語言一樣,我們可以在CSS中逐行執行指令。

HTML + CSS 為何得不到程式設計界的認可?

在上述代碼中,第一條指令被覆寫, 是以最後的結果是:

HTML + CSS 為何得不到程式設計界的認可?

條件控制

@mediascreen and(max-width: 567px){// Style 1}@mediascreen 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”循環。讓我們看一下這段代碼:

HTML + CSS 為何得不到程式設計界的認可?

第一段代碼告訴浏覽器循環周遊“li”元素内所有的“a”元素,然後應用給定的樣式。第二段代碼告訴浏覽器再循環一遍。如果“a”元素的類為“active”,則應用給定的樣式。是以,我結合使用了循環和條件控制。

HTML + CSS 為何得不到程式設計界的認可?

現在你是否同意HTML + CSS具有程式設計語言結構?你同意?那太好了!我們之間達成了共識,你可以走了。

哦?你還在繼續閱讀?你還有疑問?那麼就讓我來一一解答吧。

如果有人說CSS具備圖靈完備性,你會說什麼?你無言以對,是嗎?事實上,有一位名叫Eli Fox-Epstein的名人證明了這一點。他進行了一項實驗,并證明HTML + CSS具備圖靈完備性,而這個故事發生在2011年。有關的詳細資訊,

請點選這裡

是以,你現在可以接受HTML + CSS是一種程式設計語言了嗎?

HTML + CSS就是當代網頁的“雙俠”(請參照電影《雙俠》)。

對于全世界所有的網站而言,無論其伺服器端的語言是什麼,前端都使用了HTML + CSS。

當目前為止,網際網路上的網站數目高達17億,供44億使用者使用。而且這個數字還在不斷增長。

這些網站又分為靜态網站和動态網站。靜态網站僅使用HTML + CSS建構。而動态網站還用到了其他語言。

其他語言是什麼意思?

為了讓HTML + CSS大放異彩,你還需要其他的程式設計語言來潤色。常見的程式設計語言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動态網站。他們的網站因結合了多種語言而得以蓬勃發展。