2018/09/28渡課
阿新 • • 發佈：2018-11-20
目錄
一.將紅色標註的重要標籤進行整理，整理要求：
a.每個表情按需要說明：用途和作用、標籤的例項程式碼、標籤的重要屬性和屬性意義
b.可以將標籤按照自己的立即進行歸類
| 標籤 | 用途和作用 | 例項程式碼 | 重要屬性及意義 |
|---|---|---|---|
| <!–…--> | 用於在原始碼中插入註釋，註釋不會顯示在瀏覽器中。 | ||
| <!DOCTYPE> | 不是 HTML 標籤，它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。位HTML 文件的第一行。 | ||
| <a> | 超連結，用於從一張頁面連結到另一張頁面。 | <a href="http://www.w3school.com.cn">W3School</a> |
1.herf:指示連結的目標。2.target:規定在何處開啟連結文件。 |
| <b> | 規定粗體文字。 | <b>這是粗體文字</b> |
|
| <blockquote> | 定義塊引用。 | <blockquote><p>引用</p></blockquote> |
cite:規定引用的來源。 |
| <body> | 定義文件的主體。 | ||
| <button> | 定義一個按鈕。 | <button type="button">按鈕</button> |
type:規定按鈕的型別。 |
| <caption> | 定義表格標題 | <table border="1"><caption>標題</caption><tr><th>1</th><th>2</th></tr><tr><td>3</td><td>4</td> </tr></table> |
|
| <code> | 用於表示計算機原始碼或者其他機器可以閱讀的文字內容。 | ||
| <datalist> | 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 | <input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"></datalist> |
|
| <dd> | 在定義列表中定義條目的定義部分。 | <dl><dt>計算機</dt><dd>用來計算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示資訊的裝置 ... ...</dd></dl> |
|
| <del> | 定義文件中已被刪除的文字。 | <del>刪除</del> |
1.cite:指向另外一個文件的 URL，此文件可解釋文字被刪除的原因。2.datetime: 定義文字被刪除的日期和時間。 |
| <div> | 把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯 | <div ><h3>This is a header</h3><p>This is a paragraph.</p></div> |
|
| <dl> | 定義了定義列表。 | ||
| <dt> | 定義了定義列表中的專案。 | <dl><dt>計算機</dt><dd>用來計算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示資訊的裝置 ... ...</dd></dl> |
|
| <em> | 把其中的文字顯示為斜體。 | <em>斜體</em> |
|
| <figure> | 規定獨立的流內容。 | ||
| <footer> | 定義文件或節的頁尾。 | ||
| <form> | 用於為使用者輸入建立 HTML 表單。表單用於向伺服器傳輸資料。 | <form><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" /></form |
1.accept-charset:規定伺服器可處理的表單資料字符集。2.action:規定當提交表單時向何處傳送表單資料。 |
| <frame> | 定義 frameset 中的一個特定的視窗（框架） | <html><frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" /></frameset></html> |
1.src:規定在框架中顯示的文件的URL。2.scrolling：規定是否在框架中顯示滾動條。 |
| <frameset> | 定義一個框架集。它被用來組織多個視窗（框架）。 | 1.cols:定義框架集中列的數目和尺寸。2.rows:定義框架集中行的數目和尺寸。 | |
| <h1> 到 <h6> | 從大到小可定義標題。 | <h1>這是標題 1</h1><h2>這是標題 2</h2><h3>這是標題 3</h3><h4>這是標題 4</h4><h5>這是標題 5</h5><h6>這是標題 6</h6> |
|
| <head> | 用於定義文件的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊等等。 | <html><head><title>文件的標題</title></head><body> 文件的內容... ...</body></html> |
profile:一個由空格分隔的 URL 列表，這些 URL 包含著有關頁面的元資料資訊。 |
| <header> | 定義文件的頁首（介紹資訊） | ||
| <hr> | 在 HTML 頁面中建立一條水平線。 | <hr /> |
|
| <html> | 此元素可告知瀏覽器其自身是一個 HTML 文件。<html> 與 </html>標籤限定了文件的開始點和結束點，在它們之間是文件的頭部和主體。正如您所瞭解的那樣，文件的頭部由 <head> 標籤定義，而主體由 <body> 標籤定義。 | ||
| <i> | 顯示斜體文字效果。 | ||
| <iframe> | 建立包含另外一個文件的內聯框架（即行內框架）。 | src:規定在 <iframe> 中顯示的頁面的 HTML 內容。 | |
| <img> | 向網頁中嵌入一幅影象。 | <img src="xxx.jpg" alt="一張圖" /> |
1.alt:規定影象的替代文字。2.src:規定顯示影象的 URL。 |
| <input> | 用於蒐集使用者資訊。根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。 | <input type="submit" value="Submit" /> |
1.type：規定 input 元素的型別。2.checked： 規定此 input 元素首次載入時應當被選中。 |
| <kbd> | 它用來表示文字是從鍵盤上鍵入的。瀏覽器通常用等寬字型來顯示該標籤中包含的文字。 | ||
| <label> | 為 input 元素定義標註（標記）。label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。 | ||
| <legend> | 為 fieldset 元素定義標題（caption） | ||
| <li> | 定義列表專案。可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。 | <ol> <li>Coffee</li><li>Tea</li> <li>Milk</li></ol><ul> <li>Coffee</li><li>Tea</li> <li>Milk</li></ul> |
|
| <meta> | <meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。<meta> 標籤位於文件的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文件相關聯的名稱/值對。 | content：定義與 http-equiv 或 name 屬性相關的元資訊。 | |
| <nav> | 定義導航連結的部分。 | <nav><a href="index.asp">Home</a><a href="html5_meter.asp">Previous</a><a href="html5_noscript.asp">Next</a></nav> |
|
| <noframes> | noframes 元素可為那些不支援框架的瀏覽器顯示文字。noframes 元素位於 frameset 元素內部。 | ||
| <noscript> | noscript 元素用來定義在指令碼未被執行時的替代內容（文字）。此標籤可被用於可識別 <script> 標籤但無法支援其中的指令碼的瀏覽器。 | ||
| <ol> | 定義有序列表。 | <ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol> |
1.start：規定有序列表的起始值。2.type：規定在列表中使用的標記型別。 |
| <optgroup> | 定義選項組。optgroup 元素用於組合選項。當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。 | ||
| <option> | option 元素定義下拉列表中的一個選項（一個條目）。瀏覽器將<option> 標籤中的內容作為 <select> 標籤的選單或是滾動列表中的一個元素顯示。option 元素位於 select 元素內部。 | <select><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select> |
|
| selected：規定選項（在首次顯示在列表中時）表現為選中狀態。 | |||
| <p> | 定義段落。p 元素會自動在其前後建立一些空白。瀏覽器會自動新增這些空間，您也可以在樣式表中規定。 | <p>This is some text in a very short paragraph</p> |
|
| <q> | 定義短的引用。瀏覽器經常在引用的內容周圍新增引號。 | <q>Here is a short quotation here is a short quotation</q> |
cite：定義引用的出處或來源（citation） |
| <script> | 用於定義客戶端指令碼，比如 JavaScript。script 元素既可以包含指令碼語句，也可以通過 src 屬性指向外部指令碼檔案。必需的 type 屬性規定指令碼的 MIME 型別。JavaScript 的常見應用時影象操作、表單驗證以及動態內容更新。 | <scripttype="text/javascript">document.write("Hello World!")</script> |
1.src：規定外部指令碼檔案的 URL。2.charset：規定在外部指令碼檔案中使用的字元編碼。3.defer：規定是否對指令碼執行進行延遲，直到頁面載入為止。 |
| <select> | select 元素可建立單選或多選選單。<select>元素中的 <option>標籤用於定義列表中的可用選項 | 1.size：規定下拉列表中可見選項的數目。2.multiple：規定可選擇多個選項。 | |
| <small> | 呈現小號字型效果。 | ||
| <span> | 被用來組合文件中的行內元素。 | ||
| <strong> | 用於強調文字，但它強調的程度更強一些。 | ||
| <style> | 用於為 HTML 文件定義樣式資訊。在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文件。type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 “text/css”。style 元素位於 head 部分中。 | <html><head><style type="text/css">h1 {color:red}p {color:blue}</style></head><body><h1>Header 1</h1><p>A paragraph.</p></body></html> |
1.type：規定樣式表的 MIME 型別。2.media：為樣式表規定不同的媒介型別。 |
| <sup> | 可定義上標文字。包含在 <sup>標籤和其結束標籤 </sup>中的內容將會以當前文字流中字元高度的一半來顯示，但是與當前文字流中文字的字型和字號都是一樣的。提示：這個標籤在向文件新增腳註以及表示方程式中的指數值時非常有用。如果和 <a>標籤結合起來使用，就可以創建出很好的超連結腳註。 | ||
| <table> | 定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 | <table border="1"><thead><tr> <th>Month</th><th>Savings</th> </tr></thead> <tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table> |
1.cellpadding：規定單元邊沿與其內容之間的空白。2.cellspacing：規定單元格之間的空白。3.frame：規定外側邊框的哪個部分是可見的。4.rules：規定內側邊框的哪個部分是可見的。 |
| <thead> | 定義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。 | 1.valign:規定 tbody 元素中內容的垂直對齊方式。2.align:定義 tbody 元素中內容的對齊方式。 | |
| <tbody> | 表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。 | ||
| <tfoot> | 定義表格的頁尾（腳註或表注）。該標籤用於組合 HTML 表格中的表注內容。 | ||
| <th> | 定義表格內的表頭單元格。 | ||
| <tr> | 定義 HTML 表格中的行。 | ||
| <td> | 定義 HTML 表格中的標準單元格。 | ||
| <time> | 定義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，使用者代理能夠把生日提醒或排定的事件新增到使用者日程表中，搜尋引擎也能夠生成更智慧的搜尋結果。 | <p>我們在每天早上 <time>9:00</time> 開始營業。</p><p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p> |
|
| <title> | 定義文件的標題。瀏覽器會以特殊的方式來使用標題，並且通常把它放置在瀏覽器視窗的標題欄或狀態列上。同樣，當把文件加入使用者的連結列表或者收藏夾或書籤列表時，標題將成為該文件連結的預設名稱。 | <head> <title>XHTML Tag Reference</title> </head> |
|
| <ul> | 定義無序列表。 | <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul> |
|
| <video> | 定義視訊，比如電影片段或其他視訊流。 | <video src="movie.ogg" controls="controls">您的瀏覽器不支援 video 標籤。</video> |
二.自學使用HTML5的視訊和音訊標籤，在頁面中插入一段音訊和視訊
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="1.mp4">
</video>
<audio controls="controls">
<source src="2.mp3">
</audio>
</body>
</html>
三.問題
a.HTML有哪些版本？HTML5的新增標籤有哪些？
5個版本。
超文字標記語言（第一版）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）：ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日釋出，基於嚴格的HTML 4.01語法，是國際標準化組織和國際電工委員會的標準。
1、header元素
表示頁面中一個內容區塊或真個頁面的標題。
2、hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。
3、article元素
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。4、aside元素
表示article元素內容之外的、與article元素內容相關的輔助資訊。
5、footer元素
表示整個頁面或頁面中一個內容區塊的腳註。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯絡資訊。
HTML5新規則： 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。 減少對外部外掛的需求（比如 Flash），更優秀的錯誤處理，更多取代指令碼的標記，HTML5 應該獨立於裝置開發程序應對公眾透明 ;
HTML5 新特性： 新的特殊內容元素，比如 article、footer等，新的表單控制元件，比如 calendar、date、time、email、url、search；用於媒介回放的 video 和 audio 元素；用於繪畫的 canvas 元素 對本地離線儲存的更好的支援。
b.什麼是瀏覽器的解析器，瀏覽器是如何解析一個HTML文件的？
DOM 解析器把 XML 文件轉化為一個包含其內容的樹，並可以對樹進行遍歷。用 DOM 解析模型的優點是程式設計容易，開發人員只需要呼叫建樹的指令，然後利用navigation APIs訪問所需的樹節點來完成任務。可以很容易的新增和修改樹中的元素。然而由於使用 DOM 解析器的時候需要處理整個 XML 文件，所以對效能和記憶體的要求比較高，尤其是遇到很大的 XML 檔案的時候。由於它的遍歷能力，DOM 解析器常用於 XML 文件需要頻繁的改變的服務中。
Web頁面執行在各種各樣的瀏覽器當中，瀏覽器載入、渲染頁面的速度直接影響著使用者體驗
簡單地說，頁面渲染就是瀏覽器將html程式碼根據CSS定義的規則顯示在瀏覽器視窗中的這個過程。先來大致瞭解一下瀏覽器都是怎麼幹活的：
1. 使用者輸入網址（假設是個html頁面，並且是第一次訪問），瀏覽器向伺服器發出請求，伺服器返回html檔案；
2. 瀏覽器開始載入html程式碼，發現< head>標籤內有一個< link>標籤引用外部CSS檔案；
3. 瀏覽器又發出CSS檔案的請求，伺服器返回這個CSS檔案；
4. 瀏覽器繼續載入html中<body> 部分的程式碼，並且CSS檔案已經拿到手了，可以開始渲染頁面了；
5. 瀏覽器在程式碼中發現一個<img> 標籤引用了一張圖片，向伺服器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的程式碼；
6. 伺服器返回圖片檔案，由於圖片佔用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分程式碼；
7. 瀏覽器發現了一個包含一行Javascript程式碼的<script> 標籤，趕快執行它；
8. Javascript指令碼執行了這條語句，它命令瀏覽器隱藏掉程式碼中的某個<div> （style.display=”none”）。杯具啊，突然就少了這麼一個元素，瀏覽器不得不重新渲染這部分程式碼；
9. 終於等到了</html> 的到來，瀏覽器淚流滿面……
10. 等等，還沒完，使用者點了一下介面中的“換膚”按鈕，Javascript讓瀏覽器換了一下< link>標籤的CSS路徑；
11. 瀏覽器召集了在座的各位<div> <span> <ul> <li> 們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向伺服器請 求了新的CSS檔案，重新渲染頁面。