(六)其他语义化
1、 换行符 <br/>
很多新手会使用<br/>标签来换行,或者使用多个<br/>标签来实现元素之间的上下间距。
举例:
<div>
<span> 标题 </span><br/><br/>
<span>第 1 部分内容 </span><br/>
<span>第 2 部分内容 </span><br/>
<span>第 3 部分内容 </span>
</div>
上面两个例子使用<br/>标签的方式是错误的,这也是<br/>标签很常见的错误用法。 事实上,<br/>标签有自己特定的语义,不能随便用来实现换行效果。W3C标准规定,<br/> 标签仅仅用于段落中的换行,不能用于其他情况。也就是说,<br/>标签只适合用于p标签内 部的换行,不能用于其他标签。
2、无序列表ul
在实际开发中,对于列表型的数据,为了实现良好的语义,我们还是建议使用无序列表 或者有序列表,不建议使用div等来实现。
对于如图所示效果,不少新手很可能会写出如下代码来实现。
<div>
<div><span>l</span>HTML 教程 </div>
<div><span>2</span>CSS 教程 </div>
<div><span>3</span>JavaScript 教程 </div>
</div>
这种实现方式缺乏语义化,并且也不利于维护。正确的做法是:
<ul>
<li><span>l</span>HTML 教程 </li>
<li><span>2</span>CSS 教程 </li>
<li><Sp^n>3</span>JavaScript 教程 </li>
</ul>
有人问,每一个列表项前都有数字,不应该使用有序列表来实现吗?为什么这里使用无序 列表来实现呢?假如使用有序列表,我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中,大多数情况下都是使用无序列表,极少情况下会使用有序列表。
3、strong标签和em标签
strong用于实现加粗文本,em用于实现斜体文本。基于 结构和样式分离的原则,标签仅仅是为了实现简单的加粗或者 斜体效果,我们一般不会用这两个。实际上,W3C对这两个标 签赋予“强调”的语义,在strong或者em标签内部的文本被 强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权 重。如果在一个页面中,为了 SEO而想要突出某些关键字,可以使用strong和em这两个标 签。一般情况下,我们都是去掉strong和em的默认样式,然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说,样式只会改变标签的外观,但不会改变标签的语 义。
4、del标签和ins标签
在HTM L中,del和ins这两个标签是配合使用的。del表示“delete”,用于定义被删 除的文本。ins表示“insert”,用于定义被更新的文本。一般情况下,我们会使用CSS来重 新定义del和ins标签的样式。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><del>原价:¥6.50/kg</del></p>
<p><ins>现在仅售:¥4.00/kg</ins></p>
</body>
</html>
5、img标签
想要在页面显示一张图片,我们有两种方式:一是使用img标签;二是使用背景图片。 这两种实现方式最明显的区别在于:使用img标签添加图片,是通过HTML来实现;使用背 景图片,是通过CSS来实现。
在实际开发中,很多人添加图片的方式很随意。对于什么时候使用img标签,什么时候 使用背景图片,并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分,并且想要被捜索引擎识别,则应该使用img标签,例如常见的各种图片列表。如果图 片仅仅是起到修饰作用,并且不想被搜索引擎识别,则应该使用背景图片。
举个例子,图左这个页面中的图标图片就应该使用背景图片实现,因为这些图标并不 需要被搜索引擎识别,也不作为HTML的一部分。而图右页面中应该使用img标签来实 现,因为这是页面HTML结构的一部分,并且希望被搜索引擎识别。
【总结】
以上只是列举了在实际开发中比较常见的语义标签,其实HTML5新增了很多结构语义 标签,例如header、nav、aside、footer、article、section等。如果想要实现语义更为良好 的页面,我们也应该去关注这些新增的标签。不过结构语义标签是HTML5的内容,因此这里不展开介绍。
(七)语义化验证
前面这几节,我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来 判断一个页面是否语义良好呢? 一个很简单的办法就是:去掉CSS样式,然后看页面是否还 具有很好的可读性。
我们都知道,很多HTML标签都有一定的默认样式,例如p标签有上下边距、strong标 签对字体加粗、ul标签有缩进效果,等等。
在前面我们接触过,我们可以使用一个标签来代替另外一个标签,并且使用CSS修饰来实现相同的效果。也就是说,不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
语义不好的页面和语义好的页面
从上面两张图我们可以看出:一个语义良好的页面在“CSS裸奔”之后,可读性也是非 常高的。想要查看一个页面在“CSS裸奔”下的效果,我们可以使用Firefox浏览器的一款网 页调试插件"Web Developer"来测试。
在 Web Developer ZL具栏找到“CSS” —► "Disable Styles" —'"Disable All Styles" 并且选中,就可以查看页面去掉样式后的效果,如图2-21所示。Web Developer插件的安装 和使用,请自行搜索,很简单。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。