分类 个人作品 下的文章

历史记录

通常情况下,我们打开过的网页都会在浏览器的历史记录里留下痕迹,但是使用无痕模式(或者叫做隐私模式)访问网页的话,就不会留下历史了。网页开发者也有机会决定网页是否保存到历史记录中。
这也就意味着我们有机会返回去查看曾经浏览过的网页。
查看历史可以分为两个部分,使用快捷键临时切换和从历史记录窗口查看。

Alt 加左右光标前进和后退

对于在当前选项卡或者说在当前窗口打开过的网页,我们可以使用 Alt 加左光彪返回前一个网页,使用 Alt 加 右光标重新回到下一个网页。
如果在新窗口或者新选项卡打开过的网页,就无法使用这两个快捷键来切换了。网页窗口或者浏览器关闭后,下次在打开,也是无法使用这两个快捷键切换的。也就是说, 前进和后退仅限于打开浏览器后,直到关闭浏览器之前。

历史记录窗口

按下 Ctrl 加 H 会在网页右侧弹出一个小窗口,显示历史记录。
这个小窗口大概的布局可以分为顶部的工具栏和选项卡列表以及下面的网页历史树视图。
我们按 Tab 键可以在这几个控件之间切换。
这里的选项卡列表和工具栏都可以用左右光标来切换具体项目,工具栏里的按钮可以直接按空格或回车键操作。
需要提一下“打开历史记录”按钮,点击这个按钮会在一个新窗口打开历史记录页面,里面的内容与这个小窗口相同,但是页面布局有区别。一般情况下使用弹出的这个小窗口就够用了。
网页历史树视图可以上下光标切换里面具体的项目。直接按回车键可以打开选定的网页。如果按 Application 键或者 Shift 加 F10 可以打开上下文菜单,然后上下光标可以选择具体的打开方式或者复制网址到剪贴板。
如果历史有很多,可以使用搜索功能。历史记录的搜索非常简单,tab切换到历史记录列表,直接输入需要搜索的关键字即可。然后按上下光标浏览搜索结果就可以了。

收藏夹

收藏夹是浏览器的必备功能,我们可以把重要的网址添加到收藏夹里方便日后查看。
微软 EDGE 浏览器的收藏夹提供了多个途径访问,可以使用 Ctrl 加 Shift 加 B 显示或隐藏收藏夹栏。这是位于浏览器窗口顶部,在浏览器的工具栏下方的一个横条,也可以使用 Ctrl 加 Shift 加 O 打开收藏夹窗口。收藏夹窗口也是分为在网页右侧 弹出的小窗口和新窗口打开的完整页面。

添加到收藏夹

我们打开一个网页后,按 Ctrl 加 D 即可将当前网页添加到收藏夹。这时会打开一个对话框,标题是“已添加到收藏夹”,这表明当前网页已经被添加到收藏夹里了。但是在这个对话框里我们如果需要的话,可以进行一些修改和编辑。
“收藏夹名称”可编辑文本,在这里可以修改标题。
“文件夹”菜单按钮,这里可以按空格键展开,然后可以选择要收藏到的具体文件夹。
后面还有个更多按钮,点击后会显示当前的网址,如果有需要也可以修改。
如果对这些内容做了修改那么就点击最后的完成按钮,如果没有改动也可以直接 ESC 关闭这个对话框即可。
另外,如果打开了多个网页,可以使用 Ctrl 加 Shift 加 D 将打开的所有网页一起添加到收藏夹。

收藏夹窗口

按 Ctrl 加 Shift 加 O 可以打开收藏夹窗口,当然这也是个弹出的小窗口,他的布局结构跟历史记录的对话框是差不多的,同样有顶部的工具栏和下面的树视图,但是少了一个选项卡列表。用 Tab 键在这些控件之间切换。
这里的树视图根据收藏夹里的文件夹不同,会有多个层级,用上下光标切换具体的项目,如果有子文件夹,可以用右光标展开,之后继续用上下光标浏览。
找到需要打开的网页,可以直接回车打开,或者使用上下文菜单,选择其他操作。
这里支持 Ctrl 加 X 剪切和 Ctrl 加 V 粘贴。所以可以利用这两个快捷键来移动收藏夹项目到新的文件夹。
如果想新建文件夹,可以在相应的文件夹内按 Application 键或者按 Shift 加 F10 打开是上下文菜单,然后光标键选择新建文件夹。
如果想删除文件夹或者网页项目,也需要在上下文菜单里选择删除菜单项目。

更多选项

在收藏夹窗口顶部的工具栏里有一个更多选项的按钮,点击后可以弹出一个子菜单,这里可以选择导入导出,添加所有网页等项目。可以根据需要选择操作。


字母导航

也可以说是按元素访问或者说是单键导航。下面是引用[争渡读屏帮助文档][]里的介绍:

根据网页组成元素进行分类,然后通过快捷键来针对这些分类进行浏览。这是一种比较抽象的浏览方式,但对于常用的网页来说,他会大大提高浏览效率。
由于这种浏览模式的快捷键主要分布在大键盘区的字母键,所以我们把这种浏览模式称为字母导航。
快捷键的安排主要是根据元素的英文名称首字母来分配的,例如切换编辑框的热键是字母e,因为编辑框的英文是 "edit"。

