一个网站的所有 HTML 都可以用 div 标签解决，为什么还会有各种不同的标签？？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2367 天前的主题，其中的信息可能已经有所发展或是发生改变。

href 属性可以用 js 的 location.href 代替，img 标签可以拿 background-image 配合 background-size 解决，input 可以用 div 的 contentEditable 解决，其余的什么 p、ul、li、span 等等更不用说了，都可以解决，而且我印象中谷歌也表示过，html 标签不影响 SEO，那么我全部用纯 div 写一个网页有什么弊端？

div

标签

解决

span

136 条回复 • 2017-10-28 08:27:57 +08:00

1 2

❮

❯

allen6699

2017-10-26 10:05:21 +08:00

写起来很累算不？

mscb

2017-10-26 10:05:38 +08:00

话说 href 属性用 js 的 location.href 代替，搜索引擎咋抓取呀？

alwayshere

2017-10-26 10:06:48 +08:00

@mscb googlebot 支持 js 解析啊

viko16

2017-10-26 10:07:21 +08:00

我想了一下，还有 <script> <noscript> <style> <iframe> 等等你怎么破

luwu1991

2017-10-26 10:07:48 +08:00 via iPhone

所有的代码都可以用 01 写，为什么要用 java，php 这些高级语言啊

Sivan

2017-10-26 10:07:53 +08:00

谷歌没表示过 HTML 标签不影响 SEO，最多表示对 HTML5 的新标签支持有限。

liangguan5

2017-10-26 10:07:55 +08:00 via iPhone

我也好奇，键盘明明一个键就够了

lusheldon

2017-10-26 10:08:16 +08:00 via Android

照这思路，不如手写二进制，所有函数，所有类都能用 0 和 1 表示😏

Tunar

2017-10-26 10:10:14 +08:00

因为代码是写给人看的

yonoho

2017-10-26 10:10:17 +08:00

这个问题就像，我在世界各地都可以刷美元，为什么还会有各种本地货币？？

master13

2017-10-26 10:10:22 +08:00

可读性比较差吧，另外赞一下 @luwu1991 的回复

Tunar

2017-10-26 10:10:36 +08:00

@liangguan5 不是两个键吗。。

helone

2017-10-26 10:11:23 +08:00

无非就是语义化、方便无障碍阅读和搜索引擎分析等，你要是觉得都不重要，而且觉得自己用普通标签去实现 input 方便的话大可以这样玩

hfenger

2017-10-26 10:12:42 +08:00

你甚至可以用 canvas 画，写代码是用来满足需求的不是用来给处女座走极端的，合理用 div js 不但能减少工作量还能优化网页效率，减少后端压力，讲的是合理而不是走极端，人家 ul li span 一眼就能扫到，你满网页 div

chenyu8674

2017-10-26 10:12:48 +08:00

@Tunar 电报 =。=

shoaly

2017-10-26 10:13:09 +08:00

上面的喷的并不好. 我来解答一下
楼主用 div+css 理论上是可以实现所有观感和样式, 但是 p span, h1~h6 这些标签的意义并不是为了解决看起来是啥样子, 而是将网页的内容语义化. 这样大家可以知道 p 里面包含的大概率是段落, h1 标签是主题, 都是 div 的话, 是不能做到的.

learnshare

2017-10-26 10:13:18 +08:00

两个问题：
1. 游戏应用一切东西不过都是 Pixel，为啥我们不一个点一个点画出来？
2. W3C 为啥要定义标准？

Tunar

2017-10-26 10:14:00 +08:00

@chenyu8674 =。=我以为是 0 1 两个键一晚上按出操作系统

x86

2017-10-26 10:17:06 +08:00

alwayshere

2017-10-26 10:17:19 +08:00

@shoaly 你问一下周围非搞 IT 的人，比如你父母、周围喜欢网购的女生，他们打开淘宝是不是没看网页，而是先 F12 打开 console 查看 HTML 结构，然后在大脑中渲染出网页的页面，然后再来挑选自己喜欢的商品？？

alwayshere

2017-10-26 10:20:03 +08:00

@luwu1991
@lusheldon
@learnshare 你们这些比喻都是完全两码事，用 01 代码写和用 php 及 Java 写难度一样？？？，而用 div 写和用各种 a、p、ul、span、li 等等来写难度会不一样？？？无非就是提前声明一下 display 是 inline 和 block 或者预设一下他们的 margin 和 padding 而已

xudshen

2017-10-26 10:24:33 +08:00

