html常用块级标签

HTML中的div标签有什么用？ div标签的5个常见用途

你这长篇大论看得我头都大了...感觉就像在看教科书，完全没点实际感觉。
让我跟你唠唠div标签在实际开发里是怎么用的，我给你举几个真事儿。

上周有个客人问我为啥他做的H5 页面在手机上显示乱七八糟，后来发现全是乱用div导致的。
这让我想起以前我在上海某商场接的一个项目...
先说最关键的：div就是个万金油，但用不好会烂大街。

比如2 01 9 年我在北京做那个电商活动页面，产品详情区需要左右两栏布局。
当时技术小哥用div+css做了个很妙的响应式方案：左栏占2 5 %用div.left-col，右栏占7 5 %用div.right-col，配合Flexbox实现了完美适配。
你要是硬要用语义标签，非得找个啥"侧边栏"之类的词，结果用户看产品信息都绕着看。

但你要是连着用三层div嵌套，我直接翻脸。
记得2 02 1 年在深圳做一个教育平台的课程详情页，有个老师跟我说"我加个div包裹这个区域，方便后面改样式"。
结果你看——

这简直就是在煮div汤！后来我直接用Grid重做，代码简洁多了。
你看现在主流的框架哪个还用这么多div嵌套？Vue和React早就用组件化结构了。

但div也不是一无是处，某些场景确实得靠它。
比如做那种"加载中"的进度条，你总不能找个语义标签吧？直接用div配合动画CSS就行。
还有那种悬浮的客服按钮，用div+js控制显示隐藏最简单。

重点说说div和语义标签怎么选：

搞活动页面、模板页，div用得越多越好。
你想想，谁管你页面结构多合理啊？客户要的是"快装好"。

做那种需要SEO的官网，div就得慎用。
我当时做某金融公司的官网，硬是被迫改了上百个div，全换成header、article、aside。
活活改了三天。

最烦的是有人把div当万能贴，连表单都用div包。
上个月有个项目，表单提交直接崩溃，定位到发现每个输入框都套着三层div。
你说这能不卡吗？直接用form+input+label多好。

所以啊，div用得妙是神器，用得烂就是定时炸弹。
关键看你用在什么场景。
现在做前端，我最烦的就是新人写代码，满屏都是带class="wrap"的div。
你说说，这代码谁看？
反正你看着办吧...

html标签分类有哪些

嗨，你问我HTML标签的分类嘛？这事儿得聊聊。
HTML标签按照显示特性主要分三类：块级标签、行内标签和行内块状标签。

先说块级标签。
它们独占一行，就像你在纸上写字一样，一个字占一行。
比如《div》、《p》、《h1 》到《h6 》这些标签，你都可以指定它们的大小，上下左右的边距，还能自动换行。
这类型标签通常用来构建页面的结构。

行内标签呢，它们就像字里行间的标点符号，比如《span》、《a》、《strong》、《em》这些。
它们不会独占一行，宽度高度由内容决定，也不能直接设置大小。
行内标签在页面布局中主要是用来修饰文本。

再来说说行内块状标签。
这就像是块级标签和行内标签的结合体。
像《img》、《input》、《button》、《select》这些标签，它们既可以在一行内显示，又可以设置宽高。
不过，这种标签在默认情况下会有默认的空格，而且水平居中要靠text-align属性，不能用margin: 0 auto。

说到转换标签类型，其实很简单，就是用CSS的display属性。
你想让一个标签变成块级，就写display: block;，变成行内标签就是display: inline;，变成行内块状标签就是display: inline-block;。

这事儿啊，搞明白了标签类型，布局就会方便多了。
比如用《div》来构建整个页面的框架，用《span》来对文本进行微调，用《img》来实现图文混排，这些都很实用。
反正你看着办，理解这些基本就能在网页制作中游刃有余了。
我还在想这个问题，以后有机会再细聊。

html中常用的块状标签有哪些 html常见块状标签汇总及用法

哎哟，说起来HTML标签这事儿，我当年刚入门的时候，那可真是头都大了。
记得有一次，我帮一个朋友做网站，那会儿还没怎么搞懂这些块状标签的用法。

那时候，我用的最多的就是里面又放了个，浏览器默认不这么干啊。
他还挺聪明，说"那下次我写代码注意这个？" 我就笑，说"没事，多试试就懂了。
"
等等，突然想到个事。
前年我在公司做活动页面，有个设计师非要把一个