HTML + CSS 为何得不到编程界的认可?

如果我在用HTML+CSS编程,那么,我能算是名开发人员吗?

作者 | Amadou Ibrahim

译者 | 弯月,责编 | 郭芮

出品 | CSDN(ID:CSDNnews)以下为译文:有好多次,别人说我算不上程序员,因为我在用HTML + CSS编程。我非常伤心,因为别人都不认为我是开发人员。我们讨论了好几个小时,网上也有很多关于这个话题的讨论。但仍然还有人否认这一点,那么就让我们在本文中好好探讨一番。

在深入探讨之前,让我们先来了解一下HTML + CSS的基础知识。

根据维基百科:

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。这意味着你需要使用HTML来构造显示在网页上的文档。下面是一个基本的HTML页面的例子:

<!DOCTYPE html>

<html>

<head>

<!-- Metadata goes here -->

</head>

<body>

<!-- Page content goes here -->

</body>

</html>

除了HTML之外,你还可以利用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;

}

编程语言的结构

首先,我不止一次听说有人认为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 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,则执行此处的代码。程序根据条件的结果,决定要执行的代码块。

# 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"书写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具备图灵完备性,而这个故事发生在2011年。有关的详细信息,请点击这里(https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete)。

所以,你现在可以接受HTML + CSS是一种编程语言了吗?

HTML + CSS就是当代网页的"双侠"(请参照电影《双侠》)。

对于全世界所有的网站而言,无论其服务器端的语言是什么,前端都使用了HTML + CSS。

当目前为止,互联网上的网站数目高达17亿,供44亿用户使用。而且这个数字还在不断增长。

这些网站又分为静态网站和动态网站。静态网站仅使用HTML + CSS构建。而动态网站还用到了其他语言。

其他语言是什么意思?

为了让HTML + CSS大放异彩,你还需要其他的编程语言来润色。常见的编程语言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是动态网站。他们的网站因结合了多种语言而得以蓬勃发展。

感谢您的阅读。如果你有不同的观点,请在下方留言。

原文:https://medium.com/swlh/the-most-used-and-unrecognized-programming-languages-b0882e8c8c6f?

本文为 CSDN 翻译,转载请注明来源出处。

【End】

热 文 推 荐

20行 Python 代码爬取王者荣耀全英雄皮肤 | 原力计划?互联网诞生记:风起于青萍之末?"弃用 Google AMP!"?20行 Python 代码爬取王者荣耀全英雄皮肤 | 原力计划?操作系统兴衰史?我在华为做外包的真实经历?搞定面试算法系列 | 分治算法三步走

你点的每个"在看",我都认真当成了喜欢

「点点赞赏,手留余香」

赞赏

  • CT-9982
  • gdunjuefei
  • 泠倾詞
  • 长林
  • 黄药师的徒弟
  • 6人赞过
6
0
0
评论 0 请文明上网,理性发言

相关文章

  • 作者|PanuViljamaa译者|王强 编辑|Yonie 我同CSS打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好CSS样式如此之难。如果你一直都在CSS中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么CSS这么难,并且搞不明白它也不是开发者的错。 示例问题比如说我有了
    那抹笑太牵强的 7 1 0 条评论
  • 关键时刻,第一时间送达! 对于开发者而言,想要着手前端开发,HTML、CSS和JavaScript是三项必备的基础技能。而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过100的前端技术开源项目,希望可以帮助更多的开发者扩展学习。 1.极简模块化前端UI框架L
    人走茶未凉ll 8 0 0 条评论
  • 作者|夏之安然 责编|伍杏玲 出品|CSDN(ID:CSDNnews) 在2019年的今天,我们能在网上看到炫酷的动画加载,精彩绝伦的交互效果,以及从PC端到移动端的响应式交互,大家觉得习以为常。可你不知道的是,在20多年前,网页仅仅提供了文档展示能力,没有装饰的它就像一张黑白报纸那样简陋。 你是否会问:网页是如何变
    丶尐丨双子丨Bh 4 0 0 条评论
  • 1HTML的困境 我是著名的CSS,很多人都知道我的名字,但是却对我的原理和细节不求甚解。 这也可以理解,相比于简单的HTML,我要复杂得多,尤其是想要使用我做出美奂美伦的页面,需要了解太多的细节,那真不是一件普通人能干的事儿。于是大家看见我以后最多打个招呼,然后马上低头绕行。 链接真是个有趣的发明,它可以从一个网页跳
    王先生丶 17 2 0 条评论
  • 如果我在用HTML+CSS编程,那么,我能算是名开发人员吗? 作者|AmadouIbrahim 译者|弯月,责编|郭芮 出品|CSDN(ID:CSDNnews)以下为译文:有好多次,别人说我算不上程序员,因为我在用HTML+CSS编程。我非常伤心,因为别人都不认为我是开发人员。我们讨论了好几个小时,网上也有很多关于这
    小情绪C督 8 6 0 条评论
  • (给前端大全加星标,提升前端技能) 转自:开源中国 2月底万维网联盟(W3C)CSS工作组会议宣布了一项决议,批准在CSS标准中加入一批新函数,其中包括: 正弦函数-sin() 余弦函数-cos() 正切函数-tan() 反余弦函数-acos() 反正弦函数-asin() 反正切函数-atan() 使用两个参数x和y的
    西邦2qa2 4 2 0 条评论
  • 原文标题:Yes,IcanconnecttoaDBinCSS 原文作者:Memeloper 原文地址:https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html 故事背景某公司招聘需求如下: 我们正在寻求可以使用CSS连接数据库的前端伙
    鲜孕素淹附 7 0 0 条评论