前端成神之路-HTML

學習目标:

了解常用浏覽器
掌握WEB标準
了解标簽語義化
掌握常用的排版标簽
掌握常用的文本格式化圖像連結等标簽
掌握三種清單标簽
掌握表格标簽
掌握表格标簽
掌握表單标簽
掌握H5新增表單和表單屬性

typora-copy-images-to: media

認識網頁

網頁主要由文字、圖像和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視訊以及Flash等。

思考：  網頁是如何形成的呢?

常見浏覽器介紹

浏覽器是網頁運作的平台，常用的浏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大浏覽器。

檢視浏覽器占有的市場佔有率（知曉）

檢視網站： http://tongji.baidu.com/data/browser

浏覽器核心（了解）

浏覽器核心又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它負責取得網頁的内容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或列印機。浏覽器的核心的不同對于網頁的文法解釋會有不同，是以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實作網頁的動态效果。

最開始渲染引擎和 JS 引擎并沒有區分的很明确，後來 JS 引擎越來越獨立，核心就傾向于隻指渲染引擎。有一個網頁标準計劃小組制作了一個 ACID 來測試引擎的相容性和性能。核心的種類很多，如加上沒什麼人使用的非商業的免費核心，可能會有10多種，但是常見的浏覽器核心可以分這四種：Trident、Gecko、Blink、Webkit。

（1）Trident(IE核心)

國内很多的雙核浏覽器的其中一核便是 Trident，美其名曰 “相容模式”。

代表： IE、傲遊、世界之窗浏覽器、Avant、騰訊TT、獵豹安全浏覽器、360極速浏覽器、百度浏覽器等。

Window10 釋出後，IE 将其内置浏覽器命名為 Edge，Edge 最顯著的特點就是新核心 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 核心)： Mozilla FireFox(火狐浏覽器) 采用該核心，Gecko 的特點是代碼完全公開，是以，其可開發程度很高，全世界的程式員都可以為其編寫代碼，增加功能。可惜這幾年已經沒落了，比如打開速度慢、更新頻繁、豬一樣的隊友flash、神一樣的對手chrome。

（3） webkit(Safari)

Safari 是蘋果公司開發的浏覽器，所用浏覽器核心的名稱是大名鼎鼎的 WebKit。

現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了），蘋果感覺像被别人搶了媳婦，都哭暈再廁所裡面了。

代表浏覽器：傲遊浏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機浏覽器、Android 預設浏覽器，

（4） Chromium/Bink(chrome)

在 Chromium 項目中研發 Blink 渲染引擎（即浏覽器核心），内置于 Chrome 浏覽器之中。Blink 其實是 WebKit 的分支。

大部分國産浏覽器最新版都采用Blink核心。

（5） Presto(Opera)

Presto 是挪威産浏覽器 opera 的 “前任” 核心，為何說是 “前任”，因為最新的 opera 浏覽器早已将之抛棄進而投入到了谷歌懷抱了。

了解一點：

移動端的浏覽器核心主要說的是系統内置浏覽器的核心。

目前移動裝置浏覽器上常用的核心有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系統浏覽器核心是 WebKit，Android4.4 系統浏覽器切換到了Chromium，核心是 Webkit 的分支 Blink，Windows Phone 8 系統浏覽器核心是 Trident。

Web标準（重點）

通過以上浏覽器的核心不同，我們知道他們工作原理、解析肯定不同，顯示就會有差别。

問：  哪個語言再全國基本都可以聽得懂？

Web 标準的好處

1、讓Web的發展前景更廣闊

2、内容能被更廣泛的裝置通路

3、更容易被搜尋引擎搜尋

4、降低網站流量費用

5、使網站更易于維護

6、提高頁面浏覽速度

Web 标準構成

Web标準不是某一個标準，而是由W3C和其他标準化組織制定的一系列标準的集合。主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

結構标準：結構用于對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。
樣式标準：表現用于設定網頁元素的版式、顔色、大小等外觀樣式，主要指的是CSS。
行為标準：行為是指網頁模型的定義及互動的編寫，主要包括DOM和ECMAScript兩個部分

理想狀态我們的源碼： .HTML .css .js

專業的人，寫專業的代碼

直覺感受：

總結WEB标準：

結構标準：

決定你是否有個好天然身體

樣式标準：

決定你是否打扮的美麗外觀

行為标準：

決定你是否有吸引人的行為

HTML 初識