下面是常见的字母导航可以支持的元素和快捷键:

  • 字母e 在编辑框之间切换,按一次切换一个编辑框,并读出该编辑框的提示信息,若想进行编辑输入,需要按ZDSR加空格键转到编辑模式。输入完毕之后,可以按Tab键切换到其他元素,或者用ZDSR加空格键离开编辑模式,返回到按元素浏览模式下。此时可以继续按字母e来寻找下一个编辑框。
  • 字母x 在网页上的复选框之间切换,字母r可以在单选按钮之间切换,当找到自己需要的项目时,可以按下空格来进行选择或者取消选择。
  • 字母c 在网页上的组合框之间切换,若想选择其中的项目,需要按ZDSR加空格键转到编辑模式,然后用上下光标键来选择。
  • 字母b 在网页上的按钮之间切换,当找到自己需要的按钮时,可以按空格键进行确认操作。
  • 字母g 在网页的图片之间切换,对于图片,有时候只是一张装饰性的图片,有时候代表了一个菜单或者一个功能,此时往往需要将鼠标移动过来,然后进行单击操作,可以用ZDSR加减号把鼠标带过来。
  • 字母f 在网页上的表单之间切换,并且定位到该表单的第一个表单元素。
  • 字母k 在网页的链接之间切换,在某些网页中,如果用tab无法切换链接的时候,便可以尝试使用字母k来切换,可以弥补tab无法切换的缺陷。
  • 字母j 可以快速跳过若干链接,当网页中链接特别多的时候,使用该热键是一个很好的选择,默认情况下一次跳过10个链接。同时争渡读屏还提供了对该热键的自定义功能,在读屏设置的网页设置部分,可以设置一次跳过的链接数量。也可以使用ZDSR加Win热键组来临时调整链接跳跃数。
  • 字母t 可以在网页的表格之间切换。
  • 字母m 可以在网页中的框架之间切换并读出框架标题,如要进入,可以按ZDSR加空格激活该框架。
  • 字母h 在标题之间切换,包括1-6号标题,并能读出标题内容。
  • 大键盘数字1-6 可分别在1-6号标题之间切换并读出标题内容。
  • 字母d 可在网页中的路标之间切换并读出路标所在内容。这是一种比较新的技术,目前还不是所有网站都支持该功能。
  • 字母n 可以在网页中的普通文本之间切换
  • 字母l 在列表之间切换,可以读出列表的标题,如果列表没有标题则读出列表内容。
  • 字母I 在列表项目之间切换并读出内容。
  • 字母O 在嵌入式对象、音频或视频等元素之间切换。
  • 上面这些字母快捷键,都可以加上Shift来进行反向切换。

在某些情况下,网页本身提供了个性化的操作快捷键,如果跟字母导航的快捷键冲突的话,使用争渡读屏的朋友可以用 ZDSR 加 Ctrl 加空格键来临时关闭字母导航功能。
另一些情况下,我们需要始终保持在编辑模式,使用争渡读屏的朋友便可以按 ZDSR 加空格键长按来锁定编辑模式。

浏览和编辑模式

这是因为读屏软件默认拦截浏览器内的光标键和一部分字母作为快捷键,会影响网页本身的一些功能,为了解决这个矛盾,就引入了这两种模式。
光标键访问和字母导航都属于浏览模式,而编辑模式则是释放对光标键和字母的拦截,把键盘操作完全换给浏览器和网页本身。
多数情况下使用浏览模式,只有在需要跟网页交互的时候才需要切换到编辑模式。比如需要填写问卷,填写报名表等。

填写表单

以本次课程的报名表为例。
可以使用光标键浏览表单选项,对于需要填写内容的编辑框,可以按ZDSR 加空格键或者直接按空格键切换到编辑模式,然后输入内容。对于单选按钮和复选框,可以直接按空格键进行选择。对于组合框,可以按空格键进入编辑模式,然后按上下光标选择。当然填写完毕后需要重新按 ZDSR 加空格键切换到浏览模式,继续按光标键浏览其他项目。
有些表单比较智能,当你填写完毕一项的时候他就会检测有效性,如果填写的内容不符合要求,就会直接提示。这种提示一般在选项的旁边,我们在浏览模式下用光标键浏览到选项附近即可听到。很多时候按上下光标浏览到选项末尾即可听到。
所有选项都填写完毕后即可点击提交按钮了。如果填写的不完整或者有错误,一般会有提示。这种情况要根据具体情况对待。有的表单会直接弹出对话框提示,这种情况我们直接就可以听到。有的则是在不合法的选项旁边提示,这种情况我们就不容易找到提示了。就需要挨个选项的查看才可以找到具体错误了。

复制网页

