整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Chrome浏览器更新!标签页管理超好用,加载速度提

Chrome浏览器更新!标签页管理超好用,加载速度提升10%

个世界上使用浏览器的有两类人,一类是极简主义者,浏览器中永远只有几个选项卡;而有些人则是「选项卡收藏家」,在浏览器中同时开几十个甚至上百个页面。

Google 的 Chrome 浏览器为这两类人「操碎了心」,只好提供全新的选项卡组织形式。

在 8 月 25 日发布的大版本更新中,Chrome 发布了不少可以提升效率的功能,比如选项卡分类、选项卡预览、跨平台传送…… 虽然它们看起来与「提升效率」不沾边,但却实实在在地节省了使用者的时间。

懒人目录

  • 选项卡支持分组,让人更加专注
  • 同时预览多个选项卡,不再怕误点
  • 加载速度提升 10%,实在地节省了时间
  • 二维码分享,让设备间联动更方便
  • PDF 文件的在线填写及保存
  • 内置更高兼容性,老旧浏览器不再依靠插件
  • 安全系数再次提升

▲ Chrome 分组功能示意图。图片来自:Google Blog

选项卡支持分组,让人更加专注

今年 4 月初,电报(Telegram)这款通讯工具更新了聊天分组的功能,即把不同人或群组的对话自定义分组,当时很多人为这个功能喝彩。

现在 Chrome 上迎来类似功能:为选项卡分组。

有些人习惯使用单独的效率类 app 来记录待办事项,而对有些人来说,浏览器的选项卡就是一种待办:临时页面、长期页面,又或者工作类页面、娱乐休闲类页面。但这也面临着被选项卡撑满整个屏幕的风险,让人一时无法集中注意力。

有了选项卡分组功能后,就能将这两类维度变得清晰简单,比如设置分组名称「娱乐」- 把相关选项卡都拖进去。

当暂时不需要又不想关掉这些页面时,双击选项卡分组名称,即可将这一组页面折叠起来。界面 1 秒清爽,让人更加专注。

▲Chrome 分组设置示意图。图片来自:Google Blog

目前选项卡分类功能在更新后默认可以使用,只需右键点击选项卡「向群组中添加标签页」即可。但折叠标签分组的功能需要手动开启,具体开启方法为:

  • 先进入「chrome://flags/#tab-groups」设定页面,将「Tab Groups」选为「Enable」状态。
  • 再进入「chrome://flags/#tab-groups-collapse」设定页面,将「Tab Groups Collapse」选为「Enable」状态。
  • 最后,重新启动谷歌浏览器 Chrome。

同时预览多个选项卡,不再怕误点

除此之外,Chrome 85 还提供了一个惊喜:在平板模式下使用 Chrome 可以直接预览选项卡。这样我们就不用在那一个个小小的选项卡标题中寻找需要的页面了,也不用再担心受在那一点小得可怜的位置上点中关闭按钮了。

▲移动端 Chrome 选项卡预览示意图。图片来自:Google Blog

不是平板模式也想预览怎么办?下载一个 beta 版就可以拥有。

▲PC 端 Chrome 选项卡预览示意图。图片来自:Google Blog

加载速度提升 10%,实在地节省了时间

还记得 2015 年火出圈的这个创意广告吗?在 Chrome 上连开 300 个标签页组成的动画广告,不少人在感叹创意的同时也在感叹,要是电脑真开这么多页面会不会卡?

<iframe frameborder=”0″ src=”https://v.qq.com/txp/iframe/player.html?vid=p07165mpxxv” allowFullScreen=”true”></iframe>

一直以来 Chrome 都在致力于打造更快更稳定的体验。在这次发布主编号 85 的大版本中官方第一个强调的就是速度:

Get more done, with 10 percent faster tabs in Chrome.

Chrome 工程总监 Max Christoff 在 Chromium Blog 中提到,本次 Chrome 85 采用了新的配置文件引导优化( Profile Guided Optimization,简称 PGO)技术来优化性能,这意味着每个标签页的延迟都已缩短 —— 这可是实实在在的节省时间。除了速度更快,这次的更新还支撑了「不被打断」的工作流。

▲PGO 启用后的测试数据,由 AppSo 翻译。图片来自:Chromium Blog

二维码分享,让设备间联动更方便

在 macOS 和 iOS 设备的情况下,使用「接力」可以在不同设备间传输网页,不会因切换设备而打断浏览进度,可却无法与 Android 进行接力。现在 Chrome 打破了这一「断层」。

只要你的设备下载了 Chrome,无论 iOS 还是 Android,都可以自由分享网页,而朋友只需扫扫二维码就可以快速浏览。

PC 上分享则只需点击地址栏后侧的二维码图标,生成一个二维码以供移动设备扫描即可。

若已更新却没看到该功能,则需要通过以下步骤开启:

  • 进入「chrome://flags/#sharing-qr-code-generator」设定页面。
  • 将「Enable sharing page via QR Code」选为「Enable」状态。
  • 重启谷歌浏览器 Chrome 。

PDF 在线填写及保存

在填写签证信息或者做学术研究时总会遇到各种各样的 PDF 文档,而填写它们又异常复杂:下载 PDF 文档 – 打印 – 手写 – 扫描电子件 – 保存,而 Chrome 支持在页面上先填写好再打印了。

如果没有填完还可以选择保存,下次打开时还能从上次中断的位置继续填写,省了不少力气。

▲ Chrome 关于 PDF 文件填写及保存示意图。图片来自:Google Blog

不过该功能虽然已在官网公布,但并没有随着本次版本更新出现,官方表示该功能的上线时间为「未来的几周内」。

另外有个小功能值得一提:在地址栏输入网址后,若发现该页面已被打开,则可以在地址栏中快速切换至该页。终于可以不用重复打开一样的网页了。

内置更高兼容性,老旧浏览器不再依靠插件

学校里陈旧的机房里所有电脑都还装着只有 Internet Explorer 8 才能打开的实训软件,以及某些银行转账输入密钥的操作只能在 IE 中完成,这导致各种新浏览器还需要兼容着「不思进取」的 IE。

Chrome 就是其中一员,曾经靠着 LBS(Legacy Browser Support)扩展程序兼容着这些拥有「老旧技术」,如今被已被内置到 Chrome 当中。

安全系数再次升级

从上个稳定版 Chrome 84 来说主推的就是安全,Chrome 对用户的安全承诺从未停止过。从个人设置中心新增的「安全检查」到现在的非安全下载警告,以及减少 TLS(Transport Layer Security)安全证书周期,为的是减少密钥泄漏的风险。

▲Chrome 84 至 Chrome 88 中的安全页面将阻止不安全的下载。图片来自:Chrome Enterprise release notes

Chrome 在我们看不见的地方做的这些努力很硬核,这些技术壁垒正静静地保护着我们网上冲浪的安全,看似冰冷的技术背后其实透露着一些温情。

本次就是 Chrome 85 更新的介绍,有没有打动你的功能?如果你也有浏览器使用技巧,欢迎在留言区分享。

TML常用标签有:a标签、table标签、img标签、form标签和input标签。

a标签

作用

  1. 跳转到外部网页
  2. 跳转到内部锚点
  3. 跳转到邮箱或电话等

属性

(一)href

href是hyper reference的缩写,超链接的意思。

用于指定链接目标的ur地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能;
href=“#”表示这是一个空链接;
如果href里面地址是—个文件或者压缩包,会下载这个文件。

<a href="https://google.com">超链接到google网站的主页</a>
 <a href="https://google.com">超链接到google的主页</a>
 <a href="//google.com">超链接到google的主页</a>

展现形式:

点击此链接,即可到达google的主页

a标签href的取值:

1、上述代码中的网址的取值(推荐使用第三行的代码)

<a href="//google.com">超链接到google的主页</a>

由于此方式能够自动补齐相关的网络地址,前面两种写错就会报错,所以推荐使用。

2、路径

  • /a/b/c 或者是a/b/c

当前路径下的a里面的b,b里面的c

  • index.html 以及./index.html

在当前目录下寻找index.html文件

3、伪协议

  • javascript:代码;(冒号与分号一定要写)
<a href="javascript:;">点击后无任何点击或刷新等动作的反应</a>
  • 锚点链接
<a href="#要跳转的元素的id"></a>

点击链接的时候,会跳转到指定元素所在的位置。

  • mailto:邮箱
<a href="mailto:abcdefg@163.com ">发邮件给我</a>
  • tel:手机号
<a href="tel:12345678901">打电话给我</a>

(二)targe

用于指定链接页面的打开方式

a的target取值

1、内置名字

_blank 在空白页打开

_self 在当前页面打开

_parent 在父级窗口打开

_top 在最顶级的窗口打开

<a href="//google.com" target="_blank">超链接到google网站的主页在空白页打开</a>

2、程序员的命名

window:name(在xxx页面打开)

iframe的name(iframe现在已经很少使用了,是指内嵌窗口)


(三)download

下载页面,但目前很少用,有的浏览器不支持,尤其是手机浏览器可能不支持。

table标签

1、table标签的语法:

thead:表头

tbody:表的内容,用于定义

tfoot:表的脚部

