首页 web前端 css教程 我的一些关于web标准的思考笔记(一)_经验交流

我的一些关于web标准的思考笔记(一)_经验交流

May 16, 2016 pm 12:10 PM

我是从去年初开始学习web标准的,两年下来也有些心得。最近跳槽了正好闲在家里,写一些出来和大家交流一下。

1 对于web标准和W3C XHTML规范的理解

按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言”div+css"。但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的,我们可以用xhtml 1.1写出一个table定位的网页。说到这里,或许会认为我讲了一堆废话。但任何一项技术,只有当你对基础概念有足够清晰的认识的时候,你才会正确的使用它。我从下面两个方面,来谈谈如今Web标准应用走向的两个歧途:

第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html,至少我可以轻松的使用font,而不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我在以后讲。

第二种情况我觉得比较难理解一些,即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我刚看到的一个帖子" 不用切图的页面圆角"。首先我想肯定的是这个创意确实很不错,使用CSS功能将圆角“画”出来。为此,设计者必须在相应的位置加上一大段如下的代码:




但是,这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将真正的表现代码放在CSS里的。但我认为这是一个偷换概念。因为以上这些b标签跟网页结构无关,它们都是一些空标签。也就是说,它的存在并不是为了将某些内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。

另外一个例子可能更加隐蔽。之前我有在alistapart.com上看到过如何实现网页三通栏的文章,其原理大概就是使用三四个div相互嵌套。我认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要,而是用于网页的表现。

当然,我承认,以上的观点在一定程度是钻牛角尖(但反过来说,非要实现非图片圆角不也是在钻牛角尖么,呵呵)。有些时候结构和表现并不是那么轻易的就能分开的,我们为了实现一些丰富的表现不得不让结构去迁就(想想

的用处)。但是知道什么是对什么是错是很重要的。即使我们有时候不得不做一些错事。

最后,我想声明的是,我并不是"非图片圆角"是无意义或是错误的。我也很佩服作者的聪明和灵感。我觉得这样的技术研究就如同以前用CSS画国旗一样,对CSS技术的熟练掌握很有帮助。但是,它的用途也应该仅和CSS国旗一样局限,不应该在实际应用中采纳。因为它违反Web标准的基本原则。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1662
14
CakePHP 教程
1419
52
Laravel 教程
1312
25
PHP教程
1262
29
C# 教程
1235
24
Google字体可变字体 Google字体可变字体 Apr 09, 2025 am 10:42 AM

我看到Google字体推出了新设计(Tweet)。与上一次大型重新设计相比,这感觉更加迭代。我几乎无法分辨出区别

如何使用HTML,CSS和JavaScript创建动画倒计时计时器 如何使用HTML,CSS和JavaScript创建动画倒计时计时器 Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

HTML数据属性指南 HTML数据属性指南 Apr 11, 2025 am 11:50 AM

您想了解的有关HTML,CSS和JavaScript中数据属性的所有信息。

我们如何创建一个在SVG中生成格子呢模式的静态站点 我们如何创建一个在SVG中生成格子呢模式的静态站点 Apr 09, 2025 am 11:29 AM

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tar​​tanify.com上,我们收集了5,000多个格子呢

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

php是A-OK用于模板 php是A-OK用于模板 Apr 11, 2025 am 11:04 AM

PHP模板通常会因促进Subpar代码而变得不良说唱,但这并不是这样的情况。让我们看一下PHP项目如何执行基本的

如何在WordPress主题中构建VUE组件 如何在WordPress主题中构建VUE组件 Apr 11, 2025 am 11:03 AM

内联式模板指令使我们能够将丰富的VUE组件构建为对现有WordPress标记的逐步增强。

编程SASS创建可访问的颜色组合 编程SASS创建可访问的颜色组合 Apr 09, 2025 am 11:30 AM

我们一直在寻求使网络更容易访问。颜色对比只是数学,因此Sass可以帮助涵盖设计师可能错过的边缘案例。

See all articles