如果需要复制整个网页,可以使用 Ctrl 加 A 全选,然后使用 Ctrl 加 C复制到剪贴板。
如果需要选择性复制,可以使用读屏软件提供的快捷复制功能。
争渡读屏软件可以使用 Ctrl 加 Win 加小键盘4设置开始点,用 Ctrl 加 Win 加小键盘6设置结束点并同时将所选内容复制到剪贴板。
NVDA 可以使用 NVDA 加 F9 设置开始点,用 NVDA 加 F10 设置结束点,之后按 Ctrl 加 C 将所选内容复制到剪贴板。也可以按NVDA 加 F10 双击直接将所选内容复制到剪贴板。
另外争渡读屏还可以使用 ZDSR 加 C 将刚听到的内容复制到剪贴板,配合 Zdsr 加 A可以选择性的追加刚听到的内容到剪贴板。
浏览器提供的网页补货和 web 选择功能暂时还不方便使用。
对于已经复制到剪贴板的网页内容,我们可以自己决定如何处理他们,可以粘贴到记事本、写字板、word等文档保存,也可以黏贴到qq聊天输入框、微信聊天输入框等地方发给好友。
使用争渡读屏的朋友,还可以使用争渡剪贴板编辑器将复制到剪贴板内的网页内容保存到本地剪贴板或者云剪贴板。

保存网页

这里指的是使用浏览器提供的另存为功能将整个网页保存到电脑当中。使用这种方式保存网页,可以最大限度的保持网页的完整性,样式和图片等效果都会被保存下来。
可以直接按 Ctrl 加 S 打开另存为对话框,然后选择需要保存的文件类型和保存位置,最后点击保存按钮即可。

链接的打开方式

链接是网页中最常见的一种类型,简单的说他是一种带有标题的网址,通过链接我们可以打开一个新的网页或者打开一个新的资源。
链接可以直接回车打开,也可以选择其他方式打开。不同的打开方式有不同的结果。
直接回车打开是链接的默认打开方式,这种方式一般是在当前窗口内的当前选项卡打开。打开后,会覆盖掉之前的网页内容。使用这种方式打开的链接,如果按 Ctrl 加W 关闭选项卡的话,那么之前的网页也自然的一同被关闭了。如果想返回之前的网页,可以按 Alt 加左光彪或者在地址栏旁边找到返回按钮按空格。
另外,网页开发者也可以决定链接的默认打开方式,这是通过 target 属性实现的。这个属性可以决定链接是在当前选项卡打开还是在新窗口打开。
如果按 Shift 加回车打开,那就是在一个新的窗口内打开。这种方式不会覆盖之前的网页,可以按 Ctrl 加 W 或者 Alt 加 F4 关闭。关闭的时候也不会影响其他网页。这种方式就跟很早的 IE6 的体验是一样的了
如果按 Ctrl 加回车打开,则是在后台选项卡打开,不会影响当前的焦点。这种方式一般适用于希望稍后查看的网页。可以用 Ctrl 加 TAb 切换到后台打开的选项卡。
还可以按 Application 键弹出上下文菜单,从菜单里可以选择在新窗口打开、在新选项卡打开或者使用隐私模式打开。

上下文菜单

上下文菜单指的是点击鼠标右键或者按 Application 键或者 Shift 加 F10 弹出的菜单。
之所以叫做上下文菜单,就是因为具体的菜单项是根据操作对象决定的。也就是在不同的操作对象上打开上下文菜单,显示的菜单项是不同的。
这里主要提供真对操作对象的一些常用操作命令。
比如对于链接来说,可以选择不同的打开方式,还可以复制链接的 URL。复制链接的 URL 后就可以粘贴到qq和微信等聊天软件的消息输入框,从而发给好友了。
对于图片来说,可以在新选项卡打开图片,也可以复制图片本身或者图片的 URL。
如果没有选具体的网页元素那么上下文菜单就是真对整个网页的,这种情况下就是一般所说的在网页空白处右击出来的菜单了。在这个菜单里可以选择对于当前网页的一些操作,比如刷新、另存为、分享等。

关于点击

在网页中,并不总是像链接那样可以回车打开,有些时候开发者写的网页并不很友好,没有提供键盘操作能力,只有用鼠标点击操作。
这种情况下,我们使用读屏软件就的用一些特别的方法来操作了。读屏软件一般都提供了模拟鼠标点击的功能,甚至提供了执行默认动作的方法。
使用光标键浏览网页过程中,遇到需要点击的元素,使用争渡读屏可以直接按小回车键,使用 NVDA 可以直接按空格键或者回车键。
如果上述方法依然无法点击,那么使用争渡读屏的话,可以用 ZDSR 加小键盘减号鼠标跟随,然后在按小键盘除号执行鼠标模拟点击。使用 NVDA 的朋友可以按 NVDA 加小键盘除号鼠标跟随后在按小键盘除号执行鼠标模拟点击。
比如图灵社区百度网盘都是这类情形的典型代表。


什么是网址?

URL,是指“Uniform/Universal Resource Locator”的缩写,英文翻译为:统一资源定位符(也就是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址;互联网上的网页都会有一个url与之对应,这样才能正常访问得到该网页。)
简单来说URL就是网站页面的网址。如争渡读屏的网址就是 http://www.zdsr.com/
URL的结构: 协议、域名、端口、路径、参数
第一部分:协议(scheme),,它告诉浏览器如何处理将要打开的文件。
http——超文本传输协议资源
https——用安全套接字层传送的超文本传输协议
ftp——文件传输协议
mailto——电子邮件地址
file——当地电脑或网上分享的文件
第二部分:域名,一般是用点分开的字符串或者数字。例如baidu.com, www.baidu.com。
第三部分:端口,例如80,443
第四部分:路径,例如 news/2022/11/25
第五部分:参数,例如 username=张三&source=123
除了域名之外的其他部分都是可以有选择性的省略的。

