东京一本到一区二区三区,国产成年人网站,无人区乱码一区二区三区

第03章-前端核心技術(shù)-HTML5媒體

項目經(jīng)理(作者)：張明星

學(xué)習(xí)目標(biāo)

掌握HTML區(qū)塊原色和內(nèi)聯(lián)元素的特征 重點 難點
掌握HTML表單和表單元素的使用 重點
掌握HTML音視頻的使用
掌握HTML5緩存的使用

HTML 區(qū)塊內(nèi)聯(lián)

HTML的所有元素可以劃分為 區(qū)塊元素 和 內(nèi)聯(lián)元素

	內(nèi)聯(lián)元素	區(qū)塊元素
寬度	標(biāo)簽內(nèi)容的寬度	和上級元素的寬度一樣寬
高度	標(biāo)簽內(nèi)容的高度	標(biāo)簽內(nèi)容的高度
顯示	多個內(nèi)聯(lián)元素顯示在同一行	多個區(qū)塊元素換行顯示
控制	寬高不可控制	寬高可控制
代表	`<span>`、`<b>`、`<img>`、`<a>`	`<div>`、`<table>`、`<ul>`、`<li>`

最原始的區(qū)塊元素是div，最原始的內(nèi)聯(lián)元素的span

案例01：區(qū)塊元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>區(qū)塊元素</title>
    </head>
    <body>
        <div>
            <img src="image/avatar.jpg" height="40" align="left" />
            <div>
                作者：<ins>簫月</ins>
            </div>
            <div>
                發(fā)布時間：<ins>2222-03-01</ins>
            </div>
        </div>
    </body>
</html>

效果展示

案例02：內(nèi)聯(lián)元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>區(qū)塊元素</title>
    </head>
    <body>
        <div>
            <img src="image/avatar.jpg" height="40" align="center" />
            <span>
                作者：<ins>簫月</ins>
            </span>
            <span>
                發(fā)布時間：<ins>一個神奇的人</ins>
            </span>
        </div>
    </body>
</html>

效果展示

HTML 表單

HTML 表單用于收集不同類型的用戶輸入。并且提交數(shù)據(jù)

表單是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,如：
1. 文本框(input)
2. 文本域(textarea)
3. 下拉列表(select-option)
4. 單選框(radio)
5. 復(fù)選框(checkbox)等等。

HTML 表單標(biāo)簽

標(biāo)簽	描述
`<form>`	供用戶輸入的表單
`<input id="" list="">`	輸入域
`<textarea>`	文本域 (一個多行的輸入控件)
`<label for="">`	`<input>` 元素標(biāo)簽的輸入標(biāo)題
`<fieldset>`	一組相關(guān)的表單元素使用外框包含起來
`<legend>`	`<fieldset>` 元素的標(biāo)題
`<select>`	下拉選項列表
`<optgroup label="標(biāo)題">`	下拉選項列表的選項組
`<option>`	下拉選項列表中的選項
`<button>`	定義一個點擊按鈕
`<datalist id="">`	指定一個預(yù)先定義的輸入控件選項列表

<input>屬性值類型

