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

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

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

image.png

作者 | Amadou Ibrahim
译者 | 弯月,责编 | 郭芮

文章链接:https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9849512306568556625%22%7D&n_type=1&p_from=4

以下为译文:

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

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

根据维基百科:

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

这意味着你需要使用HTML来构造显示在网页上的文档。下面是一个基本的HTML页面的例子:

image.png

除了HTML之外,你还可以利用CSS来美化页面。这就是为什么我们会结合二者使用。

根据维基百科:

层叠样式表(英语:Cascading Style Sheets,缩写:CSS;又称串样式列表、级联样式表、串接样式表、阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

下面是一个CSS文件的示例:

image.png

编程语言的结构

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

控制结构

控制结构指的是,分析变量并根据给定的参数选择程序执行顺序的一块程序。
image.png

控制结构包括顺序控制、条件控制和循环控制。下面我来举例说明。我使用Ruby语言来书写示例。别担心,Ruby很接近英语,非常易于理解。

顺序控制:逐条执行的指令。在下面的示例中,我们将执行一系列指令。

image.png

条件控制:如果条件为true,则执行此处的代码。程序根据条件的结果,决定要执行的代码块。

image.png

上述指定的代码块将循环执行多次,直到条件成立为止。示例中的条件是“counter”等于5。因此,这则消息输出了5次。

image.png

那么,HTML+ CSS有这样的控制结构吗?你怎么看?

数据结构

什么是数据结构?维基百科上说:

数据结构(英语:data structure)是计算机中存储、组织数据的方式。

简单来说,数据结构表示组织数据、定义数据类型以及操作数据的方法。大多数编程语言都有不同类型的数据,包括字符串、整数、布尔值、数组、对象...

那么,HTML + CSS也有这种数据结构吗?此外,还有人说HTML + CSS不具备图灵完备性——那么,图灵完备性又是什么?

我的第一反应也是发懵。但经过几个小时的查阅后,我有了大致的了解。

简而言之,在计算理论里,如果一系列操作数据的规则(如指令集、编程语言、细胞自动机)可以用来模拟单带图灵机,那么它是图灵完备的。

图灵机是英国数学家艾伦·图灵于1936年提出的一种将人的计算行为进行抽象的数学逻辑机,其更抽象的意义为一种计算模型,可以看作等价于任何有限逻辑数学过程的终极强大逻辑机器。

图灵机是一个规则、状态和转换的系统,并不是指真正的机器。

如此说来,HTML + CSS确实不具备图灵完备性。因为HTML + CSS无法更改系统状态。也无法做出决策或根据输入更改状态……

那么,我还能说HTML + CSS是编程语言吗?

CSS的控制结构

是的,你没看错,CSS有自己的控制结构方式。下面是一些例子。

顺序控制

与其他编程语言一样,我们可以在CSS中逐行执行指令。

image.png

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

image.png

条件控制

@mediascreen and(max-width: 567px){// Style 1}@mediascreen 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”循环。让我们看一下这段代码:

image.png

第一段代码告诉浏览器循环遍历“li”元素内所有的“a”元素,然后应用给定的样式。第二段代码告诉浏览器再循环一遍。如果“a”元素的类为“active”,则应用给定的样式。因此,我结合使用了循环和条件控制。

image.png

现在你是否同意HTML + CSS具有编程语言结构?你同意?那太好了!我们之间达成了共识,你可以走了。

哦?你还在继续阅读?你还有疑问?那么就让我来一一解答吧。

如果有人说CSS具备图灵完备性,你会说什么?你无言以对,是吗?事实上,有一位名叫Eli Fox-Epstein的名人证明了这一点。他进行了一项实验,并证明HTML + CSS具备图灵完备性,而这个故事发生在2011年。有关的详细信息,请点击这里

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

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

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

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

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

其他语言是什么意思?

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

目录
相关文章
|
3天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
7天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
12天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
12天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
12天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
12天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
12天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
12天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
12天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。