Web网页基础的示例分析-创新互联

#head_wrapper.s-ps-islite .s-p-top {
    position: absolute;
    bottom: 40px;
    width: 100%;
    height: 181px;
}
Python资源分享qun 784758214 ,内有安装包，PDF，学习视频，这里是Python学习者的聚集地，零基础，进阶，都欢迎

    
        
        
    
    
        
            
                Hello World
                Hello, this is a paragraph.

            

这就是一个最简单的 HTML 实例，开头是 DOCTYPE 定义了文档类型，其次最外层是 html 标签，最后还有对应的结尾代表标签闭合，其内部是 head 标签和 body 标签，分别代表网页头和网页体，它们也分别需要尾标签表示闭合。head 标签内定义了一些页面的配置和引用，如：

它指定了网页的编码为 UTF-8。
title 标签则定义了网页的标题，会显示在网页的选项卡中，不会显示在网页的正文中。body 标签内则是在网页正文中显示的内容，div 标签定义了网页中的区块，它的 id 是 container，这是一个非常常用的属性，且 id 的内容在网页中是唯一的，我们可以通过 id 来取到这个区块。然后在此区块内又有一个 div 标签，它的 class 为 wrapper，这也是一个非常常用的属性，经常与 CSS 配合使用来设定样式。然后此区块内部又有一个 h3 标签，这代表一个二级标题，另外还有一个 p 标签，这代表一个段落，它们二者内部直接写入相应的内容即可在网页重呈现出来，它们也有各自的 class 属性。
我们将代码保存之后在浏览器中打开该文件，可以看到如下内容，如图 2-11 所示：

图 2-11 运行结果
可以看到在选项卡上显示了 This is a Demo 字样，这是我们在 head 里面的 title 里定义的文字，它显示在了网页选项卡里。而网页正文是 body 标签内部定义的各个元素生成的，图中可以看到网页中显示了二级标题和段落。
如上实例便是网页的一般结构，一个网页标准形式都是 html 标签内嵌套 head 和 body 标签，head 内定义网页的配置和引用，body 内定义网页的正文。

3. 节点及节点关系

在 HTML 中，所有标签定义的内容都是节点，它们构成了一个 HTML DOM 树。
我们先看下什么是 DOM，DOM 是 W3C（万维网联盟）的标准。
DOM，英文全称 Document Object Model，即文档对象模型。它定义了访问 HTML 和 XML 文档的标准：

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型

• XML DOM - 针对 XML 文档的标准模型

• HTML DOM - 针对 HTML 文档的标准模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点注释是

• 注释节点HTML

DOM 将 HTML 文档视作树结构，这种结构被称为节点树，如图 2-12 所示：

图 2-12 节点树
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 节点元素均可被修改，也可以被创建或删除。
节点树中的节点彼此拥有层级关系。我们常用 parent（父）、child（子）和 sibling（兄弟）等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。
在节点树中，顶端节点被称为根（root），除了根节点之外每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。
图 2-13 展示了节点树以及节点之间的关系：

图 2-13 节点树及节点关系

4. 选择器

我们知道网页由一个个节点组成，CSS 选择器会根据不同的节点设置不同的样式规则，那么我们怎样来定义是哪些节点呢？

在 CSS 中是使用了 CSS 选择器来定位节点的，例如上例中有个 div 节点的 id 为 container，那么我们就可以用 CSS 选择器表示为 #container，# 开头代表选择 id，其后紧跟 id 的名称。另外如果我们想选择 class 为 wrapper 的节点，便可以使用 .wrapper，. 开头代表选择 class，其后紧跟 class 的名称。另外还有一种选择方式是根据标签名筛选，例如我们想选择二级标题，直接用 h3 即可选择。如上是最常用的三种选择表示，分别是根据 id、class、标签名筛选，请牢记它们的写法。

另外 CSS 选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如 #container .wrapper p 则代表选择 id 为 container 内部的 class 为 wrapper 内部的 p 节点。另外如果不加空格则代表并列关系，如 div#container .wrapper p.text 代表选择 id 为 container 的 div 节点内部的 class 为 wrapper 节点内部的 class 为 text 的 p 节点。这就是 CSS 选择器，其筛选功能还是非常强大的。

另外 CSS 选择器还有一些其他的语法规则，在这里整理如下：

另外还有一种比较常用的选择器是 XPath，此种选择方式在后文会详细介绍。

以上是“Web网页基础的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。