一些语义化的短语元素

 

打开wrodpress的后台编辑器，首先看到的就是这排编辑按钮：

众所周知，<b>是在视觉显示上的加粗，<i>是斜体。没有任何的问题，但是当你点击这个按钮的时候插入的是<em>和<strong>。也没注意别的文本编辑器是什么样子，但是想wp的确做的不错，即考虑了用户的习惯，同时在语义上也做了很好的努力。
说来惭愧，作为一个web开放人员，对于结构和语义的掌握还是非常欠缺的。因为一直以来html似乎因为其简单而被大家忽略。比如本博上一篇鹏子的文章，呵呵。所以想找个时间来好好地整理下这些基础但却很重要的东西。就从这里开始吧。
为什么用<strong>而不是<b>？因为html页面要表现的不仅仅是外观，还有其特定的含义。<b>和<i>都是无意义的标签，他们的作用就是在显示上达到了加粗和斜体的效果。但是<strong>和<em>是有语义的，表示强调（<strong>是比<em>更强的强调）。如果你用屏幕阅读器，那么它就会用不同的音量，音高及节奏去朗读它，呵呵。所以从语义化角度看，应该使用<strong>来告诉浏览器你的目的，当然如果你只是希望文本粗体或斜体显示，那么用css来控制文本的font属性不错。
除了strong和em外，W3C还定义了一下有语义的短语元素：
<cite>：包含引用信息或者对其他来源的参考信息；
<dfn>：表示所包含的是术语的定义
<code>：表示程序代码
<var>：表示一个变量或者程序参数实例
<samp>：表示一段程序或脚本等的输出
<kbd>：表示需要由用户去输入的文本
<abbr>：表示一种缩写形式
<acronym>：表示只取首字母的缩写

感兴趣的可以尝试下这些标签，反正我用的很少，呵呵。当然在绝大多数时候，我们只是依赖浏览器对文档语义化的解析是远远满足不了我们需求的。这个时候就依靠css来为这些元素改变外观。css很强大，它完全可以把一个div显示成你所需要的样式(我想这也是我们对于html标签的语言了解还不够的原因之一)。只是，这么做web页面的结构和语义就被完全破坏了。