為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

頻、視頻的格式

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

提取碼：td80

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

學習如何在頁面中添加音頻、視頻之前應該了解一點基礎知識。

我們應該都有在互聯網上下載電影、視頻、音樂的經歷，大家會注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據不完全統計，常見的各種視頻格式有十幾種之多。

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

為什么存儲相同的內容可以有這么多不同的格式呢？

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

那什么是編碼呢？

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

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

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

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

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

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

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

通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內容成了處理大規模數據的通用手法。

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

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

為頁面添加音頻、視頻

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

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

簡單來說呢，一個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">

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

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

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

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

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

頁面效果如下：

其中controls屬性就是用來顯示播放控制界面的，就是這個：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內容了。）

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

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

<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屬性是告訴瀏覽器音樂文件的類型。

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

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

<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>

頁面效果如下：

視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個元素都是內聯元素。

今天的內容結束了，明天我們繼續學習格式轉換和為不同瀏覽器預設不同音視頻格式的方法。

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

有下拉列表的表單

題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。

開始學習吧！

前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。

帶有下拉列表的表單

我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：

寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：

<select><option></option></select>

這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！

下面我們為多選表單添加名稱，示例代碼如下：

請選擇省份<select><option></option></select>

下面我們添加不同選項，示例代碼如下：

請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>

為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。

頁面效果如下：

這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。

如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。

示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

頁面效果如圖：

多行文字輸入表單

我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。

而是多行輸入框，如圖：

使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：

<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。

下面我們為這個多行輸入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。

第二，我們限制一下字數，使用maxlength（最大長度）屬性。

第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。

下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性?。?/p>

<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

頁面效果如圖：

如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！

數據集表單

數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）

這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。

第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。

第三就是我們之前學到的那些標簽了。

示例代碼如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我們使用這段代碼把form2打包一下吧。示例代碼如下：

<form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標題-->興趣愛好：<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>讀書
  <input type = "checkbox" name = "hobby" value = "film"/>電影
  <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
  <input type = "checkbox" name = "hobby" value = "music"/>音樂
  <br>
  最高學歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結尾-->
  <input type = "image" src = "img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

頁面效果如下：

今天的內容結束了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

家好，我是尋找安多芬。

眾所周知，Flex 彈性盒子布局已經夠流弊了，CSS Grid 網格布局比 Flex 彈性盒子布局還要強大，下面列舉一些 Flex 不具備的優點：
1. 可以指定單元格在網格容器里的具體位置。
2. 可以使用 gap 屬性設置單元格間指定的間距。Flex 以前是沒有的
3. 可以跨行跨列設置單元格。
4. 可以互相重疊，通過設置 z-index 屬性控制單元格層級。欲與絕對定位試比高
5. 可以隨意擺放某一個單元格在容器中的位置，不按順序來也行。

Grid 布局唯一缺點：就是生出來比較晚，比 Flex 兼容性差點，需要更高版本的瀏覽器支持。

詳細教程我在這里就不贅述了，可以閱讀CSS Grid 網格布局教程 - 阮一峰的網絡日志里面有非常詳細的指南和示例。

關于 CSS 排版布局，我有如下建議：

如果你還在使用傳統布局（Float，Position），建議你開始嘗試 Flex 布局。
如果你已經用過 Flex 布局，建議你開始使用 Grid 布局。
還有一種叫做多列布局，也可以了解下，擴展下知識廣度。
總之，推薦優先級：Grid > Flex > Float & Position。

以前在 Flex 布局中是很難設置 item 間距的，只能夠通過 justify-content 來設置，但是也只能模糊設置，并不能指定具體值，如果要指定具體值還是得用 margin。

justify-content: space-around | space-between | space-evenly;

現在最新的 CSS 規范中，gap 屬性也可以用在 Flex 布局里邊了。但是對舊版瀏覽器兼容比 Grid 還不夠友好。

兼容性

結語

上面是 gap 在 Flex 和 Grid 布局中的兼容性，大家可以根據自己的需求，自行確定要使用哪種布局方式，但我的建議是開始在項目中嘗試新技術。

在線咨詢

上一篇：前端基礎入門（HTML）
下一篇：html5聊天實例｜h5+jquery仿微信界面聊天｜朋友圈模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

HTML完整學習目錄

有下拉列表的表單

HTML完整學習目錄

關于 CSS 排版布局，我有如下建議：

兼容性

結語

您的項目需求

為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作