重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop! ]

简介:

一个[复杂表单]热了热身,嗯,好,现在开始逐渐进入状态中……

这个副标题让我琢磨了很久,和之前的“随想随说”不一样,重新命名为《重构之美》后就给了我压力,让我认真对待仔细斟酌,这样其实也好。

2006 2 25 Create

Web标准在概念描述上涵盖了三个部分,结构[xhtml]、表现[css]、交互[DOM、ECMAScript],准确的定义我就不摘抄凑字数了,百度上google一下,遍地都是。这三个部分我认为并非处于同一个等级,xhtml是最重要的部分是第一级,而css和script则并列处于第二级,简单如下图例:

我认为不要小看了这个认识,我觉得这个目前很多人都没有意识到的问题,即便意识到了,行为上也没有跟上。怎么说呢?script不是我所擅长的,所以我基本上不会涉及到Web标准中交互这部分,即便涉及也只是很浅,个人能力有限。css部分会有针对性的涉及到,但不会很多,因为我不想在css上做太多的文章,因为我感觉现在国内Web标准界对css的追捧有点过了,大小介绍Web标准的网站和书籍主要都是在介绍css的各种技巧,而对于xhtml部分的介绍很少,也就泛泛的提及用div代替table进行布局和书写规则,多一点的会提到语义。

有没有深入的理解过?为什么要严格书写?我想大部分的答案是通过认证。再问,为什么要通过认证?答不出来了?好,再来,那又为什么要严格书写?又是认证?这不扯蛋嘛!鬼大爷管你认证与否。那么严格书写需要吗?不需要吗?靠!再来说语义,说起来估计还有很多“Web标准”者连语义这两个字都不知道。我认为语义是xhtml的两个核心之一,另外一个核心就是今天要谈到的结构。比如对表格table的使用,都是这么说的:表状数据还是要用table标记。那么有没有想过什么样的数据是属于表状数据?我说把一个三栏式布局的页面视为一行三列表状数据行不行?我是在扯蛋,那么什么是表状数据?什么时候用table?现在网上关于xhtml语义理解的文章真的很少,为什么?css啊,从上到下都追捧css去了,以至于那天我在蓝色理想上见回帖:学div+css,但不准备遵守xhtml……。类似的还有很多,什么花样都有。无语中,我想每个真正理解了Web标准的人都会很无奈的摇头,近2年Web标准的推广演变为Css的推广。Css很重要吗?不重要吗?靠!我说不要Css行不行?你找一大堆完全合理的理由……“行不行?”“行!”那就对了,我说不要你的Css,我要他的Css,又行不行?那么和xhtml相比,Css重要在哪里?

最后我们来说说关于“用div代替table进行布局”这种说法,这么说吧,如果你是抱着这种思路使用div,我认为是错误的,布局这个概念其实是table带来的,如果你又把布局加到对div的理解中去,那么对不起,你还是一个“table者”。最典型的,有位朋友针对我上一篇[复杂表单]评论到:你这个表单看似复杂,其实很简单,不过左右两列式布局,左二右六,……。他还提到了“拼装”两个字,然后说我的代码不过是用div代替table,说我是table思路。看看看看他对页面的分析,“左右两列”,“左二右六”,“拼装”,多么熟悉啊,即便他用div实现了这样的布局,你认为他抛开了table吗?所以我说他完全没看懂我的代码。我只听说过“不要使用table布局”,没有在很官方的地方看见过“用div代替table进行布局”这种说法,都是人为造出来的,或许是为了更好的推广Web标准,但是现在我们要知道,这种说法是错误的!div从来不是布局元素,也没有哪个标记是布局元素。

像上面的图示,xhtml是根基,表现和交互虽然也很重要,但毕竟可以不要表现,也可以不要交互,但是不能不要xhtml,所以在现在,在现在狂热的追捧Css,几乎达到忽略xhtml这个根基的环境下(比如上面我说的那个回帖),我要站出来,振臂一呼:Css,Stop!(不知道有多少人响应我,鄙视我也欢迎,当我是疯子一笑而过也可以。^_^)

本来打算简单说说Web标准的概念和对现状的不满,然后专心写[深入结构:理解h系列的不合理。],结果扯谈了这么多,也好,换个标题发布,[深入结构:理解h系列的不合理。]放到下篇来写。

2006 2 27 Update


本文转自爆牙齿博客园博客,原文链接:http://yuntian.cnblogs.com/archive/2006/02/27/338852.html,如需转载请自行联系原作者

相关文章
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`<link>`和`@import`两种引入方式。`<link>`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`<link>`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
494 2
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
271 1
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
637 91
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
547 69
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1287 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
1200 7
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
306 5
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
462 28
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
473 16
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
344 4

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    595
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    453
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    453
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    299
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    578
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    751
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1475
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    325
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1196
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    532