您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

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

时间:2019-12-16 10:01:20  来源:  作者:

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

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

作者 | Amadou Ibrahim

译者 | 弯月,责编 | 郭芮

以下为译文:

有好多次,别人说我算不上程序员,因为我在用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;
}

1.编程语言的结构

首先,我不止一次听说有人认为HTML + CSS没有编程结构。那么编程结构是什么?经过一番搜索后,我发现,现代编程语言的编程结构几乎都如出一辙。控制结构和数据结构。别着急,且听我慢慢道来。

控制结构

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是编程语言吗?

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
}

在上述代码中,第一条指令被覆盖, 所以最后的结果是:

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

条件控制

@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 为何得不到编程界的认可?

现在你是否同意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大放异彩,你还需要其他的编程语言来润色。常见的编程语言包括phpPython、Ruby、JAVAscript等等。Facebook、Twitter、google和Medium都是动态网站。他们的网站因结合了多种语言而得以蓬勃发展。

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

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

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

【End】



Tags:HTML   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
问:如何用 JS 一次获取 HTML 表单的所有字段 ?考虑一个简单的 HTML 表单,用于将任务保存在待办事项列表中: <form> <label for="name">用户名</label> <input type="text...【详细内容】
2020-10-12  Tags: HTML  点击:(76)  评论:(0)  加入收藏
再见HTML ! 用纯Python就能写一个漂亮的网页我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互:天啊,听听头都大呢!其实...【详细内容】
2020-07-09  Tags: HTML  点击:(62)  评论:(0)  加入收藏
在学习一门编程语言之前,了解它的特性,带着对特性的好奇和疑问去学习是最快最好的学习方法。就像你知道某个地方有很多宝藏,带着藏宝图去寻找宝藏,你一定会大有收获的。编程语...【详细内容】
2020-06-05  Tags: HTML  点击:(62)  评论:(0)  加入收藏
有好多次,别人说我算不上程序员,因为我在用HTML + CSS编程。我非常伤心,因为别人都不认为我是开发人员。我们讨论了好几个小时,网上也有很多关于这个话题的讨论。但仍然还有人否认这一点,那么就让我们在本文中好好探讨一番...【详细内容】
2019-12-16  Tags: HTML  点击:(79)  评论:(0)  加入收藏
HTML 是什么? 表示超文本标记语言(Hyper Text Markup Language) 描述了网页的结构 由一些列元素组成 元素告诉浏览器如何显示内容,由标签表示 标签标记了“标题”,“段落”,“表”...【详细内容】
2019-12-12  Tags: HTML  点击:(102)  评论:(0)  加入收藏
本篇文章给大家带来的内容是关于html meta标签使用及属性的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。自学前端开始,我对meta标签接触不多,主要把...【详细内容】
2019-11-04  Tags: HTML  点击:(111)  评论:(0)  加入收藏
项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.s...【详细内容】
2019-10-23  Tags: HTML  点击:(102)  评论:(0)  加入收藏
在章中,我介绍了一种使用类似CSS的选择器语法的快速编写HTML代码的新方法-一组用于高速HTML和CSS编码的便捷工具。您花费多少时间编写HTML代码:所有这些标记,属性,引号,花括号等...【详细内容】
2019-10-08  Tags: HTML  点击:(144)  评论:(0)  加入收藏
和 JavaScript、CSS 相比,HTML 经过三十多年的发展,似乎逐渐走进无人问津的角落,如何才能让 HTML 再次回到人们视野的中心。...【详细内容】
2019-09-10  Tags: HTML  点击:(156)  评论:(0)  加入收藏
offsetHeight, offsetWidthHTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。HTMLElement.offsetWidth 是一...【详细内容】
2019-09-02  Tags: HTML  点击:(186)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(229)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条