在哪里输入网址?

在浏览器的地址栏里输入网址。也可以从其他地方复制网址,在地址栏里粘贴。
定位地址栏的快捷键是 Alt 加 D 或者 CTrl 加 L 。

选项卡和新窗口有什么区别?

一个浏览器窗口内可以包含一个或多个选项卡。
通常情况下,打开浏览器,就是打开了一个包含一个选项卡的新窗口。
可以用 Ctrl 加 T 打开一个新的选项卡, 用 Ctrl 加 N 打开一个新窗口。
在选项卡之间切换用 Ctrl 加 Tab 键,在窗口之间切换用 Alt 加 Tab 键。
但是现在默认情况下,Alt 加 Tab 也可以切换网页选项卡。
这一行为可以在windows 设置里修改, windows 11 的具体设置位于“设置 -> 系统 -> 多任务处理 -> 对齐或按 Alt + Tab 时显示 Microsoft Edge 选项卡 组合框”,默认是可以切换三个选项卡,可以上下光标修改。

网页内的常见元素有哪些?

网页中常见的元素或者叫做控件有很多,最常见的是链接和普通文本。另外还有编辑框、组合框、复选框、列表、选项卡、菜单、按钮等。
每一种元素都有他自己的操作方法,掌握了这些元素的操作方法也就基本上掌握了网页的操作了。
这些元素大多数都是 windows 系统下常见的控件,除了在浏览器里遇到他们外,在其他软件内也经常遇到。同一种控件在不同软件里的操作方法应该都是一样的,所以学会了在浏览器里使用他们,也就可以同样在其他软件里用相同的方法去操作了。

有哪些方法可以打开一个网页?

  • 可以通过在地址栏输入网址
  • 可以把网址复制到地址栏
  • 可以使用争渡读屏的 ZDSR 加小回车打开刚听到的网址
  • 可以从他人分享的链接打开

怎样关闭网页?

这分为关闭窗口和关闭选项卡。
按 Alt 加 F4 可以关闭浏览器窗口。如果打开了多个选项卡,那么这些选项卡会被一起关闭。有时候这不是我们想要的结果,所以更好的选择是使用关闭选项卡的快捷键。
按 Ctrl 加 W 可以关闭当前的选项卡。关闭了当前选项卡后会自动切换到另外的一个选项卡页面。当所有的选项卡页面都被关闭后,浏览器窗口也就自动的被关闭了。
如果只打开了一个选项卡,那么使用上述两种方法的效果就是一样的了。

浏览网页具体演示

通过浏览下面几个网址,具体体会如何使用 Tab 键和光标键访问网页。

网页的一般结构包括导航栏,内容区侧边栏和底部版权区


网页浏览器发展历史,按年:

  • 1990年,蒂姆·伯纳斯-李创建了第一个网页浏览器WorldWideWeb。
  • 1992年,托尼哟翰逊(Tony Johnson)发布了Midas,它允许用户浏览UNIX和VMS网页上的文档。
  • 1993年, NCSA发布了Mosaic浏览器。
  • 1994年, 网景公司(Netscape)发布了Navigator浏览器。
  • 1995年, IE浏览器(Internet Explorer)的发布掀起了“浏览器之战”。
  • 1996年,网景公司的Navigator浏览器所占有的浏览器市场份额达86%。 微软公司开始将IE浏览器整合到OS(操作系统)中。
  • 1996年9月, Opera浏览器面世。
  • 1998年,网景公司启动其开源产品,开始推出Mozilla。这一年的下半年,网景公司被AOL(美国在线服务公司)收购。
  • 2002年, Firefox(火狐)浏览器面世。
  • 2003年,苹果公司发布Safari浏览器。
  • 2004年,IE浏览器所占有的市场份额达到了历史顶峰-92%。自此以后,其市场份额开始下滑。
  • 2006年6月,Firefox 3的发布创下了吉尼斯世界纪录——一天有800万人下载。
  • 2006年10月,专为Windows XP、Windows Server 2003和Windows Vista而设计的IE 7面世。
  • 2008年,谷歌公司发布Chrome浏览器。
  • 2009年,专为Windows 7、Windows Server 2003与2008、Windows Vista和WindowsXP设计的IE 8面世。同年,Firefox 3.5面世。它是第一款支持多点触控的浏览器。
  • 2010年,谷歌公司发布了Chrome 5.0浏览器。它是第一款稳定支持三个平台的浏览器,还是第一款有书签同步功能(bookmark synchronization)的浏览器。
  • 2011年,微软发布IE 9,IE 9采用了新的JavaScript引擎Chakra,使网页加载速度更快,同时利用显卡GPU加速文字和图形的渲染,使CPU的负担大大减轻。另外,IE 9开始支持HTML5和CSS3。
  • 2012年,Windows 8正式上市后,IE 10问世。
  • 2013年,随着Windows 8.1的正式发布,IE 11问世。IE 11在IE 10的基础上再次扩大对HTML5和CSS3的支持,如支持HTML5拖放、HTML5全屏、CSS边框图、视频码率控制、视频字幕隐藏、媒体加密、WebGL等,使得IE 11全面支持HTML5新特性
  • 2014年,微软启动斯巴达项目,开始新的浏览器开发。
  • 2015年,Microsoft Edge 浏览器跟随 Windows 10 一起发布。
  • 2018年12月6日,微软正式宣布桌面版Edge浏览器将采用Chromium 内核,并将支持所有受支持的Windows版本及macOS和Linux平台。
  • 2020年1月15日,微软正式推出内核更改为Chromium的新版Edge,抛弃以往的EdgeHTML。对标志也进行修改,从原本Metro风格的“蓝色平面标志”改成遵循Fluent 风格“蓝绿色渐层标志”
  • 2021年3月起,微软开始通过向Windows 10用户以推送更新的方式移除EdgeHTML版Edge浏览器。

