HTML + CSS 为何得不到编程界的认可?
有好屡次,别人说我算不上程序员,由于我在用HTML + CSS编程。我非常伤心,由于别人都不认为我是开发人员。我们探讨了好几个小时,网上也有很多关于这个话题的探讨。但依然还有人否认这一点,那么就让我们在本文中好好讨论一番。
在深入讨论之前,让我们先来理解一下HTML + CSS的基础知识。
根据维基百科:
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创立网页的标准标记语言。
这意味着你需要使用HTML来构造显示在网页上的文档。下面是一个基本的HTML页面的例子:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</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;
}
1、编程语言的结构
首先,我不止一次听说有人认为HTML + CSS没有编程结构。那么编程结构是什么?经过一番搜索后,我发现,现代编程语言的编程结构几乎都如出一辙。控制结构和数据结构。别焦急,且听我慢慢道来。
控制结构
image.png
控制结构指的是,分析变量并根据给定的参数选择程序执行顺序的一块程序。
控制结构包括顺序控制、条件控制和循环控制。下面我来举例说明。我使用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是编程语言吗?
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
}
在上述代码中,第一条指令被覆盖, 所以最后的结果是:
image.png
条件控制
@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”,则应用给定的样式。因而,我结合使用了循环和条件控制。
image.png
现在你能否同意HTML + CSS具备编程语言结构?你同意?那太好了!我们之间达成了共识,你可以走了。
哦?你还在继续阅读?你还有疑问?那么就让我来逐个解答吧。
假如有人说CSS具有图灵完备性,你会说什么?你无言以对,是吗?事实上,有一位名叫Eli Fox-Epstein的名人证实了这一点。他进行了一项试验,并证实HTML + CSS具有图灵完备性。
所以,你现在可以接受HTML + CSS是一种编程语言了吗?
HTML + CSS就是当代网页的“双侠”(请参照电影《双侠》)。
对于全世界所有的网站而言,无论其服务器端的语言是什么,前台都使用了HTML + CSS。
当目前为止,互联网上的网站数目高达17亿,供44亿客户使用。而且这个数字还在不断增长。
这些网站又分为静态网站和动态网站。静态网站仅使用HTML + CSS构建。而动态网站还用到了其余语言。
其余语言是什么意思?
小编是一个多年开发经验的程序员,懂前台、Java、Python。今年年初整理了一批WEB前台学习资料作为粉丝福利,不管你是计算机专业想往WEB前台方向发展,还是零基础想要转行学习WEB前台,这份资料都能帮助到你,在自学过程中遇见问题了也可以随时问我。这是我的WEB前台裙,296-212-562,关于Java和Python的问题也可以在里面问我。
为了让HTML + CSS大放异彩,你还需要其余的编程语言来润色。常见的编程语言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是动态网站。他们的网站因结合了多种语言而得以蓬勃发展。
感谢您的阅读。假如你有不同的观点,请在下方留言。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML + CSS 为何得不到编程界的认可?