一般先學習HTML+CSS，這裡我們先定一個小目标，先學HTML,後學習CSS。

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本标簽語言”，主要是通過HTML标簽對網頁中的文本、圖檔、聲音等内容進行描述。

<strong> 我是加粗的字型 </strong>

注意：體會文本标簽語言幾個詞語

HTML骨架格式

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言文法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

課堂練習1：書寫我們的第一個HTML 頁面！

建立一個demo 的 TXT 檔案。
裡面寫入剛才的HTML 骨架。
把字尾名改為 .HTML。
右擊–谷歌浏覽器打開。

1 HTML标簽：

作用所有HTML中标簽的一個根節點。

2 head标簽：

作用：用于存放：

title,meta,base,style,script,link

注意在head标簽中我們必須要設定的标簽是title

3.title标簽：

作用：讓頁面擁有一個屬于自己的标題。

4.body标簽：

作用：頁面在的主體部分，用于存放所有的HTML标簽：

p,h,a,b,u,i,s,em,del,ins,strong,img

HTML标簽分類

在HTML頁面中，帶有“< >”符号的元素被稱為HTML标簽，如上面提到的 <HTML>、<head>、<body>都是HTML标簽。所謂标簽就是放在“< >” 标簽符中表示某個功能的編碼指令，也稱為HTML标簽或 HTML元素

1.雙标簽

<标簽名> 内容 </标簽名>

該文法中“<标簽名>”表示該标簽的作用開始，一般稱為“開始标簽（start tag）”，“</标簽名>” 表示該标簽的作用結束，一般稱為“結束标簽（end tag）”。和開始标簽相比，結束标簽隻是在前面加了一個關閉符“/”。

比如 <body>我是文字 </body>

2.單标簽

<标簽名 />

單标簽也稱空标簽，是指用一個标簽符号即可完整地描述某個功能的标簽。

比如 <br />

HTML标簽關系

标簽的互相關系就分為兩種：

1.嵌套關系

<head>  <title> </title>  </head>

2.并列關系

<head></head>
<body></body>

測試題：

請問下列哪個标簽是錯誤的？

A  <head></head><body></body>

B  <strong><div></div></strong>

C  <head><title></head></title>

D  <body><div></div></body>

倡議：如果兩個标簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位。如果是并列關系，最好上下對齊。

開發工具

這些工具你認識幾個？

普通青年 Dreamweaver

文藝青年 sublime

高手和傻子用記事本

其實。。。。

sublime 一些常用快捷鍵點我檢視

再頁面中輸入 以下2個單詞
1.  html: 5   
2.  !
   在sublime裡面然後按下tab鍵盤即可生成HTML骨架

文檔類型

<!DOCTYPE html>

這句話就是告訴我們使用哪個html版本？我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴使用者和浏覽器我們使用的版本号。

标簽位于文檔的最前面，用于向浏覽器說明目前文檔使用哪種 HTML 或 XHTML 标準規範，必需在開頭處使用标簽為所有的XHTML文檔指定XHTML版本和類型，隻有這樣浏覽器才能按指定的文檔類型進行解析。

注意：一些老網站可能用的還是老版本的文檔類型比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文檔類型相容很好(向下相容的原則)，是以大家放心的使用HTML5的文檔類型就好了。

字元集

utf-8是目前最常用的字元集編碼方式，常用的字元集編碼方式還有gbk和gb2312。

gb2312 簡單中文包括6763個漢字

BIG5 繁體中文港澳台等用

GBK包含全部中文字元是GB2312的擴充，加入對繁體字的支援，相容GB2312

UTF-8則包含全世界所有國家需要用到的字元

記住一點，以後我們統統使用UTF-8 字元集, 這樣就避免出現字元集不統一而引起亂碼的情況了。

HTML标簽的語義化

白話：所謂标簽語義化，就是名額簽的含義。

為什麼要有語義化标簽

友善代碼的閱讀和維護
同時讓浏覽器或是網絡爬蟲可以很好地解析，進而更好分析其中的内容
使用語義化标簽會具有更好地搜尋引擎優化

核心：合适的地方給一個最為合理的标簽。

語義是否良好：當我們去掉CSS之後，網頁結構依然組織有序，并且有良好的可讀性。

不管是誰都能看懂這塊内容是什麼。

遵循的原則：先确定語義的HTML ，再選合适的CSS。

HTML标簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就隻寫HTML标簽，認識标簽就可以了。不會再給結構标簽指定樣式了。

HTML标簽有很多，這裡我們學習最為常用的，後面有些較少用的，我們可以查下手冊就可以了。

