带你走进JavaScript世界系列-top、parent 和 self 对象介绍

果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中，在frames 集合中，可以通过索引或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框的名称。请看下面一个包含框架的页面：

页面框架结构

上面的代码创建了一个框架集，其中一个框架居中，两个框架居下。对于上面的例子，可以通过 window.frames[0] 或者 window.frames['topFrame'] 来引用上方的框架。不过，最好使用 top 而非 window 来引用这些框架。

top 对象

top 对象始终指向最高（外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另外一个框架。因为对于在一个框架中编写的任何代码来说，其中的 window 对象指向的都是那个框架的特定实例，而非最高层框架，下图展示了在最高层窗口中，通过代码来访问上面例子中每个框架的不同方式：

通过代码访问上面例子中每个框架的不同方式

parent 对象

与 top 相对另一个 window 对象是 parent。parent 对象始终指向当前框架的直接上层框架。在某些情况下，parent 有可能等于 top；在没有框架的情况下，parent 一定等于 top （此时它们都等于 window）。请看下面的例子：

anotherframe2.htm

在浏览器加载完第一个框架后，会继续将第二个框架加载到 rightFrame 中。如果代码位于 redFrame （或 blueFrame ）中，那么 parent 对象指向的就是 rightFrame。如果代码位于 topFrame 中，则 parent 指向的是 top ，因为 topFrame 的直接上层框架就是最外层框架。

注意，除非最外层窗口是通过 window.open() 打开的，否则其 window 对象的 name 属性不会包含任何值。

self 对象

与框架有关的最后一个对象是 self ，它始终指向 window 。实际上，self 和 window 对象是可以互换使用的。引入 self 对象的目的就是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。

、爬虫程序编写模板的结构：

# 导入请求模块

from urllib import request

# 导入转码模块

from urllib import parse

# 导入随机生成请求头模块

from fake_useragent import UserAgent

# 程序结构

class xxxSpider(object):

def __init__(self):

# 定义常用变量,比如url或计数变量等

def get_html(self):

# 组合url，并获取响应内容函数,使用随机User-Agent

def parse_html(self):

# 使用正则表达式来解析页面，提取数据

def write_html(self):

# 将提取的数据按要求保存，csv、MySQL数据库等

def run(self):

# 主函数，用来控制整体逻辑

if __name__ == '__main__':

# 程序开始运行时间

spider = xxxSpider()

spider.run()

二、请求头池（直接放在一个ua_info.py文件中提供随机调用）

ua_list = [

'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon 2.0)',

'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_0) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11',

'User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11',

'Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1',

'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)',

'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50',

'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)',

'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)',

'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)',

'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1'

]

调用方式在py文件中引用：

from ua_info import ua_list

self.headers = {"User-Agent": random.choice(ua_list)}

TML元素的属性

属性是为HTML元素提供的附加信息。

为相同的HTML元素指定不同的属性，会呈现不同的功能或效果。

举个例子：

比如我们在上一篇中练习过的<a></a>标签构成的超链接元素中有一个href属性，这个属性指定的是点击后跳转的页面地址，相同的<a>标签改变href属性就能跳转不同的页面。例如

<a href="https://www.bilibili.com/read/cv2720755">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为href属性不同，打开的页面也不同。-->

小伙伴们自己写的时候要注意使用半角符号，不然不能正确打开链接。

超链接元素中还有一个控制链接页面打开的属性叫做target，是用来控制新打开页面窗口的位置。下面我们就看看target属性为_blank和_parent的情况下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为target属性不同，打开的页面所在窗口不同。-->

测试后，target="_blank"时，新页面在测试页面窗口旁边新建一个窗口打开。

target="_parent"时，新页面在原有测试页面窗口中打开。

如图所示：

左边为_blank,右边为_parent,点击左边链接后，新窗口在原有窗口旁边打开。如下图：

点击右侧

新页面在原窗口处打开。

<a>标签的target属性还有_self、_top这样的属性，感兴趣的小伙伴可以自行测试。

一般HTML元素的通用属性有：class 、id 、style 、title这四类，其中class 、id 、style这三个属性会在CSS的讲解中详细学习。

下面我们通过练习来看看title属性的作用。

HTML元素属性使用练习1

NO.1: title

title属性用于显示元素的额外信息使用。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中国最先进战斗机">歼-20战斗机</a>
</body> 
</html>

效果如图：当鼠标移动到超链接上时，"中国最先进战斗机"的说明就出现在下侧。

NO.2:href/src/url

这三个属性虽然写法不同，但都是为元素指定路径使用的。不属于通用属性。

例如<a>标签中指定链接路径使用的是href，而<img>标签中导入图片的路径是src，url在css中也常用来引入链接。具体练习大家可以翻看《HTML中的元素使用方法2——零基础自学网页制作》一文。

这里要介绍的是关于网页中的路径的两个重要概念：绝对路径、相对路径。

绝对路径是指文件在硬盘上真正存在的路径。

相对路径就是相对自己的目标文件的位置。

怎么理解这两个概念呢？举个例子：

如果我们要在"第一个页面.html"中显示一张图片image1.jpg，它们都在我的"D盘/零基础自学网页制作"这个文件夹中。如图：

如果用绝对路径导入写法是这样的：

<img src="file:///D:/零基础自学网页制作/image1.jpg"/>

相对路径这样写：

<img src="image1.jpg"/>

大家观察一下，也看出了绝对路径与相对路径的区别了。

另外，这样的链接也属于绝对路径：href="https://www.bilibili.com/read/cv2720755"

那么什么时候使用相对路径什么时候使用绝对路径呢？这个问题我会在明天深入为大家讲解，这涉及到网页或网站上传服务器的问题。

做教程确实是没什么人看，但是我依然会坚持，我是一名高校教师（认证资料等疫情结束后去办公室拍摄上传吧），把自己的知识写出来对自己来说是一个提高，也把原来很多常用却不甚了然的概念再次打磨清晰是我最大的收获。本篇教程针对完全没有基础的网页制作学习者，利用碎片时间学习，只要我们坚持，必然可以完成网页制作的学习，为未来学习更加复杂的内容打下基础！

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：用C++写出HTML，使用web服务，可以免费搭建个人博客
下一篇：Html5教程：为什么CSS这么难学？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。