整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頻、視頻的格式
開始學習之前，我們要下載些素材用來測試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
其中包括兩個視頻一個音頻和一個安裝程序。
學習如何在頁面中添加音頻、視頻之前應該了解一點基礎知識。
我們應該都有在互聯(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ù)碼進行一個特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無損壓縮的基礎上剔除掉人眼睛識別不到的冗余信息。具體的壓縮過程涉及到很多數(shù)學知識，這里大家簡單了解一下即可。
壓縮后的視頻或音頻文件最終通過播放器對該文件的壓縮算法進行逆向運算后，還原成計算機可以解讀的畫面和聲音再呈現(xiàn)給觀眾，這個過程叫做"解碼"。
通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。
不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時候就要有應對不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調(diào)用電腦中不同的播放器，這個過程的寫法非常麻煩。隨著技術(shù)不斷地整合，時至今日，在頁面中播放視頻不需要這么復雜的寫法了，但是因為每個瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預設不同格式的視頻來應對不同的瀏覽器。
因此，我們在這一部分的學習中除了講解如何向頁面添加不同格式的音視頻外還會告訴大家如何為音視頻轉(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>頁面效果如下:
我們可以通過設置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)換和為不同瀏覽器預設不同音視頻格式的方法。
如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！
HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作
HTML是什么？——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作
頻地址：
HTML網(wǎng)頁設計零基礎入門教程（一），兩分鐘學會設計第一個網(wǎng)頁。
文案：
大家好，我是老K。一個碼齡超過10年的程序員。從今天起，我會給大家介紹，Web網(wǎng)站開發(fā)的最基本語言：HTML。本期視頻給大家介紹怎么編寫第一個網(wǎng)頁。什么是HTML呢？HTML就是超文本標記語言，用來標記通過互聯(lián)網(wǎng)傳輸?shù)木W(wǎng)頁的格式。用HTML標記的網(wǎng)頁是靜態(tài)網(wǎng)頁，后綴名一般是.html或.htm。靜態(tài)網(wǎng)頁制作完成以后，其內(nèi)容不會變化。如果要修改內(nèi)容，必須修改源文件。
HTML用各種元素組織文檔，用一對尖括號標記元素的開始和結(jié)束。兩個尖括號里面的表示元素的內(nèi)容。例如：<title>人工智能</title>，表示網(wǎng)頁的標題是，人工智能。所有的,web,設計語言都以HTML為基礎。編寫HTML，很簡單。使用windows自帶的，記事本，就可以編寫。首先，創(chuàng)建一個文本文檔。用記事本打開文檔，輸入HTML代碼。我們先來看一下效果，稍后我會詳細介紹源文件的內(nèi)容。保存以后，關(guān)閉記事本。重命名文本文件，把后綴名改為html。用瀏覽器打開網(wǎng)頁，就看到效果了。
我們來看源文件。
第一個元素，HTML,是頂級元素。所有的元素都包含在它里面。
第二個元素，head，表示文檔的頭部信息。
第三個元素，title，是head的子元素，表示網(wǎng)頁的標題.
第四個元素，body，是網(wǎng)頁的主體部分。
body，元素的內(nèi)容是一句文本：世界，你好。
好了，這就是本期視頻的內(nèi)容。謝謝觀看！再見！
源文件：
<html>
<head>
<title>This is the fisrt page</title>
</head>
<body>
Hello, world!
</body>
</html>
么是HTML / HTM文件？他們相差一個字母有什么區(qū)別嗎，如何查看或編輯源代碼以及如何轉(zhuǎn)換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：
HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網(wǎng)頁文件類型。
由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現(xiàn)在正在閱讀的內(nèi)容）以及對其他外部文件的文本引用（例如本文中的配圖）。
HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。
HTM 與 HTML 沒有本質(zhì)意義的區(qū)別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統(tǒng) (win32) 不能識別四位文件名，所以某些網(wǎng)頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網(wǎng)頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統(tǒng)中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。
任何 Web 瀏覽器，例如 Edge，F(xiàn)irefox，Chrome，Opera，IE，360 安全瀏覽器等，都可以打開并正確顯示 HTM 和 HTML 文件。換句話說，在瀏覽器中打開這些文件并“解碼（decode）” HTM 或 HTML 文件使其能正確顯示。
現(xiàn)在有很多簡化編輯和創(chuàng)建 HTM / HTML 文件的工具。一些著名的免費 HTML 編輯器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一個流行的具有許多高級功能的 HTM / HTML 編輯器是 Adobe Dreamweaver ，不過它是收費的。
雖然 Windows 系統(tǒng)自帶的記事本等簡單的文本編輯器的功能不如專用的 HTM 編輯器那么豐富，但是對 HTM 或 HTML 文件進行簡單編輯修改還是可以的。不過，W3Cschool還是建議大家使用專用的編輯器，如 WebStorm、VS Code 等，它具更多專業(yè)功能。
這是一個非常簡單的 HTML 頁面以文本形式顯示的示例：
源碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 編程獅(w3cschool.cn)</title>
</head>
<body>
<h1>什么是HTM或HTML文件？</h1>
<p>HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網(wǎng)頁文件類型。</p>
<p>由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現(xiàn)在正在閱讀的內(nèi)容）以及對其他外部文件的文本*引用*（例如本文中的配圖）。</p>
<p>HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。</p>
</body>
</html>當 Web 瀏覽器呈現(xiàn)信息時，HTML 文件的源代碼被“轉(zhuǎn)換”為真實的網(wǎng)頁（盡管源代碼已很精簡了）。
HTM 文件以特定的語法（規(guī)則）構(gòu)成，以使其中的代碼和文本在瀏覽器中打開時能夠正確顯示。因此，將 HTM / HTML 文件轉(zhuǎn)換為另一種格式可能會丟失頁面上的所有功能。
如果你想要做的是將一個 HTM / HTML 文件轉(zhuǎn)換為方便離線查看的文件，這時圖片或 PDF 格式會方便很多。
在 Chrome 中，鼠標右鍵單擊網(wǎng)頁，出現(xiàn)的選項菜單中進入 “打印(P)...”(快捷鍵：CTRL + P) ，在打印選項中選擇另存為 PDF，以將窗口中的頁面轉(zhuǎn)換為 PDF 文件。Chrome 瀏覽器的擴展功能也稱為“全屏截屏”，可將 Chrome 瀏覽器中所有打開的 HTM / HTML 文件轉(zhuǎn)換為 PNG 文件。
其他瀏覽器具有類似的功能，例如 Firefox 的 “另存為 PDF” 加載項。
您也可以使用專門用于 HTM / HTML 進行圖像文件轉(zhuǎn)換的網(wǎng)站，例如iWeb2Shot 或Web-capture 。
一個免費的文件轉(zhuǎn)換器可以用來轉(zhuǎn)換并保存 HTM / HTML 文件到您的計算機。如 FileZigZag 是一個免費的文檔轉(zhuǎn)換器網(wǎng)站，可將 HTM 轉(zhuǎn)換為RTF，EPS，CSV，PDF 和許多其他格式。
HTM / HTML 文件不能轉(zhuǎn)換為文本文件格式以外的任何格式。例如，HTML 文件永遠不能轉(zhuǎn)換為 MP3 音頻文件。
HTML / HTM 文件應該很容易打開，因為它們只是任何 Web 瀏覽器都可以查看的文本文件。如果您的文件沒有從上面建議的任何程序打開，則很有可能正在打開的這個文件并非超文本標記語言文件。
某些文件格式使用的文件擴展名與 HTML / HTM 非常相似，但實際上并非相同。一個主要的示例是用于壓縮 HTML 電子書文件的 HTMLZ 文件擴展名。有 HTML 文件在內(nèi)的 HTMLZ 文件，但整個包的格式為 ZIP，不會在 Web 瀏覽器或文本編輯器打開。
在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式實際上是存檔，因此您可以使用 7-Zip 之類的文件解壓縮器將其打開，然后您可以使用網(wǎng)絡瀏覽器或上述任何其他 HTML 查看器/編輯器打開任何單獨的 HTML 文件。
TMLANGUAGE 是另一個可能與 HTML / HTM 文件混淆的文件擴展名。這些實際上是TextMate 用于 macOS 的 TextMate 語言語法文件。
以上就是編程獅W3Cschool為你整理的關(guān)于《什么是HTM或HTML文件？如何打開、編輯和轉(zhuǎn)換HTM和HTML文件？》的全部內(nèi)容，現(xiàn)希望可以幫到你~
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
