整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          推薦50個超實用的 Chrome 擴展,建議收藏

          家好,我是 Echa。

          今天來分享 50 個超實用的 Chrome 瀏覽器擴展!

          JSON

          1. JSON Viewer Pro

          JSON Viewer Pro 用于可視化JSON文件。其核心功能包括:

          • 支持將JSON數(shù)據(jù)進行格式化,并使用屬性或者圖表進行展示;
          • 使用面包屑深入遍歷 JSON 屬性;
          • 在輸入?yún)^(qū)寫入自定義 JSON;
          • 導入本地 JSON 文件;
          • 使用上下文菜單下載 JSON 文件;
          • 網(wǎng)址過濾器;
          • 改變主題;
          • 自定義 CSS ;
          • 復制屬性和值;

          輸入界面如下:

          格式化之后:

          2. JSONVue

          JSONVue 是一個JSON數(shù)據(jù)查看器,主要用來格式化JSON數(shù)據(jù):

          網(wǎng)站技術(shù)

          3. Library Sniffer

          Library Sniffer 是一款給開發(fā)者使用的工具,能夠探測當前網(wǎng)頁所使用的類庫、框架和服務(wù)器環(huán)境,為開發(fā)者提供了方便。

          4. Wappalyzer

          Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術(shù)。通過此擴展,可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關(guān) Web 服務(wù)器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。

          5. WhatRuns

          WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。

          開發(fā)調(diào)試

          6. PerfectPixel by WellDoneCode

          使用PerfectPixel插件可以將設(shè)計圖加載至網(wǎng)頁中,與已成型的網(wǎng)頁進行重疊對比,以幫助開發(fā)和設(shè)計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。

          7. Clear Cache

          可以使用此擴展程序快速清除緩存,無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數(shù)據(jù)和數(shù)量,包括:應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。

          8. VisBug

          VisBug 是一個使用 JavaScript 構(gòu)建的開源網(wǎng)頁設(shè)計調(diào)試工具,它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。

          9. Debug CSS

          Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播,按住Ctrl,并將鼠標懸浮在元素上,即可查看其信息:

          10. CSS Viewer

          CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義,CSS 查看器可以顯示將鼠標懸停在任何網(wǎng)頁上的元素的 CSS 屬性。

          11. EditThisCookie

          EditThisCookie 是一個 cookie 管理器。可以添加,刪除,編輯,搜索,鎖定和屏蔽cookies。

          12. React Developer Tools

          React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后,將在 Chrome DevTools 中獲得兩個新選項卡:"?? Components" 和 "?? Profiler":

          • Components 選項卡顯示了在頁面上呈現(xiàn)的根 React 組件,以及它們最終呈現(xiàn)的子組件;
          • Profiler 選項卡用來記錄性能信息。

          13. Vue.js devtools

          Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件,可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試功能。

          14. Augury

          Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。

          15. Firebug Lite for Google Chrome

          Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件,在Chrome中安裝了Firebug Lite插件以后,開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容,其包含了基本的HTML、CSS以及Javascript的調(diào)試功能,用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁,以便及時地找到網(wǎng)頁中的BUG并及時修復。

          16. HTML Validator

          HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標顯示,詳細信息可以在瀏覽器的開發(fā)者工具中查看。

          17. Web Developer

          Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox,并且可以在這些瀏覽器支持的任何平臺上運行,包括 Windows、macOS 和 Linux。

          18. Requestly

          Requestly 是一款Chrome和Firefox瀏覽器插件,提供URL轉(zhuǎn)發(fā)、修改HTTP請求和結(jié)果、插入腳本等功能。

          19. Window Resizer

          Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。

          20. Responsive Viewer

          Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時測試多個屏幕。

          21. Moesif Origin & CORS Changer

          此插件允許直接從瀏覽器發(fā)送跨域請求,而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭,并將 Access-Control-Allow-Origin 設(shè)置為 *.

          22. ColorPick Eyedropper

          ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具,可讓從網(wǎng)頁等中選擇顏色值。

          23. CSSPeeper

          CSS Peeper 用于檢查和復制元素樣式的優(yōu)秀工具,使用 CSSPeeper 可以將鼠標懸停在網(wǎng)頁中的任何元素上,然后單擊鼠標即可復制元素的樣式。

          24. Dimensions

          Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件,該插件在點擊啟動插件圖標后,可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量,同時還可以通過使用快捷鍵來快速啟用或關(guān)閉該插件的功能,簡單實用。

          25. Site Palette

          Site Palette 用于生成調(diào)色板。設(shè)計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。

          26. ColorZilla

          ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具;也是個快速的對顏色進行調(diào)節(jié)的Chrome插件,許多的用戶將這款軟件稱呼為顏色吸取插件,它提取的顏色是非常的多樣化,還可生產(chǎn)css顏色的代碼等。

          • 吸管器-獲取頁面上任何像素或區(qū)域的顏色;
          • 一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的;
          • 網(wǎng)頁顏色分析器-分析任何網(wǎng)頁上的DOM元素顏色,找到相應(yīng)的元素;
          • 終極CSS梯度發(fā)生器;
          • 調(diào)色板查看器與7預(yù)先安裝調(diào)色板;
          • 顏色歷史最近挑選的顏色;
          • 顯示標簽名稱,類別,編號,大小等元素信息;
          • 光標下的輪廓元素;
          • 自動將生成或采樣的顏色復制到CSS RGB,Hex和其他格式的剪貼板;
          • 使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

          字體

          27. WhatFont

          當我們想查看網(wǎng)頁中文字的字體時,最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢?WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標,再點需要查看為文字即可:

          28. Fonts Ninja

          Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。

          標簽頁

          29. BrowserStack

          使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設(shè)置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。

          30. Toby

          Toby 是一款 Chrome 新標簽頁工具,能夠?qū)⑽醋x的標簽頁分組顯示在新標簽頁中,這樣就能把所有未看完的標簽頁都關(guān)閉了。分組相當于多個 Chrome 窗口,將你的標簽頁都拖進 Toby 中,就不需要實時開著占地方了。

          31. daily.dev

          該擴展提供了每日熱門開發(fā)者新聞,不需要再浪費時間搜索高質(zhì)量的文章了。

          32. Momentum

          Momentum 擁有漂亮的新標簽頁面,每日更新精彩背景壁紙圖片,可設(shè)置每日新鮮事焦點以及跟蹤待辦事項,無廣告,無彈窗。

          33. The Great Suspender

          The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡,在可配置的時間之后未查看的選項卡將在后臺自動掛起,從而釋放該選項卡消耗的內(nèi)存和 CPU。

          34. Session Buddy

          Session Buddy是一個可以幫助用戶查看、新增、編輯當前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計算機后恢復,從而達到節(jié)省內(nèi)存的作用。

          Github

          35. Octotree

          Octotree 旨在讓 GitHub 體驗更好。通常,為了檢查 Github 中的子文件夾,需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側(cè)顯示存儲庫的目錄結(jié)構(gòu),這有助于更好地理解文件夾結(jié)構(gòu)。

          1_EKF88oqIyX6FzgueCKdtXg.gif

          36. File Icons for GitHub and GitLab

          File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

          網(wǎng)頁測試

          37. axe DevTools

          ax DevTools 是一個快速、輕量級但功能強大的測試工具,由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅(qū)動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復更多可訪問性問題。

          38. OctoLinker

          OctoLinker 可以將特定語言的語句(如 include、require 或 import)轉(zhuǎn)換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時,只需將鼠標懸停在鏈接的文件上并單擊即可打開。

          39. Web Developer Checklist

          此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。

          40. Check My Links

          Check My Links 是一個鏈接檢查器,它可以抓取網(wǎng)頁并查找損壞的鏈接。

          41. Checkbot

          Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務(wù)器上的單個文檔或一組文檔。它會創(chuàng)建一個報告,該報告匯總了引起某種警告或錯誤的所有鏈接。

          42. PageSpeed Insights

          Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。

          43. Meta SEO Inspector

          META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

          隱私廣告

          44. Ghostery

          Ghostery 是強大的隱私保護擴展程序。其主要有以下功能:

          • 攔截廣告:Ghostery 內(nèi)置的廣告攔截工具可以移除網(wǎng)頁上的廣告,防止網(wǎng)頁雜亂無章,讓你專注于想看的內(nèi)容。
          • 保護隱私:利用 Ghostery 可以查看和攔截所瀏覽的網(wǎng)站上的跟蹤器,控制收集數(shù)據(jù)的跟蹤器。增強反跟蹤功能還能將數(shù)據(jù)匿名化,進一步保護隱私。
          • 提高瀏覽速度:Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網(wǎng)頁質(zhì)量標準,提高網(wǎng)頁加載速度,優(yōu)化網(wǎng)頁性能。

          45. AdBlock

          AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。

          效率工具

          46. Marinara

          番茄工作法(Pomodoro?)時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

          47. Loom

          Loom 可以用來快速錄制視頻,并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中,Loom還支持在用戶點擊啟動插件時,立即捕捉屏幕圖像,同時開始視頻錄制操作,還可以將錄制好的視頻復制到粘貼板中存儲。

          48. GoFullPage

          GoFullPage 是一款全屏截圖插件(整個網(wǎng)頁截圖),完整捕獲您當前頁面的屏幕,進行滾動截圖,而無需任何額外的權(quán)限。單擊擴展程序圖標,然后將其傳輸?shù)狡聊豢煺盏男聵撕烅撝校梢栽谄渲袑⑵湎螺d為圖像或PDF,甚至只需拖動即可,保存到桌面。

          49. BetterViewer

          BetterViewer 可以提供更好的圖像查看體驗,旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時,只需在頁面右鍵點擊圖片,選擇“在新標簽頁中打開圖片”即可。

          50. svg-grabber

          svg-grabber 是一個快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預(yù)覽、下載和復制網(wǎng)站中所有 SVG 圖標和插圖的代碼。

          家好,我是拾光,

          我的頭條號是:全棧開發(fā)者。

          今天 給大家?guī)淼氖乔岸说拿嬖囶}。

          希望前端開發(fā)人員都能夠找到一個好工作。

          如果本文對您有幫助的話,記得收藏+關(guān)注哦~

          你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?

          ? IE: trident內(nèi)核

          ? Firefox:gecko內(nèi)核

          ? Safari:webkit內(nèi)核

          ? Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

          ? Chrome:Blink(基于webkit,Google與Opera Software共同開發(fā))

          2.每個HTML文件里開頭都有個很重要的東西,Doctype,知道這是干什么的嗎?

          答案:<!DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

          (重點:告訴瀏覽器按照何種規(guī)范解析頁面)

          3.div+css的布局較table布局有什么優(yōu)點?

          ?改版的時候更方便 只要改css文件。

          ?頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。

          ?表現(xiàn)與結(jié)構(gòu)相分離。

          ?易于優(yōu)化(seo)搜索引擎更友好,排名更容易靠前。

          4.a:img的alt與title有何異同?b:strong與em的異同?

          答案:

          a:

          ?alt(alt text):為不能顯示圖像、窗體或applets的用戶代理(UA),alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)

          ?title(tool tip):該屬性為設(shè)置該屬性的元素提供建議性的信息。

          b:

          ?strong:粗體強調(diào)標簽,強調(diào),表示內(nèi)容的重要性

          ?em:斜體強調(diào)標簽,更強烈強調(diào),表示內(nèi)容的強調(diào)點

          5.為什么利用多個域名來存儲網(wǎng)站資源會更有效?

          ?CDN緩存更方便

          ?突破瀏覽器并發(fā)限制

          ?節(jié)約cookie帶寬

          ?節(jié)約主域名的連接數(shù),優(yōu)化頁面響應(yīng)速度

          ?防止不必要的安全問題

          6.請談一下你對網(wǎng)頁標準和標準制定機構(gòu)重要性的理解。

          (無標準答案)網(wǎng)頁標準和標準制定機構(gòu)都是為了能讓web發(fā)展的更‘健康’,開發(fā)者遵循統(tǒng)一的標準,降低開發(fā)難度,開發(fā)成本,SEO也會更好做,也不會因為濫用代碼導致各種BUG、安全問題,最終提高網(wǎng)站易用性。

          7.知道什么是微格式嗎?談?wù)劺斫狻T谇岸藰?gòu)建中應(yīng)該考慮微格式嗎?

          答案:

          微格式(Microformats)是一種讓機器可讀的語義化XHTML詞匯的集合,是結(jié)構(gòu)化數(shù)據(jù)的開放標準。是為特殊應(yīng)用而制定的特殊格式。

          優(yōu)點:將智能數(shù)據(jù)添加到網(wǎng)頁上,讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。(應(yīng)用范例:豆瓣,有興趣自行g(shù)oogle)

          8.在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能,從用戶刷新網(wǎng)頁開始,一次js請求一般情況下有哪些地方會有緩存處理?

          答案:dns緩存,cdn緩存,瀏覽器緩存,服務(wù)器緩存。

          Css篇:

          1.有哪項方式可以對一個DOM設(shè)置它的CSS樣式?

          ?外部樣式表,引入一個外部css文件

          ?內(nèi)部樣式表,將css代碼放在 <head> 標簽內(nèi)部

          ?內(nèi)聯(lián)樣式,將css樣式直接定義在 HTML 元素內(nèi)部

          2.CSS都有哪些選擇器?

          ?派生選擇器(用HTML標簽申明)

          ?id選擇器(用DOM的ID申明)

          ?類選擇器(用一個樣式類名申明)

          ?屬性選擇器(用DOM的屬性申明,屬于CSS2,IE6不支持,不常用,不知道就算了)

          除了前3種基本選擇器,還有一些擴展選擇器,包括

          ?后代選擇器(利用空格間隔,比如div .a{ })

          ?群組選擇器(利用逗號間隔,比如p,div,#a{ })

          3.CSS選擇器的優(yōu)先級是怎么樣定義的?

          基本原則:

          一般而言,選擇器越特殊,它的優(yōu)先級越高。也就是選擇器指向的越準確,它的優(yōu)先級就越高。

          復雜的計算方法:

          ?用1表示派生選擇器的優(yōu)先級

          ?用10表示類選擇器的優(yōu)先級

          ?用100標示ID選擇器的優(yōu)先級

          ?div.test1 .span var 優(yōu)先級 1+10 +10 +1

          ?span#xxx .songs li 優(yōu)先級1+100 + 10 + 1

          ?#xxx li 優(yōu)先級 100 +1

          今天就到這里吧~希望 對您有所幫助。

          給您自己加油~

          下方是給你推送的您可能會喜歡的文章,大家可以點擊鏈接 進行查看~

          前端工程師面試題(J2EE)_04

          前端模塊之CSS實現(xiàn)時鐘走動效果_06

          前端模塊之利用偽元素實現(xiàn)字體立體翻轉(zhuǎn)效果_08

          前端模塊之 街景地圖開發(fā)

          頻、視頻的格式

          開始學習之前,我們要下載些素材用來測試使用,地址如下:https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

          提取碼:td80

          其中包括兩個視頻一個音頻和一個安裝程序。

          學習如何在頁面中添加音頻、視頻之前應(yīng)該了解一點基礎(chǔ)知識。

          我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂的經(jīng)歷,大家會注意到,有的視頻文件名的后綴是.avi,有的視頻是.mp4,還有.mov的,據(jù)不完全統(tǒng)計,常見的各種視頻格式有十幾種之多。

          常見的音頻的格式比起視頻來會顯得少一些,一般是.wav和.mp3格式。

          為什么存儲相同的內(nèi)容可以有這么多不同的格式呢?

          格式產(chǎn)生的核心在于對音頻、視頻等多媒體文件進行的不同編碼方式。

          那什么是編碼呢?

          簡單來說我們可以把"編碼"這個詞分成兩個部分,第一個是"編",也就是"整理、組織"的意思,第二個是"碼",也就是我們平時所說的"數(shù)碼"。

          首先說"碼",我們的計算機中的數(shù)據(jù)最終都是通過二進制的數(shù)字(0和1)來存儲或計算的,這些0或1就是數(shù)碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲與計算都不例外。不管多么復雜或簡單的文件,在計算機看來,都是一大堆0和1。

          一個0或1被稱為1比特,圖片或視頻中的一個黑白像素通常是8比特(八位),如果一張1080乘720個像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié),約等于0,74mb。如果一個視頻每秒中有25幀,也就是一秒鐘在我們眼前閃過25張圖片(視頻播放實際上就是在我們眼前快速的更替圖片,這些圖片在大腦中會被自動連成動作,這也是小的時候在課本的角上畫好一套走路的小人的不同動作后,快速翻動書頁,畫面中的小人會走路的原因,大家可以自行百度"視覺暫留原理")。

          一秒鐘25張1080乘720的圖片的視頻,一秒鐘就會占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢,18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。

          但事實上我們下載的1080*720的一小時三十分鐘左右的視頻的體積往往也沒有超過1gb,這又是為什么呢?

          這就是"編"的功勞!對數(shù)碼進行整理和組織的主要目的是壓縮體積,壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶,是信息技術(shù)的關(guān)鍵技術(shù)之一,壓縮的方法一般有兩類,一類叫做無損壓縮,也就是通過對這一大堆數(shù)碼進行一個特殊的組合使其占有更小的空間,一類叫做有損壓縮,是在無損壓縮的基礎(chǔ)上剔除掉人眼睛識別不到的冗余信息。具體的壓縮過程涉及到很多數(shù)學知識,這里大家簡單了解一下即可。

          壓縮后的視頻或音頻文件最終通過播放器對該文件的壓縮算法進行逆向運算后,還原成計算機可以解讀的畫面和聲音再呈現(xiàn)給觀眾,這個過程叫做"解碼"。

          通過"編"的方式壓縮文件體積,通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。

          不同的編碼和解碼方式催生出不同的文件格式,這種情況下,瀏覽器在播放視頻的時候就要有應(yīng)對不同格式的不同解碼方式,在15年以前,瀏覽器為了能夠播放不同格式的視頻,就要調(diào)用電腦中不同的播放器,這個過程的寫法非常麻煩。隨著技術(shù)不斷地整合,時至今日,在頁面中播放視頻不需要這么復雜的寫法了,但是因為每個瀏覽器都不是包打一切,因此,雖然不用指定播放器,但是也要預(yù)設(shè)不同格式的視頻來應(yīng)對不同的瀏覽器。

          因此,我們在這一部分的學習中除了講解如何向頁面添加不同格式的音視頻外還會告訴大家如何為音視頻轉(zhuǎn)換格式。

          為頁面添加音頻、視頻

          添加音頻使用<audio></audio>標簽,這個標簽被所有瀏覽器支持,是html5推薦的音頻導入標簽,但是遺憾的是在html4標準中是不被支持的或者說是非法的。

          這里給大家簡要介紹一下html5和html4的區(qū)別。

          簡單來說呢,一個html文件的第一條語句是<!DOCTYPE HTML>,它就是HTML5標準的文件。如果是html4,它的第一條聲明語句有三種寫法,像這樣

          一:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

          二:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

          三:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

          版權(quán)聲明:本文為CSDN博主「痦子」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。

          原文鏈接:https://blog.csdn.net/yh1061632045/article/details/81518141

          這讓我想到了孔乙己的"茴"字的多種寫法

          是不是很麻煩,其實html5比html4更簡單,功能更強大,而且我們一直以html5的標準進行學習,所以大家不必糾結(jié)。

          下面我們導入一個音頻試試吧。示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>音視頻導入</title>
            </head> 
            <body>
            <audio controls="controls"> 
              <source src="audio/千年的祈禱.mp3" type="audio/mp3" />
            </audio>
            </body> 
            </html>

          頁面效果如下:

          其中controls屬性就是用來顯示播放控制界面的,就是這個:(偷懶的話可以寫成"controls"就ok,不必加"="以及后面的內(nèi)容了。)

          如果以后您使用自己編寫的控制界面,就可以不添加這個屬性。

          刪掉這個屬性后就是這樣:這樣為自定義的播放控制界面留出了位置。

          <audio></audio>標簽夾著<source>標簽,一個<audio></audio>標簽中可以添加多個<source>用以支持不同的格式要求。示例代碼如下:(這段代碼來自w3school)

          <audio controls="controls"> 
            <source src="song.ogg" type="audio/ogg" /> 
            <source src="song.mp3" type="audio/mpeg" />
            Your browser does not support the audio element.<!--你的瀏覽器不支持這個音頻元素-->
          </audio>

          type屬性是告訴瀏覽器音樂文件的類型。

          不同格式的文件的生成需要我們自己去做,這就涉及到如何給一個音頻文件進行格式轉(zhuǎn)化的問題。這個問題我們明天再說,今天先學習為頁面添加音頻和視頻。

          下面我們來看一下視頻的導入方法,示例代碼如下:

          <video controls> 
            <source src="video/阿塔麗.mp4" type="video/mp4" />
          </video>

          頁面效果如下:

          我們可以通過設(shè)置height和width屬性來控制視頻的面積。實例代碼如下:

          <video controls width="850" height="500" > 
            <source src="video/阿塔麗.mp4" type="video/mp4" />
          </video>

          頁面效果如下:

          視頻畫面變小了,和視頻并排的是我們之前添加的音頻文件,由此可知,這兩個元素都是內(nèi)聯(lián)元素。

          今天的內(nèi)容結(jié)束了,明天我們繼續(xù)學習格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。

          如果您有任何疑問請給我留言,如有問題或錯誤請予以斧正!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎(chǔ)自學網(wǎng)頁制作

          HTML是什么?——零基礎(chǔ)自學網(wǎng)頁制作

          第一個HTML頁面如何寫?——零基礎(chǔ)自學網(wǎng)頁制作

          HTML頁面中head標簽有啥用?——零基礎(chǔ)自學網(wǎng)頁制作

          初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

          HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

          HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

          HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學網(wǎng)頁制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學網(wǎng)頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學網(wǎng)頁制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學網(wǎng)頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學網(wǎng)頁制作

          16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

          初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

          封閉在家學網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

          HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

          HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學網(wǎng)頁制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學網(wǎng)頁制作

          HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

          HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作


          主站蜘蛛池模板: 久久综合精品不卡一区二区| 福利在线一区二区| 亚洲av无码一区二区三区天堂 | 韩国精品福利一区二区三区 | 伊人久久大香线蕉AV一区二区 | 久久国产免费一区二区三区| 无码日韩精品一区二区免费| 骚片AV蜜桃精品一区| 精品一区二区三区免费视频| 国产在线精品观看一区| 亚洲日韩中文字幕无码一区| 人妻少妇久久中文字幕一区二区| 无人码一区二区三区视频| 亚洲国产成人久久一区WWW| 狠狠综合久久av一区二区| 亚洲Av永久无码精品一区二区| 欧洲无码一区二区三区在线观看| 国精品无码一区二区三区左线| 伦理一区二区三区| 国产午夜精品一区理论片飘花| 成人国内精品久久久久一区| 一区国严二区亚洲三区| 无码日韩精品一区二区人妻| 国产免费一区二区三区VR| 国产人妖在线观看一区二区| 国产一区二区精品在线观看| 国产色欲AV一区二区三区| 国产成人精品一区二区三在线观看| 在线免费视频一区二区| 在线观看国产一区亚洲bd| 免费在线观看一区| 久久se精品一区精品二区国产 | 亚洲一区电影在线观看| 一区二区三区无码被窝影院| 无码国产精品久久一区免费 | 久久精品无码一区二区三区| 一区二区三区日韩精品| 一本一道波多野结衣一区| 国产精品福利一区| 久久精品中文字幕一区| 国产高清不卡一区二区|