DIV是HTML中最通用、最强大的容器元素。本演示展示了DIV的各种用法，包括基本布局、自定义属性、CSS效果和创意实现。
DIV最常用于页面布局和内容分组：
使用data-*属性存储自定义数据：
使用CSS根据自定义属性设置样式：
[data-user-status="active"] 和 [data-user-status="inactive"]
JavaScript可以读取这些属性：
element.dataset.userStatus
使用CSS将DIV转换为各种形状和动画：
使用 border-radius: 50% 创建圆形，添加CSS过渡效果。
使用伪元素、渐变和动画创建纯CSS艺术。
使用 transform-style: preserve-3d 和 perspective 创建3D效果。
使用CSS Grid创建响应式布局：
调整浏览器窗口大小查看响应式效果。使用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 实现自动调整。
一些不常见但强大的DIV用法：
使用 contenteditable 属性使DIV可编辑。
将鼠标悬停在此 虚线文本 上查看工具提示。
使用伪元素和 attr() 函数创建纯CSS工具提示。
使用 counter-reset 和 counter-increment 创建自定义计数器。