整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5 對于初學(xué)者甚至是非程序員來說都有著十足的吸引力。實際上，只要你訪問網(wǎng)站，就會和 HTML 打交道。如果能夠熟悉一些關(guān)鍵的編程技巧，當(dāng)你對網(wǎng)站做一些細(xì)節(jié)調(diào)整或優(yōu)化基本的 Web 元素時就能節(jié)省大量的時間（甚至是金錢）。因此，本文精選了 10 個對于 Web 開發(fā)者來說非常實用的 HTML 編程技巧，而且它們不需要花太多時間精力就可以輕松掌握。
1. 可與本地緩存媒體資源交互
HTML5 FileSystem API 一開始被認(rèn)為是 AppCache 的替代方案，用來實現(xiàn)資產(chǎn)的動態(tài)緩存。但是你知道嗎，其實你還可以用它來實現(xiàn)與用戶本地設(shè)備上存儲文件的交互。
例如，你可以在應(yīng)用中添加以下功能：
注意：FileSystem API 僅被 Chrome 支持。
如果你想嘗試離線存儲功能，還可以參考以下資源和代碼教程：
2. 進(jìn)行自動表單驗證
對于網(wǎng)站安全性和流暢的用戶體驗來說，表單驗證非常重要。所以我們應(yīng)該讓用戶更輕松地在你的網(wǎng)站上輸入各種正確類型的值。
在 HTML5 中有幾種新的輸入類型可用，這些類型已經(jīng)打包進(jìn)了預(yù)定義的驗證功能：
但當(dāng)你需要用戶提供某些標(biāo)準(zhǔn)輸入未指定的數(shù)據(jù)時（例如一個包含特殊字符的用戶名），往往就會出問題了。這就是“pattern”屬性派上用場的時候。
Pattern 可讓你定義自定義規(guī)則，然后使用正則表達(dá)式（RegEx）驗證表單輸入。RegEx 指定了<input>元素值將要檢查的表達(dá)式。
下面是一個添加新規(guī)則的示例。例如，你要指定密碼不應(yīng)超過 15 個字符，并且只能包含小寫字母：
<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}">
<input?type="submit">
</form>為了更好地說明規(guī)則，你還可以添加一條自定義消息，告訴用戶為什么他們輸入的密碼不符合要求。只需再加上一行來自定義彈出消息即可：
<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}"?title="One to fifteen characters, lowercase only".>>
<input?type="submit">
</form>3. 為 HTML5 代碼元素創(chuàng)建縮寫
Emmet[4] 是一個很好用的文本編輯器插件，可以簡化你的 HTML/CSS 編碼流程。這個工具使用的語法類似于 CSS 的選擇器，可讓你為標(biāo)準(zhǔn) HTML 代碼元素創(chuàng)建各種縮寫。
下面是一個例子。如果你輸入：
div#header>h1.logo>a{website}則會收到：
<div?id="header">
<h1?class="logo"><a?href="">website</a></h1>
</div>你可以使用 cheat sheet[5] 中的多種已有組合，也可以為任意 HTML 標(biāo)簽創(chuàng)建自定義組合，然后按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
4. 實現(xiàn)更優(yōu)的視頻傳輸
使用 video 標(biāo)簽，可以將支持視頻播放的媒體播放器無縫嵌入到網(wǎng)頁中。
你可以選擇：
此外，你必須為視頻指定“控件”（例如播放、暫停和音量調(diào)節(jié)），否則用戶將沒有任何控件可用。這里的示例代碼如下：
<video width="768"?height="432"?autoplay>
<source?src="video.mp4"?type="video/mp4">
</video>為了進(jìn)一步改善觀看體驗，你還可以嘗試使用以下屬性：
你可以在這個 HTML 速查表 [7] 中找到更多使用方便的多媒體文件標(biāo)簽。
5. 改善圖像的顯示方式
<picture>標(biāo)簽有助于優(yōu)化圖像的顯示方式。
它通常用于：
示例：
<picture>
<source?media="(min-width: 846px)"?srcset="img_1.jpg">
<source?media="(min-width: 300 px)"?srcset="img_2.jpg">
<img?src="img_3.jpg"?alt="logo">
</picture><picture>標(biāo)簽包含兩個附加子元素：
要啟用其他樣式選項，請將以下屬性添加到<source>元素：
<img>元素可用來確保在不支持<picture>元素的瀏覽器中正確顯示圖像。
6. 提升首屏頁面的加載速度
如果你希望你的網(wǎng)站在搜索結(jié)果中獲得靠前的排名，并提供出色的用戶體驗，那么就需要重點關(guān)注頁面的加載速度。
但是，要在 Google Page Insights 中拿到高分并不是那么容易。雖然這一工具的確會標(biāo)出你的網(wǎng)站上應(yīng)該修復(fù)的內(nèi)容，但是對于從頭開始對網(wǎng)站進(jìn)行編碼的人們并沒有提供明確的優(yōu)化指導(dǎo)。
谷歌對于首屏設(shè)計的官方建議 [8] 有些含糊不清：
所以我們來將其分解為更可操作的幾個步驟：
然后再次運行檢查任務(wù)，看看是否還有需要修復(fù)的內(nèi)容。
7. 網(wǎng)站加速
只要將 .zip 文件而不是 index.html 文件發(fā)送給瀏覽器，就可以節(jié)省大量帶寬和下載時間。
圖片來自 betterexplained[11]
要設(shè)置 .gzip 壓縮，你需要在 web 主機 / 服務(wù)器上找到 htaccess 文件，并使用以下代碼對其進(jìn)行修改：
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include?file?.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>如果這樣做不起作用，請參考下面這些針對不同 web 服務(wù)器類型的教程：
8. 利用 Microdata 進(jìn)行 SEO
你可以使用 microdata 將額外的上下文編入網(wǎng)頁。然后，網(wǎng)絡(luò)爬蟲就可以從你的頁面中渲染微數(shù)據(jù)，并為用戶提供更好的瀏覽體驗，以更高的精確性對你的網(wǎng)站建立索引并為其提供更準(zhǔn)確的搜索結(jié)果排名。
簡而言之，Microdata 由名稱 / 值（name/value）對組成，每一個項目（item）定義一組命名的屬性（property）。
9. 使用 HTML5 本地存儲代替 Cookie
Local Storage（也稱為 DOM 存儲）使你可以在本地存儲用戶數(shù)據(jù)，這樣就無需通過 HTTP 網(wǎng)絡(luò)請求發(fā)送數(shù)據(jù)了。它可以節(jié)省帶寬并提升數(shù)據(jù)存儲能力。看起來不錯吧？
但是有一個重要的警告：本地存儲僅能保存在客戶端，而 cookie 既可以保存在服務(wù)器端也可以在客戶端。因此，如果你的網(wǎng)站使用了服務(wù)器端的 Cookie 來基于已知的用戶首選項自定義內(nèi)容，則遷移到本地存儲可能就需要重大的架構(gòu)更改工作了。
但在比較簡單的情況下（例如你使用 Cookie 來存儲一些基本設(shè)置），本地存儲可能是一個很好的替代品，尤其是在網(wǎng)絡(luò)連接質(zhì)量較差的區(qū)域。另外請記住，本地存儲對于高敏感數(shù)據(jù)（例如財務(wù)信息）可能不是理想的選擇，并且建議你對本地存儲的所有數(shù)據(jù)都進(jìn)行額外的加密。
Jenkov 詳細(xì)介紹了如何設(shè)置和配置 HTML5 本地存儲 [13]。
10. 編寫有編號項目的降序列表
文章最后介紹一個非常簡單的技巧：你可以使用<reversed>屬性添加降序列表替代升序列表。
下面是一個示例代碼片段：
<ol?reversed>
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>聽起來可能沒有多大意義，但是當(dāng)你想在頁面中添加一些時髦的樣式時，它可能就會派上用場了。
小結(jié)
現(xiàn)在你應(yīng)該掌握了這 10 個新的 HTML5 技巧和竅門，它們應(yīng)該可以幫助你構(gòu)建更快、更人性化和更有吸引力的網(wǎng)站。不過千萬要記得，在開始實驗之前先對你的網(wǎng)站進(jìn)行備份！
原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw
作者：前端工匠
TML5引入了應(yīng)用程序緩存，它允許我們將網(wǎng)頁資源緩存到用戶的設(shè)備上，以便在離線狀態(tài)下訪問，并且能夠更快地加載頁面。這種新方法提供了一種改進(jìn)用戶體驗的方式，無論是在網(wǎng)絡(luò)不穩(wěn)定的環(huán)境下還是在需要快速加載頁面的情況下。以下是一些常用的HTML5應(yīng)用程序緩存技術(shù)及其代碼示例：
1. 創(chuàng)建緩存清單
在HTML文件中創(chuàng)建一個清單文件，列出要緩存的資源。以下是一個示例清單文件：
```html
CACHE MANIFEST
# 版本號
CACHE MANIFEST VERSION 1
# 要緩存的資源
CACHE:
index.html
styles.css
script.js
image.jpg
# 在離線狀態(tài)下的回退頁面
FALLBACK:
/ offline.html
# 需要在線檢查更新的資源
NETWORK:
api.example.com```
2. 啟用應(yīng)用程序緩存
在HTML文件的`<html>`標(biāo)簽中添加`manifest`屬性，指定清單文件的URL。以下是一個啟用應(yīng)用程序緩存的示例代碼：
```html
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 網(wǎng)頁內(nèi)容 -->
</body>
</html>```
3. 更新緩存
通過更改清單文件的版本號或更新資源的URL來觸發(fā)緩存更新。瀏覽器將自動下載新的資源并更新緩存。
4. 離線訪問
一旦資源被緩存，用戶可以在離線狀態(tài)下訪問網(wǎng)頁。瀏覽器將從緩存中加載資源，而無需依賴于網(wǎng)絡(luò)連接。
通過使用HTML5應(yīng)用程序緩存，我們可以提供更好的用戶體驗，使網(wǎng)頁在離線狀態(tài)下也能正常工作，并且能夠更快地加載頁面。無論是創(chuàng)建緩存清單、啟用應(yīng)用程序緩存還是更新緩存，這種新方法為我們提供了更多的靈活性和便利性。記住，在使用HTML5應(yīng)用程序緩存時，要合理管理緩存的資源，并定期更新緩存以確保用戶獲得最新的內(nèi)容。
我是永不低頭的熊，喜歡美食、健身，當(dāng)然也喜歡寫代碼，每天不定時更新各類編程相關(guān)的文章，希望你在碼農(nóng)這條路上不再孤單！
、XHTML與HTML的區(qū)別
文檔結(jié)構(gòu)
XHTML DOCTYPE 是強制性的
<html>中的 XML namespace 屬性是強制性的
<html>、<head>、<title>以及 <body>也是強制性的
元素語法
XHTML 元素必須正確嵌套
XHTML 元素必須始終關(guān)閉
XHTML 元素必須小寫
XHTML 文檔必須有一個根元素
屬性語法
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號包圍
XHTML 屬性最小化也是禁止的
二、HTML5中一些新特性
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素，比如 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年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
三、HTML5web存儲
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.
數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。
瀏覽器支持：
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。
注意: Internet Explorer 7 及更早IE版本不支持web 存儲.
localStorage 和 sessionStorage
客戶端存儲數(shù)據(jù)的兩個對象為：
localStorage - 用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。
sessionStorage - 用于臨時保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。
在使用 web 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支持 web 存儲。
}不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
四、HTML5 應(yīng)用程序緩存
HTML5 -應(yīng)用程序緩存=>使用文章鏈接跳轉(zhuǎn)點這里
五、HTML5 服務(wù)器發(fā)送事件（Server-Sent Events）
Server-Sent 事件指的是網(wǎng)頁自動獲取來自服務(wù)器的更新。
以前也可能做到這一點，前提是網(wǎng)頁不得不詢問是否有可用的更新。通過服務(wù)器發(fā)送事件，更新能夠自動到達(dá)。
例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結(jié)果等。
所有主流瀏覽器均支持服務(wù)器發(fā)送事件，除了 Internet Explorer。
<h1>獲取服務(wù)端更新數(shù)據(jù)</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 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進(jìn)行通訊。
詳情和代碼示例：.
七、HTTP狀態(tài)消息
1xx: 信息
2xx: 成功
3xx: 重定向
4xx: 客戶端錯誤
5xx: 服務(wù)器錯誤
詳情
八、HTTP 方法：GET 對比 POST
兩種最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP ？
超文本傳輸協(xié)議（HTTP）的設(shè)計目的是保證客戶端與服務(wù)器之間的通信。
HTTP 的工作方式是客戶端與服務(wù)器之間的請求-應(yīng)答協(xié)議。
web 瀏覽器可能是客戶端，而計算機上的網(wǎng)絡(luò)應(yīng)用程序也可能作為服務(wù)器端。
舉例：客戶端（瀏覽器）向服務(wù)器提交 HTTP 請求；服務(wù)器向客戶端返回響應(yīng)。響應(yīng)包含關(guān)于請求的狀態(tài)信息以及可能被請求的內(nèi)容。
GET - 從指定的資源請求數(shù)據(jù)。
POST - 向指定的資源提交要被處理的數(shù)據(jù)。
GET 方法
請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的：
/test/demo_form.php?name1=value1&name2=value2有關(guān) GET 請求的其他一些注釋：
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用
GET 請求有長度限制
GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)
POST 方法
請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的：
有關(guān) POST 請求的其他一些注釋：
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請求對數(shù)據(jù)長度沒有要求
下面的表格列出了其他一些 HTTP 請求方法：
原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
