从哔哩哔哩首页的HTML结构来看，它主要广泛使用了非语义化标签（如div和span）。以下是对其HTML结构中非语义化标签使用的分析以及它们的差异：
div 的使用分析
特点：
- 主要用于容器和布局： div 主要被用来包裹大块的内容区域。例如，导航栏、视频列表、推荐内容等模块，都使用了多个嵌套的div结构。但通过类名（如.header、.nav、.content，.data）对不同区域进行区分。
- 结合CSS和JS赋予功能： 类名通常用来定义样式规则，比如宽度、高度、背景等。div 也常被用作交互容器，与JavaScript事件绑定，例如鼠标点击、悬停等操作。
代码示例：
<div class="video-container">
<div class="video-thumbnail">
<img src="video.jpg" alt="Video Thumbnail">
</div>
<div class="video-info">
<span class="video-title">Example Video</span>
<span class="video-duration">10:00</span>
</div>
</div>
span 的使用分析
特点：
- 用于内联内容： span 通常用于细粒度控制，例如文本样式、图标位置或状态标记。 在哔哩哔哩中，span多用于显示视频标题、时间、用户信息等小块内容。
- 便于动态调整：
span 通常结合CSS或JavaScript动态显示或隐藏内容（例如用户操作时显示悬浮提示）。
更适合局部的内联装饰或标记，与
<div>的模块化用途形成互补。
代码示例：
<div class="user-info">
<span class="username">Bilibili User</span>
<span class="user-level">Lv.5</span>
</div>
以下是另外的一些网站的html代码使用div和span标签的一些用例：
淘宝网站：
<div class="product-list">
<div class="product-item">
<div class="image-container">
<img src="product.jpg" alt="Product">
</div>
<div class="details">
<span class="price">$19.99</span>
<span class="title">Example Product</span>
</div>
</div>
</div>
这里，div 被用作容器来包裹商品列表、图片和详情信息。 span 则用于修饰价格和标题，它们是小范围的内容，不需要块级展示。
BBC网站：
<div class="news-item">
<div class="headline">Breaking News: World Event</div>
<div class="meta">
<span class="date">2024-11-18</span>
<span class="author">Reporter</span>
</div>
</div>
YouTube
<div class="video-container">
<div class="thumbnail" onclick="playVideo()">Thumbnail Image</div>
<span class="play-icon">▶</span>
</div>
可以看到，div标签和span标签可以结合事件监听器，达到更好的与用户交互的功能。其中，div触发较大区域的点击，span触发较小区域的点击。
对比：div vs span
| 特性 | div | span |
|---|---|---|
| 语义 | 无语义，用于块级布局 | 无语义，用于内联装饰 |
| 默认显示行为 | 块级元素，独占一行 | 内联元素，与其他内容并列显示 |
| 常见用途 | 分块布局、包裹大块内容 | 修饰文本、图标等内联内容 |
| 动态交互能力 | 用于容器级别的动态行为，如拖拽、排序等 | 用于细粒度动态行为，如状态标记 |
虽然语义标签带来更好的可读性，但主流网站仍然主要使用非语义标签，我认为，原因在于以下两点：
- 灵活性高：非语义化标签没有功能和语义限制，适合动态复杂布局。对于像哔哩哔哩这样的视频平台，其首页需要频繁更新内容（如推荐视频、活动模块等），使用div和span便于快速调整。
- 样式与功能分离：通过CSS赋予div和span样式，通过JavaScript赋予功能（如点击事件、动态展示等），便于复用和维护。
