日韩国产精品99成人不卡在线无毒|狠狠躁夜夜爽一级二级精品|亚洲日日噜噜孕妇中文字幕|日韩久草中文三级片

新聞動(dòng)態(tài)

HTML + CSS 為何得不到編程界的認(rèn)可?

行業(yè)資訊 發(fā)布者:cya 2020-01-07 08:41 訪問量:249

本文經(jīng)授權(quán)轉(zhuǎn)自公眾號(hào)CSDN(ID:CSDNnews)
作者 | Amadou Ibrahim
譯者 | 彎月,責(zé)編 | 郭芮

如果我在用HTML+CSS編程,那么,我能算是名開發(fā)人員嗎?
以下為譯文:

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

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

根據(jù)維基百科:

超文本標(biāo)記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

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

<!DOCTYPE html>
<html>
<head>
     <!-- Metadata goes here -->
</head>
<body>
     <!-- Page content goes here -->
</body>
</html>
除了HTML之外,你還可以利用CSS來美化頁面。這就是為什么我們會(huì)結(jié)合二者使用。

根據(jù)維基百科:

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

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

*{  
    box-sizing: border-box;  max-width100%;
}
body{  
  font-size1.25rem;  padding-bottom70px;
  background#fff;
}

1、編程語言的結(jié)構(gòu)

首先,我不止一次聽說有人認(rèn)為HTML + CSS沒有編程結(jié)構(gòu)。那么編程結(jié)構(gòu)是什么?經(jīng)過一番搜索后,我發(fā)現(xiàn),現(xiàn)代編程語言的編程結(jié)構(gòu)幾乎都如出一轍??刂平Y(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
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)?維基百科上說:

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

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

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

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

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

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

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

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

那么,我還能說HTML + CSS是編程語言嗎?

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

是的,你沒看錯(cuò),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é)果是:

條件控制

@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的樣式代碼,如果用戶的設(shè)備支持,則顯示屬性將設(shè)置為“flex”。你甚至可以使用關(guān)鍵字“not”書寫false語句:
@supports not (display: flex) {
    div { float: left; } /* alternative styles */
}
循環(huán)控制

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

li a{
  font-weight:700;
  display: block;
  padding15px;
  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”元素的類為“active”,則應(yīng)用給定的樣式。因此,我結(jié)合使用了循環(huán)和條件控制。

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

哦?你還在繼續(xù)閱讀?你還有疑問?那么就讓我來一一解答吧。

如果有人說CSS具備圖靈完備性,你會(huì)說什么?你無言以對(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是一種編程語言了嗎?

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

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

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

這些網(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)站還用到了其他語言。

其他語言是什么意思?

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



關(guān)鍵字: HTML CSS 開封網(wǎng)站建設(shè)

文章連接: http://www.hsjyfc.com.cn/hyzx/669.html

版權(quán)聲明:文章由 晨展科技 整理收集,來源于互聯(lián)網(wǎng)或者用戶投稿,如有侵權(quán),請(qǐng)聯(lián)系我們,我們會(huì)立即刪除。如轉(zhuǎn)載請(qǐng)保留