排版标簽

排版标簽主要和css搭配使用，顯示網頁結構的标簽，是網頁布局最常用的标簽。

标題标簽 (熟記)

單詞縮寫： head 頭部. 标題

為了使網頁更具有語義化，我們經常會在頁面中用到标題标簽，HTML提供了6個等級的标題，即

、

和

标題标簽語義：  作為标題使用，并且依據重要性遞減

其基本文法格式如下：

<hn>   标題文本   </hn>

注意： h1 标簽因為重要，盡量少用，不要動不動就向你扔了一個h1。一般h1 都是給logo使用。

段落标簽( 熟記)

單詞縮寫： paragraph 段落

在網頁中要把文字有條理地顯示出來，離不開段落标簽，就如同我們平常寫文章一樣，整個網頁也可以分為若幹個段落，而段落的标簽就是

<p>  文本内容  </p>

是HTML文檔中最常見的标簽，預設情況下，文本在一個段落中會根據浏覽器視窗的大小自動換行。

水準線标簽(認識)

單詞縮寫： horizontal 橫線

在網頁中常常看到一些水準線将段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水準線可以通過插入圖檔實作，也可以簡單地通過标簽來完成，

就是建立橫跨網頁水準線的标簽。其基本文法格式如下：

<hr />是單标簽

在網頁中顯示預設樣式的水準線。

換行标簽(熟記)

單詞縮寫： break 打斷 ,換行

在HTML中，一個段落中的文字會從左到右依次排列，直到浏覽器視窗的右端，然後自動換行。如果希望某段文本強制換行顯示，就需要使用換行标簽

<br />

這時如果還像在word中直接敲Enter鍵換行就不起作用了。

div span标簽(重點)

div span 是沒有語義的是我們網頁布局主要的2個盒子

div 就是 division 的縮寫分割，分區的意思其實有很多div 來組合網頁。

span, 跨度，跨距；範圍

文法格式：

<div> 這是頭部 </div>    <span>今日價格</span>

文本格式化标簽(熟記)

在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化标簽，使文字以特殊的方式顯示。

b i s u 隻有使用沒有強調的意思 strong em del ins 語義更強烈

标簽屬性

屬性就是特性比如手機的顔色手機的尺寸，總結就是手機的。。

使用HTML制作網頁時，如果想讓HTML标簽提供更多的資訊，可以使用HTML标簽的屬性加以設定。其基本文法格式如下：

<标簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 内容 </标簽名>

在上面的文法中，

1.标簽可以擁有多個屬性，必須寫在開始标簽中，位于标簽名後面。

2.屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開。

3.任何标簽的屬性都有預設值，省略該屬性則取預設值。

采取鍵值對的格式 key=“value” 的格式

比如:

<hr width="400" />

屬性是寬度

值是 400

提倡：盡量不使用樣式屬性。

圖像标簽img (重點)

單詞縮寫： image 圖像

HTML網頁中任何元素的實作都要依靠HTML标簽，要想在網頁中顯示圖像就需要使用圖像标簽，接下來将詳細介紹圖像标簽以及和他相關的屬性。其基本文法格式如下：

該文法中src屬性用于指定圖像檔案的路徑和檔案名，他是img标簽的必需屬性。

<img src="圖像URL" />

連結标簽(重點)

單詞縮寫： anchor 的縮寫。基本解釋錨, 鐵錨的

在HTML中建立超連結非常簡單，隻需用标簽環繞需要被連結的對象即可，其基本文法格式如下：

<a href="跳轉目标" target="目标視窗的彈出方式">文本或圖像</a>

href：用于指定連結目标的url位址，當為标簽應用href屬性時，它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定連結頁面的打開方式，其取值有_self和_blank兩種，其中_self為預設值，_blank為在新視窗中打開方式。

注意：

1.外部連結需要添加 http:// www.baidu.com

2.内部連結直接連結内部頁面名稱即可比如 < a href=“index.html”> 首頁

3.如果當時沒有确定連結目标時，通常将連結标簽的href屬性值定義為“#”(即href="#")，表示該連結暫時為一個空連結。

4.不僅可以建立文本超連結，在網頁中各種網頁元素，如圖像、表格、音頻、視訊等都可以添加超連結。

錨點定位（難點）

通過建立錨點連結，使用者能夠快速定位到目标内容。

建立錨點連結分為兩步：

1.使用“a href=”#id名>“連結文本"</a>建立連結文本。

2.使用相應的id名标注跳轉目标的位置。