参考资料:


介绍我自己
介绍这套课程

我能学习吗?

本课程不要求特别深入的电脑基础,只要初步了解windows系统,能基本使用读屏软件即可。

网页是什么?

维基百科定义如下:
网页(英语:web page)是一个适用于万维网 和网页浏览器 的文件,它存放在世界某个角落的某一部或一组计算机 中,而这部 计算机 必须是与 互联网 相连。网页经由 网址 ( URL )来识别与访问,当我们在网页浏览器 输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到用户的计算机,然后再通过浏览器解释网页的内容,再展示给用户。网页通常是 HTML 格式的文件。
网页可以呈现的内容非常丰富,从基本的普通文本到图片、音频、视频等多媒体,甚至还可以填写资料展示图表等。

网页浏览器是什么?

引用维基百科的定义如下:
网页浏览器(英语:Web Browser,常简称为浏览器 )是一种用于检索并展示万维网信息资源的应用程序 。这些信息资源可为网页、图片、影音或其他内容,它们由统一资源标志符标识。信息资源中的超链接 可使用户方便地浏览相关信息。
网页浏览器虽然主要用于使用万维网,但也可用于获取专用网络中 网页服务器之信息或文件系统内之文件。
主流网页浏览器有Mozilla Firefox、Microsoft Edge、 Google Chrome、Opera及Safari。

网页浏览器我们后面就统一简称浏览器。
我们在使用电脑过程中,浏览器渗透在各个方面。很多时候是我们没有感知的。

浏览器的历史

蒂姆·伯纳斯-李于1990年创建了第一个网页浏览器WorldWideWeb
1993年,马克·安德森发布Mosaic——“世界上最流行的浏览器”,进一步推动了浏览器的创新
,这使得万维网更易于使用。安德森的浏览器引发了1990年代的互联网热潮。
安德森是NCSA 中Mosaic团队的领导者,他不久后辞职并成立了自己的公司——Netscape,
发布了受Mosaic影响的Netscape Navigator
。Netscape Navigator很快便成为世界上最流行的浏览器,市占率一度达到90%
1996年,Opera 首次亮相。它从未被广泛使用,据Net Applications统计,截至2002年2月,Opera市占率一直低于2%
1998年,Netscape公司以开放源代码迎战,创造了 Mozilla Application Suite
,但此举未能挽回Netscape的市场占有率。1998年底美国在线 收购了Netscape公司。发展初期,Mozilla Application Suite计划为了吸引开发者而挣扎;但至2002年,它已经发展成一个稳定而强大的互联网包。Mozilla Application Suite 1.0的出现被视为其里程碑。同年,派生出
Phoenix (后改名Firebird,最后又改为Firefox)。Firefox 1.0于2004年发表。及至2008年,Mozilla及其派生产品约占20%网络流量
苹果电脑自行推出的Safari因内置于苹果产品,尤其是iPad、iPhone 等等,所以在苹果产品大众化的风潮中迅速扩张版图。Safari是基于
Konqueror这个开放源代码浏览器的KHTML排版引擎 而制成的。Safari是
OS X的默认浏览器。
Google Chrome是一个由搜索引擎龙头Google 开发的网页浏览器。发布于2008年9月。
Microsoft Edge 是微软推出的浏览器,跟随windows 10 一起发布。

EDGE 浏览器的历史

2014年微软开始了新的浏览器项目,当时命名为斯巴达。
。微软官方在2015年1月21日的一场Windows 10主题演讲中公布了这一计划。
Project Spartan第一次公开发行是在2015年3月30日发布的Windows 10技术预览版组建10049版本中。
2015年4月29日,在微软Build 2015开发者大会中,Project Spartan被正式命名为Microsoft Edge。
2018年12月6日,微软正式宣布桌面版Edge浏览器将采用Chromium 内核,并将支持所有受支持的Windows版本及macOS和Linux平台。
2020年1月15日,微软正式推出内核更改为Chromium的新版Edge,抛弃以往的EdgeHTML。对标志也进行修改,从原本Metro风格的“蓝色平面标志”改成遵循Fluent 风格“蓝绿色渐层标志”
2021年3月起,微软开始通过向Windows 10用户以推送更新的方式移除EdgeHTML版Edge浏览器。

获取 Microsoft Edge

对于windows10和11是不需要下载的,而是系统自带,对于win7则需要下载安装。在微软网站可以下载,也可以直接在之多云的之多商店里下载。
安装非常简单,只要回车打开安装程序,就不需要在操作了,等到安装完毕,就自动打开了。

启动

