html其他语义化

Qwe7

发布于 2022-05-18 08:56:50

8360

发布于 2022-05-18 08:56:50

文章被收录于专栏：网络收集

（六）其他语义化

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结构的一部分，并且希望被搜索引擎识别。