百科问答小站 logo   百科问答小站
问题

为什么 Dreamweaver 这类所见即所得的编辑器会生成很多垃圾代码？

回答
Dreamweaver 这类所见即所得 (WYSIWYG) 编辑器，确实常常被诟病会生成不少“垃圾代码”。要理解为什么会这样，咱们得从它们的设计初衷和工作原理说起，顺便也说说它和传统代码编辑器的区别，这样就能明白其中的缘由了。

首先，咱们得知道 WYSIWYG 编辑器是怎么个玩法。

这类编辑器的核心理念就是“所见即所得”。它追求的是让设计师或者对代码不太精通的人，能够像在 Word 里排版一样，通过图形化的界面操作，直接看到网页最终呈现的效果，然后编辑器会自动将这些可视化操作转换成 HTML、CSS 等代码。

想象一下，你想要在页面上加一个标题，你不是去敲 `

我的标题

`，而是直接在页面上找到一个“标题”工具，点击一下，然后输入文字。Dreamweaver 背后就会有一套机制，在你输入文字并选择标题样式后，它会帮你生成对应的 HTML 代码，比如 `

我的标题

`。

那么，为什么这种方便的设计会带来“垃圾代码”呢？

这主要有几个方面的原因：

1. 为了实现可视化和易用性，它不得不引入大量的“辅助”代码：

表格布局的遗留： 在很早期的网页制作中，表格（``）是用来控制页面布局的主要手段。虽然现在我们知道用 CSS Flexbox 或 Grid 更灵活、更语义化，但 Dreamweaver 为了兼容老版本的浏览器和满足一些用户习惯，可能会在需要精确控制元素位置时，仍然生成大量的表格嵌套结构。这种嵌套层层叠叠，读起来非常不直观，也占用了不少空间。

`
` 标签的过度使用和滥用： 为了给各个部分加上样式，或者为了进行布局，编辑器会频繁地使用 `
` 标签，并且会给这些 `div` 添加各种各样的类名（class）或ID。很多时候，这些类名可能只是为了在可视化界面上区分不同的区域，并没有实际的样式关联，或者生成的类名非常冗长、缺乏语义。比如，你可能看到类似 `
` 这样的结构，这个 `u25` 和 `textwrapperstyle123` 对人来说很难理解它是什么作用。

内联样式（Inline Styles）的泛滥： 为了快速应用某些视觉效果，比如改变字体大小、颜色、边距等，WYSIWYG 编辑器可能会直接将样式写在 HTML 标签的 `style` 属性里。例如 `

我的段落

`。这样做虽然方便，但却破坏了样式与结构的完全分离，不利于后期的维护和修改。如果有很多地方的样式需要统一更新，你得一个个修改。

过多的空标签或不必要的标签： 有时为了占位或者实现某些特定的视觉效果，编辑器可能会生成一些空的 `
` 或者其他标签，或者一些在语义上不必要的标签，它们的存在只是为了配合编辑器的内部逻辑。

2. 对 CSS 的理解和生成不够“聪明”：

重复的样式定义： Dreamweaver 可能不会像一个熟练的前端工程师那样，将相同的样式规则抽离出来，放到一个集中的 CSS 文件中，而是倾向于在需要的时候就地生成。这导致同一个样式可能在不同的地方被重复定义，虽然最终浏览器渲染效果一样，但在代码层面是不够简洁的。

不必要的 CSS 属性： 有时候，为了达到某个效果，编辑器可能会生成一些我们并不需要的 CSS 属性。比如，设置了 `margintop: 10px;`，但实际的视觉效果可能已经被父容器或者其他样式所覆盖了，这个 `margintop` 就显得多余。

