軟最近宣布決定放棄自己開發的EdgeHTML渲染引擎,并采用開源的Chromium核心開發Chromium Edge瀏覽器。微軟采用Chromium的舉措幫助該公司將原本只針對Windows 10的Edge帶入了Mac OS以及舊版本的Windows。
自2015年推出以來,經典的微軟 Edge未能吸引公眾注意力,瀏覽器無法與Google Chrome等競爭對手競爭。微軟的高管們意識到,時間已經到了很大程度上改變Edge。在與CEO Satya Nadella會面后,微軟 Edge團隊分析了方方面面,以找出Edge的問題并相應地決定更改。
Satya Nadella要求他的開發人員找到一個解決方案,微軟工程師創建了一篇論文,權衡了Edge的優點和缺點。經典Edge的缺點之一始終是分布問題。Windows10比任何其他桌面操作系統都受歡迎,其市場份額接近50%,但大量消費者正在運行Windows7、8和非Windows操作系統,他們根本無法使用只針對Windows 10的Edge瀏覽器,這使得開發人員很難在微軟瀏覽器上測試他們的網頁。
Edge的另一個問題是兼容性。微軟使用自己的渲染引擎為Edge瀏覽器提供支持,并且存在兼容性問題,因為許多網站都針對Chrome等更受歡迎的網絡瀏覽器進行了優化。網絡發布者很難針對多個瀏覽器測試網站,而且由于Edge不受歡迎,開發人員通常會延遲對Edge的測試。
Edge的第三個問題是通用Windows平臺(UWP)。經典的Edge也是基于UWP構建的,因此它可以在多種外形設備上運行。但UWP并不是一個成熟平臺,而且沒有大量應用程序支持,并且多顯示器體驗尚未為UWP做好準備, 因此,微軟決定將Edge重新定位,作為應用程序支持所有平臺。
微軟考慮過一次性修復Edge的想法。它還考慮將Edge帶到Windows應用商店,因此更新不依賴于系統更新。該公司還考慮將Edge帶入更多平臺,如Windows 7。微軟還將更多工程師轉移到Edge部門來修復瀏覽器,但隨著谷歌繼續推動Chrome的許多新標準,微軟無法跟上這些變化。
微軟的不同產品組正在評估自己修復Edge的想法。 Windows團隊也在研究Edge的新版本,他們提出了一個原型,最終進入了高級領導層會議。團隊中的某個人創建了基于Chromium的粗略測試版本。這是一個很大的變化,因此微軟高級領導人,包括比爾蓋茨,微軟首席技術官Kevin Scott,Reid Hoffman和GitHub首席執行官Nat Friedman進行了相關會以,在分析了轉換為Chromium內核的各種利弊后,微軟于2018年9月決定轉向Chromium,最終于12月公布。
微軟采用Chromium的計劃受到科技行業的廣泛贊譽,其中包括谷歌和Chromium社區,他們歡迎微軟的貢獻。一些人反對此舉,包括非營利組織Mozilla。Chromium開發人員很高興看到微軟的工程師迅速修復了Chromium社區多年來一直懸而未決的錯誤。例如,微軟正致力于在Windows上為Chromium提供更平滑的滾動,以及更好的觸摸支持。雖然Chromium Edge運行良好,并且在很多方面都比Chrome更好,但轉換到Chromium是否會改善Edge的市場份額還有待觀察。
末有福利
前端開發,入門簡單,有一臺可以運行多款瀏覽器的電腦,能聯網查詢資料即可。深入的部分,需要更多的理論知識、肯鉆研的精神。 前端開發,需要入門了解的屈指可數,主要就是如下幾個大方面:
Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
Git GitHub
Web standards ,主要定義瀏覽器端,功能接口標準的,標準的具體實現,由不同的瀏覽器廠商完成。
Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
協議,主要用于通信。前后端不是獨立的,彼此通過協議,互換信息,web系統才能運行正常
Python, NodeJS, Deno, Go, Rust
Web standards,各實現廠商不同,支持力度不同,瀏覽器兼容問題自然存在
廠商的不同,展示場景的不同,意味著不能全篇一律敲定,需要動態變化展示內容
天下站點,只有快,才能留住用戶
站點的訪問人群不同,要具備普適性, 都能輕松使用。
國際語言眾多,需要盡可能的多支持
用戶隱私數據保護
當然,也有例外,不是這種格式的
# Empty elements, or (void elements.)
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
復制代碼
<p>My cat is <strong>very</strong> grumpy.</p>
復制代碼
塊元素,獨占一行;行內元素,按先后順序,排列 這些與css的display不同,不影響元素能包含哪些元素,能被哪些元素包含
其中,也存在一種特殊的屬性:Boolean attributes
<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
復制代碼
另外,也會存在一些特殊的寫法。推薦都是key="value"形式
<a href=https://www.mozilla.org/>favorite website</a>
復制代碼
不管多少連續的空白,瀏覽器都會解析會一個空格
<!DOCTYPE html> # 定義解析格式
<html> # 文檔的root
<head> #定義源數據地方
<meta charset="utf-8">
<title>My test page</title>
</head>
<body> # 文檔的可見內容部分
<p>This is my page</p>
</body>
</html>
復制代碼
元數據等請移步參考
<, >,",' and &, 這是html自身使用的,如果用戶需要展示,那么需要轉義
<!--
<p>I am!</p>
-->
復制代碼
alt描述圖片
# 推薦添加alt,而不是text子元素節點添加
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
復制代碼
caption添加標題
<figure>
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
復制代碼
根據展示設備尺寸的不同,加載不同的圖片
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
復制代碼
設備尺寸相同,但是分辨率不同
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy">
復制代碼
利用picture,不同設選擇加載不同的圖片
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
復制代碼
picture+svg
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
復制代碼
單一url 瀏覽器廠商,針對音頻的支持格式不是不同的,譬如: MP3, MP4 and WebM
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
復制代碼
瀏覽器適配問題
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
復制代碼
單一url 瀏覽器廠商,針對視頻的支持格式不是不同的
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
復制代碼
瀏覽器適配問題
<video controls width="400" height="400"
autoplay loop muted preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
復制代碼
image引用svg
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87"
width="100" />
復制代碼
html引用svg
<svg width="300" height="200">
<rect width="100%" height="100%" fill="green" />
</svg>
復制代碼
iframe等中引用svg
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
復制代碼
canvas與svg不同,canvas基于像素,svg基于矢量圖
#html
<canvas id="my-canvas" width="600" height="400"></canvas>
復制代碼
iframe, embed and object
iframe
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Glossary">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>
復制代碼
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
復制代碼
col 一次指定即可
<table>
<colgroup>
<col> # 定義在colgroup中,與th個數對應
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
復制代碼
全部設置
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
復制代碼
如果你現在也想學習前端開發技術,在學習前端的過程當中有遇見任何關于學習方法,學習路線,學習效率等方面的問題,你都可以申請加入我的Q群:前114中6649后671,里面有許多前端學習資料 大廠面試真題免費獲取,希望能夠對你們有所幫助。
片來源于網絡
Microsoft Edge 是微軟開發的網絡瀏覽器,最初是基于 EdgeHTML 引擎和 Chakra 腳本引擎開發的。然而,由于多種原因,包括性能、兼容性和開發成本等,微軟決定將 Edge 瀏覽器遷移到 Chromium 開源項目上,這是一個由 Google 主導的瀏覽器項目,其基礎是 Chrome 瀏覽器所使用的 Blink 引擎。微軟在 2018 年宣布了將 Edge 瀏覽器遷移到 Chromium 的計劃,并在 2019 年發布了基于 Chromium 的 Edge 瀏覽器的首個預覽版。由于 Chromium 的廣泛使用,許多為 Chrome 瀏覽器開發的擴展可以無縫地在 Edge 瀏覽器中運行,這大大增加了 Edge 用戶的擴展選擇。Edge 瀏覽器同時集成了Chromium 提供的強大開發者工具,使得開發者可以更輕松地調試和優化 Web 應用。
目前,Edge 瀏覽器已經集成了一些 AI 擴展,這些擴展利用人工智能技術來增強用戶的瀏覽體驗。Sider AI 側邊欄 :集成了多種 AI 模型的瀏覽器擴展,包括 ChatGPT、GPT-4o、Claude 3.5、Gemini 1.5還有豆包等。它允許用戶通過側邊欄訪問這些 AI 功能,以幫助搜索網頁、發送電子郵件、提高寫作或翻譯文本。
其中擴展ChatGPT中文版 GPT-4(國內免費直連),是一款基于的OpenAI公司最新版ChatGPT3.5、4.0等模型開發的聊天機器人,具有豐富的問題模版,提問精準,用戶無需一次性大額購買,注冊即可免費體驗,可根據個人需求購買日卡,周卡,月卡等。其開發者為AI ChatGPT Ltd.,可直接注冊使用,但每天只有10000tokens的免費額度。
另外,Microsoft Edge 瀏覽器的擴展類型非常多樣,可以滿足不同用戶的需求。以下是一些常見的擴展類型:
這些擴展類型覆蓋了從提高瀏覽效率、增強安全性、個性化體驗到特定功能實現等多個方面,極大地豐富了用戶的瀏覽器使用體驗。用戶可以根據自己的需求在 Microsoft Edge Add-ons 商店中尋找合適的擴展進行安裝。
總的來說,Edge 瀏覽器集成 Chrome 內核是一個戰略性的決策,它不僅提高了瀏覽器的性能和兼容性,也為用戶提供了更多的選擇和更好的體驗。微軟承諾將繼續開發和維護基于 Chromium 的 Edge 瀏覽器,同時與 Chromium 社區合作,推動 Web 技術的發展。Microsoft Edge在正逐漸擴展成為一個集工作、娛樂、生活、學習等功能一體的AI平臺。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。