HTML和CSS中不同的视觉语义

2016-02-20 00:23 10 1 收藏

岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的HTML和CSS中不同的视觉语义，希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发】

　　你和用户之间的网站堆栈(简化版)

　　在TXJS大会的最后一天，一个开发者问我：

　　面向对象的CSS没有给你留下一大堆基于表现的class名？

　　网络堆栈中的每一层都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件，人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有意义的东西来书写，也就是我所谓的代码语义。HTML中的代码语义对于可移植性和易用性都是极为重要的。另一方面，CSS在堆栈中确实是一个独立的层，它需要能反映页面的视觉语义的属于自己的体系结构。

　　视觉语义描述在页面设计中的全部重复模式。他们描绘了你的网站的基本组成部分。事实上，他们往往只需要少许的修改就能轻松的实现跨站点应用。视觉语义，不一定要捆绑到HTML语义，因为你需要一个符合每一层堆栈的具体需求的架构。

　　从样式中剥离模板结构

　　同样，许多PHP开发人员想要匹配CSS和HTML架构到PHP。或许尝试将你最熟悉的某一层抽象应用到他们你会觉得更具挑战？对这一点儿我感到很惭愧。在我在Facebook的时候，我希望PHP层能匹配CSS层。还好Facebook有一些聪明的开发者勒住了并帮我增进了理解。

　　强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿，因为的CSS和HTML需要比PHP更细致的对象结构。事实上，PHP的模板不是天生合适的，因为每个模板包含了许多不同的HTML，以及以不同的方式相结合的CSS对象。

　　视觉语义!=基于表现的类

　　需要注意的重要的是，我不是建议类似giantBlueHeading的类名。类名需要表现你要定义的对象结构，而不是特定的视觉类的名。例如，我经常选择好记的比较抽象的类名，如media很容易记住。media块由一个固定宽度的图片或flash和一些文字或其他内容组合。

　　media块可用于许多不同的情况，例如，组合一个图标和一个链接或个人资料图片和用户名。具体用例是从对象结构中分离出来的。HTML可以被看作是CSS对象的实例。

　　该media块的代码，和许多其他基本的对象都可以在OOCSS开源项目中找到。

　　PS:如果你对OOCSS不太熟悉，可以阅读一下OOCSS的FAQ，以及99CSS对该FAQ的中文翻译

　　译文：Visual Semantics in HTML and CSS

　　本文链接：http://www.blueidea.com/tech/web/2010/7796.asp　

来源:http://www.tulaoshi.com/n/20160220/1631762.html

看过《HTML和CSS中不同的视觉语义》的人还看了以下文章更多>>

CSS也要语义化

标签： Web开发

其实想重提下那个话题，一直都在忙这忙那的没时间。好不容易到一个周末了，原定安排是去D2的但是因为时间安排不过来，所以能抽空写写。早前的讨论不了了之，其实这一点都不是Twinsen的风格。名字，你看名字多重要，我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我一直说的作为一个技术人员应当遵守的准则互联网...

xml和html的不同之处

标签： Web开发

“可扩展标记语言”(XML) 提供一种描述结构化数据的方法。与主要用于控制数据的显示和外观的 HTML 标记不同，XML 标记用于定义数据本身的结构和数据类型。 XML 使用一组标记来描绘数据元素。每个元素封装可能十分简单也可能十分复杂的数据。您可以定义一组无限制的 XML 标记。例如，您可以定义一些 XML 标记来声明订单中的数据，如价...

HTML与CSS在Flash中的应用

标签： Web开发

HTML与CSS在Flash中的应用: 不小心看到同事Den在弄个小东西：在Flash里使用HTML和CSS，代码是这样： Example Source Code var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("sample.css"); content_txt.styleSheet = myStyle; content_txt.multiline= true; content_txt.wordWrap = true; conte...

HTML5 b和i标记将被赋予真正的语义

标签： Web开发

b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是表现粗体和斜体，而没有任何语义。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案中对于 b 和 i 标签是这样定义的：以下是代码片段：复制代码代码如下: The b element now represents a span of text to be stylistically offset fr...

不够语义网页设计和语义的网页制作

标签： Web开发

这个时代DIV+CSS已经创造着新的神话，不久的将来，也许你所访问的互联网将不再出现Table。作为一个身处2008年末的Web设计师，你是否好意思承认自己的代码中使用了Table，如果是，你是一个有勇气的人，Web设计是个奇怪的行业，你可以将自己的网站设计得像晚报的分类广告，或者楼道里的开锁广告，但千万别让人知道你使用了Table，在你的源...

查看更多精彩>>