HTML的div标签有什么作用？如何正确使用？

说实话，div没什么特别的，就是一个空盒子而已。
你主要做什么？将页面分为多个块，以便以后更轻松地添加样式或文本。
但使用时必须注意一些事项。

例如，现在的网站布局以前依赖浮动定位，但现在使用Flexbox或Grid。
看一下这个示例：

像这样与 CSS 一起使用： CSS .容器{ 显示方式：灵活； } .侧边栏{ 宽度：2 00px； } .内容{ 灵活增长：1 ； } .广告{ 宽度：1 5 0px；
响应式设计怎么样？使用@media 来完成工作。
以小屏手机查看为例： CSS @media（最大宽度：7 6 8 px）{ .侧边栏，.ad { 显示：无； }
但是div不能使用太多的类。
像这样嵌套三层：

其实没有必要。
直接使用语义标签：

Title

内容

比 div 好得多。
现在有特殊的标签，例如主题领域的部分和独立文章的文章。
像这样：
<部分>

最新文章

文章标题 1

文章摘要...

</文章>
百分比宽度也可用于允许 div 宽度随父容器变化。
Flexbox 甚至更好，直接支持响应能力： CSS .容器{ 显示方式：灵活； 弹性包裹：包裹； } .左，.右{ 宽度：1 00%； } @media（最小宽度：7 6 8 px）{ .左，.右{ 宽度：5 0%； }
常见问题解答怎么样？例如，如果随意使用了太多 div 代码，则使用更有意义的标签，如页眉、导航、主目录和页脚。
布局是否复杂且难以维护？使用 BEM 命名法来区分类型。
响应能力有什么问题？检查媒体条件是否正确，不让父元素限制宽度。

总之div相当灵活但不要盲目使用。
如果结构更清晰，代码更简单，响应能力更容易理解，那么网站看起来会更好。

html中div标签的用法

div 是一种常见的块级容器，用于保存内容。

默认情况下，它占据一行并填充父项的宽度。
您可以安装任何内容：文本、图像、表格等。
由于它本身没有任何样式，因此您必须使用 CSS 来使其美观。

主要完成以下任务： 1 .捆绑制作饺子馅等内容。
示例：class="article" 包含文章标题和段落。
2 .逻辑分组让你的代码看起来更流畅。
示例：class="user-card" 包含头像和用户名。
3 、CSS控制外观并绘制边框背景。
示例： style="border:1 pxsolid ccc" 添加边框。
4 . 列出基础知识并将其用作构建块。
示例：页眉/底部/页脚分为三部分。
5 .赋予它意义，但不要盲目使用。
示例：class="header"，但最好使用

。

最佳实践： 1 .优先使用语义标签header

article>div。
2 .合理的ID/等级，基本的导航菜单。
3 .避免嵌套太深。
三层div就足够了。
4 . 与 Flexbox/Grid 协作。
不要仅仅依赖 div 堆栈。

示例： 不推荐：div 嵌套 div，如俄罗斯套娃。
推荐：article+h1 +p，意思清晰。
何时使用
div： 仅当不再有合适的标签时才使用。
不要盲目使用。
建议有nav/a。

自己掂量一下。