值	描述
button	定義可點擊的按鈕（大多與 JavaScript 使用來啟動腳本）
checkbox	定義復(fù)選框。
color	定義拾色器。
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local	定義日期字段（帶有 calendar 和 time 控件）
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時、分、秒（帶有 time 控件）
email	定義用于 e-mail 地址的文本字段
file	定義輸入字段和 "瀏覽..." 按鈕，供文件上傳
hidden	定義隱藏輸入字段
image	定義圖像作為提交按鈕
number	定義帶有 spinner 控件的數(shù)字字段
password	定義密碼字段。字段中的字符會被遮蔽。
radio	定義單選按鈕。
range	定義帶有 slider 控件的數(shù)字字段。
reset	定義重置按鈕。重置按鈕會將所有表單字段重置為初始值。
search	定義用于搜索的文本字段。
submit	定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)。
tel	定義用于電話號碼的文本字段。
text	默認(rèn)。定義單行輸入字段，用戶可在其中輸入文本。默認(rèn)是 20 個字符。
url	定義用于 URL 的文本字段。

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表單</title>
    </head>
    <body>
        <table width="40%" align="center">
            <caption>
                <h4>表單</h4>
            </caption>
            <tr align="center">
                <td>
                    <form>
                        <fieldset>
                            <legend align="center">個人信息</legend>
                            <label for="name">姓名:</label>
                            <input type="text" id="name" size="30">
                            <br>
                            <label for="email">郵箱:</label>
                            <input type="email" id="email" size="30">
                        </fieldset>
                        性別
                        <input type="radio" name="sex" value="Male">男
                        <input type="radio" name="sex" value="Female" checked="checked">女
                        <br><br>
                        愛好
                        <input type="checkbox" name="vehicle[]" value="唱歌">唱歌
                        <input type="checkbox" name="vehicle[]" value="跳舞" checked="checked">跳舞
                        <br><br>
                        課程
                        <select>
                            <optgroup label="前端">
                                <option value="css">css</option>
                                <option value="js">js</option>
                                <option value="html" selected="selected">html</option>
                            </optgroup>
                            <optgroup label="后端">
                                <option value="php">php</option>
                                <option value="java">java</option>
                            </optgroup>
                        </select>
                        <br><br>
                        使用的瀏覽器
                        <input list="browsers">
                        <datalist id="browsers">
                            <option value="Internet Explorer">Internet Explorer</option>
                            <option value="Firefox">Firefox</option>
                            <option value="Chrome">Chrome</option>
                            <option value="Opera">Opera</option>
                            <option value="百度">百度</option>
                        </datalist>
                        <br><br>
                        <button type="submit">提交</button>
                    </form>
                </td>
            </tr>
        </table>
    </body>
</html>

效果展示

案例04



<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title>表格布局</title>
    </head>


    <body>
        <table border="0" cellspacing="10" width="800" border="0" align="center">
            <caption><h2 align="center">注冊</h2></caption>
            <tr>
                <td width="150"><b>用戶名:</b></td>
                <td><input type="text" name="name" class="bule" /></td>
                <td>必填</td>
            </tr>
            <tr>
                <td><b>密碼：  </b></td>
                <td><input type="password" name="password1" size="20" class="bule" /></td>
                <td>必填</td>
            </tr>
            <tr>
                <td><b>確定密碼：</b></td>
                <td><input type="password" name="password11" size="20" class="bule" /></td>
                <td>必填</td>
            </tr>
            <tr>
                <td><b>性別：  </b></td>
                <td colspan="2">
                    <input type="radio" name="gender" value="女" checked/>女
                    <input type="radio" name="gender" value="男" />男<br><br>
                </td>
            </tr>
            <tr>
                <td><b>個人愛好：</b></td>
                <td colspan="2">
                    <input type="checkbox" name="intrest" value="文學(xué)" />文學(xué)
                    <input type="checkbox" name="intrest" value="影視" />影視
                    <input type="checkbox" name="intrest" value="音樂" />音樂
                    <input type="checkbox" name="intrest" value="體育" />體育
                </td>
            </tr>
            <tr>
                <td><b>所在城市：</b></td>
                <td colspan="2">
                    <select size="1" name="province">省份
                        <option>浙江</option>
                        <option>山東</option>
                    </select>
                    <select size="1" name="city">省份
                        <option>紹興</option>
                        <option>濰坊</option>
                    </select>
                    <br><br>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <form method="post" action="">是否同意條款內(nèi)容
                        <input type="radio" name="aggree" value="aggree" /> 我同意
                        <input type="radio" name="aggree" value="disaggree" /> 我不同意<br><br>
                        <textarea name="textarea" cols="86" rows="5" wrap="hard" class="bule">協(xié)議</textarea>
                    </form>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <input type="reset" value="重置" />
                    <input type="submit" value="提交" />
                </td>
            </tr>
        </table>
    </body>


</html>

效果展示

總結(jié)

輸入框和標(biāo)題<input>和<lable>

<label for="i">用戶名：</label>
<input value="請輸入" id="i"/>

輸入框和輸入預(yù)選項

<input list="li"/>


<datalist id="li">
    <option value="貴州">貴州省</option>
</datalist>

下拉選擇框

<select>
    <optgroup label="貴州的">
        <option value="貴州">貴州省</option>
    </optgroup>
</select>

單選框，name屬性必須有，進行分組，否則不能單選

<input type="radio" name="a"/>選項1
<input type="radio" name="a"/>選項2
<input type="radio" name="a"/>選項3
<input type="radio" name="a"/>選項4

復(fù)選框，name屬性也必須有，進行分組，否則提交的數(shù)據(jù)不是同一組