启动浏览器,有时候也说打开浏览器。有多重途径可以启动 edge 浏览器,我们只要选我们自己喜欢的一种即可。

  1. 从桌面上的图标打开。通常情况下,在桌面上都会有他的图标,一般的名字是 Microsoft Edge, 我们在桌面找到他直接回车即可打开。也可以在桌面上直接按字母 M ,当听到 Microsoft Edge 的时候,按回车即可打开。
  2. 从开始菜单里的图标打开。这根据系统不同和开始菜单的布局不同,也有一些差异。只要找到名叫 microsoft edge 的图标,然后按回车即可打开。
  3. 从运行中的应用程序工具栏里启动,这是我推荐的方法。
    运行中的应用程序工具栏位于任务栏内,通常在开始按钮的旁边。按tab键切换到开始按钮,然后继续按tab切换,听到运行应用程序工具栏,然后按右光标一般会找到 microsoft edge,回车即可。
    也可以直接按Windows 加T 直接定位到运行中的应用程序工具栏。
    如果在运行中的应用程序工具栏里没有找到,那么我们可以自己尝试添加。首先通过其他方法先找到 Microsoft Edge 图标,然后按 Application 键弹出上下文菜单,在菜单里选“固定到任务栏”,回车即可。
  4. 通过争渡读屏的争渡菜单里的争度网打开,或者 NVDA 读屏的主菜单里的帮助菜单下的官方网站菜单打开。
  5. 通过网址打开。这种方式一般是从微信和qq等软件里的网址直接打开的。

浏览器打开以后,我们看到的就是一个网页,至于具体是什么网页,或者说具体是什么内容,取决于浏览器的设置或者说取决于我们自己的选择。

识别浏览器窗口

我们经常会开启多个不同的软件窗口,用 Alt 加 Tab 在不同的窗口之间切换,识别浏览器窗口是我们必须要掌握的。我们有多种方法来识别浏览器窗口:

  1. 通过窗口标题来判断。一般情况下,浏览器窗口都会在窗口标题的末尾带有浏览器自己的特有标识。比如 微软 edge 浏览器就是在窗口标题末尾有 “microsoft edge”的字样。对于谷歌浏览器,一般会有“Google Chrome”字样。我们在切换窗口的时候,听到窗口标题末尾带有这些字样就可以知道是浏览器窗口。另外根据窗口标题的前半部分就可以识别出具体是什么网站或者什么网页了。
  2. 通过浏览器内的特征性元素。这种方法一般是在窗口内按tab 键切换,如果能找到一些浏览器内特有的控件,那么也可以识别出这是个浏览器窗口。比如我们在按tab 切换的时候,听到了“地址和搜索栏”、“扩展 按钮 有子菜单”、“应用蓝 工具栏”等等。另外如果按tab 键连续切换到链接,也可以认为是在浏览器内。
  3. 通过读屏软件在浏览器内的特定开关来判断。比如可以尝试按 zdsr 加空格或者 nvda 加 空格切换浏览和编辑模式。如果是浏览器窗口这些快捷键就会有反馈。也可以尝试按字母 e f 等来尝试切换网页内的元素。

edge窗口介绍

整个浏览器窗口从上到下可以分为选项卡列表、工具栏、网页内容区。另外最右边还有边栏。

  • 选项卡列表: 位于窗口顶部,可以按 F6 切换到。这里列出所有已经打开的网页的标题。可以按 Ctrl 加 Tab 在这些网页的选项卡之间切换。也可以直接按 Ctrl 加大键盘的数字1到9来分别切换对应的选项卡。
  • 工具栏:位于选项卡列表的下面,大致从左往右分三部分。左边和右边是功能按钮,中间是地址栏。用 F6 可以切换到这个工具栏。地址栏位于工具栏的中间部分,是一个编辑框,是用来输入网址和搜索关键词的地方。用 Alt 加 D 或者 Ctrl 加 L 可以直接定位到地址栏。
  • 网页显示区域:位于工具栏的下面,占据除了选项卡列表和工具栏以外的所有区域。可以用 F6 切换到。
  • 边栏: 位于网页内容区域的最右边,从上到下是一个很窄的竖条。可以显示或者隐藏,通过快捷键 ctrl 加 shift 加斜杠可以显示出来,然后用 f6 可以切换到。

要想在这些不同区域之间切换,可以用 F6 键。直接按 TAb 键也是可以切换的,只是 TAb 切换的时候会同时切换到对应区域内部的元素。

读屏软件对浏览器的支持

我们这一次主要用争渡读屏软件作为演示读屏,但是浏览器的操作一般是不限制读屏软件的。大多数对浏览器的操作都是跨读屏软件通用的,或者说是大多数读屏软件在网页操作方面都是保持一致的。
一般情况下,读屏软件对浏览器的支持分为下面几个部分:

  1. 对tab键的支持,这是一般性支持,是与其他软件一样的。
  2. 对光标键的支持,这是读屏软件特有的操作方式,完全拦截浏览器本身的光标键行为。读屏软件一般把网页看做普通文档,吧光标键用来在网页内部导航。
  3. 分类访问或者叫字母导航。这是根据网页元素类型来划分,给每一种网页类型分配一个字母快捷键,用来切换这一类元素。
  4. 浏览模式和编辑模式。这是因为读屏软件默认拦截浏览器内的光标键和一部分字母作为快捷键,会影响网页本身的一些功能,为了解决这个矛盾,就引入了这两种模式。浏览器模式下就是前面2和3的模式,编辑模式则是释放对光标键和字母的拦截,把键盘操作完全换给浏览器和网页本身。

