这是一个创建于 2912 天前的主题，其中的信息可能已经有所发展或是发生改变。
href 属性可以用 js 的 location.href 代替，img 标签可以拿 background-image 配合 background-size 解决，input 可以用 div 的 contentEditable 解决，其余的什么 p、ul、li、span 等等更不用说了，都可以解决，而且我印象中谷歌也表示过，html 标签不影响 SEO，那么我全部用纯 div 写一个网页有什么弊端？
 | 1 allen6699 2017-10-26 10:05:21 +08:00 写起来很累算不？ |
 | 2 mscb 2017-10-26 10:05:38 +08:00 话说 href 属性用 js 的 location.href 代替，搜索引擎咋抓取呀？ |
 | 3 alwayshere OP @mscb googlebot 支持 js 解析啊 |
 | 4 viko16 2017-10-26 10:07:21 +08:00 我想了一下，还有 <script> <noscript> <style> <iframe> 等等你怎么破  |
 | 5 luwu1991 2017-10-26 10:07:48 +08:00 via iPhone  2 所有的代码都可以用 01 写，为什么要用 java，php 这些高级语言啊 |
 | 6 Sivan 2017-10-26 10:07:53 +08:00 谷歌没表示过 HTML 标签不影响 SEO，最多表示对 HTML5 的新标签支持有限。 |
 | 7 liangguan5 2017-10-26 10:07:55 +08:00 via iPhone 我也好奇，键盘明明一个键就够了 |
 | 8 lusheldon 2017-10-26 10:08:16 +08:00 via Android 照这思路，不如手写二进制，所有函数，所有类都能用 0 和 1 表示 |
 | 9 Tunar 2017-10-26 10:10:14 +08:00 因为代码是写给人看的 |
 | 10 yonoho 2017-10-26 10:10:17 +08:00 这个问题就像，我在世界各地都可以刷美元，为什么还会有各种本地货币？？ |
| 12 Tunar 2017-10-26 10:10:36 +08:00 1 @liangguan5 不是两个键吗。。 |
 | 13 helone 2017-10-26 10:11:23 +08:00 4 无非就是语义化、方便无障碍阅读和搜索引擎分析等，你要是觉得都不重要，而且觉得自己用普通标签去实现 input 方便的话大可以这样玩 |
 | 14 hfenger 2017-10-26 10:12:42 +08:00 你甚至可以用 canvas 画，写代码是用来满足需求的不是用来给处女座走极端的，合理用 div js 不但能减少工作量还能优化网页效率，减少后端压力，讲的是合理而不是走极端，人家 ul li span 一眼就能扫到，你满网页 div |
 | 15 chenyu8674 2017-10-26 10:12:48 +08:00 @Tunar 电报 =。= |
 | 16 shoaly 2017-10-26 10:13:09 +08:00 3 上面的喷的并不好. 我来解答一下 楼主用 div+css 理论上是可以实现 所有观感和样式, 但是 p span, h1~h6 这些标签的意义并不是为了解决看起来是啥样子, 而是将网页的内容语义化. 这样大家可以知道 p 里面包含的大概率是段落, h1 标签是主题, 都是 div 的话, 是不能做到的. |
 | 17 learnshare 2017-10-26 10:13:18 +08:00 两个问题： 1. 游戏应用一切东西不过都是 Pixel，为啥我们不一个点一个点画出来？ 2. W3C 为啥要定义标准？ |
| 18 Tunar 2017-10-26 10:14:00 +08:00 @chenyu8674 =。=我以为是 0 1 两个键一晚上按出操作系统 |
 | 19 x86 2017-10-26 10:17:06 +08:00 11  |
| 20 alwayshere OP 1 @shoaly 你问一下周围非搞 IT 的人，比如你父母、周围喜欢网购的女生，他们打开淘宝是不是没看网页，而是先 F12 打开 console 查看 HTML 结构，然后在大脑中渲染出网页的页面，然后再来挑选自己喜欢的商品？？ |
| 21 alwayshere OP @luwu1991 @lusheldon @learnshare 你们这些比喻都是完全两码事，用 01 代码写和用 php 及 Java 写难度一样？？？，而用 div 写和用各种 a、p、ul、span、li 等等来写难度会不一样？？？无非就是提前声明一下 display 是 inline 和 block 或者预设一下他们的 margin 和 padding 而已 |
 | 22 ozking 2017-10-26 10:24:33 +08:00 1 @alwayshere。。。你先搞清楚语义化的概念，弄明白语义化究竟是为谁服务的 |