<input type="checkbox" name="b"/>選項1
<input type="checkbox" name="b"/>選項2
<input type="checkbox" name="b"/>選項3
<input type="checkbox" name="b"/>選項4

HTML 音視頻

標(biāo)簽	說明
`<embed>`	音視頻，支持單一視頻個數(shù)
`<object>`	音視頻，支持單一視頻個數(shù)
`<audio>`	音頻，支持多種視頻個數(shù)
`<video>`	視頻，支持多種視頻個數(shù)

`<embed>` 元素

<embed>標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個 HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。

語法：

<embed height="50" width="100" src="horse.mp3">

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>音視頻播放</title>
    </head>
    <body>
        <embed height="70" align="center" src="source/SAVE.mp3" />
        <br>
        <br>
        <embed src="source/yun.mp4" />
    </body>
</html>

效果展示

`<object>` 元素

<object>標(biāo)簽也可以定義外部（非 HTML）內(nèi)容的容器。

<object> 標(biāo)簽用于包含對象，比如音頻、視頻、Java applets、ActiveX、PDF 以及 Flash。

object的初衷是取代 img 和applet 元素。不過由于漏洞以及缺乏瀏覽器支持，這一點并未實現(xiàn)。

不幸的是，主流瀏覽器都使用不同的代碼來加載相同的對象類型。現(xiàn)在常用于插件

如：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
            <param name="movie" value="myvideo.swf" />
            <param name="flashvars" value="autostart=true&file=myvideo.swf" />
        </object>
    </body>
</html>

語法：

<object width="550" height="400">
    <param name="movie" value="yun.mp4">
</object>
<object data="yun.mp4"></object>
<object type="application/pdf" data="xxx.pdf"></object>

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>音視頻播放</title>
    </head>
    <body>
        <object height="70"  data="source/SAVE.mp3"></object>
        <br>
        <br>
        <object data="source/yun.mp4"></object>
    </body>
</html>

`<audio>`和`<video>`

<audio> 播放音頻無畫面，<video>播放音視頻，有畫面。

語法：

<audio controls>
    ?<source src="horse.mp3" type="audio/mpeg">
    ?<source src="horse.ogg" type="audio/ogg">
    ?瀏覽器不支持
</audio>


<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 video 標(biāo)簽。
</video>

案例07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>音視頻播放</title>
    </head>
    <body>
        <video width="320" height="240" controls>
            <source src="source/yun.mp4" type="video/mp4">
            <source src="source/yun.mp4" type="video/ogg">
            <source src="source/yun.mp4" type="video/webm">
        </video>
    </body>
</html>

效果展示

HTML5 語義元素

HTML5 添加了很多語義元素如下所示：

標(biāo)簽	描述
`<article>`	定義頁面獨立的內(nèi)容區(qū)域。
`<aside>`	定義頁面的側(cè)邊欄內(nèi)容。
`<bdi>`	允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。
`<command>`	定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕
`<details>`	用于描述文檔或文檔某個部分的細節(jié)
`<dialog>`	定義對話框，比如提示框
`<summary>`	標(biāo)簽包含 details 元素的標(biāo)題
`<figure>`	規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
`<figcaption>`	定義 `<figure>` 元素的標(biāo)題
`<footer>`	定義 section 或 document 的頁腳。
`<header>`	定義了文檔的頭部區(qū)域
`<mark>`	定義帶有記號的文本。
`<meter>`	定義度量衡。僅用于已知最大和最小值的度量。
`<nav>`	定義導(dǎo)航鏈接的部分。
`<progress>`	定義任何類型的任務(wù)的進度。
`<ruby>`	定義 ruby 注釋（中文注音或字符）。
`<rt>`	定義字符（中文注音或字符）的解釋或發(fā)音。
`<rp>`	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
`<section>`	定義文檔中的節(jié)（section、區(qū)段）。
`<time>`	定義日期或時間。
`<wbr>`	規(guī)定在文本中的何處適合添加換行符。

HTML5 已移除元素

以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

參考資料

HTML 參考手冊

按字母順序排列

New : HTML5新標(biāo)簽