我们日常使用过程中,这几种操作模式一般是组合起来使用的。根据不同的网页,我们使用不同的浏览方式。

参考资料


有时候我们需要这样的一个软件包:

  • 他是一个单文件
  • 他解压后可以直接启动软件
  • 他在关闭后可以自动删除临时文件

制作这样的软件包有很多种方法,下面分享的是使用 inno setup 打包工具制作这样的软件包的脚本。

; 功能: 制作用于临时使用的便携版本的软件包
; 说明:
; 一般情况下,只需要修改“define”开头的行的引号内的部分即可
; 生成的文件在当前文件夹内,文件名为: “软件名称_软件版本.exe”
; 作者: 杨永全
; 网址: https://www.qt06.com/

#define MyAppName "nvda远程被控端"
#define MyAppExeName "nvda.exe"
#define MyAppVersion "2022.3"
#define MyFileDir "nvda"
#define MyAppPublisher "我的公司"
#define MyAppURL "https://www.example.com/"

[Setup]
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DisableWelcomePage=yes
DisableReadyPage=yes
DisableDirPage = yes
DisableProgramGroupPage = yes
DisableFinishedPage=yes
CloseApplications=no
;DefaultDirName={%tmp}\nvda{code:GenTempDir}
CreateAppDir=no
Uninstallable=no
;ArchitecturesInstallIn64BitMode=x64 ia64
; 如果不需要以管理员运行,请删除下一行开头的分号
;PrivilegesRequired=lowest
OutputDir=.
OutputBaseFilename={#MyAppName}_{#MyAppVersion}
; 为了加快解压速度,使用 zip方式压缩
; 如果想要更小的安装包体积,请把下一行末尾的“zip”替换为“lzma”
Compression=zip
; 如果想要更小的体积,请删除下一行开头的分号,但这会需要更多的解压时间
;SolidCompression=yes
WizardStyle=modern

[Languages]
Name: "chinesesimp"; MessagesFile: "compiler:Default.isl"

[Messages]
SetupAppTitle=
SetupWindowTitle=%1
WizardInstalling=正在启动
InstallingLabel=正在启动 [name] 请稍后。

[Files]
Source: "{#MyFileDir}\*"; DestDir: "{tmp}"; Flags: ignoreversion recursesubdirs createallsubdirs

[Run]
FileName: "{tmp}\{#MyAppExeName}"; Description: "nvda"; Flags: shellexec hidewizard waituntilterminated

[Code]
const
WM_LBUTTONDOWN = 513;
WM_LBUTTONUP = 514;

Procedure RestartDeleteDir(path: String);
var FindRec:TFindRec;
begin
if FindFirst(path+'\*',findrec) then
    try
          repeat
          if (not (findrec.name='.') and not (findrec.name='..')) then
                    if not findrec.Attributes and FILE_ATTRIBUTE_DIRECTORY = 0 then
                              RestartDeleteDir(path+'\'+findrec.name)
          else
   RestartReplace(path+'\'+findrec.name,'');
                                until not FindNext(FindRec);
                    finally
                    RestartReplace(path,'')
                          FindClose(FindRec);
                              end;
end;

function GenTempDir(Param: String): String;
begin
  Result := GetDateTimeString('yyyymmddhhnnss', '-', '-');
end;

procedure InitializeWizard();
begin
  PostMessage(WizardForm.NextButton.Handle,WM_LBUTTONDOWN,0,0);
  PostMessage(WizardForm.NextButton.Handle,WM_LBUTTONUP,0,0);
end;

procedure CurStepChanged(CurStep: TSetupStep);
var dataPath:string;
      begin
      dataPath:=ExpandConstant('{tmp}')
      if CurStep = ssDone then
begin
RestartDeleteDir(datapath)
end;                                          
end;

具体步骤如下:

  1. 准备好私钥文件
  2. 将私钥文件复制到 %userprofile%.ssh 目录
  3. 在 %userprofile%.ssh 目录下的config 文件里添加配置信息,
  4. 如果没有 config 文件,可以使用下面命令创建: touch config
  5. 具体配置内容如下:
# 这里给这台服务器起个名字,方便后续使用
# 也可以使用域名或者ipHost  mysrv01
# 后续就可以在命令行直接使用他,例如 `ssh mysrv01`
# 可以是域名也可以是IP
HostName  XXX.XXX.XXX.XXX
# 登录时的用户名
User root
PreferredAuthentications publickey
# 本地文件,注意这个地方是放私钥的路径
# 私钥文件必须放到 %userprofile%\.ssh 目录,否则会提示权限问题而拒绝登录
IdentityFile C:\Users\aaa\.ssh\id_rsa

把下面一段代码粘贴到OneManager-php 后台的 customScript 编辑框内即可。

这段代码的作用有两个:

  1. 从读屏软件层面屏蔽所有图标
  2. 给下载链接加上了文本提示
<script> document.querySelectorAll('ion-icon').forEach(el=>el.setAttribute('aria-hidden', 'true')); document.querySelectorAll('a.download').forEach(el=>el.setAttribute('aria-label', '下载')) </script>

最近练习普通话,于是在网上搜了一下普通话练习60篇,但是没有方便直接下载的,索性就想自己动手抓一下。
在以往我都是用php来爬取的,这次想尝试下用node.js
于是就开始动手,分析了一下网页源码,发现非常有规律,60篇文章的 url 都是按序号递增的,这就非常简单了,直接用一个循环就可以生成所有的 url 了。
拿到地址后就是获取网页代码,因为现在 node.js 已经支持了fetch, 所以就直接用 fetch 来获取网页源码。这一步骤非常顺利。
拿到源码后就是解析,获取正文了。node.js 应该有县城的 dom 包,于是搜索了一下,找到了jsdom这个强大的包。这样获取内容就不是问题了。于是第一版就完成了,很快就下载好了60篇文章。
每一篇文章都提供了专业的示范朗读音频,我想也应该吧音频下载回来。我想既然使用了 fetch, 那么下载音频文件也用它好了。但是折腾了很久没搞定,最终放弃使用他了。
那就在搜一下看看 node.js 有什么用于下载的包吧。很快搜到了一个叫做download的包,看了下说明,非常简单,就用他好了。
下载音频一切顺利。
于是完整的爬取代码就完成了,普通话练习的60篇文章和示范朗读音频也就自然的搞定了。
代码如下:

const fs = require('fs');
const jsdom = require('jsdom');
const download = require('download');
const baseURL = '未知链接http://www.pthxx.com/b_audio/01_langdu_1/';

for(let i = 1; i <= 60; i++) {
    let id = i < 10 ? '0' + i : i.toString();
    fetch(`${baseURL}${id}.html`)
    .then((res) => {return res.text();})
    .then((res) => {
        const d = new jsdom.JSDOM(res).window.document;
        let title = d.querySelector('h2').textContent.trim();
        title = title.replace(/《(.+)》示范朗读/, '$1');

        let content = d.querySelector('#main2').textContent;
        fs.writeFileSync('txt/' + id + title + '.txt', title + content, 'utf8');
        console.log(id + title);
        let mp3URL = d.querySelector('audio source').src;
        console.log(mp3URL);
        download(`${baseURL}${mp3URL}`, 'audio', {filename: id + title + '.mp3'});
    });
}

上面的代码虽然已经能够完成任务,但是看起来还是有些不够漂亮,而且提示信息也不够清晰,于是进行了一次修改,干脆用一下asyncawait吧。然后在修改过程中遇到了一个生成指定数量元素的数组的问题,搜了一下,找到了一种看起来非常简练的方法。
另外为了在所有下载完毕后输出一个提示,使用了Promise.all()方法。
最终的代码如下:

const fs = require('fs');
const jsdom = require('jsdom');
const download = require('download');
const baseURL = 'http://www.pthxx.com/b_audio/01_langdu_1/';

const main = async function main() {
    let ids = Array.from({length: 60}, (_, i) => (i < 9 ? '0' : '') + (i + 1));
    await Promise.all(ids.map(async (id) => { return await getContent(id);}));
    console.log('全部下载完毕。');
};

const getContent = async function getContent(id) {
    let res = await download(`${baseURL}${id}.html`);
    const d = new jsdom.JSDOM(res).window.document;
    let title = d.querySelector('h2').textContent.trim();
    title = title.replace(/《(.+)》示范朗读/, '$1');

    let content = d.querySelector('#main2').textContent;
    fs.writeFileSync('txt/' + id + title + '.txt', title + content, 'utf8');
    console.log(`${id + title}.txt以保存`);
    let mp3URL = d.querySelector('audio source').src;
    console.log(`开始下载:${id + title}.mp3`);
    await download(`${baseURL}${mp3URL}`, 'audio', {filename: id + title + '.mp3'});
    console.log(`${id + title}.mp3以保存`);
};

main();

toFocus() 是我写的一个用于聚焦元素的一个方法,这个方法已经精力了多次修改和重构,最新的版本看起来已经比较简洁了。每一次变化可以说都是我的一次进步, 都是对编码的新的理解和认识。代码是在不断修改,不断重构中优化和改进的。
下面分享一下我几次重构的代码,希望对大家能有所启发。

//版本 1:
function toFocus(el) {
    let tagName = el.tagName.toLowerCase();
    let tagNames = ['div', 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'form', 'img', 'nav', 'header', 'main', 'footer', 'section', 'aside'];
    if (tagNames.includes(tagName) || (tagName == 'a' && !el.hasAttribute('href'))) {
        if (!el.hasAttribute('tabindex')) {
            el.setAttribute('tabindex', '-1');
        }
    }
    el.focus();
}
//版本 2:
function toFocus(el) {
    let tagName = el.tagName.toLowerCase();
    let tagNames = ['input', 'select', 'textarea', 'button'];
    if (!tagNames.includes(tagName) || (tagName == 'a' && !el.hasAttribute('href'))) {
        if (!el.hasAttribute('tabindex')) {
            el.setAttribute('tabindex', '-1');
        }
    }
    el.focus();
}
//版本 3:
function toFocus(el) {
    if(!el.matches('input, select, textarea, button, a[href], [tabindex]')) {
        el.setAttribute('tabindex', '-1');
    }
    el.focus();
}