什麼是HTML？
HTML 語言用於描述網頁。
| – |
|---|
| HTML 是指超文本標記語言: Hyper Text Markup Language |
| HTML 不是一種編程語言，而是一種標記語言 |
| HTML 使用標記標籤來描述網頁 |
| HTML 文檔包含了HTML 標籤及文本內容 |
| HTML 文檔也叫做 web 頁面 |
HTML發展
2014年，HTML 5標準最終面世
| – |
|---|
| HTML 2.0——1995年11月，RFC 1866發佈 |
| HTML 3.2——1997年1月14日，W3C發佈推薦標準 |
| HTML 4.0——1997年12月18日，W3C發佈推薦標準 |
| HTML 4.01——1999年12月24日，W3C發佈推薦標準 |
| HTML 5——2014年10月28日，W3C發佈推薦標準 |
HTML結構
只有 <body> 標籤中的內容會顯示在瀏覽器中
HTML的結構一般包括 <head>標籤和 <body>標籤， <head>和 <body>這2個標記符分別表示網頁的頭部和正文。
- <head>頭部中可包含頁面的標題、關鍵詞、描述說明等內容，它本身不作爲內容來顯示，但影響網頁顯示的效果，在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種 meta 信息。
標籤 描述 <head> 定義了文檔的信息 <title> 定義了文檔的標題 <base> 定義了頁面鏈接標籤的默認鏈接地址 <link> 定義了一個文檔和外部資源之間的關係 <meta> 定義了HTML文檔中的元數據 <script> 定義了客戶端的腳本文件 <style> 定義了HTML文檔的樣式文件 - <title> 元素
- 定義了瀏覽器工具欄的標題
- 當網頁添加到收藏夾時，顯示在收藏夾中的標題
- 顯示在搜索引擎結果頁面的標題
- <link> 標籤定義了文檔與外部資源之間的關係，<link> 標籤通常用於鏈接到樣式表
- <meta>元素通常用於指定網頁的描述(description)，關鍵詞(keywords)，文件的最後修改時間(revised)，作者(author)，和其他元數據。
- 只有 <body>正文 標籤中的內容會顯示在瀏覽器中
HTML標籤
HTML 標籤通常是成對出現的
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b>和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
- 某些 HTML 元素具有空內容（empty content），在開始標籤中進行關閉（以開始標籤的結束而結束）
HTML元素
一個 HTML元素包含了開始標籤與結束標籤
-
塊級元素和內聯元素
塊級元素 內聯元素 有塊級元素佔用全部寬度，不能和其他元素共享一行 所有內聯元素只佔用必要的寬度，默認和其他元素在同一行 以根據盒模型特性設置寬高內外間距，如果不設置寬度，則默認填充父級元素的寬度 不遵循盒模型特性設置，寬高只和內容有關 部可以繼續容納其他元素。包括：div、dl、h系列、hr、ul、li、ol、table、p等 內部只可以繼續容納其他內聯元素 見的塊級元素 ：div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl 常見的行內元素：span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code -
既是內聯元素又是塊級元素
- 既希望元素具有寬度高度特性，又具有同行特性
- 每一行所有的inline-block元素會共同形成一個line box
- line box的高度由裏面最高的元素決定，不會與下一行的列表元素髮生錯位
文檔類型聲明
<!DOCTYPE>是標準通用標記語言的文檔類型聲明，有助於在瀏覽器中正確地顯示網頁
| HTML5聲明 | HTML 4.01聲明 |
|---|---|
| < ! DOCTYPE html > | <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
什麼是 HTML5?
HTML5 是下一代 HTML 標準。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
HTML5 受包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等主流瀏覽器的支持
新特性
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
HTML 與 HTML5 的差異
-
新增與移除
新增 移除 標籤 描述 標籤 <article> 定義頁面獨立的內容區域。 <acronym> <aside> 定義頁面的側邊欄內容。 <applet> <bdi> 允許您設置一段文本，使其脫離其父元素的文本方向設置。 <basefont> <command> 定義命令按鈕，比如單選按鈕、複選框或按鈕。 <big> <details> 用於描述文檔或文檔某個部分的細節。 <center> <dialog> 定義對話框，比如提示框。 <dir> <summary> 標籤包含 details 元素的標題。 <font> <figure> 規定獨立的流內容（圖像、圖表、照片、代碼等等）。 <frame> <figcaption> 定義 <figure> 元素的標題。 <frameset> <footer> 定義 section 或 document 的頁腳。 <noframes> <header> 定義了文檔的頭部區域。 <strike> <mark> 定義帶有記號的文本。 <meter> 定義度量衡。僅用於已知最大和最小值的度量。 <nav> 定義導航鏈接的部分。 <progress> 定義任何類型的任務的進度。 <section> 定義文檔中的節（section、區段）。 <time> 定義日期或時間。 <wbr> 規定在文本中的何處適合添加換行符。 -
帶有必填字段的表單：required 屬性是 HTML5 中的新屬性。
（接手維護HTML5以下網頁，添加帶有必填字段的表單發現不起作用…坑）
HTML 知識題
| 題目 | 答案 |
|---|---|
| HTML5 的正確 doctype 是？ | <!DOCTYPE html> |
| 在 HTML5 中，onblur 和 onfocus 是： | 事件屬性 |
| 在 HTML5 中，哪個方法用於獲得用戶的當前位置？ | getCurrentPosition() |
| HTML5 全局屬性，“contenteditable” 用於 | 定元素內容是否是可編輯的。 |
| 在 HTML5 中，contextmenu 和 spellcheck 是： | HTML 屬性 |
| 由 SVG 定義的圖形是什麼格式的？ | XML |
| HTML5 內建對象用於在畫布上繪製： | getContext |