標(biāo)簽	描述
`<!DOCTYPE>`	定義文檔類型
`<a>`	定義超文本鏈接
`<abbr>`	定義縮寫
`<acronym>`	定義只取首字母的縮寫，不支持HTML5
`<address>`	定義文檔作者或擁有者的聯(lián)系信息
`<applet>`	HTML5中不贊成使用。定義嵌入的 applet。
`<area>`	定義圖像映射內(nèi)部的區(qū)域
`<article>`*New*	定義一個文章區(qū)域
`<aside>`*New*	定義頁面的側(cè)邊欄內(nèi)容
`<audio>`*New*	定義音頻內(nèi)容
`<b>`	定義文本粗體
`<base>`	定義頁面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。
`<basefont>`	HTML5不支持，不贊成使用。定義頁面中文本的默認(rèn)字體、顏色或尺寸。
`<bdi>`*New*	允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。
`<bdo>`	定義文字方向
`<big>`	定義大號文本，HTML5不支持
`<blockquote>`	定義長的引用
`<body>`	定義文檔的主體
	定義換行
`<button>`	定義一個點擊按鈕
`<canvas>`*New*	定義圖形，比如圖表和其他圖像,標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形
`<caption>`	定義表格標(biāo)題
`<center>`	HTML5不支持，不贊成使用。定義居中文本。
`<cite>`	定義引用(citation)
`<code>`	定義計算機代碼文本
`<col>`	定義表格中一個或多個列的屬性值
`<colgroup>`	定義表格中供格式化的列組
`<command>`*New*	定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕
`<datalist>`*New*	定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
`<dd>`	定義定義列表中項目的描述
`<del>`	定義被刪除文本
`<details>`*New*	用于描述文檔或文檔某個部分的細節(jié)
`<dfn>`	定義定義項目
`<dialog>`*New*	定義對話框，比如提示框
`<dir>`	HTML5不支持，不贊成使用。定義目錄列表。
`<div>`	定義文檔中的節(jié)
`<dl>`	定義列表詳情
`<dt>`	定義列表中的項目
`<em>`	定義強調(diào)文本
`<embed>`*New*	定義嵌入的內(nèi)容，比如插件。
`<fieldset>`	定義圍繞表單中元素的邊框
`<figcaption>`*New*	定義`<figure>` 元素的標(biāo)題
`<figure>`*New*	規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
`<font>`	HTML5不支持，不贊成使用。定義文字的字體、尺寸和顏色。
`<footer>`*New*	定義 section 或 document 的頁腳。
`<form>`	定義了HTML文檔的表單
`<frame>`	定義框架集的窗口或框架
`<frameset>`	定義框架集
`<h1>` to `<h6>`	定義 HTML 標(biāo)題
`<head>`	定義關(guān)于文檔的信息
`<header>`*New*	定義了文檔的頭部區(qū)域
`<hr>`	定義水平線
`<html>`	定義 HTML 文檔
`<i>`	定義斜體字
`<iframe>`	定義內(nèi)聯(lián)框架
`<img>`	定義圖像
`<input>`	定義輸入控件
`<ins>`	定義被插入文本
`<kbd>`	定義鍵盤文本
`<keygen>`*New*	規(guī)定用于表單的密鑰對生成器字段。
`<label>`	定義 input 元素的標(biāo)注
`<legend>`	定義 fieldset 元素的標(biāo)題。
`<li>`	定義列表的項目
`<link>`	定義文檔與外部資源的關(guān)系
`<main>`	定義文檔的主體部分。
`<map>`	定義圖像映射
`<mark>`*New*	定義帶有記號的文本。請在需要突出顯示文本時使用 `<em>` 標(biāo)簽。
`<menu>`	不贊成使用。定義菜單列表。
`<meta>`	定義關(guān)于 HTML 文檔的元信息。
`<meter>`*New*	定義度量衡。僅用于已知最大和最小值的度量。
`<nav>`*New*	定義導(dǎo)航鏈接的部分
`<noframes>`	定義針對不支持框架的用戶的替代內(nèi)容。HTML5不支持
`<noscript>`	定義針對不支持客戶端腳本的用戶的替代內(nèi)容。
`<object>`	定義內(nèi)嵌對象
`<ol>`	定義有序列表。
`<optgroup>`	定義選擇列表中相關(guān)選項的組合。
`<option>`	定義選擇列表中的選項。
`<output>`*New*	定義不同類型的輸出，比如腳本的輸出。
`<p>`	定義段落。
`<param>`	定義對象的參數(shù)。
`<pre>`	定義預(yù)格式文本。
`<progress>`*New*	定義運行中的進度（進程）。
`<q>`	定義短的引用。
`<rp>`*New*	`<rp>` 標(biāo)簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
`<rt>`*New*	`<rt>` 標(biāo)簽定義字符（中文注音或字符）的解釋或發(fā)音。
`<ruby>`*New*	`<ruby>` 標(biāo)簽定義 ruby 注釋（中文注音或字符）。
`<s>`	不贊成使用。定義加刪除線的文本。
`<samp>`	定義計算機代碼樣本。
`<script>`	定義客戶端腳本。
`<section>`*New*	`<section>` 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
`<select>`	定義選擇列表（下拉列表）。
`<small>`	定義小號文本。
`<source>`*New*	`<source>` 標(biāo)簽為媒介元素（比如 `<video>` 和 `<audio>`）定義媒介資源。
`<span>`	定義文檔中的節(jié)。
`<strike>`	HTML5不支持，不贊成使用。定義加刪除線文本。
`<strong>`	定義強調(diào)文本。
`<style>`	定義文檔的樣式信息。
`<sub>`	定義下標(biāo)文本。
`<summary>`*New*	`<summary>` 標(biāo)簽包含 details 元素的標(biāo)題，"details" 元素用于描述有關(guān)文檔或文檔片段的詳細信息。
`<sup>`	定義上標(biāo)文本。
`<table>`	定義表格。
`<tbody>`	定義表格中的主體內(nèi)容。
`<td>`	定義表格中的單元。
`<textarea>`	定義多行的文本輸入控件。
`<tfoot>`	定義表格中的表注內(nèi)容（腳注）。
`<th>`	定義表格中的表頭單元格。
`<thead>`	定義表格中的表頭內(nèi)容。
`<time>`*New*	定義日期或時間，或者兩者。
`<title>`	定義文檔的標(biāo)題。
`<tr>`	定義表格中的行。
`<track>`*New*	`<track>` 標(biāo)簽為諸如 video 元素之類的媒介規(guī)定外部文本軌道。
`<tt>`	定義打字機文本。
`<u>`	不贊成使用。定義下劃線文本。
`<ul>`	定義無序列表。
`<var>`	定義文本的變量部分。
`<video>`*New*	`<video>` 標(biāo)簽定義視頻，比如電影片段或其他視頻流。
`<wbr>`*New*	規(guī)定在文本中的何處適合添加換行符。

