web十七講上，html5
阿新 • • 發佈：2020-12-20
內容提要
- HTML5頁面結構。
- 使用HTML5新增元素和新增屬性。
- HTML5新增表單元素和新增屬性的設定方法。
- 使用HTML5的Audio和Video媒體元素。
- HTML5本地儲存開發Web應用。
- 使用CSS3的轉換、過渡和動畫等特性設計頁面的動態效果。
- 設定與應用CSS3文字效果及多列等屬性。
- 設定與應用CSS3文字效果及多列等屬性。
HTML5產生
- WHATWG(WebHypertextApplicationTechnologyWorkingGroup，Web超文字應用技術工作組)，WHATWG組織專門致力於Web表單和應用程式；
- 當時W3C專注於XHTML2.0標準的制定。
- 2006年10月，W3C決定與WHATWG合作共同研製HTML5相關技術標準。
HTML5繼承發展HTML4
- 標記是用來說明HTML元素的。一個非空HTML元素是由開始標記、元素的屬性和值、內容和結束標記組成的，是構成HTML檔案的基本物件。
- 位於起始標記和結束標記之間的文字就是HTML元素的內容。
- 為HTML元素提供各種附加資訊的就是HTML屬性，它總是以屬性名=“屬性值”這種鍵值對的形式出現，而且屬性總是在HTML元素的開始標記中進行定義。
HTML5的八個特性
- 語義特性(Semantic)，HTML5賦予網頁更好的意義和結構。
- 離線與儲存特性(offline&storage)。HTML5開發的網頁APP啟動時間更短、聯網速度更快。由於有HTML5APPCache、本地儲存功能、IndexedDB和FileAPI說明文件。
- 裝置訪問特性(DeviceAccess)。HTML5提供了前所未有的資料與應用接入開放介面。使外部應用可以直接與瀏覽器內部的資料直接相連，例如視訊影音可直接與麥克風及攝像頭相連。
- 多媒體特性(Multimedia)。支援網頁端的Autio、Video等多媒體功能，與網站自帶的APPS、攝像頭、影音功能相得益彰。
- 三維、圖形與特效特性(3D、Graphice&Effects)。基於SVG、Canvas、WebGL及CSS3的3D功能，使用者會驚歎於在瀏覽器中所呈現的驚人視覺效果。
- 效能與整合特性(Performance&Integration)。HTML5會通過WebWorkers和XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作。
- 連線特性(Connectivity)。HTML5擁有更有效的伺服器推送技術(Server-SentEvent和WebSockets)，能夠幫助我們實現伺服器將資料“推送”到客戶端的功能。
- CSS3特性(CSS3)。CSS3中提供了更多的風格和更強的效果。
HTML5的優勢
- 擺脫對平臺的依賴。開啟瀏覽器，直接就可以訪問應用。
- 實時更新。
- 離線使用。使用者可以離線使用，更新下載量極少。
- 程式碼更安全。HTML5可以將Web程式碼全部加密，本地應用解密後再執行，大大提高了程式碼的安全性。
- 跨平臺。Javascript的程式碼可以在許多地方使用，包括移動應用、移動網站、PC網站、各種瀏覽器外掛，甚至可以用WebKit封裝作為跨平臺的應用程式。
- 可以充分利用Native。HTML5可以通過瀏覽器作為中介充分利用Native的好處(使用GPS、照相機、本地相簿、讀取本地聯絡人等)。某些Web無法實現的功能，可以利用Native實現。
HTML5比HTML4.01新增的特性
- 新的語義元素/結構元素
- 比如<header>、<footer>、<article>、<section>等。
- 新的表單控制元件
- 比如數字、日期、時間、日曆和滑塊。
- 強大的影象支援(藉由<video>和<audio>)
- 強大的新API，比如本地儲存取代cookie。
瀏覽器支援與選擇
- 所有現代瀏覽器都支援持HTML5。
- 但是，一些低版本的瀏覽器並不支援HTML5，如IE6～IE8瀏覽器。所有新、舊瀏覽器，對無法識別的元素均會視作內聯inline)元素來自動處理。
- 使用http://html5test.com來測試瀏覽器的支援。
HTML5新元素
-
新的語義/結構元素
標籤 描述 <article> 定義文件內的文章。 <aside> 定義頁面內容之外的內容。 <bdi> 定義與其他文字不同的文字方向。 <details> 定義使用者可檢視或隱藏的額外細節 <dialog> 定義對話方塊或視窗 <figcaption> 定義<figure>元素的標題。 <figure> 定義自包含內容，比如圖示、圖表、照片、程式碼清單等等。 <footer> 定義文件或節的頁尾。 <header> 定義文件或節的頁首 <main> 定義文件的主內容。 <mark> 定義重要的或強調的文字。 <menuitem> 定義使用者能夠從彈出選單呼叫的命令/選單專案。 <meter> 定義已知範圍(尺度)內的標量測量。 <nav> 定義文件內的導航連結。 <progress> 定義任務進度。 <rp> 定義在不支援ruby註釋的瀏覽器中顯示什麼。 <rt> 定義關於字元的解釋/發音(用於東亞字型)。 <ruby> 定義ruby註釋(用於東亞字型)。 <section> 定義文件中的節。 <summary> 定義<details>元素的可見標題。 <tiime> 定義日期/時間 <wrb> 定義可能的折行(line-break)。 -
新的表單元素
標籤 描述 <datalist> 定義輸入控制元件的預定義選項。 <keygen> 定義鍵值對生成器欄位(用於表單)。 <output> 定義計算結果。 -
新的輸入型別
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formatarget
- height和width
- list
- min和max
- multiple
- pattern (regexp)
- placeholder
- required
- step
-
HTML5--新的屬性語法
標籤 描述 Empty <input type="text" value=“John Doe” disabled> Unquoted <input type="text" value=John> Double-quoted <input type="text" value=“John Doe”> Single-quoted <input type="text" value=“John Doe”> -
HTML5影象
- <canvas> 定義使用JavaScript的影象繪製。
- <svg> 定義使用svg的影象繪製。
-
新的媒介元素
- <audio> 定義聲音或音樂內容。
- <embed> 定義外部應用程式的容器(比如外掛)。
- <source> 定義<video>和<audio>的來源。
- <track> 定義<video>和<audio>的軌道。
- <video> 定義視訊或影片內容。
-
HTML5API
HTML5語義元素
- 語義元素用來清楚地向瀏覽器和開發者描述其意義。
- 例如：
- 非語義元素的例子：<div>和<span> —— 無法提供關於其內容的資訊。
- 語義元素的例子：<form>、<table>以及<img> —— 清楚地定義其內容。
- 例如：
HTML5文件結構
-
HTML5文件結構同樣是由頭部和主體兩部分組成，只是新增了一些結構元素。
- 如header、nav、article、section、aside、footer六個結構元素，這些元素都是塊級元素。
-
HTML5和HTML4頁面佈局對比：
HTML5新增結構元素 —— header標記
-
header標記定義文件和區域的頁首，通常是一些引導和導航資訊。
-
header標記不侷限於寫在網頁頭部，也可以寫在網頁內容裡面。
-
通常header標記至少包含(但不侷限於)一個標題標記(h1-h6)，也可以包括hgroup(標題組合)標記、表格標識、搜尋表單、導航等。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5結構元素header和hgroup標記的應用</title> </head> <body> <header> <hgroup> <h1>HTML5 是下一代的 HTML。</h1> <h3>什麼是 HTML5？</h3> <h5>HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。</h5> </hgroup> </header> </body> </html>
HTML5新增結構元素 —— nav標記
-
<nav>元素定義導航連結集合。
-
<nav>元素旨在定義大型的導航連結塊。不過，並非文件中所有連結都應該位於<nav>元素中。
-
建議不要在footer元素中使用nav元素，否則易造成頁面顯示不正確。
-
配置相應的CSS程式碼可以實現水平導航。
-
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nav的使用</title> </head> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </body> </html>
section和article的區別
- 對於section和article的區分乍看比較難，其實重點就是看看這段內容脫離了整體是不是還能作為一個完整的、獨立的內容而存在，這裡面的重點在完整身上。
- 雖然section包含的內容也能算作獨立的一塊，但它只能算是組成整體的一部分，article才是一個完整的整體(論壇、部落格、新聞)。
article標記
-
article標記是一個特殊的section標記，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如論壇帖子、部落格文章、新聞故事、評論等。
-
一般來說，article會有標題部分，通常包含在header內，有時也會包含footer。article標記可以巢狀，內層的article對外層的article標記有隸屬關係。例如1篇部落格的文章可以用article顯示，然後後續的一些評論可以用article的形式嵌入其中。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5結構元素artical和header標記的應用</title> </head> <body> <article> <header> <hgroup> <h1>HTML 5結構元素的簡介</h1> <h2>HTML 5的誕生</h2> </hgroup> <time datetime="2017-04-28">2017-04-28</time> </header> <p>HTML5 引入了許多新元素，包括幾個用於更好地描述文字結構的元素。在本文中，我們將瞭解這些 HTML5 引入的新的結構化元素以及如何使用它們將一個文件劃分成幾個內容塊。</p> </article> </body> </html>
section標記
-
section 標記定義文件中的節。
-
section 表示一段專題性的內容，可以帶有標題。
-
如果描述一件具體的事物，建議使用article 來代替section；
- 如果使用section，仍可以使用h1 作為標題，而不用擔心它所處的位置。
- 如果一個容器需要定義樣式或定義行為，建議用div 元素。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5結構元素artical和section標記的應用</title> </head> <body> <section> <h1>section標記</h1> <p>用來定義文件中的節(section、區段)。 比如章節、頁首、頁尾或文件中的其他部分。</p> </section> <section> <h1>article標記</h1> <p>article標記標識了Web頁面中的主要內容。 以部落格為例，每篇帖子都構成一個重要內容。</p> </section> </body> </html>
ascide標記
-
aside側欄，也稱為旁註。aside標記用來說明其所包含的內容與頁面主要內容相關，但不是該頁面的一部分，類似於使用括號對正文進行註釋（就像這樣）。
-
括號中的內容提供關於該元素的一些附加資訊，例如廣告、成組的連結、側欄等。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5結構元素aside和artical標記的應用</title> </head> <body> <header>我的部落格</header> <section> <article> <p> 這是頁面上重要的內容部分。也許是部落格文章。帶aside元素。 </p> <aside style="float:right;width:100px;height:100px;background:#EEffcc;"> <p>這是第一篇部落格文章。 </p> </aside> </article> <article> <p>這是頁面上重要的內容部分。也許是部落格文章。不帶aside元素</p> </article> </section> </body> </html>
foot標記
-
定義section 或文件的頁尾，包含了與頁面、文章或部分內容有關的資訊，例如文章的作者或者日期。
-
作為頁面的頁尾時，一般包含了版權、相關檔案和連結。它與頁首header 標記用法相同，在一個頁面中可以多次使用，在一個區段的最後使用footer標記，那麼它就相當於該區段的頁尾。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5結構元素footer和section標記的應用</title> </head> <body> <footer> <div style="text-align:center;"> <section> <a href="http://www.caict.ac.cn/" target="_blank">CAICT中國信通院</a> <a href="//www.w3.org/" target="_blank">W3C</a> <a href="//www.dcloud.io/" target="_blank">DCloud</a> </section> <span style="padding:2px 5px;">京ICP備12046007號-5</span> <span style="padding:2px 5px;">HTML5中國產業聯盟版權所有</span> </div> </footer> </body> </html>
html5中div、section、article區別
- div section article ，語義是從無到有，逐漸增強的。
- div 無任何語義，僅僅用作樣式化；
- 對於一段主題性的內容，則就適用 section，而假如這段內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用 article。
- 原則上來說，能使用 article 的時候，也是可以使用 section 的，但是實際上，假如使用 article 更合適，那麼就不要使用section 。
- nav和aside的使用也是如此，這兩個標籤也是特殊的 section，在使用 nav 和 aside 更合適的情況下，也不要使用 section 了。
HTML5文件結構
- header
- nav
- article
- section
- aside
- footer
HTML5新增頁面元素
除了文件結構元素header、nav、article、section、aside、footer外，HTML5還新增了下列頁面元素：
- 內聯元素：time、meter、progress等；
- 內嵌元素：video、audio；
- 互動元素：details、datagrid、command等；
- 其他頁面元素。
figure標記與figcaption標記
-
figure標記用於對元素進行組合，常用於影象與影象描述組合；
-
figcaption(圖題)標記用於定義figure元素的標題(caption)，可以給一組圖片標記定義標題，但figcaption標記不是必需的；
-
若包含了figcaption元素，那它必須放置在figure元素的第一個或最後一個子元素的位置上。
-
基礎語法：
<figure> <p> 圖片檔案說明內容。 </p> <img src=" " width=" " alt=“ ” title=“ ”/> <figcaption>為圖片新增標題</figcaption> </figure> -
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5頁面元素figure與figcaption標記的應用</title> </head> <body> <figure> <p>HTML5具有語義、離線與儲存、裝置訪問等八個新特性，其對應的logo如下圖所示：</p> <img src="class-header-semantics.jpg" width="150px" alt="語義" title="語義" /> <img src="class-header-offline.jpg" width="150px" alt="離線&儲存" title="離線&儲存" /> <img src="class-header-device.jpg" width="150px" alt="裝置訪問" title="裝置訪問" /> <figcaption >HTML5新logo(圖題)</figcaption> </figure> </body> </html>
mark 標記與time 標記
-
記號mark 標記用來定義帶有記號的文字。在需要突出顯示文字時可以使用mark 標記。此標記對關鍵字做高亮處理（黃底色標註），突出顯示，標註重點，在搜尋方面可以應用。
-
時間time 標記用來定義公曆的時間(24小時制)或日期，時間和時區偏移是可選的。
-
該標記能夠以機器可讀的方式對日期和時間進行編碼。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5頁面元素mark和time標記的應用</title> <!-- <script type="text/javascript" src="html5shiv.js"></script> --> </head> <body> <article> <header> <h1>五一國際勞動節</h1> </header> <p style="text-indent:2em;">國際勞動節又稱“<mark>五一國際勞動節</mark>”、“<mark>國際示威遊行日</mark>”（International Workers' Day或者May Day），是世界上80多個國家的全國性節日。定在每年的五月一日。它是全世界勞動人民共同擁有的節日。1889年7月，由恩格斯領導的第二國際在巴黎舉行代表大會。會議通過決議，規定<time datetime="1890-05-01">1890-05-01</time>國際勞動者舉行遊行，並決定把5月1日這一天定為國際勞動節。中央人民政府政務院於1949年12月作出決定，將5月1日確定為勞動節。1989年後，國務院基本上每5年表彰一次全國勞動模範和先進工作者，每次表彰3000人左右。</p> </article> </body> </html>
-
time標記使用場合
-
情景一：指定元素的日期時間。
-
情景二：用於指定文件的釋出日期。
<mark>重點標註的內容</mark> <time>9:00</time> <time datetime="2017-05-01" pubdate="pubdate">國際勞動節</time>
-
details標記與summary標記
-
• 細節details標記是一個開關式、互動式控制元件，用來定義使用者可見的或者隱藏的需求補充細節，任何形式的內容都能被放在該標記中。該元素的內容對使用者是不可見的，除非設定了open屬性。
-
摘要summary 標記 配合使用可以為details定義標題，summary元素應該是details元素的第一個子元素。標題是可見的，使用者單擊標題時，會顯示出details。只有Chrome、Safari 6 以上支援。
-
基本語法：
<details open > <summary> details的標題</summary> details的詳細內容 </details> -
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5頁面元素details和summary標記的應用</title> <script type="text/javascript" src="html5shiv.js"></script> </head> <body> <details> <summary>HTML5是下一代的HTML。</summary> <h3>什麼是HTML5？</h3> <p>HTML5將成為HTML、XHTML以及HTML DOM的新標準。</p> <p>HTML的上一個版本誕生於1999年。自從那以後，Web世界已經經歷了鉅變。</p> <p>大部分現代瀏覽器已經具備了某些HTML5支援。</p> </details> <p><strong><mark>注意：</mark></strong>目前，只有Chrome和Safari 6支援details標籤。</p> </body> </html>
此時頁面顯示的是summary“HTML5是下一代的HTML”，點選其左側三角會顯示詳細資訊如下：
progress 標記與meter 標記
-
進度Progress標記用來定義執行中的任務進度：
- 該標記有兩個屬性：max表示需要完成的值；value表示當前的值。
-
度量meter 標記定義已知範圍或分數值內的標量測量，也被稱為gauge(尺度)。如磁碟用量、CPU使用率等等。
-
meter屬性表
屬性名 值 描述 form form_id 規定meter元素所屬的表單。 heigh number 規定被界定為高值的範圍。 low number 規定被界定為低值的範圍。 max number 規定範圍的最大值。 min number 規定範圍的最小值。 optimum number 規定度量的最優值。 value number 必需。規定度量的當前值。
-
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5頁面元素progress和meter標記的應用</title> <!-- <script type="text/javascript" src="html5shiv.js"></script> --> </head> <body> <p><strong>檔案下載進度：</strong> <progress value="22" max="100">設定屬性</progress></p> <p><strong>空進度條：</strong><progress>未設定屬性</progress></p> <p><strong>伺服器CPU使用情況：</strong> <meter value="0.3" high="0.9" low="0.1" optimum="0.5">3/10</meter></p> <p><strong>記憶體使用情況：</strong><meter value="0.6" max="1" min="0" optimum=".75">60%</meter></p> <p><mark>註釋：</mark>IE9以及更早的版本不支援progress、meter 標記。</p> </body> </html>
input 標記與datalist 標記
-
input 標記用於蒐集使用者資訊。此處僅介紹通過input標記的list 屬性與datalist 標記的id 屬性進行關聯，即將此兩個性的值設定為相同的值，通過datalist 標記列出所有合法的輸入值列表。
-
選項列表datalist 標記用來定義input 標記可能的選項列表。一般與input 標記配合使用，主要用來定義input 可能的值，提供“自動完成”的功能，方便使用者輸入。
- datalist 標記及其選項不會被顯示出來，只有當用戶滑鼠盤旋在input 標記域時，才能看到“▼”，然後單擊“▼”彈出一個下拉列表，提供使用者選擇作為使用者的輸入資料。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5頁面元素input和datalist標記的應用</title> <script type="text/javascript" src="html5shiv.min.js"></script> </head> <body> <input list="courese" placeholder="請選擇課程" /> <datalist id="courese"> <option value="HTML5移動應用開發"></option> <option value=".NET應用開發"></option> <option value="JavaEE應用開發"></option> <option value="PHP+MySQL應用開發"> </option> </datalist> <p><mark>註釋：</mark>除了IE9和更早版本的IE瀏覽器以及Safari不支援datalist標記，其餘均支援。</p> </body> </html>
表單複習
- HTML表單用於蒐集不同型別的使用者輸入。
- <form> 元素定義 HTML 表單。
- Action 屬性： action 屬性定義在提交表單時執行的動作。
- method 屬性：規定在提交表單時所用的 HTTP方法(GET或POST)。
- Name 屬性。
- HTML 表單包含表單元素：
- 表單元素指的是不同型別的 input 元素、複選框、單 按鈕、提交按鈕等等。
- 用 <fieldset> 組合表單數：
- <fieldset>元素組合表單中的相關資料。
- <legend>元素為<fieldset>元素定義標題。
HTML5表單
-
表單是HTML中獲取使用者輸入的手段，HTML5對錶單系統做了徹底的改造，以適應當前的應用。
-
在HTML5中增加了從使用者收集特定型別資料的新方法和在瀏覽器中檢查資料的能力。
-
<form>屬性列表：
屬性 描述 accept-charset 設定在被提交表單中使用的字符集(預設：頁面字符集)。 action 設定向何處提交表單(URL地址)。 autocomplete 設定瀏覽器是否自動完成表單(預設開啟)。 enctype 設定被提交資料的編碼(預設：url-encoded)。 method 設定在提交表單時所用的http方法(預設：get)。 name 設定識別表單的名字(對DOM使用：document.forms.name)。 novalidate 設定瀏覽器不驗證表單。 target 設定action屬性中地址的目標(預設_self)。 案例：
<form action="action_page.php" method="GET" target="_blank" accept-charset="utf-8" ctype="application/X-WWW-form-urlencoded" autocomplete="off" novalidate> . form elements . </form>
HTML5 新增的表單屬性
-
form標記的新屬性：autocomplete屬性和novalidate屬性：
-
autocomplete：on|off。屬性規定form標記或型別為text、search、url、telephone、email、password、datepickers、range、color的input標記是否具有自動完成的功能。當表單元素設定了自動完成功能後，會記錄使用者輸入過的內容，雙擊表單元素會顯示歷史輸入。
-
novalidate：true|false。屬性規定在提交表單時不進行驗證form或型別為text、search、url、telephone、email、password、date pickers、range、color的input標記。
-
案例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5表單form的autocomplete和novalidate屬性的應用</title> <script type="text/javascript" src="html5shiv.min.js"></script> </head> <body> <form action="" method="get" novalidate="novalidate" autocomplete="on"> <fieldset> <legend align="center">個人基本資訊</legend> 姓名:<input type="text" name="name" /><br /> 郵箱: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <p>請填寫並提交此表單，然後過載頁面，來檢視自動完成功能是如何工作的。</p> <p>請注意，表單的自動完成功能是開啟的，而e-mail 域是關閉的。</p> </body> </html>
-
HTML 表單元素(複習)
- <input> 元素(最重要的元素)根據不同的 type 屬性，可以變化為多種形態。
- <select> 元素(下拉列表)。
- <option> 元素定義待選擇的選項。
- <textarea> 元素。
- <button> 元素。
HTML5新增表單元素
- <datalist>：定義選項列表，與input元素配合使用。用來定義input可能的值。
- <keygen>：定義用於表單的金鑰對生成器欄位。
- <output>：定義不同型別的輸出，如指令碼的輸出。
小結
- hgroup標記。
- figure標記與figcaption標記。
- mark標記與time標記。
- details標記與summary標記。