对语义化不敏感： 编辑器更关心的是“长什么样”，而不是“这是什么”。所以，它可能不会优先选择语义更合适的标签，比如用 `
` 来包裹一个列表，而不是用 `
    ` 或 `
      `。这会影响搜索引擎优化（SEO）和屏幕阅读器的解析。

      3. 对不同浏览器的兼容性妥协：

      为了让网页在各种老旧和新版本的浏览器上都能相对一致地显示，Dreamweaver 在生成代码时，有时会采用一些“兼容性写法”，这些写法可能在现代浏览器看来是冗余的，甚至是过时的。

      4. “代码清理”的难度和 editor 的逻辑：

      这些编辑器本质上是“自动化”地生成代码，它们依赖的是一套固定的规则和算法。它们并不能像人一样去“思考”代码的意义和优劣。当你在可视化界面上进行修改，编辑器就会根据它的规则重新生成或修改代码，这个过程可能是在现有代码上增添、修改，而不是完全重写，这就容易留下“痕迹”，也就是所谓的“垃圾代码”。

      而且，通常这类编辑器提供的“代码清理”功能，也只是删除一些非常明显的多余空格、空行，或者是一些被明确标记为无效的代码。它很难去智能地判断哪些样式是可以合并的，哪些结构是可以优化的，哪些标签是不符合语义的。

      举个例子来说明：

      假设你想创建一个带有边框的红色按钮。

      用手敲代码： 你可能会写 ``，然后在 CSS 文件里写 `.redbutton { border: 1px solid black; backgroundcolor: red; color: white; padding: 10px 20px; }`。非常简洁明了，结构和样式完全分离。

      用 Dreamweaver： 你可能会选中一个默认按钮，然后打开属性面板，在样式部分选择边框样式、设置背景颜色、文字颜色、内边距等等。最后，Dreamweaver 生成的代码可能是这样的：

      ```html
      点击我
      ```

      或者更糟糕，它可能为了这个“按钮”效果，在 HTML 里嵌套了多个 `
      `，并且把很多样式直接写在了 `style` 属性里。即使你只是改个背景色，可能都需要在属性面板里操作，而编辑器背后生成的新代码可能又会在 `style` 属性里增加更多内容。

      总而言之，WYSIWYG 编辑器是为了降低网页制作的门槛而生的，它牺牲了一部分代码的“纯粹性”和“精炼性”，来换取操作的便捷和可视化。 它们生成“垃圾代码”并非有意为之，而是其工作模式和设计取向的必然结果。对于需要高性能、高度可维护、并且对 SEO 和代码语义有严格要求的项目来说，直接使用这类编辑器的生成代码，往往需要手动进行大量的“代码清理”和优化工作，甚至不如直接手写或使用更专业的代码框架来得高效。所以，对于有经验的开发者来说，它们更像是一个辅助工具，而不是完全依赖的生产力工具。

网友意见

user avatar

说Dreamweaver不愿意生成更漂亮的代码，真是太冤枉了，相信我，Adobe的Dreamweaver开发者（乃至世界上所有的WYSIWYG软件开发者）肯定是想尽一切办法让自己软件生成的代码更加漂亮。

但这里面有一个根本性问题，就是软件生成的代码也许永远都不可能达到和人类代码相同的水平——很多自动代码生成器，剥开它美丽的外表，隐藏在下面的通常都是肮脏的实现。如果哪一天，人类只需要对软件说出需求，然后软件就能自动生成软件，而且自动生成的代码不但高效，还很漂亮，那全世界的程序员就失业了。（再然后就是科幻小说的剧情：计算机统治了地球，人类沦为电池。。。）

Dreamweaver成为众矢之的、屡屡挨批的原因，除了因为受众广泛，很大程度跟使用者对它的定位错误有关：Dreamweaver是一个编辑器，有一个方便的WYSIWYG界面，它还有控件功能，可以只通过拖拖放放就生成一个网站，但这种控件自动生成的代码是用于制作原型的，且仅应该用于制作原型。

比如某天你灵感涌现，想出了下一个价值500亿美元的网站，你花了3天把程序写好，然后开始构思界面，但是你拿不准宽度该用960像素，还是1020像素，背景该用蓝色还是绿色，诸如此类，而且你也不想找美工商量，免得他/她只是画几个图就分走你50%的股份，于是你调出Dreamweaver，用控件拖拖放放，改几个属性，拼凑弄出你想象中的设计——在这个过程中，你不关心控件生成的代码是否美观，是否符合W3C标准，因为你只是想要个原型，一个能看的草图，仅此而已。