@alwayshere。。。你先搞清楚语义化的概念，弄明白语义化究竟是为谁服务的

learnshare

2017-10-26 10:25:02 +08:00

旧文 https://github.com/LearnShare/FE/blob/master/html/semantic.md HTML 标签语义化
以及 https://www.zhihu.com/question/66934513/answer/248036488 这个开源的 6 千行 UI 框架，能打败 QT，MFC 吗？

satgi

2017-10-26 10:27:48 +08:00

@alwayshere 考虑过无障碍吗？

fzleee

2017-10-26 10:30:04 +08:00

有一些标签是具有语义性质的，比如 article, header，section 等等，浏览器的阅读模式会需要用到这些标签，单纯的 div 不能实现

A3m0n

2017-10-26 10:33:06 +08:00

@chenyu8674 一个键的话还需要把握时间间隔，但键盘的输入我觉得很少与时间间隔有关（游戏除外）。

Mitt

2017-10-26 10:33:08 +08:00

@alwayshere 语义化不是让你看的，是让机器分析的

learnshare

2017-10-26 10:33:39 +08:00

@alwayshere 你要明白爬虫和屏幕阅读器是不看样式的，他们得到的只有 HTML

屏幕阅读器很深奥？可以看看 Google I/O 2017: What's New in Android Accessibility

&feature=youtu.be&t=5m38s

另外，应用的可访问性是有广泛的法律和政策要求的，国内开发者和公司没时间处理这个而已
https://www.w3.org/WAI/Policy/

we2ex

2017-10-26 10:41:21 +08:00 via Android

@alwayshere 这跟非 IT 的人有什么关系，当然是为了提高开发人员效率

overflowHidden

2017-10-26 10:43:09 +08:00

所有关于 HTML 教程里都有提到过标签语义化和无障碍阅读适配，当然现在国内开发氛围来说后者都是被忽略的，更何况像楼主这种人对语义化意义是啥都不明白。代码终究是给人看的，一个单标签就能解决的事情要复杂化，写着麻烦同事看了也想骂娘。

murmur

2017-10-26 10:46:16 +08:00

既然编译器会把所有代码转成机器码那 abcd 这样的变量用起来不是更方便？

SuperMild

2017-10-26 10:47:19 +08:00

其实很简单，因为完全用 div 的方案也没有更优秀啊，过犹不及，太少标签不好，太多标签也不好。

在 HTML5 之前，HTML 一直有不断增加标签的趋势，这其实和完全用 div 差别不大，一个比较明显的缺点就是 class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"。

到了 HTML5 其实已经精简了很多，并且做了更好的分类和用途规范。把语义和外观分开，标签负责表示语义，div 配合 css 负责展示外观。

lamada

2017-10-26 10:47:46 +08:00

无障碍于都适配 + 1，很多人不了解这一块

Cat73

2017-10-26 10:49:49 +08:00

其实可以 <canvas></canvas><script></script>
然后所有东西都用 js 生成

mengzhuo

2017-10-26 10:49:54 +08:00

楼主的想法已经出现，而且业内俗称 div soap （ div 一锅汤）

HTML= Hyper Text Markup Language
markup 啊！！！亲！！！！敲黑板了！！！！中文是标记啊！！！！！
不是纯文本啊！！！！你全标记成 div （ division 的缩写），跟没标记一样啊！！！

luoyuhui

2017-10-26 10:50:21 +08:00

语义化，然后看的比较方便

SuperMild

2017-10-26 10:53:09 +08:00

还有，完全用 div，还不如直接用 XML，XML 的标签名称是不受限制的，写成 <div class="JinGongMen"> 还不如写成 <JinGongMen>，因此，历史上还曾经出现过 XHTML，但是这样做等于把语义和外观纠缠在一起了，实践证明这样行不通，XHTML 也很快走完它短暂的一生被无情地抛弃了。

bjfane

2017-10-26 10:54:42 +08:00

语义化可能在盲人阅读的时候有用

SuperMild

2017-10-26 10:57:17 +08:00

class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"，这个问题怎么解决？

很简单，大家约定俗成统一用 class="img"就好了呀，然后，既然都约定了，为什么不简化为 <img>？最终就会编程现在 HTML5 的样子。

avrillavigne

2017-10-26 11:11:10 +08:00

经验送得还不够，继续。

arzterk

2017-10-26 11:14:50 +08:00

估计过两天楼主可能会发个帖子问 C 为何要搞几个循环 for while do..while
~.~

houbaron

2017-10-26 11:19:35 +08:00 via Android

