HTML、HTML5重難點

、XHTML與HTML的區(qū)別

文檔結構

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態(tài)資源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

? ?/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數據。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用于用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數據的兩個對象為：

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數據：localStorage.setItem(key,value);

讀取數據：localStorage.getItem(key);

刪除單個數據：localStorage.removeItem(key);

刪除所有數據：localStorage.clear();

得到某個索引的key：localStorage.key(index);

四、HTML5 應用程序緩存

HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里

五、HTML5 服務器發(fā)送事件（Server-Sent Events）

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發(fā)送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結果等。

所有主流瀏覽器均支持服務器發(fā)送事件，除了 Internet Explorer。

<h1>獲取服務端更新數據</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節(jié)省服務器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：.

七、HTTP狀態(tài)消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務器錯誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。

HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。

web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態(tài)信息以及可能被請求的內容。

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的：

/test/demo_form.php?name1=value1&name2=value2

有關 GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應在處理敏感數據時使用

GET 請求有長度限制

GET 請求只應當用于取回數據

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的：

有關 POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數據長度沒有要求

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

文由掘金@天行天忌授權發(fā)布，前端晚間課對其內容進行微改。

HTML，超文本標記語言，是一種用于創(chuàng)建網頁的標準標記語言。自從引入 HTML 以來，它就一直用于構建互聯網。與 JavaScript 和 CSS 一起，HTML 構成前端開發(fā)的三劍客。

盡管許多新技術使網站創(chuàng)建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標記語言發(fā)生了很多變化，變得更加友好，瀏覽器對新標準的支持熱度也越來越高。而HTML并不止于此，還在不斷發(fā)生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。

支持原生模式

該元素<dialog> 將隨 HTML6 一起提供。它被認為等同于用 JavaScript 開發(fā)的模態(tài)，并且已經標準化，但只有少數瀏覽器完全支持。但這種現象會改變，很快它將在所有瀏覽器中得到支持。

這個元素在其默認格式下，只會將光標顯示在它所在的位置上，但可以使用 JavaScript 打開模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="確定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默認形式下，該元素創(chuàng)建一個灰色背景，其下方是非交互式內容。

可以在 <dialog> 其中的表單上使用一種方法，該方法將發(fā)送值并將其傳遞回自身 <dialog>。

總的來說，這個標簽在用戶交互和改進的界面中變得有益。

可以通過更改 <dialog> 標簽的 open 屬性以控制打開和關閉。

<dialog open>
  <p>組件內容</p>
</dialog>

沒有 JavaScript 的單頁應用程序

FutureClaw 雜志主編 Bobby Mozumder 建議：

將錨元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然后瀏覽器將 DOM 元素替換為根據需要加載的任何數據。初始數據（以及標準錯誤響應）可以放在標題裝置中，如果需要，可以稍后替換。

據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 JavaScript。

這個是一個比較有意思的提案，就有點類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數據，不一樣的是變成瀏覽器來默認解析，瀏覽器內部加載數據到新的數據結構中，然后瀏覽器將按需加載到的數據替換成 DOM 元素。

大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應用”引發(fā)的論戰(zhàn)》，了解更多！

https://www.infoq.cn/article/2015/03/html6-without-javascript

自由調整圖像大小

HTML6 愛好者相信即將到來的更新將允許瀏覽器調整圖像大小以獲得更好的觀看體驗。

每個瀏覽器都難以呈現相對于設備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標簽 img 在處理這個問題時不是很有效。

這個問題可以通過一個新標簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進行選擇的工作變得更加容易。

專用庫

將可用庫引入 HTML6 絕對是提高開發(fā)效率的重要一步。

微格式

很多時候，需要在互聯網上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數據的標準。微格式可以增強設計者的能力，并可以減少搜索引擎推斷公共信息所需的努力。

自定義菜單

盡管標簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標簽將是一個不錯的選擇。

