文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Html详细列举对一些HTML标签语义的理解
精品推荐
特别推荐
·用CSS控制浏览器的滚动条
·marquee标记的用法
·HTML语言:什么是Unicode 什么是UTF-8
·XHTML编写网页代码的七条基本规范
·HTML和XHTML的区别
·HTML语言:什么是Unicode?什么是UTF-8?
·HTML 和 XHTML 区别
·HTML标记全集
·分析比较:三种简洁的Tab导航简析
·HTML教程-HTML简介
·网页Web标准化教程关于表格的应用
·网页代码常用小技巧总结续,网页制作学习
·HTML 标记参考手册
·用htc实现html编辑器
·HTML 4.0 语言快速入门参考教程
·初学:什么是DIV+CSS?有什么优势?
·网页制作实例CSS用一张图片实现圆角
·DIV CSS网页布局学习中容易出现的问题汇总
·HTML标签语义 科学合理的运用HTML标签
·53个CSS-不可或缺的技巧
热点TOP10
·弹出窗口代码集萃
·html教学+HTML语法大全
·图片左右循环连续滚动代码,解决marquee的留白问题
·网页设计基础:Div+CSS布局入门教程
·下拉列表框1下拉列表框2(HTML版)
·HTML标记全集
·解析Html页面:HTML Parser的试用
·在HTML网页中添加WMV格式播放器代码
·中国地区三级联动下拉菜单代码和示例(附带代码下载)
·53个CSS-不可或缺的技巧
·HTML 标记参考手册
·页面显示问题
·用层模拟下拉列表框
·CSS标准网页设计UL和DIV使用的技巧总结
·可移动层的实现示例
·CSS 制作的三级菜单特效代码
·兼容标准XHTML的浮动层特效实现
·HTML及XML语言的转义字符
·HTML 4.0 语言快速参考
·分析比较:三种简洁的Tab导航简析

详细列举对一些HTML标签语义的理解

日期:2007年8月28日 作者: 查看:[大字体 中字体 小字体]


p br

先说个最简单的。分段要用p标签而不是用br(甚至连续两个<br />)。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖,如果我想分段,便打回车。而如此传输到后台并显示出来的,显然就是用<br />分段的。

table th

由于大力宣扬div+css的结果,似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格,因此凡是应该以表格形式出现的数据,仍然应该用table布局。简单的例子是班级同学的花名册,包括姓名学号性别等等,这明显是一个表格形式的数据,因此应该用table布局。另一个比较值得探讨的例子是,blog里面的日历导航。我曾经有见过一个blog程序,它的日历导航里的各个日期,从1号到30号全用div套好,再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后,日历的那部分则从1号到30号一竖排下来。我认为这是不对的。因为日历应该是一个表格形式的数据,因此仍然应该用table布局。当取消css之后,应该仍然按照一排7个的样子归成一个表格。

th则是另一个会被忽视的标签。由于CSS的万能,所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲,一些表格单元应该用th标签。比如上文说到的日历表格,里面的“MON TUE WED... SUN”这些标识星期的单元,就应该用th而不是td。

h1-h6

对于h1-h6标签,从语义上讲,它们应该适用于所有标题文字。因此,一些如<div class="diary-title>的写法都是多余的,直接写成<h1>,然后直接对h1而不是.diary-title定义CSS,不是一样的效果么?当然,这个规矩我也不能定得太死,因为有时候标题部分的结构元素并不能简单的用一个h1就能解决的。但我最多用类似<h1><span></span></h1>的方法将标题的结构嵌套得更复杂,以满足表现的需要。

但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初,h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用CSS来控制字号,感觉很累赘。所以,这是一个待商榷的问题。

ul ol

凡是需要罗列条款的,都应该用ul或者ol,而不是用p。比如招聘广告里的职位需求,比如注意事项,比如操作步骤说明。此外一个流行的用法是网页的导航菜单也用ul li来列举,然后再用CSS控制其排列方式。

应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。

dl dt dd

这是一组几乎被人忘记的标签,但Jeffrey Zeldman在《网站重构》中大力推崇对它们的使用。dl应该是“defining list(或是definition list?有知道的朋友请告诉我)”的全称,一个典型的用法是字典的词条。单词的名字放在dt里面,单词的解释放在dd里面。而alistapart.com网站更加高明的,将右侧栏整个定义为dl,每个单元的标题用dt,而该单元的内容则用dd。

img

img标签本身也没啥好说的。只是想老生常谈一个,即只有当确实这个元素是内容里必须的图片的时候才使用img,否则应该用CSS定义为样式。如插图,头像,表情图标,这些是内容里必须出现的图片,用img。而其他的比如标题的背景图,列表项前面的小icon,这些都不应该用img标签。

span

span如今大有和div并驾齐驱的风头。但是事实上我认为我们还是应该遵从它最初的使用。我个人的理解,span最初就是用来带class或者style属性的。它本身不具有明确的语义。因此在文本流中,我们需要对某些文字做样式上的改变,就用span括起来。比如有些字需要加红,我就用<span class="red">。

但是值得注意的是,这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的,比如<strong>、<sub>等,我们也应该适当的给它们一些机会。

a

a是控制超连接的标签。但有些特殊的情况,我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心,但我想有些设计师会将onclick直接定义到“播放”小图标的<img>标签里。我个人认为还是应该在img外面加一个a,然后将onclick定义到a里面,并记住在js函数最后写上return false。如果可以,该a标签的href属性也应该写上弹出窗口的URL,保证用户在禁止JS的情况下仍能够有效的打开页面。

我暂时就列出这么多。

最后再总结一下遵循HTML标签语义的重要性。

Web标准的其中一个要求是低配置的兼容性:当用户禁用图片、禁用CSS或禁用JS的时候,我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义,则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签,我们的网页在“CSS裸奔”的时候,才会仍然让人看得出哪里是导航菜单,哪里是文章标题,日历表格也不会分崩离析。


[1] [2] 下一页 




上一篇:经验:可用性第一法则,不要听用户的

下一篇:JavaScript的9个陷阱及评点

详细列举对一些HTML标签语义的理解 相关文章:
·最详细的黑客入门法则
·大航海家3-详细全攻略 - 游戏攻略
·《盟军敢死队:打击力量》详细流程攻略
·秦殇复活-详细剧情攻略 - 游戏攻略
·不可以不看的一些网站
·详细介绍ORACLE sqlplus命令
·XP的一些禁忌 用XP的人一定要看
·《暗黑破坏神2》1.10补丁升级详细说明 - 游戏攻略
·查找对方IP地址的一些方法
·html教学+HTML语法大全
详细列举对一些HTML标签语义的理解 相关软件:
·有关毛泽东的一些问题解答(不完整版)
·深入理解计算机系统电子杂志 PDF
·国外一些死亡金属音乐(很狂躁哟)
·当代研究生英语听说 mp3+html
·历年考研英语真题阅读理解部分中文翻译(1992—2003年word版)
·一些不错的摇滚MTV,也许有你听过的。喜欢吗,我说你呢
·黑客视频教程-制作免杀迷你灰鸽子详细教程
·Flash loading 的详细制作
·Linux内核0.11(0.95)详细注释
·惊云漏洞详细版

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot