个世界上使用浏览器的有两类人,一类是极简主义者,浏览器中永远只有几个选项卡;而有些人则是「选项卡收藏家」,在浏览器中同时开几十个甚至上百个页面。
Google 的 Chrome 浏览器为这两类人「操碎了心」,只好提供全新的选项卡组织形式。
在 8 月 25 日发布的大版本更新中,Chrome 发布了不少可以提升效率的功能,比如选项卡分类、选项卡预览、跨平台传送…… 虽然它们看起来与「提升效率」不沾边,但却实实在在地节省了使用者的时间。
▲ Chrome 分组功能示意图。图片来自:Google Blog
今年 4 月初,电报(Telegram)这款通讯工具更新了聊天分组的功能,即把不同人或群组的对话自定义分组,当时很多人为这个功能喝彩。
现在 Chrome 上迎来类似功能:为选项卡分组。
有些人习惯使用单独的效率类 app 来记录待办事项,而对有些人来说,浏览器的选项卡就是一种待办:临时页面、长期页面,又或者工作类页面、娱乐休闲类页面。但这也面临着被选项卡撑满整个屏幕的风险,让人一时无法集中注意力。
有了选项卡分组功能后,就能将这两类维度变得清晰简单,比如设置分组名称「娱乐」- 把相关选项卡都拖进去。
当暂时不需要又不想关掉这些页面时,双击选项卡分组名称,即可将这一组页面折叠起来。界面 1 秒清爽,让人更加专注。
▲Chrome 分组设置示意图。图片来自:Google Blog
目前选项卡分类功能在更新后默认可以使用,只需右键点击选项卡「向群组中添加标签页」即可。但折叠标签分组的功能需要手动开启,具体开启方法为:
除此之外,Chrome 85 还提供了一个惊喜:在平板模式下使用 Chrome 可以直接预览选项卡。这样我们就不用在那一个个小小的选项卡标题中寻找需要的页面了,也不用再担心受在那一点小得可怜的位置上点中关闭按钮了。
▲移动端 Chrome 选项卡预览示意图。图片来自:Google Blog
不是平板模式也想预览怎么办?下载一个 beta 版就可以拥有。
▲PC 端 Chrome 选项卡预览示意图。图片来自:Google Blog
还记得 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 上分享则只需点击地址栏后侧的二维码图标,生成一个二维码以供移动设备扫描即可。
若已更新却没看到该功能,则需要通过以下步骤开启:
在填写签证信息或者做学术研究时总会遇到各种各样的 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标签。
作用
属性
(一)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,b里面的c
在当前目录下寻找index.html文件
3、伪协议
<a href="javascript:;">点击后无任何点击或刷新等动作的反应</a>
<a href="#要跳转的元素的id"></a>
点击链接的时候,会跳转到指定元素所在的位置。
<a href="mailto:abcdefg@163.com ">发邮件给我</a>
<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
下载页面,但目前很少用,有的浏览器不支持,尤其是手机浏览器可能不支持。
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.(边框与边框之间的距离)。
作用:发出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文件执行
本文为作者本人的原创文章,著作权归作者本人和饥人谷所有,转载务必注明来源。
熟练使用快捷键可以显著提高用户在浏览网页时的效率。以下是一些常见的浏览器快捷键及其功能:
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:停止当前页面的加载(在某些浏览器中可能还有其他作用,如关闭对话框)。
请注意,不同浏览器之间的快捷键可能会有所不同,且部分快捷键可能因浏览器版本、设置或扩展插件的影响而有所变化。因此,在使用时,建议参考您所使用的浏览器的官方文档或帮助中心。
*请认真填写需求信息,我们会在24小时内与您取得联系。