base 标簽

base 可以設定整體連結的打開狀态

base 寫到之間

特殊字元标簽（了解）

注釋标簽

在HTML中還有一種特殊的标簽——注釋标簽。如果需要在HTML文檔中添加一些便于閱讀和了解但又不需要顯示在頁面中的注釋文字，就需要使用注釋标簽。其基本文法格式如下：

<!-- 注釋語句 -->

注釋内容不會顯示在浏覽器視窗中，但是作為HTML文檔内容的一部分，也會被下載下傳到使用者的計算機上，檢視源代碼時就可以看到。

注釋重要性：

路徑(重點、難點)

實際工作中，通常建立一個檔案夾專門用于存放圖像檔案，這時再插入圖像，就需要采用“路徑”的方式來指定圖像檔案的位置。

路徑可以分為：相對路徑和絕對路徑

相對路徑

圖像檔案和HTML檔案位于同一檔案夾：隻需輸入圖像檔案的名稱即可，如<img src=“logo.gif” />。
圖像檔案位于HTML檔案的下一級檔案夾：輸入檔案夾名和檔案名，之間用“/”隔開，如<img src=“img/img01/logo.gif” />。
圖像檔案位于HTML檔案的上一級檔案夾：在檔案名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="…/logo.gif" />。

絕對路徑

“D:\web\img\logo.gif”，或完整的網絡位址，例如“http://www.itcast.cn/images/logo.gif”。

清單标簽

什麼是清單？

把…制成表,以表顯示

容器裡面裝載着文字或圖表的一種形式，叫清單。

清單最大的特點就是整齊、整潔、有序

無序清單 ul （重點）

無序清單的各個清單項之間沒有順序級别之分，是并列的。其基本文法格式如下：

<ul>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ul>

比如下面這些，新聞是沒有順序的，不用排隊，先到先得，後釋出先顯示。

腳下留心：

1. <ul></ul>中隻能嵌套<li></li>，直接在<ul></ul>标簽中輸入其他标簽或者文字的做法是不被允許的。
 2. <li>與</li>之間相當于一個容器，可以容納所有元素。
 3. 無序清單會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序清單 ol （了解）

有序清單即為有排列順序的清單，其各個清單項按照一定的順序排列定義，有序清單的基本文法格式如下：

<ol>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ol>

所有特性基本與ul 一緻。

但是實際工作中，較少用 ol ，是以我們用一句話來總結下 ol：

自定義清單（了解）

定義清單常用于對術語或名詞進行解釋和描述，定義清單的清單項前沒有任何項目符号。其基本文法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

用的還可以：

總結

每一天都有一個主題我們HTML第一天的主題就是 <認識标簽>

學HTML 之前覺得很神秘

總結今天的思路貫穿線：

表格 table(會使用)

存在即是合理的。表格的現在還是較為常用的一種标簽，但不是用來布局，常見處理表格式資料。

ps: 這些地方用表格，你會覺得生活還是那麼美好。。。。忍不住想說 PPAP i hava a pen

建立表格

在HTML網頁中，要想建立表格，就需要使用表格相關的标簽。建立表格的基本文法格式如下：

<table>
  <tr>
    <td>單元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的文法中包含三對HTML标簽，分别為 <table></table>、<tr></tr>、<td></td>，他們是建立表格的基本标簽，缺一不可，下面對他們進行具體地解釋。

1.table用于定義一個表格。

2.tr 用于定義表格中的一行，必須嵌套在 table /table标簽中，在 table /table中包含幾對 tr /tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>标簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1. <tr></tr>中隻能嵌套<td></td>

2. <td></td>标簽，他就像一個容器，可以容納所有的元素

表格屬性

表頭标簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設定了表頭的表格。設定表頭非常簡單，隻需用表頭标簽<th></th>替代相應的單元格标簽<td></td>即可。

表格結構（了解）

在使用表格進行布局時，可以将表格劃分為頭部、主體和頁腳（頁腳因為有相容性問題，我們不在贅述），具體 如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 标簽中，一般包含網頁的logo和導航等頭部資訊。


<tbody></tbody>：用于定義表格的主體。

位于<table></table>标簽中，一般包含網頁中除頭部和底部之外的其他内容。

合并單元格

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

将多個内容合并的時候，就會有多餘的東西，把它删除。例如把 3個 td 合并成一個，那就多餘了2個，需要删除。

公式：删除的個數 = 合并的個數 - 1

總結表格