考虑过用屏幕朗读器的残疾人士吗

stanjia

2017-10-26 11:21:13 +08:00

上世纪，也有楼主类似的声音，
当时的说法是：一个网站的所有 HTML 都可以用 table 解决，为什么还要 div

Fedor

2017-10-26 11:23:37 +08:00

又想骗我们的分

usedname

2017-10-26 11:30:16 +08:00

楼主，装逼这种事呢，适可而止，过犹不及。

LeeSeoung

2017-10-26 11:31:23 +08:00

每天净问些没营养的问题，blocked

opengps

2017-10-26 11:48:07 +08:00

@x86 能用这个做个操作系统出来不？

youxiachai

2017-10-26 11:53:24 +08:00

我们做到一定程度..还得考虑一下无障碍的需求啊..

我记得我读书的时候...学前端的时候...看老外的书..有专门的一章.讲无障碍的事情...

Creabine

2017-10-26 11:57:55 +08:00

为什么能理直气壮的问这种低级问题啊？这都不懂难道不是该去看看书 google 一下吗？
楼上的 V 友们都耐心的解答了，居然还在这强行反驳。
楼主是不是觉得自己发现了惊天大秘密，其他人用那么多标签都很智障啊？
block 了

TomIsion

2017-10-26 11:59:29 +08:00

1. location.href 不能模拟 target=_black
2. img 标签可以响应式大小撑开容器 bg 相关属性做不到
3. 表单直接提交？

楼主先把上面的问题解决下吧

其次如果禁用了 JS 那网站？

alwayshere

2017-10-26 12:04:04 +08:00

@TomIsion 1.window.open 2. background-size 配合 div 能实现 3.我写 form 表单可从来没直接提交，都是 js 先 ajax 验证然后再 ajax 提交给后台，从来没 submit 过

imn1

2017-10-26 12:04:19 +08:00

我也一直不明白，CLI 可以解决一切，为什么要 GUI ……

Amayadream

2017-10-26 12:08:52 +08:00 via iPhone

一直不明白，有一块不就行了，还要五块十块一百的干嘛，反正都能用一块支付

shuirong1997

2017-10-26 12:08:59 +08:00

语义化

onlyhot

2017-10-26 12:10:38 +08:00 via iPhone

你才发现？我刚学的时候就感觉只用 div 就行了。

hansZh

2017-10-26 12:38:19 +08:00

1. 如果所有标签都用 div，那么实际上说明 div 是可省略的。
2. 当标准省略 div 之后的标签用什么作区分呢？ class? attributes ？又或者是 id?
3. 无使用哪种方法，最终又会因为冗余字段而简化为标签的形式。

jinganchuqi

2017-10-26 12:44:25 +08:00 via Android

不是样式结构行为分开吗？

1759761439

2017-10-26 12:50:30 +08:00 via Android

主要是为了方便啊😂

workwonder

2017-10-26 12:52:03 +08:00 via Android

楼主太固执了，没法看下去了

sadpast

2017-10-26 13:01:34 +08:00 via Android

@alwayshere 万一人家浏览器禁用 js 了怎么办？不要说你不用考虑这种情况(ಡ艸ಡ)噗

howeroc

2017-10-26 13:13:41 +08:00

想过盲人怎样“看”网页吗？

yuriko

2017-10-26 13:19:31 +08:00

我记得我们老师当年说过，一个网页的点击，90%的时候都是被机器在读……
合理使用标签有助于解析……

SilentDepth

2017-10-26 13:19:34 +08:00

用 JS 实现 <ol>？

dosin

2017-10-26 13:22:23 +08:00 via iPhone

你不适合搞前端你搞前端你就是前端的毒瘤你也不适合搞别的语言你搞什么都是该领域的毒瘤因为你的想法、性格、能力不行

scriptB0y

2017-10-26 13:26:02 +08:00

HTML5 在做的一件事情就是语义化。这是时代的步伐。网页是给人看的，代码也是要给人读的。用 vedio，img 这样的标签可以让其他服务和接口做更好的可以用性。

标签都是应该有语义的，相反，<div>是最没有语义的一个标签（ https://segmentfault.com/a/1190000002695791#articleHeader0 ），HTML5 是不倡导使用的。

楼主你在反人类吧……

woffee

2017-10-26 13:30:28 +08:00

啥也别说了，楼主下个项目只用 div 试试。实践出真知。

jjplay

2017-10-26 13:35:30 +08:00

mingge 攻械湿的继任者 —— DIV 胶父.