| 23 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 吗？ |
 | 24 satgi 2017-10-26 10:27:48 +08:00 @alwayshere 考虑过无障碍吗？ |
 | 25 fzleee 2017-10-26 10:30:04 +08:00 有一些标签是具有语义性质的，比如 article, header，section 等等，浏览器的阅读模式会需要用到这些标签， 单纯的 div 不能实现 |
 | 26 A3m0n 2017-10-26 10:33:06 +08:00 @chenyu8674 一个键的话还需要把握时间间隔，但键盘的输入我觉得很少与时间间隔有关（游戏除外）。 |
 | 27 Mitt 2017-10-26 10:33:08 +08:00 @alwayshere 语义化不是让你看的，是让机器分析的 |
| 28 learnshare 2017-10-26 10:33:39 +08:00 1 @alwayshere 你要明白爬虫和屏幕阅读器是不看样式的，他们得到的只有 HTML 屏幕阅读器 很深奥？可以看看 Google I/O 2017: What's New in Android Accessibility &feature=youtu.be&t=5m38s 另外，应用的可访问性是有广泛的法律和政策要求的，国内开发者和公司没时间处理这个而已 https://www.w3.org/WAI/Policy/ |
 | 29 we2ex 2017-10-26 10:41:21 +08:00 via Android @alwayshere 这跟非 IT 的人有什么关系，当然是为了提高开发人员效率 |
 | 30 overflowHidden 2017-10-26 10:43:09 +08:00 1 所有关于 HTML 教程里都有提到过标签语义化和无障碍阅读适配，当然现在国内开发氛围来说后者都是被忽略的，更何况像楼主这种人对语义化意义是啥都不明白。代码终究是给人看的，一个单标签就能解决的事情要复杂化，写着麻烦同事看了也想骂娘。 |
 | 31 murmur 2017-10-26 10:46:16 +08:00 既然编译器会把所有代码转成机器码 那 abcd 这样的变量用起来不是更方便？ |
 | 32 SuperMild 2017-10-26 10:47:19 +08:00 其实很简单，因为完全用 div 的方案也没有更优秀啊，过犹不及，太少标签不好，太多标签也不好。 在 HTML5 之前，HTML 一直有不断增加标签的趋势，这其实和完全用 div 差别不大，一个比较明显的缺点就是 class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"。 到了 HTML5 其实已经精简了很多，并且做了更好的分类和用途规范。把语义和外观分开，标签负责表示语义，div 配合 css 负责展示外观。 |
 | 33 lamada 2017-10-26 10:47:46 +08:00 无障碍于都适配 + 1，很多人不了解这一块 |
 | 34 Cat73 2017-10-26 10:49:49 +08:00 其实可以 <canvas></canvas><script></script> 然后所有东西都用 js 生成 |
 | 35 mengzhuo 2017-10-26 10:49:54 +08:00 2 楼主的想法已经出现，而且业内俗称 div soap （ div 一锅汤） HTML= Hyper Text Markup Language markup 啊！！！亲！！！！敲黑板了！！！！中文是标记啊！！！！！ 不是纯文本啊！！！！你全标记成 div （ division 的缩写），跟没标记一样啊！！！ |
 | 36 luoyuhui 2017-10-26 10:50:21 +08:00 语义化，然后看的比较方便 |
| 37 SuperMild 2017-10-26 10:53:09 +08:00 还有，完全用 div，还不如直接用 XML，XML 的标签名称是不受限制的，写成 <div class="JinGongMen"> 还不如写成 <JinGongMen>，因此，历史上还曾经出现过 XHTML，但是这样做等于把语义和外观纠缠在一起了，实践证明这样行不通，XHTML 也很快走完它短暂的一生被无情地抛弃了。 |
 | 38 bjfane PRO 语义化 可能在盲人阅读的时候有用 |