来回几次，你终于把样式决定下来，Dreamweaver的控件功能高效地完成了构建原型的作用，现在它的历史任务完成了，你祭出你的所有装备武装自己：VIM、FIREBUG、十个不同种类的网页阅览器、等等，对着Dreamweaver上的原型小心翼翼地编写一个优美的、符合标准的、使用最新最酷的HTML5和CSS3功能的网页，然后把这个网页用到你的程序上。（如果你喜欢Dreamweaver的语法感知功能，你当然也可以用Dreamweaver来写，但任何时候，你都知道自己不应该依赖控件生成的代码）。

之后网站开始上线运营，BETACN、SOLICOM和Counter-Strike DN用大篇幅报道了你的神来之作，10cent和摆渡试图抄袭你，但最终失败，某天你正在DEBUG之际，接到了一个不熟悉的电话，你说你很忙，没有空做采访，电话那一头的家伙说自己开了一个什么工场，你觉得似乎在哪个地方听说过这个名字，于是决定给他三分钟解释自己。。。

在城市的最高层建筑上举办上市庆功宴之际，有个无名小记向你请教创业心得，你拒绝了他的采访，可他仍然紧追不舍，你很感动，回忆起自己当初落魄之时，对着录音笔久久不能言语，最后终于开口：

“Dreamweaver是一个编辑器，也可以用它的控件来快速制作原型，但千万不要把这两件事搞混了。”

小记还想向你索要签名，但你只是挥了挥手，转身离开，这次小记没有再追上来，转而在自己的速记本上写上“当他说完这句话之后，眼睛泛起了泪光，久久不能自已，最后失声痛哭离场，留下一个孤单的背影。。。”