VincentWang

2017-10-26 13:36:51 +08:00

语义化，一是爬虫抓取，二是 WAI-ARIA。

ssshooter

2017-10-26 13:45:14 +08:00

语义化没问题，有的标签自带样式就挺讨厌，又要自己覆盖

g0thic

2017-10-26 13:50:00 +08:00

还好没遇到这样的同事

tabris17

2017-10-26 14:05:51 +08:00

语义化啊，都是 div 看着不累吗。再说了，有 textarea 不用，非要用 contenteditable 的 div 吗

Zzzzzzzzz

2017-10-26 14:53:07 +08:00

@TomIsion 其实原本 xhtml 1.0 严格模式就已经要把 target=_blank 给砍了, 要求用 rel 属性和 window.open 的 js 替代，不过后来 xhtml 死了.....此处当 @laogui

xiaobai012

2017-10-26 15:12:22 +08:00

既然只吃百米饭就可以吃饱，为啥还要吃菜

ningbo16

2017-10-26 15:39:16 +08:00

你可以理解为这些标签分别对 div 进行了封装，比如说 h 标签封装了字号颜色，p 标签封装了间距等等

Tokin

2017-10-26 15:49:06 +08:00

明明一张图片可以做的事情，为什么要用 HTML+CSS

anla

2017-10-26 15:52:06 +08:00

似乎，期初的时候，网页是 table 的，table 没有 div 万能，就有各种标签补充。div+CSS 出现并流行之后，table 外的标签留存。另外，就是搜索引擎，搜索引擎一开始也不是那么聪明，你有各种语义化的标签，它比较容易读懂，读懂了，就容易给网站带来流量。那么，事到如今，如果不在乎搜索引擎的流量，那就另说了，可以 DIV 干到底。

oroge

2017-10-26 16:22:17 +08:00 via iPad

使用带语义的标签意味着 accessibility, 譬如盲人的读屏软件知道 <h1> 代表一个标题，可以告诉盲人用户，但是如果你用 <div class=“ my-own-heading-class ”> 那么读屏软件就不知道“这是标题”。与此相关的还有 aria 等属性。

话说回来，尽管我知道的国际大厂都注重残障人士友好（包括苹果微软等，看看各个 OS 的「辅助功能」功能列表就能说明情况了），但是国内大厂很多都不注重 accessibility （之前听说微信不支持盲人读屏软件，不知道现在状况如何）。希望愿意为此付出的公司会更多吧。不过大概这得等到普遍仓廪实的那一天 ==。

带语义的标签另一个好处是对爬虫友好（比如 SEO ）。

linus3389

2017-10-26 17:55:41 +08:00

大家都在无脑怼楼主么。。。我觉得楼主挺创新的啊。

其实，只是现在大多数从业人员的认知和接受是如此，大家也就默认接受了这种 HTML 的格局。业界进步就是要不断打破格局的。

现代的 js 生态已经很强大了，强大到就算一个 Framework 都可以有自己的生态比如 React Vue Angular 之流。

楼主你可以自己实现一套框架，只有 DIV。如果火了，各种标准就会来适配你，从业人员也都会来习惯你。

dongsuo

2017-10-26 18:05:08 +08:00

写写试试不就知道了，你自己写个页面就知道有多蛋疼了

demo

2017-10-26 18:30:57 +08:00

楼主试试 pugjs 吧，这样 div 三个字母都不用写了。🙂

codehz

2017-10-26 18:32:19 +08:00

@linus3389 #78 强行创新。。DIV+CSS 明明是上个时代的潮流。。。。想体验弊端的可以把眼睛闭上，用屏幕阅读器看看你的网页。。然后看看还能不能想象你的网页是怎么样的，之前的哪些功能该怎么操作。。特别是你把按钮也用 div 实现之后，屏幕阅读器甚至不能让你按下按钮。。。。。
真的要自己用 div 实现一个框架，为了让屏幕阅读器正确识别，还是得加上大量的 role 标签，得不偿失

phy25

2017-10-26 18:59:28 +08:00 via Android

我猜这问题的答案去 W3C 的讨论组和规范去找应该是有的。楼这么高，也没看到楼主的正面讨论，下面这些就算是写给自己的吧。
如果硬是觉得语义化没用，可以这么理解：用 div[style~="background"] 代替 img[src] / photo，代码长度会变长。HTML 的那一类块元素都可以用 div 外加 CSS 改写、JavaScript 收事件下来代替，但要覆盖掉浏览器默认的样式表、ARIA 行为，自然会增加代码量，也就是增加下载时间和工作量。（当然自从随便一个网页的 JavaScript 就动辄几兆之后 HTML 的简洁和语义就不怎么被人关注了）
以前可能为了低成本地向下兼容，有些 HTML5 的新元素还不敢用，用 div 包揽也是正常。可现在正常并没有这么做的理由了。如果还反倒扩大使用范围的话，要是样式表、JS 真的掉了（浏览器是可以这么工作的），网页也就变得一塌糊涂了，那种文本式浏览器更是不用说。
这也是个人为啥很讨厌有些网页里，把信息表格硬是做成图的原因之一。

cctv1005s927

2017-10-26 19:32:28 +08:00

作为一名前端工程师我可以很明确的和你说：
为什么不能用 div 一锅端，
因为判断一个 html 结构写的好不好，最重要的一点就是在没有 css 和 js 的时候，网页的内容还能被用户所理解，结构还是清晰的，这样的才是好的 html。

当因为网络原因导致 css 和 js 无法加载出来的时候，优秀的 html 结构，对用户的体验来说，比全是 div 要好非常多。

Reign

2017-10-26 19:37:46 +08:00

@cctv1005s927 js 和 css 都写在 HTML 不行么？非要单独弄成一个文件？

AlisaDestiny

2017-10-26 19:41:15 +08:00

你这个问题就跟所有变量都可以用 abc 来表示。为什么还要取那么长的名字一样。

Mark24

2017-10-26 19:45:03 +08:00

楼上都冷嘲热讽，就不能直接回答么？

爬虫和屏幕阅读器，都是只读 HTML，语义化的标签，可以直接分析。

maplewjk

2017-10-26 20:00:31 +08:00

好看，好用。不无聊～

lukunlin

2017-10-26 20:09:49 +08:00

爬虫先不说哈，
就问你，要图片的高撑开父级别，你用 background 你怎么撑开？你怎么知道图片的大小是多少~

2017-10-26 20:30:10 +08:00

明确回答楼主：可以全 div，没毛病。
另外反对 cctv1005s927 ，不开 css 和 js 的并非大众用户，你大可以在服务器端给他输出个别的模板，没必要混淆。

sampeng

2017-10-26 20:34:26 +08:00

恩，你大可这样干。。一直做到维护不下去的时候闪人。。留萌新在 div 的海洋中痛苦

SourceMan

2017-10-26 20:43:13 +08:00

这样的人，我们应该宠着他：你对~你都对，继续加油哦~你的想法非常对~

flyingghost

2017-10-26 20:59:21 +08:00

1，历史。div 是 HTML2.0 出场的，div 加持一堆 css 和 js 属性那是更久以后。a 呢？ HTML1.0 就有了。我用 a 用的好好的，凭什么 div 出来我就要改？历史代码还要不要？接受新事物也可以，只要新事物在某些方面巨幅超越旧习惯——然则并没有。
2，懒，方便。有一种写法是“<div 可编辑，带框，可焦点，可记录值，可和表单合作。。。>”，巨臭巨长一大堆属性。没办法，div 有五万种属性可供配置，为了每个具体场合有适合的表现，必须配置妥当。这么恶心的代码，我分分钟抽象出一个新标签叫<input>。你叫他语法糖、模板、组件。。。随便什么都可以，背后的原因都可以是懒。分化是必然结果。
3，语义化。所有的代码，本质上都是给人读的。越通俗越直白越自然越好。
4，效率。漫长的、复杂的 div 显然不便于网络传输和浏览器解析。高度抽象后简洁的<input>更有效率。
5，简单。不是每个人都能灵活使用 div+css+js 的。给他们一目了然的 p、img 和 a，他们已经可以写网页了！用的人多的技术才是能活下来的技术。
6，还有其他，懒得写了，直接进入总结吧。

lz 能提出这种问题，技术水平一般在 1-2 年左右，能力有长足进步，逐渐发现自己能在原本以为非常稳固的世界中用某些 tricks 打开新的大门。这时候很容易对旧世界产生思考，产生质疑，有一种打破和改造旧世界的冲动。
但，压住，压住。在冲动之前，应该理智。先想清楚，“存在即合理”这句话的意义何在。抛弃自己的立场，客观全面的评价旧事物，再谈打破和改造的必要性、程度、方式。

也许 lz 现在已经跨越了技术方向的第一个门槛。现在要补的，是设计、工程、人性、哲学等比较宏大比较虚的话题了。: )