MEMI 類型參照表

擴展名	類型/子類型
	application/octet-stream
323	text/h323
acx	application/internet-property-stream
ai	application/postscript
aif	audio/x-aiff
aifc	audio/x-aiff
aiff	audio/x-aiff
asf	video/x-ms-asf
asr	video/x-ms-asf
asx	video/x-ms-asf
au	audio/basic
avi	video/x-msvideo
axs	application/olescript
bas	text/plain
bcpio	application/x-bcpio
bin	application/octet-stream
bmp	image/bmp
c	text/plain
cat	application/vnd.ms-pkiseccat
cdf	application/x-cdf
cer	application/x-x509-ca-cert
class	application/octet-stream
clp	application/x-msclip
cmx	image/x-cmx
cod	image/cis-cod
cpio	application/x-cpio
crd	application/x-mscardfile
crl	application/pkix-crl
crt	application/x-x509-ca-cert
csh	application/x-csh
css	text/css
dcr	application/x-director
der	application/x-x509-ca-cert
dir	application/x-director
dll	application/x-msdownload
dms	application/octet-stream
doc	application/msword
dot	application/msword
dvi	application/x-dvi
dxr	application/x-director
eps	application/postscript
etx	text/x-setext
evy	application/envoy
exe	application/octet-stream
fif	application/fractals
flr	x-world/x-vrml
gif	image/gif
gtar	application/x-gtar
gz	application/x-gzip
h	text/plain
hdf	application/x-hdf
hlp	application/winhlp
hqx	application/mac-binhex40
hta	application/hta
htc	text/x-component
htm	text/html
html	text/html
htt	text/webviewhtml
ico	image/x-icon
ief	image/ief
iii	application/x-iphone
ins	application/x-internet-signup
isp	application/x-internet-signup
jfif	image/pipeg
jpe	image/jpeg
jpeg	image/jpeg
jpg	image/jpeg
js	application/x-javascript
latex	application/x-latex
lha	application/octet-stream
lsf	video/x-la-asf
lsx	video/x-la-asf
lzh	application/octet-stream
m13	application/x-msmediaview
m14	application/x-msmediaview
m3u	audio/x-mpegurl
man	application/x-troff-man
mdb	application/x-msaccess
me	application/x-troff-me
mht	message/rfc822
mhtml	message/rfc822
mid	audio/mid
mny	application/x-msmoney
mov	video/quicktime
movie	video/x-sgi-movie
mp2	video/mpeg
mp3	audio/mpeg
mpa	video/mpeg
mpe	video/mpeg
mpeg	video/mpeg
mpg	video/mpeg
mpp	application/vnd.ms-project
mpv2	video/mpeg
ms	application/x-troff-ms
mvb	application/x-msmediaview
nws	message/rfc822
oda	application/oda
p10	application/pkcs10
p12	application/x-pkcs12
p7b	application/x-pkcs7-certificates
p7c	application/x-pkcs7-mime
p7m	application/x-pkcs7-mime
p7r	application/x-pkcs7-certreqresp
p7s	application/x-pkcs7-signature
pbm	image/x-portable-bitmap
pdf	application/pdf
pfx	application/x-pkcs12
pgm	image/x-portable-graymap
pko	application/ynd.ms-pkipko
pma	application/x-perfmon
pmc	application/x-perfmon
pml	application/x-perfmon
pmr	application/x-perfmon
pmw	application/x-perfmon
pnm	image/x-portable-anymap
pot,	application/vnd.ms-powerpoint
ppm	image/x-portable-pixmap
pps	application/vnd.ms-powerpoint
ppt	application/vnd.ms-powerpoint
prf	application/pics-rules
ps	application/postscript
pub	application/x-mspublisher
qt	video/quicktime
ra	audio/x-pn-realaudio
ram	audio/x-pn-realaudio
ras	image/x-cmu-raster
rgb	image/x-rgb
rmi	audio/mid
roff	application/x-troff
rtf	application/rtf
rtx	text/richtext
scd	application/x-msschedule
sct	text/scriptlet
setpay	application/set-payment-initiation
setreg	application/set-registration-initiation
sh	application/x-sh
shar	application/x-shar
sit	application/x-stuffit
snd	audio/basic
spc	application/x-pkcs7-certificates
spl	application/futuresplash
src	application/x-wais-source
sst	application/vnd.ms-pkicertstore
stl	application/vnd.ms-pkistl
stm	text/html
svg	image/svg+xml
sv4cpio	application/x-sv4cpio
sv4crc	application/x-sv4crc
swf	application/x-shockwave-flash
t	application/x-troff
tar	application/x-tar
tcl	application/x-tcl
tex	application/x-tex
texi	application/x-texinfo
texinfo	application/x-texinfo
tgz	application/x-compressed
tif	image/tiff
tiff	image/tiff
tr	application/x-troff
trm	application/x-msterminal
tsv	text/tab-separated-values
txt	text/plain
uls	text/iuls
ustar	application/x-ustar
vcf	text/x-vcard
vrml	x-world/x-vrml
wav	audio/x-wav
wcm	application/vnd.ms-works
wdb	application/vnd.ms-works
wks	application/vnd.ms-works
wmf	application/x-msmetafile
wps	application/vnd.ms-works
wri	application/x-mswrite
wrl	x-world/x-vrml
wrz	x-world/x-vrml
xaf	x-world/x-vrml
xbm	image/x-xbitmap
xla	application/vnd.ms-excel
xlc	application/vnd.ms-excel
xlm	application/vnd.ms-excel
xls	application/vnd.ms-excel
xlt	application/vnd.ms-excel
xlw	application/vnd.ms-excel
xof	x-world/x-vrml
xpm	image/x-xpixmap
xwd	image/x-xwindowdump
z	application/x-compress
zip	application/zip

第03章-HTML5媒體

第03章-前端核心技術(shù)-HTML5媒體

項目經(jīng)理(作者)：張明星

學(xué)習(xí)目標(biāo)

HTML 區(qū)塊內(nèi)聯(lián)

案例01：區(qū)塊元素

案例02：內(nèi)聯(lián)元素

HTML 表單

案例03

案例04

總結(jié)

HTML 音視頻

<embed> 元素

案例05

<object> 元素

案例06

<audio>和<video>

案例07

HTML5 語義元素

HTML5 已移除元素

參考資料

HTML 參考手冊

MEMI 類型參照表

推薦文章

推薦教程

推薦課程

`<embed>` 元素

`<object>` 元素

`<audio>`和`<video>`