表格提供了HTML 中定義表格式資料的方法。
表格中由行中的單元格組成。
表格中沒有列元素，列的個數取決于行的單元格個數。
表格不要糾結于外觀，那是CSS 的作用。

表單标簽(掌握)

現實中的表單，類似我們去銀行辦理信用卡填寫的單子。如下圖

目的是為了收集使用者資訊。

在我們網頁中，我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示資訊和表單域3個部分構成。

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、送出按鈕、重置按鈕等。

提示資訊：

一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。

表單域：

他相當于一個容器，用來容納所有的表單控件和提示資訊，可以通過他定義處理表單資料所用程式的url位址，以及資料送出到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到背景伺服器。

input 控件(重點)

在上面的文法中，<input />标簽為單标簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input />标簽還可以定義很多其他的屬性，其常用屬性如下表所示。

label标簽(了解)

label 标簽為 input 元素定義标注（标簽）。

作用：用于綁定一個表單元素, 當點選label标簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規定 label 與哪個表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的資訊，就需要用到<textarea></textarea>标簽。通過textarea控件可以輕松地建立多行文本輸入框，其基本文法格式如下：

<textarea cols="每行中的字元數" rows="顯示的行數">
  文本内容
</textarea>

下拉菜單

使用select控件定義下拉菜單的基本文法格式如下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

注意：

<select></select>中至少應包含一對<option></option>。
在option 中定義selected =" selected "時，目前項即為預設選中項。

表單域

在HTML中，form标簽被用于定義表單域，即建立一個表單，以實作使用者資訊的收集和傳遞，form中的所有内容都會被送出給伺服器。建立表單的基本文法格式如下：

<form action="url位址" method="送出方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：

Action

在表單收集到資訊後，需要将資訊傳遞給伺服器進行處理，action屬性用于指定接收并處理表單資料的伺服器程式的url位址。
method

用于設定表單資料的送出方式，其取值為get或post。
name

用于指定表單的名稱，以區分同一個頁面中的多個表單。

注意：每個表單都應該有自己表單域。

HTML5新标簽與特性

文檔類型設定

document

HTML:
XHTML:
HTML5

字元設定

：HTML與XHTML中建議這樣去寫
：HTML5的标簽中建議這樣去寫

常用新标簽

header：定義文檔的頁眉
nav：定義導航連結的部分
footer：定義文檔或節的頁腳
article：标簽規定獨立的自包含内容
section：定義文檔中的節（section、區段）
aside：定義其所處内容之外的内容

常用新屬性

屬性****	用法****	含義****
placeholder****	占位符提供可描述輸入字段預期值的提示資訊
autofocus****	規定當頁面加載時 input 元素應該自動獲得焦點
multiple****	多檔案上傳
autocomplete****	規定表單是否應該啟用自動完成功能
required****	必填項
accesskey****	規定激活（使元素獲得焦點）元素的快捷鍵

新增的type屬性值：

類型****	使用示例****	含義****
email****	輸入郵箱格式
tel****	輸入手機号碼格式
url****	輸入url格式
number****	輸入數字格式
search****	搜尋框（展現語義化）
range****	自由拖動滑塊
time****
date****
datetime****
month****
week****

綜合案例

<form action="">
  <fieldset>
    <legend>學生檔案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="請輸入使用者名"> <br>
    <label for="userPhone">手機号碼:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">郵箱位址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所屬學院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
    <datalist id="cList">
      <option value="前端與移動開發學院"></option>
      <option value="java學院"></option>
      <option value="c++學院"></option>
    </datalist><br>
    <label for="score">入學成績:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="level">基礎水準:</label>
    <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
    <label for="inTime">入學日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">畢業日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

多媒體标簽

embed：标簽定義嵌入的内容
audio：播放音頻
video：播放視訊

多媒體 embed（會使用）

embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url為音頻或視訊檔案及其路徑，可以是相對路徑或絕對路徑。

因為相容性問題，我們這裡隻講解插入網絡視訊，後面H5會講解 audio 和video 視訊多媒體。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

優酷，洋芋，愛奇藝，騰訊、樂視等等

先上傳
在分享

多媒體 audio

HTML5通過标簽來解決音頻播放的問題。

使用相當簡單，如下圖所示

并且可以通過附加屬性可以更友好控制音頻的播放，如：

autoplay 自動播放

controls 是否顯不預設播放控件

loop 循環播放

由于版權等原因，不同的浏覽器可支援播放的格式是不一樣的，如下圖供參考

多浏覽器支援的方案，如下圖

多媒體 video