[-] 今天是: 设为首页 加入收藏
计算机 ASP ASP.NET VB JSP BS结构 管理系统 JAVA C/C++ Delphi Power Builder VFP PHP 网上书店 学生 图书 精品课程 论坛 考试 人事 基于web 企业 进销存 计算机应用 网站建设 编程 环境配置 外文翻译 电子 通信 PLC 单片机 电气 控制 智能 电源 CDMA GPRS 机械 数控车床 模具 钻床 土木工程 住宅楼 办公楼 教学楼 综合楼
您现在的位置: 爱毕业设计网 >> 计算机教程 >> 网站建设 >> 正文
总结一些HTML标签的语义
编辑:admin 教程来源:本站原创 指数:           ★★★

HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义。我认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中,大段的文字内容应该由<p>进行分段而不是<br />,列表项应该放在ul或ol或dl中,表格形式的数据应该仍然用table布局。

  为什么要这样做?一个很有说服力的原因是,保证在用户去掉CSS显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。如果全部用div,当去掉CSS之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

  我下面详细的列举一下我对一些标签的语义的理解:

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裸奔”的时候,才会仍然让人看得出哪里是导航菜单,哪里是文章标题,日历表格也不会分崩离析。

教程录入:admin    责任编辑:giggs692 
  • 发表评论
  • 加入收藏
  • 加入QQ书签
  • 关闭页面
  • 看过此教程的网友同时还看了:
    没有相关教程
    网友评论(评论内容只代表网友观点,与本站立场无关!)
    • 在线咨询
    • QQ:306826066
    • QQ:281788421
    • 旺旺客服
    • 技术支持
    • 售后服务
    爱毕业设计网