HTML语义化的案例分析 | 青训营

55 阅读1分钟

一,探寻哔哩哔哩网页语义化

image.png 如图所示,在哔站首页的head部分,语义化是比较明显的。我们可以清楚的看到具体的实现功能,比较好去理解这一部分代码的作用。

image.png 在具体实现功能部分,则大量使用了meta以及链接进行转跳,这是十分简洁而且易于后期维护与理解的。我们可以看到,在标题中对于语义化标签title的使用,就是一个很好的例子。

<title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>

二,探寻4399网页的语义化

image.png

image.png 不难发现,4399的主网页大量使用了div定义的各种类,很少使用语义化的标签来实现具体的一些功能。因此,在后期维护以及进行一些功能理解时,需要结合定义类的名称以及具体代码去查找它的具体功能实现。这一过程相比使用语义化的标签,是略显繁琐的。

三,个人总结

综合来看,一些新兴的产品它的配套网页一般会更加乐于采用语义化的标签进行编写,这种方式利于阅读以及后期维护的优势是显而易见的。而一些早已存在且运行已久的网页,则是由于当时编写的技术实现以及语义化不成熟等原因,会更加乐于使用多个div去不断的定义实现具体功能。这是一种在编写上主观性更强的方式,但不太利于后期的代码理解与维护。