| 39 SuperMild 2017-10-26 10:57:17 +08:00 class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"，这个问题怎么解决？ 很简单，大家约定俗成统一用 class="img"就好了呀，然后，既然都约定了，为什么不简化为 <img>？最终就会编程现在 HTML5 的样子。 |
 | 40 avrillavigne 2017-10-26 11:11:10 +08:00 经验送得还不够，继续。 |
 | 41 arzterk 2017-10-26 11:14:50 +08:00 估计过两天楼主可能会发个帖子问 C 为何要搞几个循环 for while do..while ~.~ |
 | 42 houbaron 2017-10-26 11:19:35 +08:00 via Android 考虑过用屏幕朗读器的残疾人士吗 |
 | 43 stanjia 2017-10-26 11:21:13 +08:00 上世纪， 也有楼主类似的声音， 当时的说法是： 一个网站的所有 HTML 都可以用 table 解决，为什么还要 div |
 | 44 Fedor 2017-10-26 11:23:37 +08:00 又想骗我们的分 |
 | 45 usedname 2017-10-26 11:30:16 +08:00 2 楼主，装逼这种事呢，适可而止，过犹不及。 |
 | 46 LeeSeoung 2017-10-26 11:31:23 +08:00 1 每天净问些没营养的问题，blocked |
 | 48 youxiachai 2017-10-26 11:53:24 +08:00 我们做到一定程度..还得考虑一下无障碍的需求啊.. 我记得我读书的时候...学前端的时候...看老外的书..有专门的一章.讲无障碍的事情... |
 | 49 Creabine 2017-10-26 11:57:55 +08:00 为什么能理直气壮的问这种低级问题啊？这都不懂难道不是该去看看书 google 一下吗？ 楼上的 V 友们都耐心的解答了，居然还在这强行反驳。 楼主是不是觉得自己发现了惊天大秘密，其他人用那么多标签都很智障啊？ block 了 |
 | 50 TomIsion 2017-10-26 11:59:29 +08:00 1. location.href 不能模拟 target=_black 2. img 标签可以响应式大小撑开容器 bg 相关属性做不到 3. 表单直接提交？ 楼主先把上面的问题解决下吧 其次 如果禁用了 JS 那网站？ |
| 51 alwayshere OP @TomIsion 1.window.open 2. background-size 配合 div 能实现 3.我写 form 表单可从来没直接提交，都是 js 先 ajax 验证然后再 ajax 提交给后台，从来没 submit 过 |
 | 52 imn1 2017-10-26 12:04:19 +08:00 我也一直不明白，CLI 可以解决一切，为什么要 GUI …… |
 | 53 Amayadream 2017-10-26 12:08:52 +08:00 via iPhone 一直不明白，有一块不就行了，还要五块十块一百的干嘛，反正都能用一块支付 |
 | 54 shuirong1997 2017-10-26 12:08:59 +08:00 语义化 |
 | 55 onlyhot 2017-10-26 12:10:38 +08:00 via iPhone 你才发现？我刚学的时候就感觉只用 div 就行了。 |
 | 56 hansZh 2017-10-26 12:38:19 +08:00 1. 如果所有标签都用 div，那么实际上说明 div 是可省略的。 2. 当标准省略 div 之后的标签用什么作区分呢？ class? attributes ？又或者是 id? 3. 无使用哪种方法，最终又会因为冗余字段而简化为标签的形式。 |
 | 57 jinganchuqi 2017-10-26 12:44:25 +08:00 via Android 不是样式 结构 行为分开吗？ |
 | 58 1759761439 2017-10-26 12:50:30 +08:00 via Android 主要是为了方便啊 |
 | 59 workwonder 2017-10-26 12:52:03 +08:00 via Android 楼主太固执了，没法看下去了 |
 | 60 sadpast 2017-10-26 13:01:34 +08:00 via Android @alwayshere 万一人家浏览器禁用 js 了怎么办？不要说你不用考虑这种情况()噗 |
 | 61 howeroc 2017-10-26 13:13:41 +08:00 想过盲人怎样“看”网页吗？ |
 | 62 yuriko 2017-10-26 13:19:31 +08:00 我记得我们老师当年说过，一个网页的点击，90%的时候都是被机器在读…… 合理使用标签有助于解析…… |
 | 63 SilentDepth 2017-10-26 13:19:34 +08:00 用 JS 实现 <ol>？ |
