Question

我没有对应用程序的Client Side/Front End进行过广泛的工作，我试图阅读有关HTML, CSS and DOM但我不知道如何能够找出它们之间的区别，所以如果有人可以，我会非常感激： / p>

用简单的英语解释我，HTML，CSS和DOM是如何工作的？
从客户端技术的角度来看，它们如何相互关联？

更新我已阅读wikipedia篇文章但未能清楚地了解DOM的工作。

感谢。

Answer 1

什么是DOM？

假设您打开了一个网络浏览器（例如Chrome）并在其中加载了一个网页（例如stackoverflow.com）。现在，在浏览器中，有一个window对象。该对象表示浏览器窗口。

这个window对象有许多属性（成员），其中最重要的是document对象。 document对象表示当前加载到浏览器窗口中的网页。

此document对象是DOM树的根目录：

http://www.w3schools.com/htmldom/htmltree.gif

上图中的每个框都是DOM树中的一个节点。节点是与DOM树中的其他对象“连接”的对象。

绑定到网页的JavaScript程序可以完全访问DOM树的每个节点。他们可以删除节点，添加新节点，或只是操纵节点的属性。

总而言之，浏览器内部存在数百个对象。所有这些对象都以某种方式连接起来，这种互连对象的巨大结构就是DOM。

Answer 2

HTML就是您网站上的内容（标题，列表，表格）

CSS就是这些东西的样子（边框，颜色，字体大小）

DOM是你通过javascript访问这些东西的方式（获取节点，添加新元素，改变它们的风格）

这是3个一起工作的例子（似乎没有工作在ie） http://jsfiddle.net/gj9zT/

Answer 3

HTML描述了文档的结构。浏览器解析HTML并从中构造文档元素的内部表示，如：

document
   |
   |-body
       |
       |-div
       |   |
       |   |-p
       |     |
       |     |-"some text"
       |-div
           |
           |-...

此内部表示是DOM，即文档对象模型。这是创建网站实际可视化表示的基础。

CSS用于定义此可视化表示的完整外观。

DOM的部分内容也通过API公开，因此您可以使用Javascript等编程语言来操作DOM（即文档）。

Answer 4

这是一个很长的解释，但我会尝试简要解释

CSS：这些用于将属性应用于html元素。如果要将常用颜色应用于各种html元素，我们可以在css中执行此操作并将该类应用于html元素。我们可以避免使用css重复代码。我们可以用css实现许多其他的东西。阅读谷歌

HTML： HTML只不过是我们用来显示表格，div，p，ul，li等元素的各种标签

DOM： DOM只是html元素之间的关系，我们通常使用javascript来操纵DOM，比如改变高度，从一个地方移动到另一个地方......

谷歌中会有很多链接，你可以更好地解释。

Answer 5

HTML（超文本标记语言）是我们用来描述页面结构的标记。它定义了不同的结构，如<ol></ol> 有序列表或<table> 表等......

HTML是我们开始使用的代码，它是人类可读的（无论如何它应该是：p）并且易于压缩＆amp;转让。

DOM（文档对象模型）是计算机用于组织从HTML呈现的页面的框架。当您的计算机分解HTML 文档时，它会将其组织为对象模型，它可以更轻松地使用（您也可以在javascript / css / etc中使用它）。）。

CSS（层叠样式表）描述了您希望文档中的项目的外观。它们被命名为级联样式表，因为它们“级联”到下一个样式表以填充孔或覆盖样式。 CSS描述了DOM中对象的视觉质量。

Answer 6

HTML实际上是DOM（文档对象模型）的标记。文档的根目录为<html>，其中包含多个级别的<div>s，<p> aragraphs，<h1> eaders等。

DOM是html标记的树（图形结构）。它将有一个“根”，有许多“孩子”，孩子们将有“兄弟姐妹”和“父母”，“后代”和“祖先”。根没有父节点，并且是所有后代节点的祖先。例如，您的典型html文档的结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('branding_logo.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* to hide the text that would show */
                            /* over the banner */
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">This is a header link.</a></h1>
      <p>Here is some text.</p><p>Here is some more text.</p>
    </div>
    <div id="content">
      <p>here is a bunch of content.</p>
    </div>
  </body>
</html>

在这种情况下，html是根节点，它有两个子节点：head和body。头部和身体都是兄弟姐妹。您可以将DOM模型与选择器一起使用，以便选择哪些对象（包含在节点中）将受到CSS等代码的影响。

CSS将在属性块中指定选择器并设置样式。您可以使用

选择所有元素<p>

p { color: red; }

或者你只能选择'p'，它是div的后代，其ID为content：

div #content {color：black; }

CSS通常会使用可应用于其的最具体的DOM描述来设置标记的样式。因此，在上面的html示例中，第一个css样式将应用于所有p，然后第二个更具体的样式将仅应用于内容div中的那个p。

基本上，您的浏览器会将您的HTML代码解析为允许单独选择的部分。解析后的结构就是你的DOM。 CSS使用DOM来应用样式。 jQuery也是如此，允许您从DOM中选择特定节点，并在客户端动态地将样式或操作应用于该节点。

客户端：HTML，DOM和CSS？

7 个答案: