- 浏览: 18752 次
最新评论
标题和内容模块如图3-13 所示。
图3-13 标题和内容模块
这种标题配内容的模块,我们可以用如下几种方案来实现同样的效果。
方案一 实现方法如代码清单3-3 所示。
代码清单3-3 标题和内容模块实现方案一
html 部分:
标签的语义更多>>
段落一的内容……根据浏览器的默认样式
。。。
段落二的内容……
CSS 部分:
.h2{position:relative;border-bottom:1px dashed #fff;}
.h2 a{position:absolute;right:0;top:0;}
.p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
.strong{color:red;}
视觉效果达到了,再来看看它的语义吧,如代码清单3-4 所示。
代码清单3-4 标题和内容模块实现方案一的语义
标签的语义更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
我们只能看到"分隔"、"范围"这样的无语义标签,从标签上看不出结构的逻辑。这显然是不行的,我们需要用标签让代码能够清晰地透露出"标题","内容","被强调的文本"等信息。我们把它改进一下,换用第二种方案。
方案二 实现方法如代码清单3-5 所示。
代码清单3-5 标题和内容模块实现方案二
html 部分:
标签的语义 更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
CSS 部分:
h2{position:relative;border-bottom:1px dashed #fff;}
h2 a{position:absolute;right:0;top:0;}
p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}
再来看看方案二的语义吧,如代码清单3-6 所示。
代码清单3-6 标题和内容模块实现方案二的语义
标签的语义更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
方案二大有改进,从标签中能清楚地看到标题和内容的划分,也能看到"根据浏览器的默认样式"被强调了。嗯,不错。
等等,更多>>被包在了标签中,它属于二级标题吗?不对,虽然在视觉设计上它和"标签语义"是放在同一行的,但事实上它并不属于标题!嗯,让我们再改进一下,如方案三所示。
方案三 如代码清单3-7 所示。
代码清单3-7 标题和内容模块实现方案三
html 部分:
标签的语义
更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
CSS 部分:
h2{}
a{}p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}
方案三的语义就很理想了,如代码清单3-8 所示。
代码清单3-8 标题和内容模块实现方案三的语义
标签的语义
更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
语义是不错了,但根据方案三的HTML 结构,我们很难通过CSS 完成设计图中的设计。怎么办呢?还记得在3.1 节中留下的那个悬念吗?这个时候就该无意义标签派上用场了!我们在方案三的HTML 基础上添加适当的无语义标签div 和span,如代码清单3-9 所示。
代码清单3-9 标题和内容模块实现方案三的改进版
html 部分:
标签的语义
更多>>
段落一的内容……根据浏览器的默认样式 ……
段落二的内容
CSS 部分:
.title{border-bottom:1px dashed #fff;text-align:right;}
.title h2{float:left;}
p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}
OK,现在我们的代码既精简,语义又清晰。这里需要特别说明的是,当页面内标签无法满足设计需要时,才会适当添加div 和span 等无语义标签来辅助实现。 表单模块如图3-14 所示。
图3-14 表单模块
这种表单模块,我们可以用如下两种方案实现其效果。
方案一 实现方法如代码清单3-10 所示。
代码清单3-10 表单模块实现方案一
账号:
密码:
来分析一下它的语义,如代码清单3-11 所示。
代码清单3-11 表单模块实现方案一的语义
账号:
密码:
这种方法虽然能实现视觉效果,但"账号:"、"密码:"和它们对应的输入框之间没有语义上的照应,表单的用途也不清楚。
我们将方案一改进一下,如方案二所示。
方案二 实现方法如代码清单3-12 所示。
代码清单3-12 表单模块实现方案二
登录表单
账号:
密码:
我们来看看方案二的语义,如代码清单3-13 所示。
代码清单3-13 表单模块实现方案二的语义
登录表单
账号:
密码:
方案二改进了方案一的不足,语义上清晰了很多。一般来说,表单域要用fieldset标签包起来,并用legend 标签说明表单的用途。因为fieldset 默认有边框,而legend 也有默认的样式,为满足设计需要,我们可以将fieldset 的"border"设为"none",把legend 的"display"设为"none",以此来兼顾语义和设计两方面的要求。每个input 标签对应的说明文本都需要使用label 标签,并且通过为input 设置id 属性,在label 标签中设置"for = someId"来让说明文本和相应的input 关联起来。 表格如图3-15 所示。
图3-15 表格模块
在CSS 布局日渐流行的今天,很多人患上了"table 恐惧症",仿佛用了table 就落后了,就是不注重语义,就是违反Web 标准,于是宁愿用ul 来模拟table 也不使用table。这从一个极端走到了另一个极端。其实,table 标签有它自己的语义和用途,虽然在CSS 布局中table 不推荐用来布局,但它仍有自己的一席之地--在二维数据展示方面它是最好的选择。
我们可以选择table 来实现图3-15 的效果,有如下两种方案。
方案一 实现方法如代码清单3-14 所示。
代码清单3-14 表格模块实现方案一
几种页面实现的比较
实现方式代码量搜索引擎友好特殊终端兼容
table 布局多差一般
乱用标签的CSS 布局 少一般差
标签语义良好的CSS 布局 少 好
好
来分析一下它的语义,如代码清单3-15 所示。
代码清单3-15 表格模块实现方案一的语义
几种页面实现的比较
实现方式代码量搜索引擎友好特殊终端兼容
table 布局多差一般
乱用标签的CSS 布局少一般差
标签语义良好的CSS 布局少好好
账号:
密码:
虽然在视觉上可以看出"几种页面实现的比较"应该是该表格的标题,"实现方式"、"代码量"、"搜索引擎友好"、"特殊终端兼容"应该是几个比较特殊的单元格,"table 布局"、"乱用标签的CSS 布局"、"标签语义良好的CSS 布局"也是几个特殊的单元格,但方案一的HTML 从语义上看不到这样的描述。
我们将它改进一下,如方案二所示。
方案二 实现方法如代码清单3-16 所示。
代码清单3-16 表格模块实现方案二
几种页面实现的比较
实现方式代码量搜索引擎友好特殊终端兼容
table 布局 多 差 一般
乱用标签的CSS 布局少一般差
标签语义良好的CSS 布局少好好
我们来看看方案二的语义,如代码清单3-17 所示。
代码清单3-17 表格模块实现方案二的语义
几种页面实现的比较
实现方式代码量搜索引擎友好特殊终端兼容
table 布局多差一般
乱用标签的CSS 布局少一般差
标签语义良好的CSS 布局少好好
方案二的语义清晰了许多。虽然我们从table 布局时代开始就已经接触了table 标签,但对table 并不一定十分了解。过去,我们在用table 布局时,常常只使用table、tr、td 标签。事实上,table 常用的标签还包括caption、thead、tbody、tfoot 和th。我们在使用表格的时候,应该注意选用合适的标签,表格标题要用caption,表头要用thead包围,主体部分用tbody 包围,尾部要用tfoot 包围,表头和一般单元格要区分开,表头用th,一般单元格用td。 尽可能少地使用无语义标签div 和span;
在语义不明显,既可以用p 也可以用div 的地方,尽量用p,因为p 默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;
不要使用纯样式标签,例如b、font 和u 等,改用CSS 设置。语义上需要强调的文本可以包在strong 或em 标签里,strong 和em 有"强调"的语意,其中strong 的默认样式是加粗,而em 的默认样式是斜体。
【作者介绍】
曹刘阳, 网名阿当,资深Web前端开发工程师,先后就职于中国雅虎和淘宝,现就职于新浪,一直从事Web前端开发工作,实战经验非常丰富,在通过提高代码质量来增强可维护性方面颇有心得。精通HTML、CSS、JavaScript等前端开发技术,对ActionScript、Flex、PHP、RoR等Web开发技术也有较深入的研究。致力于敏捷开发实践,喜欢读书,阅读过大量技术书籍;擅于总结归纳,能将各种技术融会贯通。您可以通过邮箱cly84920@gmail.com与他取得联系,也可以通过8791223参与"如何编写高质量前端代码"的讨论中来。
发表评论
-
(转载)C++中枚举与字符串相互转换
2012-07-06 09:52 4134有的时候我们喜欢使用一些外部的文件保存管理一些配置信息,这 ... -
awk教程
2012-07-06 09:45 603一个年轻的程序员问一个老程序员(一个比较牛逼的公司的CTO ... -
正则表达式中附加参数的用法
2012-07-06 09:38 615附件参数g的用法: 1)对于表达式对象的exec方法, ... -
asp.net gridview美化
2012-07-06 09:30 1273i am now in university(HIT@We ... -
javascript js 删除表格的行、单元列
2012-07-05 20:45 650大发现,大家在贴代码的时候。系统会自动加上一些代码或注释之 ... -
具有可过滤功能的JList组件【Swing】
2012-07-03 13:44 779【场景】:在一个列表中,可以通过输入某个字符,而动态过滤列 ... -
Flex应用程序背景颜色渐变
2012-07-02 12:29 618今天突然看见CSDN一个美女高手写的小东西,发现Flex背 ... -
Flex操作Json数据示例
2012-07-02 12:29 679Flex操作Json数据示例 本示例中需要用到JSO ... -
FLEX4中 获取JSON数据的一个例子
2012-07-02 12:29 790公司要求使用JSON格式来获取服务器端的数据 通过 ... -
Flex获取操作XML示例
2012-07-02 12:28 532/****** ".",&qu ... -
Flex 4 Canvas backgroundImage 问题
2012-07-02 12:28 742倾听,慎言,勇行,自省... ... -
GNU Make 中文手册v3.8 学习 ( 3/3 )
2012-07-01 10:05 1018GNU Make 中文手册v3.8 学习 ( 3/3 ) ... -
Lex和yacc工具介绍
2012-07-01 10:05 916在编译过程中,词 ... -
谈谈我对未来的想法吧
2012-07-01 10:05 682来总行珠海研发中 ... -
终于搞清楚了Flex到底是收费还是免费
2012-06-30 16:30 1616终于搞清楚了Flex到底是收费还是免费 2010年06月29 ... -
结合实际项目谈谈Extjs、Flex、Jquery等富因特网时代框架的用武之处
2012-06-30 16:30 673结合实际项目谈谈Extjs ... -
全面认识Flex安全沙箱
2012-06-30 16:30 604全面认识Flex安全沙箱 2 ... -
为Flex应用添加实时组件
2012-06-30 16:30 460为Flex应用添加实时组件 2011年06月30日 在很 ... -
Flex socket通信实践学习笔记(2)-1
2012-06-30 16:30 622Flex socket通信实践学习 ...
相关推荐
3.4 常见模块你真的很了解吗 3.4.1 标题和内容 3.4.2 表单 3.4.3 表格 3.4.4 语义化标签应注意的一些其他问题 第4章 高质量的CSS 4.1 怪异模式和DTD 4.2 如何组织CSS 4.3 推荐的base.css 4.4 模块化CSS...
(我的博客里有做成的效果图和每个模块的解说内容,没有了解的同学可以先去看看做成功的页面效果图。)没有任何插件,资源里有图片素材和全部代码文件,解压后即可运行页面。用到的知识点主要有html课程种常见的标签,...
后端开发主要指的是编写那些不能直接看到的代码,这些代码运行在后台并控制着前端的内容。后端开发涉及的内容包括程序设计架构、数据库管理和处理相关的业务逻辑等。简单来说,它负责实现网站的“看不见”的部分,...
子网模块化的,配置优先的前端框架。 没有字符串。 Undernet提供什么? 常见页面元素的样式默认值:按钮,表单输入,版式等。 Flex网格提供高级布局选项。 由JavaScript驱动的交互式组件。 高度可扩展和可扩展的品牌...
同时遵循Magix的开发约定可以很好的控制页面内存的使用,避免单页系统常见却致命的内存泄露和过度膨胀等问题。Magix 适合用来构建大型的,面向前后端开发者以及 IE6 友好的,基于 MVC 结构和 Hash 驱动的 OPOA(One ...
, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊...时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块...
官方开发cui前端框架,是在Bootstrap3.3.5基础上扩展出来的完全兼容Bootstrap3的最适合国人的前端框架。 7、独家两种后台模式 独创的经典和多标签两种后台,一键切换,让您在合适的场景选择合适的模式。 8、自主产权...
总之,该资源是一个非常有参考价值的springboot个人网站项目,对于希望学习springboot框架和web开发的同学来说,是一个很好的学习资源。通过阅读源码和文档,您可以深入了解springboot框架的应用和原理,以及web开发...
后台管理模块的常见功能与布局(内容管理、用户\权限管理、运维监控) 用户身份验证、授权、会话管理与信息加密存储 Shiro 框架的使用 实现不同粒度的访问控制(动态菜单、功能控制、数据控制)1.前端技术栈 1.Vue....
《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
该源码适合有一定Java和前端开发经验的开发人员使用。如果你想学习Spring Boot和Vue.js的开发,或者想快速搭建一个物资仓储物流管理系统,那么这个源码是非常不错的选择。 Spring Boot + Vue.js 物资仓储物流管理...
第1章 前言:不同的时代,不同的Web 我们说,做一个产品,真的只是做一个产品吗?恐怕不是。现代的Web产品是一个产品矩阵,需要有良好的服务器端架构来支撑整个产品体系。本小节,我们将对现代Web体系做一个介绍,并...
Django 中提供了开发网站经常用到的模块,常见的代码都为你写好了,通过减少重复的代码,Django 使你能够专注于 web 应用上有 趣的关键性的东西。为了达到这个目标,Django 提供了通用Web开发模式的高度抽象,提供了...
(客房信息管理模块、客户入住管理模块、订餐信息管理模块、员工信息管理模块、最新资讯管理模块等,方便用户在线预订客房) PHP(全称:PHP: Hypertext Preprocessor)是一种广泛应用于Web开发的开源脚本语言,以...