整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本文中，我列出了十個我過去沒用過的HTML5功能，但現(xiàn)在發(fā)現(xiàn)它們很有用，廢話不多說，讓我們開始吧。
<details>標簽向用戶提供按需查看詳細信息的效果。如果需要按需向用戶顯示內(nèi)容，簡單的做法就是使用此<details>標簽。默認情況下，它是收起來的，打開后，它將展開并顯示被隱藏的內(nèi)容。
事例：
<details>
<summary>Click Here to get the user details</summary>
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Location</th>
<th>Job</th>
</tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Huston</td>
<td>UI/UX</td>
</tr>
</table>
</details>
運行結(jié)果：
在 GitHub Readme 中使用它來顯示按需的詳細信息。這是一個示例https://github.com/atapas/notifyme#properties
contenteditable是可以在元素上設(shè)置以使內(nèi)容可編輯的屬性。它適用于DIV，P，UL等元素。
注意，當在元素上沒有設(shè)置contenteditable屬性時，它將從其父元素繼承該屬性。
<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Milk </li>
<li> 2. Bread </li>
<li> 3. Honey </li>
</ul>
運行結(jié)果：
可以讓span或div標簽可編輯，并且可以使用css樣式向其添加任何豐富的內(nèi)容。這將比使用輸入字段處理它更好。試試看！
HTML <map> 屬性 與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區(qū)域)。可點擊的區(qū)域可以是這些形狀中的任何一個，矩形，圓形或多邊形區(qū)域。如果不指定任何形狀，則會考慮整個圖像。
事例：
<div>
<img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
<map name="circusmap">
<area shape="rect" coords="67,114,207,254" href="elephant.htm">
<area shape="rect" coords="222,141,318, 256" href="lion.htm">
<area shape="rect" coords="343,111,455, 267" href="horse.htm">
<area shape="rect" coords="35,328,143,500" href="clown.htm">
<area shape="circle" coords="426,409,100" href="clown.htm">
</map>
</div>
運行結(jié)果：
map有其自身的缺點，但是你可以將其用于視覺演示。
<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
運行結(jié)果：
可以使用css更改高亮顏色:
mark {
background-color: green;
color: #FFFFFF;
}
data-*屬性用于存儲頁面或應(yīng)用程序?qū)Ｓ玫淖远x數(shù)據(jù)。可以在 JavaScript 代碼中使用存儲的數(shù)據(jù)來創(chuàng)建更多的用戶體驗。
data-*屬性由兩部分組成
事例：
<h2> Know data attribute </h2>
<div
class="data-attribute"
id="data-attr"
data-custom-attr="You are just Awesome!">
I have a hidden secret!
</div>
<button onclick="reveal()">Reveal</button>
在 JS 中：
function reveal() {
let dataDiv = document.getElementById('data-attr');
let value = dataDiv.dataset['customAttr'];
document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
**注意：**要在 JS 中讀取這些屬性的值，可以通過getAttribute('data-custom-attr')g來獲取，但是標準方式是用dataset來獲取。
你可以使用它在頁面中存儲一些數(shù)據(jù)，然后使用REST調(diào)用將其傳遞給服務(wù)器。
<output> 標簽表示計算或用戶操作的結(jié)果。
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
如果要在客戶端 JS 中執(zhí)行任何計算，并且希望結(jié)果反映在頁面上，可以使用<output>,這樣就無需使用getElementById()獲取元素的額外步驟。
<datalist>元素包含了一組<option>元素，這些元素表示其它表單控件可選值.
事例：
<form action="" method="get">
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
dataList的表現(xiàn)很像是一個select下拉列表，但它只是提示作用，并不限制用戶在input輸入框里輸入什么
select標簽創(chuàng)建了一個菜單。菜單里的選項通option標簽指定。一個select元素內(nèi)部，必須包含一個option元素，
總的來說就是，它們都可以顯示出一個下拉表單框，但是select標簽只能在它提供的選項中選擇，而datalist不僅可以讓你選擇，還可以讓你自己輸入其它的選項。
range是一種 input 類型，給定一個滑塊類型的范圍選擇器。
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
<meter>元素用來顯示已知范圍的標量值或者分數(shù)值。
<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>
<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>
不要將<meter>用作進度條來使用，進度條對應(yīng)的<Progress> 標簽。
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
對于input標簽類型，最常見的有 text，password 等等，下面列舉一些比較少見的語法。
要求輸入字段必填。
<input type="text" id="username1" name="username" required>
文本輸入字段被設(shè)置為當頁面加載時獲得焦點：
<input type="text" id="username2" name="username" required autofocus>
可以使用regex指定一個模式來驗證輸入。
<input type="password"
name="password"
id="password"
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
一個簡單的顏色選擇器。
<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint
原文：https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0
TML5 對于初學者甚至是非程序員來說都有著十足的吸引力。實際上，只要你訪問網(wǎng)站，就會和 HTML 打交道。如果能夠熟悉一些關(guān)鍵的編程技巧，當你對網(wǎng)站做一些細節(jié)調(diào)整或優(yōu)化基本的 Web 元素時就能節(jié)省大量的時間（甚至是金錢）。因此，本文精選了 10 個對于 Web 開發(fā)者來說非常實用的 HTML 編程技巧，而且它們不需要花太多時間精力就可以輕松掌握。
1. 可與本地緩存媒體資源交互
HTML5 FileSystem API 一開始被認為是 AppCache 的替代方案，用來實現(xiàn)資產(chǎn)的動態(tài)緩存。但是你知道嗎，其實你還可以用它來實現(xiàn)與用戶本地設(shè)備上存儲文件的交互。
例如，你可以在應(yīng)用中添加以下功能：
注意：FileSystem API 僅被 Chrome 支持。
如果你想嘗試離線存儲功能，還可以參考以下資源和代碼教程：
2. 進行自動表單驗證
對于網(wǎng)站安全性和流暢的用戶體驗來說，表單驗證非常重要。所以我們應(yīng)該讓用戶更輕松地在你的網(wǎng)站上輸入各種正確類型的值。
在 HTML5 中有幾種新的輸入類型可用，這些類型已經(jīng)打包進了預定義的驗證功能：
但當你需要用戶提供某些標準輸入未指定的數(shù)據(jù)時（例如一個包含特殊字符的用戶名），往往就會出問題了。這就是“pattern”屬性派上用場的時候。
Pattern 可讓你定義自定義規(guī)則，然后使用正則表達式（RegEx）驗證表單輸入。RegEx 指定了<input>元素值將要檢查的表達式。
下面是一個添加新規(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 的選擇器，可讓你為標準 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 標簽創(chuàng)建自定義組合，然后按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
4. 實現(xiàn)更優(yōu)的視頻傳輸
使用 video 標簽，可以將支持視頻播放的媒體播放器無縫嵌入到網(wǎng)頁中。
你可以選擇：
此外，你必須為視頻指定“控件”（例如播放、暫停和音量調(diào)節(jié)），否則用戶將沒有任何控件可用。這里的示例代碼如下：
<video width="768"?height="432"?autoplay>
<source?src="video.mp4"?type="video/mp4">
</video>為了進一步改善觀看體驗，你還可以嘗試使用以下屬性：
你可以在這個 HTML 速查表 [7] 中找到更多使用方便的多媒體文件標簽。
5. 改善圖像的顯示方式
<picture>標簽有助于優(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>標簽包含兩個附加子元素：
要啟用其他樣式選項，請將以下屬性添加到<source>元素：
<img>元素可用來確保在不支持<picture>元素的瀏覽器中正確顯示圖像。
6. 提升首屏頁面的加載速度
如果你希望你的網(wǎng)站在搜索結(jié)果中獲得靠前的排名，并提供出色的用戶體驗，那么就需要重點關(guān)注頁面的加載速度。
但是，要在 Google Page Insights 中拿到高分并不是那么容易。雖然這一工具的確會標出你的網(wǎng)站上應(yīng)該修復的內(nèi)容，但是對于從頭開始對網(wǎng)站進行編碼的人們并沒有提供明確的優(yōu)化指導。
谷歌對于首屏設(shè)計的官方建議 [8] 有些含糊不清：
所以我們來將其分解為更可操作的幾個步驟：
然后再次運行檢查任務(wù)，看看是否還有需要修復的內(nèi)容。
7. 網(wǎng)站加速
只要將 .zip 文件而不是 index.html 文件發(fā)送給瀏覽器，就可以節(jié)省大量帶寬和下載時間。
圖片來自 betterexplained[11]
要設(shè)置 .gzip 壓縮，你需要在 web 主機 / 服務(wù)器上找到 htaccess 文件，并使用以下代碼對其進行修改：
<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 進行 SEO
你可以使用 microdata 將額外的上下文編入網(wǎng)頁。然后，網(wǎng)絡(luò)爬蟲就可以從你的頁面中渲染微數(shù)據(jù)，并為用戶提供更好的瀏覽體驗，以更高的精確性對你的網(wǎng)站建立索引并為其提供更準確的搜索結(jié)果排名。
簡而言之，Microdata 由名稱 / 值（name/value）對組成，每一個項目（item）定義一組命名的屬性（property）。
9. 使用 HTML5 本地存儲代替 Cookie
Local Storage（也稱為 DOM 存儲）使你可以在本地存儲用戶數(shù)據(jù)，這樣就無需通過 HTTP 網(wǎng)絡(luò)請求發(fā)送數(shù)據(jù)了。它可以節(jié)省帶寬并提升數(shù)據(jù)存儲能力?？雌饋聿诲e吧？
但是有一個重要的警告：本地存儲僅能保存在客戶端，而 cookie 既可以保存在服務(wù)器端也可以在客戶端。因此，如果你的網(wǎng)站使用了服務(wù)器端的 Cookie 來基于已知的用戶首選項自定義內(nèi)容，則遷移到本地存儲可能就需要重大的架構(gòu)更改工作了。
但在比較簡單的情況下（例如你使用 Cookie 來存儲一些基本設(shè)置），本地存儲可能是一個很好的替代品，尤其是在網(wǎng)絡(luò)連接質(zhì)量較差的區(qū)域。另外請記住，本地存儲對于高敏感數(shù)據(jù)（例如財務(wù)信息）可能不是理想的選擇，并且建議你對本地存儲的所有數(shù)據(jù)都進行額外的加密。
Jenkov 詳細介紹了如何設(shè)置和配置 HTML5 本地存儲 [13]。
10. 編寫有編號項目的降序列表
文章最后介紹一個非常簡單的技巧：你可以使用<reversed>屬性添加降序列表替代升序列表。
下面是一個示例代碼片段：
<ol?reversed>
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>聽起來可能沒有多大意義，但是當你想在頁面中添加一些時髦的樣式時，它可能就會派上用場了。
小結(jié)
現(xiàn)在你應(yīng)該掌握了這 10 個新的 HTML5 技巧和竅門，它們應(yīng)該可以幫助你構(gòu)建更快、更人性化和更有吸引力的網(wǎng)站。不過千萬要記得，在開始實驗之前先對你的網(wǎng)站進行備份！
原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw
作者：前端工匠
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
