HTML常用页面元素

来源：互联网发布：南京世纪桥软件编辑：程序博客网时间：2024/05/22 01:25

原文地址：http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html

img
作为内容的图片是一定要放到img里面的，这没有更好的选择了。然而如果图片不是作为内容，而是作为修饰性的，则千万不要用img。对于非内容的图片，应该在CSS中引用，而不在XHTML中出现。例如每一个导航链接有一个前导的箭头指示，那么这些箭头就应该通过CSS的background- image属性加上去，而不是直接作为img出现。

a
这也是一个非常准确定义的元素，链接都需要使用它。或许已经有很多人忘记了a的本意是锚点，其实这是一个十分有用的语义，你可以用它来标记文档中一些重要的引用位置。

ul, ol
ul和ol分别是什么意思呢？如果你回答不上来，却知道它们可以用来干什么，那证明你是被可视化工具宠坏了，要转换过来编写符合语义的XHTML需要先补充基础知识，这时候你最好先找一些看起来非常基础非常全面的XHTML书籍看看，因为没有扎实的基础你在上面构建更多的知识都是不牢固的。ul和 ol其实分别代表unordered list和ordered list，也就是无序列表和有序列表。在语义上，它们都用于表示一类并列关系的内容，例如我们去商店购物之前列一张shopping list，上面要买的东西就是并列关系，在中文可以用顿号隔开那种。它们的差别在于是否有顺序，例如shopping list是没顺序的，先买什么后买什么是没关系的，但是一份旅游行程安排上面的景点列表却是有游览的先后顺序的。

ul常用于导航栏，因为导航元素符合上面所说的并列关系，树状导航结构还可以通过嵌套ul来表述。在这里，导航可以是我们常见的水平或竖直导航栏，甚至可以是地图导航，例如在中国地图上不同的省份热区其实是不同的li。如果我说，在主流浏览器上用户看到了中国地图和可以直接点击省份热区，在不支持 CSS的浏览器上用户能看到一份纯文本的省份名称列表，使用的是同一份XHTML，而这完全通过CSS实现，甚至不依赖于JavaScript，你相信吗？

另外，如果你要显示一个图库的缩略图，这些图片也可以放在ul中哦，因为这些图片也是并列关系。它们可以自动先横排，排满一行就自动排第二行， CSS可以让他们乖乖排队，而不需好像table那样把图片定死在一个格子里。其实table用于布局就如同用监狱关押内容一样，把内容锁死在一个格子里不让它到处乱跑；符合语义的XHTML就如同一个开放的舞台，你只要懂得利用CSS的规则，内容就自然会找一个适合表现自己的地方站着。

dl
没有听说过dl吗？因为那些可视化工具生成的代码中从来不会出现dl？dl的意思是definition list，也就是定义列表。它包含的子元素不是li，而是dt和dd，也就是definition term和definition description。dl本身设计为字典单词与解释列表这样的语义，例如：
<dl>
<dt>Apple</dt>
<dd>苹果</dd>
<dt>Boy</dt>
<dd>男孩</dd>
</dl>

然而，如果你需要表示的的语义也是类似的，一个列表既包含定义也包含解释，那么也可以考虑用dl。

form, input
form也就是表单啦，这没什么好说的，就算再不顾及语义的人在书写XHTML时也会考虑到它与各种input对提交数据的影响，从而小心谨慎。

table
table自然是用来表示表格的，这不废话！如果是数据表，当然可以用table来表示，但如果不是，就最好别用table了。

人名列表呢？例如一个3行4列的人名列表。如果这12个人名是并列关系，我建议你用ul和12个li来表示，再通过CSS来让它们在一行内并列显示多个。名片表呢？也就是3行8列，每两列中左侧一列显示人名右侧一列显示电话地址等联系方式。我觉得dl在一定程度上能满足此需求，dt放人名，dd放联系方式，不过这时候就涉及了dl滥用的争论，因为人名与联系方式当作定义与解释有点牵强。

接下来还有一个关于你是否系统学习过XHTML的小提问，那就是你是否知道table下面的caption、col、colgroup、 thead、tbody、tfoot元素及summary属性分别用于定义什么，还有就是你书写table时是否会使用thead、tbody。
tbody ：
<html>
<body>
<table>
<tbody>
<tr><td></td></tr>
</tbody>
<tbody>
<tr><td></td></tr>
</tbody>
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</body>
</html>
用了 tbody 这个标签可以在整个表格未全部加载完毕之前将<tbody></tbody>之间的内容先显示出来, 这在网速比较慢的时候很有用处.

div, span
再次审阅上面的列表，如果你需要表示一个块区却无法在上面找到更适合的元素，那么你就可以考虑使用div和span这两个最没有语义的元素了。 div与span的区别，历史上的不说了，现在通常大块的区域用div，行内的小文本片段就用span。在上面我已经说了div一般用于全局划分为几个大的区域，所以一般不需要使用了。span其实也很少使用，因为行内的强调通常可以用语义更强的元素例如strong和em。