出品| CSDN（ID：CSDNnews）
以下为译文：
有很多次我被告知我不是程序员，因为我是用 HTML + CSS 编程的。 我很伤心，因为人们不认为我是开发人员。 我们讨论了几个小时，网上有很多关于这个话题的讨论。 但还是有人证实了这一点，所以让我们在这篇文章中解释一下。
在深入研究之前，让我们先回顾一下 HTML + CSS 的基础知识。
根据维基百科：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
这意味着您需要使用 HTML 来构造显示在网页上的文档。 下面是一个基本 HTML 页面的示例：
<html>
<head>
</head>
<body>
</body>
</html>
除了HTML之外，还可以借助CSS来美化页面。 这就是为什么我们将两者结合使用。
根据维基百科：
层叠样式表（英语：Cascading Style Sheets，缩写：CSS；也称为字符串样式列表、级联样式表、级联样式表、分层样式表）是一种结构化文档（如 HTML 文档或 XML 应用程序）计算机语言添加样式（字体、间距、颜色等）。
以下是 CSS 文件的示例：
<code class="hljs css" style="margin-right: 2px;margin-left: 2px;line-height: 18px;font-size: 14px;letter-spacing: 0px;font-family: Consolas, Inconsolata, Courier, monospace;border-radius: 0px;color: rgb(169, 183, 198);background: rgb(40, 43, 46);padding: 0.5em;word-wrap: normal !important;word-break: normal !important;overflow: auto !important;display: -webkit-box !important;">*{
box-sizing: border-box; max-width: 100%;
}
body{
font-size: 1.25rem; padding-bottom: 70px;
background: #fff;
}
编程语言的结构
首先，我不止一次被告知有些人认为 HTML+CSS 没有编程结构。 那么编程结构是怎样的呢？ 经过一番查找，发现现代编程语言的编程结构几乎都是一样的。 控制结构和数据结构。 别着急，慢慢听我说吧。
控制结构
控制结构是一个程序块，它分析变量并根据给定参数选择程序的执行顺序。
控制结构包括顺序控制、条件控制和循环控制。 下面我举个例子。 我使用Ruby语言来编写示例。 别担心，Ruby 与日语非常接近html页面切换，而且非常容易理解。
顺序控制：一条一条执行的指令。 在下面的示例中，我们将执行一系列指令。
# 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"
条件控制：如果条件为真html页面切换，则执行此处的代码。 程序根据条件的结果确定执行哪个代码块。
# 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
上面指定的代码块将在循环中执行多次，直到条件成立。 示例中的条件是“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有这样的控制结构吗？ 你怎么认为？
数据结构
什么是数据结构？ 维基百科说：
数据结构（英文：data Structure）是数据在计算机中存储和组织的形式。
简而言之，数据结构代表了组织数据、定义数据类型和操作数据的方式。 大多数编程语言都有不同类型的数据，包括字符串、整数、布尔值、数组、对象......
那么，HTML+CSS也有这样的数据结构吗？ 另外，有人说HTML+CSS不具备图灵完备性——那么，什么是图灵完备性呢？
我的第一反应也是惊讶。 但经过几个小时的研究，我有了一个大概的了解。
简而言之，在估计论中，如果可以使用一系列操作数据的规则（例如指令集、编程语言、元胞自动机）来模拟单带图灵机，那么它就是图灵完备的。
图灵机是日本数学家阿兰·图灵于1936年提出的一种物理逻辑机器，具体体现了人类的估计行为。 它更具体的含义是一种估计模型，可以看作相当于任何有限逻辑语言处理的终极强大逻辑机。
图灵机是一个由规则、状态和转换组成的系统，而不是真正的机器。
这样一来，HTML+CSS就不具备图灵完备性。 因为HTML+CSS很难修改系统状态。 它也无法根据输入做出决定或修改状态......
那么，我可以说 HTML + CSS 是编程语言吗？
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”来写假句子：
@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 是图灵完备的，你会怎么说？ 你很无语是不是？ 事实上，有一位名叫伊莱·福克斯-爱泼斯坦的名人证明了这一点。 他做了一个实验，证明了HTML+CSS是图灵完备的，而这个故事发生在2011年。详细信息请点击这里()。
那么，今天你能接受 HTML + CSS 作为一种编程语言吗？
HTML+CSS是当代网页的“双雄”（请参考电影《双雄》）。
对于世界上所有的网站来说，无论服务器端语言是什么，前端都使用HTML + CSS。
目前，互联网上的网站数量高达17亿个，用户数量达到44亿。 而且这个数字还在持续下降。
这些网站又分为静态网站和动态网站。 静态网站仅使用 HTML + CSS 构建。 动态网站还使用其他语言。
在其他语言中是什么意思？
为了让HTML+CSS大放异彩，还需要其他编程语言的打磨。 常见的编程语言包括 PHP、Python、Ruby、Javascript 等。 Facebook、Twitter、Google 和 Medium 都是动态网站。 他们的网站通过整合多种语言而蓬勃发展。
谢谢阅读。 如果您有不同的观点，请在下方留言。
原来的：
发表评论