64
dosin 2017-10-26 13:22:23 +08:00 via iPhone 你不适合搞前端 你搞前端你就是前端的毒瘤 你也不适合搞别的语言 你搞什么都是该领域的毒瘤 因为你的想法、性格、能力不行
 | 65 scriptB0y 2017-10-26 13:26:02 +08:00 HTML5 在做的一件事情就是语义化。这是时代的步伐。网页是给人看的，代码也是要给人读的。用 vedio，img 这样的标签可以让其他服务和接口做更好的可以用性。 标签都是应该有语义的，相反，<div>是最没有语义的一个标签（ https://segmentfault.com/a/1190000002695791#articleHeader0 ），HTML5 是不倡导使用的。 楼主你在反人类吧…… |
 | 66 woffee 2017-10-26 13:30:28 +08:00 啥也别说了，楼主下个项目只用 div 试试。实践出真知。 |
 | 67 jjplay 2017-10-26 13:35:30 +08:00 1 mingge 攻械湿的继任者 DIV 胶父. |
 | 68 VincentWang 2017-10-26 13:36:51 +08:00 语义化，一是爬虫抓取，二是 WAI-ARIA。 |
 | 69 ssshooter 2017-10-26 13:45:14 +08:00 语义化没问题，有的标签自带样式就挺讨厌，又要自己覆盖 |
 | 70 g0thic 2017-10-26 13:50:00 +08:00 还好没遇到这样的同事 |
 | 71 tabris17 2017-10-26 14:05:51 +08:00 语义化啊，都是 div 看着不累吗。再说了，有 textarea 不用，非要用 contenteditable 的 div 吗 |
 | 72 Zzzzzzzzz 2017-10-26 14:53:07 +08:00 |
 | 73 xiaobai012 2017-10-26 15:12:22 +08:00 既然只吃百米饭就可以吃饱，为啥还要吃菜 |
 | 74 ningbo16 2017-10-26 15:39:16 +08:00 你可以理解为这些标签分别对 div 进行了封装，比如说 h 标签封装了字号颜色，p 标签封装了间距等等 |
 | 75 Tokin 2017-10-26 15:49:06 +08:00 1 明明一张图片可以做的事情，为什么要用 HTML+CSS |
 | 76 anla 2017-10-26 15:52:06 +08:00 似乎，期初的时候，网页是 table 的，table 没有 div 万能，就有各种标签补充。div+CSS 出现并流行之后，table 外的标签留存。另外，就是搜索引擎，搜索引擎一开始也不是那么聪明，你有各种语义化的标签，它比较容易读懂，读懂了，就容易给网站带来流量。那么，事到如今，如果不在乎搜索引擎的流量，那就另说了，可以 DIV 干到底。 |
 | 77 oroge 2017-10-26 16:22:17 +08:00 via iPad 使用带语义的标签意味着 accessibility, 譬如盲人的读屏软件知道 <h1> 代表一个标题，可以告诉盲人用户，但是如果你用 <div class=“ my-own-heading-class ”> 那么读屏软件就不知道“这是标题”。 与此相关的还有 aria 等属性。 话说回来，尽管我知道的国际大厂都注重残障人士友好（包括苹果微软等，看看各个 OS 的「辅助功能」功能列表就能说明情况了），但是国内大厂很多都不注重 accessibility （之前听说微信不支持盲人读屏软件，不知道现在状况如何）。希望愿意为此付出的公司会更多吧。不过大概这得等到普遍仓廪实的那一天 ==。 带语义的标签另一个好处是对爬虫友好（比如 SEO ）。 |
 | 78 linus3389 大家都在无脑怼楼主么。。。我觉得楼主挺创新的啊。 其实，只是现在大多数从业人员的认知和接受是如此，大家也就默认接受了这种 HTML 的格局。业界进步就是要不断打破格局的。 现代的 js 生态已经很强大了，强大到就算一个 Framework 都可以有自己的生态比如 React Vue Angular 之流。 楼主你可以自己实现一套框架，只有 DIV。如果火了，各种标准就会来适配你，从业人员也都会来习惯你。 |
 | 79 dongsuo 2017-10-26 18:05:08 +08:00 写写试试不就知道了，你自己写个页面就知道有多蛋疼了 |
 | 80 demo 2017-10-26 18:30:57 +08:00 楼主试试 pugjs 吧， 这样 div 三个字母都不用写了。 |
 | 81 codehz 2017-10-26 18:32:19 +08:00 @linus3389 #78 强行创新。。DIV+CSS 明明是上个时代的潮流。。。。想体验弊端的可以把眼睛闭上，用屏幕阅读器看看你的网页。。然后看看还能不能想象你的网页是怎么样的，之前的哪些功能该怎么操作。。特别是你把按钮也用 div 实现之后，屏幕阅读器甚至不能让你按下按钮。。。。。 真的要自己用 div 实现一个框架，为了让屏幕阅读器正确识别，还是得加上大量的 role 标签，得不偿失 |
 | 82 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 真的掉了（浏览器是可以这么工作的），网页也就变得一塌糊涂了，那种文本式浏览器更是不用说。 这也是个人为啥很讨厌有些网页里，把信息表格硬是做成图的原因之一。 |
 | 83 cctv1005s927 2017-10-26 19:32:28 +08:00 作为一名前端工程师我可以很明确的和你说： 为什么不能用 div 一锅端， 因为判断一个 html 结构写的好不好，最重要的一点就是在没有 css 和 js 的时候，网页的内容还能被用户所理解，结构还是清晰的，这样的才是好的 html。 当因为网络原因导致 css 和 js 无法加载出来的时候，优秀的 html 结构，对用户的体验来说，比全是 div 要好非常多。 |
 | 84 Reign 2017-10-26 19:37:46 +08:00 @cctv1005s927 js 和 css 都写在 HTML 不行么？非要单独弄成一个文件？ |
 | 85 |
 | 86 Mark24 2017-10-26 19:45:03 +08:00 楼上都冷嘲热讽，就不能直接回答么？ 爬虫和屏幕阅读器，都是只读 HTML，语义化的标签，可以直接分析。 |
 | 87 maplewjk 2017-10-26 20:00:31 +08:00 好看，好用。不无聊～ |
 | 88 lukunlin 2017-10-26 20:09:49 +08:00 爬虫先不说哈， 就问你，要图片的高撑开父级别，你用 background 你怎么撑开？你怎么知道图片的大小是多少~ |
 | 89 j 2017-10-26 20:30:10 +08:00 1 明确回答楼主：可以全 div，没毛病。 另外反对 cctv1005s927 ， 不开 css 和 js 的并非大众用户，你大可以在服务器端给他输出个别的模板，没必要混淆。 |
 | 90 sampeng 2017-10-26 20:34:26 +08:00 恩，你大可这样干。。一直做到维护不下去的时候闪人。。留萌新在 div 的海洋中痛苦 |
 | 91 SourceMan 2017-10-26 20:43:13 +08:00 这样的人，我们应该宠着他：你对~你都对，继续加油哦~你的想法非常对~ |
 | 92 flyingghost 2017-10-26 20:59:21 +08:00 1 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 现在已经跨越了技术方向的第一个门槛。现在要补的，是设计、工程、人性、哲学等比较宏大比较虚的话题了。: ) |
 | 93 oonnnoo 2017-10-26 22:48:40 +08:00 可以解决所有的内容标签，应该是 img 吧 : ) |
 | 95 zhjits 2017-10-26 22:52:13 +08:00 因为 HTML 是一种 Markup Language |
 | 96 lwbjing 2017-10-27 01:01:06 +08:00 这样骗铜币的方法 get 到了~ |
 | 97 oswuhan 2017-10-27 03:54:00 +08:00 不同标签都有预定义样式，早期网页的布局思想与文本的排版思想是一致的 |
 | 98 sexoutsex2011 2017-10-27 07:50:14 +08:00 via Android 语义化的需要吧。 |
 | 99 rashawn 2017-10-27 08:02:30 +08:00 via iPhone 因为以前不是一个 div 就够了 以前写个博客不还得敲 p 标签 |
 | 100 dangyuluo 2017-10-27 08:31:18 +08:00 吃米饭就能饱，还要馒头花卷面条小米干什么？ |
Select Language