title标记定义网页标题，显示在网页选项卡上，不显示在正文中。 body标记中显示在网页正文中的内容。 div标签定义了网页中的块，其id是container，这是一个非常常见的属性，id的内容在网页中是唯一的，可以用它获取该块。 接下来，此块中有一个div标签。 那个class是wrapper，这也是一个非常常用的属性，经常与CSS结合使用来设置样式。 而且，这个块的内部有h2标签。 这表示二级标题。 另外，还有p标签。 这表示段落。 如果直接将适当的内容写入这两者，它们将显示在网页上，并具有各自的class属性。 保存代码后，在浏览器中打开文件可以看到显示效果。
您可以看到选项卡上显示了This is a Demo字样。 这是我们在head的title中定义的字符。 可以看到，网页正文由body标记内部定义的每个元素生成，并在此显示辅助标题和段落。 这个例子是网页的一般结构。 一种网页的标准格式是在html标签内嵌套head和body标签，在head内定义网页的排列和引用，在body内定义网页的正文。
在节点树和节点之间的关系HTML中，所有标记定义的内容都是节点，它们构成一个HTMLDOM树。 让我们先看看什么是DOM。 DOM是魔兽世界(W3C )的标准，其英文全名是文档对象模型，即文档对象模型。 定义对HTML和XML文档的访问标准。 w3cdocumentobjectmodel(DOM )是一个与平台和语言无关的界面，允许程序和脚本动态访问和更新文档的内容、结构和样式。
W3CDOM标准分为三个不同的部分。
核心DOM：针对任何结构化文档的标准模型。XMLDOM：针对XML文档的标准模型。HTMLDOM：针对HTML文档的标准模型。根据W3C的HTMLDOM标准，HTML文档中的所有内容都是节点。
整个文档是一个文档节点。每个HTML元素是元素节点。HTML元素内的文本是文本节点。每个HTML属性是属性节点。注释是注释节点。HTMLDOM将HTML文档视作树结构，这种结构被称为节点树，如下图所示。
通过HTMLDOM，树中的所有节点均可通过JavaScript访问，所有HTML节点元素均可被修改，也可以被创建或删除。节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中，顶端节点称为根（root）。除了根节点之外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。
我们知道网页由一个个节点组成，CSS选择器会根据不同的节点设置不同的样式规则，那么怎样来定位节点呢？在CSS中，我们使用CSS选择器来定位节点。例如，div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。
另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是根据id、class、标签名筛选，请牢记它们的写法。
另外，CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container.wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container.wrapperp.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。另外，CSS选择器还有一些其他语法规则，具体如下表所示。