tr:table row,表格里的行

th:表格的表头部分,其中的文本内容字体加粗居中显示

td:table data,表格数据,用于定义表格中的单元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小黄</th>
          <th>小蓝</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>



第一行的th标签为空

2、table的样式

table-layout:auto;自动计算每一行的宽高

table-layout:fixed;通过列表的宽度来决定平均宽度

border-collapse:collapse; 合并边框(默认边框与边框之间不合并)

border-spacing:0;边框为0.(边框与边框之间的距离)。

img标签(图片)

作用:发出get请求,展示一张图片。

<img src="1.JPG" alt="头像" width="400" />

当前路径下的1.jpg,确定宽度为400,只写宽度高度会自适应

属性

alt:alternate的缩写,替换的意思。替换文本,图像不能显示的文字。

路径错误显示alt内容

title:提示文本。鼠标放到图像上,显示的文字。

响应

max-width:100% 所有的图片在手机上都自适应宽度,宽度最大为100%。

事件

onload/onerror 监听图片是否加载成功,加载成功时用onload,不成功是用onerror事件。确保在onerror事件能够补救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload=function () {
console.log("图片加载成功");
 };
xxx.onerror=function () {
console.log("图片加载失败");
xxx.src="/404.jpg";
 };
</script>
</body>

监听成功时,打印出成功

监听失败时,先打印出监听失败并且开始执行加载失败是的挽救图片。404.jpg文件执行

感想:

  • a标签的默认样式可以设置清除,href属性可以有好多种取值,a标签的意义也不仅仅是跳转到一个网址,还可以发邮件打电话。
  • 给img标签设置宽度和高度时,不能让图片变形
  • table标签必须按照thead,tbody,tfoot的结构去写,先划分好结构,再往里填充内容,即使tfoot写在前面,也会显示在页面的尾部

本文为作者本人的原创文章,著作权归作者本人和饥人谷所有,转载务必注明来源。

熟练使用快捷键可以显著提高用户在浏览网页时的效率。以下是一些常见的浏览器快捷键及其功能:

一、标签页管理

Ctrl + T:打开新标签页。

Ctrl + N:打开新窗口。

Ctrl + W:关闭当前标签页。

Ctrl + Shift + T:恢复最近关闭的标签页。

Ctrl + Tab 或 Ctrl + PgDn:切换到下一个标签页。

Ctrl + Shift + Tab 或 Ctrl + PgUp:切换到上一个标签页。

Ctrl + 1~9:切换到指定序号的标签页(如果有的话)。

Ctrl + 9:切换到最后一个标签页(在某些浏览器中可能不适用)。

二、页面操作

F5 或 Ctrl + R:刷新当前页面。

Ctrl + F 或 F3:在当前页面进行查找。

Ctrl + G 或 F3:查找下一个匹配项。

Ctrl + Shift + G 或 Shift + F3:查找上一个匹配项。

Home 键:跳转到页面顶部。

End 键:跳转到页面底部。

Ctrl + +:放大页面。

Ctrl + -:缩小页面。

Ctrl + 0:恢复默认页面大小。

F11:切换全屏模式。

三、地址栏与搜索

Ctrl + L 或 F6:将焦点设置到地址栏。

Ctrl + Enter:在新标签页中打开地址栏中输入的网址。

Ctrl + E 或 Ctrl + K:将焦点设置到搜索框(如果浏览器内置了搜索框)。

Alt + Enter:在搜索框中输入关键词后,在当前标签页中进行搜索(或使用新标签页打开搜索结果,具体行为可能因浏览器而异)。

四、书签与历史记录

Ctrl + D:将当前页面添加到收藏夹(书签)。

Ctrl + H:打开历史记录页面。

Ctrl + Shift + B:显示或隐藏书签栏(如果书签栏被隐藏了)。

五、其他常用快捷键

Ctrl + J:打开下载列表,查看和管理下载内容。

Ctrl + P:打开打印窗口,进行页面打印设置。

Ctrl + S:保存当前页面为HTML文件或其他格式(具体取决于浏览器的实现)。

Ctrl + U:查看当前页面的源代码(在支持此功能的浏览器中)。

Alt + 左箭头/Backspace:返回上一页。

Alt + 右箭头:前进到下一页(在某些浏览器中可能需要使用Shift + Backspace)。

Esc:停止当前页面的加载(在某些浏览器中可能还有其他作用,如关闭对话框)。

请注意,不同浏览器之间的快捷键可能会有所不同,且部分快捷键可能因浏览器版本、设置或扩展插件的影响而有所变化。因此,在使用时,建议参考您所使用的浏览器的官方文档或帮助中心。