這就是創(chuàng)建標簽 <menu> 的驅動力，它可以處理按鈕驅動的列表元素。

<menu type="toolbar">
  <li><button>個人信息</button></li>
  <li><button>系統(tǒng)設置</button></li>
  <li><button>賬號注銷</button></li>
</menu>

因此 <menu>，除了能夠像普通列表一樣運行之外，還可以增強 HTML 列表的功能。

增強身份驗證

雖然HTML5在安全性方面還不錯，瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗證。使用嵌入式密鑰而不是 cookie，使數字簽名更好等。

集成攝像頭

HTML6 允許以更好的方式使用設備上的相機和媒體。將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他屬性。

總結

沒有什么是完美的，HTML 也不是完美的，所以 HTML 規(guī)范可以做很多事情來使它更好。應該對一些有用的規(guī)范進行標準化，以增強 HTML 的能力。小的變化已經開始推出。如增強藍牙支持、p2p 文件傳輸、惡意軟件保護、云存儲集成，下一個 HTML 版本可以考慮一下。

著智能手機、平板電腦等移動終端設備越來越普及，用戶在移動端花的時間也越來越長。H5開始火熱起來，以文字、圖片、動畫、聲音等相結合的自媒體出現，給用戶帶來了全新體驗，技術本身帶來的新奇感讓人們心生向往。

下面我們就來聊一聊H5入門的一些知識吧！

什么是H5？

H5即HTML5，是指“HTML”的第5個版本，而“HTML”，則是指描述網頁的標準語言。因此，HTML5，是第5個版本的“描述網頁的標準語言”。

H5特性

H5 是 W3C 與 WHATWG 合作的結果，WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方決定進行合作，來創(chuàng)建一個新版本的 HTML。

H5 中的一些有趣的新特性：

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

H5的改進：

新元素

新屬性

完全支持 CSS3

Video 和 Audio

2D/3D 制圖

本地存儲

本地 SQL 數據

Web 應用

H5語義元素

H5瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法

<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->

載入后，初始化新標簽的CSS：

/*html5*/article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

H5代碼規(guī)范

1. HTML5 元素名可以使用大寫和小寫字母。

但推薦你使用小寫字母：

混合了大小寫的風格是非常糟糕的。

開發(fā)人員通常使用小寫 (類似 XHTML)。

小寫風格看起來更加清爽。

小寫字母容易編寫。

2. 在 HTML5 中, 你不一定要關閉所有元素(例如

元素)，但建議你每個元素都要添加關閉標簽。

3. HTML5 屬性值可以不用引號。

屬性值我們推薦使用引號:

如果屬性值含有空格需要使用引號。

混合風格不推薦的，建議統(tǒng)一風格。

屬性值使用引號易于閱讀。

4. 圖片通常使用 alt 屬性。在圖片不能顯示時，它能替代圖片顯示。

5. 等號前后可以使用空格。

6. 使用 HTML 編輯器，左右滾動代碼是不方便的。

每行代碼盡量少于 80 個字符。

7. 不要無緣無故添加空行。

為每個邏輯功能塊添加空行，這樣更易于閱讀。

縮進使用兩個空格，不建議使用 TAB。

比較短的代碼間不要使用不必要的空行和縮進。

8. 樣式表使用簡潔的語法格式：

將左花括號與選擇器放在同一行。

左花括號與選擇器間添加一個空格。

使用兩個空格來縮進。

冒號與屬性值之間添加一個空格。

逗號和符號之后使用一個空格。

每個屬性與值結尾都要使用分號。

只有屬性值包含空格時才使用引號。

右花括號放在新的一行。

每行最多 80 個字符。

多年開發(fā)老碼農福利贈送：網頁制作，網站開發(fā)，web前端開發(fā)，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

在線咨詢

上一篇：Javascript在線刷題輸入輸出模板，學編程為什
下一篇：電商代碼：天貓輪播代碼的基本構造詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商