前端一班：HTML5當天學習總結-摘抄張果博客園

時間 2019-11-17

標籤前端一班 html5 html 當天學習總結摘抄博客欄目 HTML5 简体版

原文原文鏈接

1、初步瞭解HTML5，相關涉及技術以及行業前景

2、HTML5特性

HTML5 八個特性類別對應的8個Logo
語義化、離線&存儲、設備訪問、通訊
多媒體、圖形和特效、性能和集成、呈現（CSS3）web

1）語義化：使標籤更有意義瀏覽器

2）本地存儲特性（Class: OFFLINE & STORAGE）安全

HTML5 APP Cache、本地存儲功能、IndexedDB、FileAPIruby

3）設備訪問特性 (Class: DEVICE ACCESS)服務器

爲移動開發而生。重力感應、全球地理定位、麥克風、攝像頭網絡

4）鏈接特性（Class: CONNECTIVITY）app

WebSocket、Server-Sent Events實現雙向鏈接，消息推送框架

5）網頁多媒體特性( Class: MULTIMEDIA）socket

支持網頁端的Audio、Video等多媒體功能。ide

6）三維、圖形及特效特性（Class: 3D, Graphics & Effects）

這一招將Flash戰勝，圖形加強，SVG，Canvas，WebGL，2D/3D遊戲和頁面視覺特效。

7）性能與集成特性（Class: Performance & Integration）

沒有用戶會永遠等待你的Loading，HTML5增長WebWorker、XMLHttpRequest2

8）呈現（CSS3/styling)

除了DOM接口，HTML5增長了更多樣化的應用程序接口（API）：

1.五、HTML5優勢與缺點

1.5.一、優勢

一、網絡標準統1、HTML5自己是由W3C推薦出來的。
二、多設備、跨平臺
三、即時更新。
四、提升可用性和改進用戶的友好體驗；
五、有幾個新的標籤，這將有助於開發人員定義重要的內容；
六、能夠給站點帶來更多的多媒體元素(視頻和音頻)；
七、能夠很好的替代Flash和Silverlight；
八、涉及到網站的抓取和索引的時候，對於SEO很友好；
九、被大量應用於移動應用程序和遊戲。

1.5.二、缺點

a)、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b)、完善性：許多特性各瀏覽器的支持程度也不同。
c)、技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d)、性能：某些平臺上的引擎問題致使HTML5性能低下。
e)、瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒。

1.八、HTML5語法規則與文檔聲明

1.8.一、語法規則

a)、標籤要小寫
屬性值不加" "或 ' '
b)、能夠省略某些標籤
HTML body head tbody
c)、能夠省略某些結束標籤
tr td li
d)、單標籤不用加結束標籤
img input
e)、廢除的標籤，看第二點
font center big

1.8.二、文檔聲明

<!DOCTYPE> 聲明必須位於 HTML5 文檔中的第一行，也就是位於 <HTML> 標籤以前。該標籤告知瀏覽器文檔所使用的 HTML 規範。
doctype 聲明不屬於 HTML 標籤，它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在全部 HTML 文檔中規定 doctype 是很是重要的，這樣瀏覽器就能瞭解預期的文檔類型。
HTML 4.01 中的 doctype 須要對 DTD 進行引用，由於 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，所以不須要對 DTD 進行引用。

1.8.二、文檔聲明

2、廢棄的標籤

如下的 HTML 4.01 元素在HTML5中已經被刪除，雖然瀏覽器爲了兼容性考慮都還支持這些標籤，但建議使用新的替代標籤，矛盾的是老瀏覽器對新標籤的支持度又不夠，視項目的受衆對象而定了。

2.一、能用CSS代替的元素

這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是爲頁面展現用的，表現的內容應該由CSS完成。

2.二、frame框架

這些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

2.三、只有部分瀏覽器支持的元素

這些元素包含applet、bgsound、blink、marquee等標籤。

2.四、其餘被廢除的元素

廢除rb，使用ruby替代
廢除acronym使用abbr替代
廢除dir使用ul替代
廢除isindex使用form與input相結合的方式替代
廢除listing使用pre替代
廢除xmp使用code替代
廢除nextid使用guids
廢除plaintex使用「text/plian」（無格式正文）MIME類型替代

3、新增的標籤

3.一、新增的結構標籤

在HTML4.01中div被普遍用於各類佈局環境在，沒有明確的定義，HTML5爲了SEO將div語義化了，新增長結構標籤以下：

a)、section元素
表示頁面中的一個內容區塊,好比章節、頁眉、頁腳或頁面的其餘部分。能夠和h一、 h2……等元素結合起來使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素
表示頁面中一塊與上下文不相關的獨立內容。好比一篇文章。

c)、aside元素
表示article元素內容以外的、與article元素內容相關的輔助信息。

d)、header元素
表示頁面中一個內容區塊或真個頁面的標題。

e)、hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

f)、footer元素
表示整個頁面或頁面中一個內容區塊的腳註。通常來講，他會包含創做者的姓名、創做日期以及創做者的聯繫信息。

g)、nav元素
表示頁面中導航連接的部分。

h)、figure元素
表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元。使用figcaption元素爲figure元素組添加標題。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常寫做
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

案例：參考做業（完成基本的語義化佈局）