类似的话题

  • 问题

    为什么 Dreamweaver 这类所见即所得的编辑器会生成很多垃圾代码？

    回答
    Dreamweaver 这类所见即所得 (WYSIWYG) 编辑器，确实常常被诟病会生成不少“垃圾代码”。要理解为什么会这样，咱们得从它们的设计初衷和工作原理说起，顺便也说说它和传统代码编辑器的区别，这样就能明白其中的缘由了。首先，咱们得知道 WYSIWYG 编辑器是怎么个玩法。这类编辑器的核心理念.............
  • 问题

    为什么近几年来自由主义在世界逐渐走弱？

    回答
    近年来，自由主义在全球范围内的影响力确实呈现出明显的衰落趋势，这一现象涉及经济、政治、社会、技术、文化等多个层面的复杂互动。以下从多个维度详细分析自由主义衰落的原因： 一、经济全球化与贫富差距的加剧1. 自由主义经济政策的局限性 自由主义经济学强调市场自由、私有化、减少政府干预，但其在21世.............
  • 问题

    为什么俄乌战争假消息满天飞？

    回答
    俄乌战争期间，虚假信息（假消息）的传播确实非常广泛，其背后涉及复杂的国际政治、媒体运作、技术手段和信息战策略。以下从多个角度详细分析这一现象的成因： 1. 信息战的直接动因：大国博弈与战略竞争俄乌战争本质上是俄罗斯与西方国家（尤其是美国、北约）之间的地缘政治冲突，双方在信息领域展开激烈竞争： 俄罗斯.............
  • 问题

    为什么没有枪的政府能指挥有枪的军队？

    回答
    政府与军队之间的关系是一个复杂的政治与军事体系问题，其核心在于权力的合法性和制度性约束。虽然政府本身可能不直接持有武器，但通过法律、组织结构、意识形态和历史传统，政府能够有效指挥拥有武器的军队。以下是详细分析： 一、法律授权与国家主权1. 宪法与法律框架 政府的权力来源于国家宪法或法律。例如.............
  • 问题

    为什么很多人都说传武就是杀人技？

    回答
    关于“传武就是杀人技”的说法，这一观点在历史、文化和社会语境中存在一定的误解和偏见。以下从历史、文化、现代演变和误解来源等多个角度进行详细分析： 一、历史背景：武术的原始功能与社会角色1. 自卫与生存需求 中国传统武术（传武）的起源与农耕社会、游牧民族的生存环境密切相关。在古代，武术的核心功.............
  • 问题

    为什么说近代历史人物只有袁世凯和汪精卫不能翻案？

    回答
    关于近代历史人物是否能够“翻案”的问题，需要结合历史背景、人物行为对国家和民族的影响，以及历史评价的客观性进行分析。袁世凯和汪精卫作为中国近代史上的重要人物，其历史评价确实存在复杂性和争议性，但“不能翻案”的结论并非基于单一因素，而是综合历史、政治、道德等多方面考量的结果。以下从历史背景、人物行为、.............
  • 问题

    为什么俄罗斯被个别网友称作俄爹？如何反驳？

    回答
    关于“俄爹”这一称呼，其来源和含义需要从多个角度分析，同时要明确其不尊重的性质，并指出如何正确回应。以下是详细解析和反驳思路： 一、称呼的来源与可能的含义1. 可能的字面拆解 “俄”是“俄罗斯”的拼音首字，而“爹”在中文中通常指父亲，带有亲昵或戏谑的意味。 若将两者结合，可能暗示.............
  • 问题

    为什么民国短短二三十年却能出现大批大师级人物？

    回答
    民国时期（19121949）虽然仅持续约37年，却涌现出大量在文学、艺术、科学、政治、哲学等领域具有划时代意义的“大师级人物”。这一现象的出现，是多重历史、社会、文化因素共同作用的结果。以下从多个维度进行详细分析： 一、思想解放与文化启蒙的浪潮1. 新文化运动（19151923） 思想解放.............
  • 问题

    为什么航空航天待遇不好，但国家在航空航天技术上依然取得飞速发展？

    回答
    航空航天领域在待遇和职业环境上确实存在一定的挑战，但国家在该领域取得的飞速发展，主要源于多方面的国家战略、技术积累和系统性支持。以下从多个维度详细分析这一现象： 一、国家战略与长期投入：推动技术突破的核心动力1. 国家层面的战略目标 航空航天技术往往与国家的科技竞争力、国家安全和国际地位密切.............
  • 问题

    为什么很多人讨厌吴京?

    回答
    吴京作为中国知名演员、导演，近年来因《战狼2》《英雄联盟》等作品及个人生活引发公众关注，其形象和言论在不同语境下存在争议，导致部分人对其产生负面评价。以下从多个角度详细分析可能的原因： 1. 个人生活与公众形象的冲突 妻子被曝光：2018年，吴京妻子的近照和视频被网友扒出，引发舆论争议。部分人.............
  • 问题

    为什么最近忽然冒出来这么多支持乌克兰的？

    回答
    近年来，全球范围内对乌克兰的支持确实呈现出显著增加的趋势，这一现象涉及多重因素，包括国际局势、地缘政治博弈、信息传播、经济援助、民族主义情绪以及国际社会的集体反应。以下从多个角度详细分析这一现象的成因： 1. 俄乌战争的爆发与国际社会的集体反应 战争的爆发：2022年2月，俄罗斯对乌克兰发动全面入侵.............
  • 问题

    为什么《是大臣》《是首相》的编剧没当过公务员、没太多亲身经历，也能写出这么好的政治剧剧本？

    回答
    《是大臣》《是首相》等政治剧之所以能在编剧缺乏公务员经历的情况下取得成功，主要源于以下几个关键因素的综合作用： 1. 构建政治剧的底层逻辑：制度与权力的结构性认知 政治体制的系统性研究：编剧可能通过大量研究英国议会制度、政府运作流程、政党政治规则（如议会制、内阁制、党鞭系统等）来构建剧情。例如.............
  • 问题

    为什么剧组里，男的可以坐镜头箱，女的却不可以？

    回答
    关于“剧组中男性可以坐镜头箱而女性不能”的现象，这一说法可能存在误解或过度泛化的倾向。在影视拍摄中，镜头箱（通常指摄影机或固定设备）与演员的性别并无直接关联，但若涉及性别差异的讨论，可能与以下多方面因素相关： 1. 传统性别刻板印象的延续 历史背景：在传统影视文化中，男性常被赋予主导、主动的角.............
  • 问题

    为什么印度在俄乌战争中不表态，而且在安理会上对俄罗斯决案弃权？

    回答
    印度在俄乌战争中不公开表态、在安理会投票中对俄罗斯的决议案弃权，这一行为背后涉及复杂的地缘政治、经济利益和外交策略考量。以下是详细分析： 1. 与俄罗斯的经济与军事合作 能源依赖：印度是俄罗斯的重要能源进口国，2022年俄乌战争爆发后，印度从俄罗斯进口了大量石油和天然气，以缓解对西方能源的依赖。尽管.............
  • 问题

    为什么那么多公知都是高校知识分子？

    回答
    关于“公知”与高校知识分子的关系，这一现象涉及中国社会、教育体系、媒体环境以及知识分子角色的多重因素。以下从多个维度进行分析： 一、高校知识分子的特殊性1. 教育背景与专业素养 高校知识分子通常拥有高等教育背景，具备较强的知识储备和批判性思维能力。这种专业素养使他们更倾向于参与公共讨论，尤其.............
  • 问题

    为什么诸多短视频app内容的字幕中，要把 “死” “钱” “血”等字打上马赛克？

    回答
    短视频平台在字幕中对“死”“钱”“血”等字打上马赛克，主要出于以下几方面的考虑，涉及内容监管、文化规范、法律合规和平台运营策略： 1. 避免敏感内容传播这些字可能与以下敏感话题相关，平台通过屏蔽来防止违规内容扩散： “死”：可能涉及自杀、死亡、濒死等话题，容易引发负面情绪或被用于极端内容（如自杀教程.............
  • 问题

    为什么最近有很多的素食主义者带节奏，他们想干什么？

    回答
    素食主义作为一项社会运动，其发展与传播确实涉及复杂的动机和行为逻辑。从现象学角度分析，素食主义者的“带节奏”行为可能源于以下几个层面的原因和目的： 一、社会运动的传播逻辑1. 信息传播的网络效应 在社交媒体时代，素食主义者通过短视频、直播、图文等形式形成信息扩散链。例如，YouTube上"V.............
  • 问题

    为什么伊朗可以爆发伊斯兰革命逆世俗化？

    回答
    伊朗的伊斯兰革命（1979年）是20世纪最重大的政治事件之一，其爆发和“逆世俗化”趋势的形成，是多重历史、社会、经济和宗教因素交织的结果。以下从多个维度详细分析这一现象的成因： 一、历史背景：波斯帝国的衰落与殖民影响1. 波斯帝国的遗产 波斯帝国（公元前550年）曾是中东最强大的帝国之一，以.............
  • 问题

    为什么伊尔96，图204等俄制商用客机没有良好的销路？

    回答
    伊尔96（Il96）和图204（Tu204）是苏联和俄罗斯在20世纪80至20世纪初研制的中短程宽体客机，但它们在国际航空市场上的表现并不理想，主要原因涉及技术、经济、政治、市场和竞争等多个层面。以下从多个角度详细分析其销路不佳的原因： 1. 技术性能不足：无法满足现代市场需求 伊尔96（1970年.............
  • 问题

    为什么飞机需要数客，而高铁不用？

    回答
    您的问题可能存在一些误解或翻译错误。实际上，飞机和高铁都需要乘客，两者都是用于运输乘客的交通工具，只是在技术、运行方式和应用场景上有显著差异。以下是详细解释： 1. 高铁和飞机都需要乘客 高铁：中国高铁（如京沪高铁、京广高铁）是高速铁路系统，主要用于短途和中长途客运，乘客数量庞大，是国家重要的交通方.............

本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等

© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有

服务条款
联系我们
关于我们
隐私政策
友情链接
知乎
百度问答
搜狐
新浪