個世界上使用瀏覽器的有兩類人,一類是極簡主義者,瀏覽器中永遠只有幾個選項卡;而有些人則是「選項卡收藏家」,在瀏覽器中同時開幾十個甚至上百個頁面。
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小時內與您取得聯系。