我們傾向于使用html與css、JAVAScript等，使我們的網(wǎng)站或博客看起來更有吸引力，但你知道僅HTML就有很多實用的秘密，可能會派上用場，幫助你設(shè)計一個華麗的網(wǎng)站?
下面是一些很酷的HTML技巧，你可以用它來建立一個真正的動態(tài)網(wǎng)站。
技巧1. Image Maps
image map基本上是具有可點擊區(qū)域的圖像。我們可以使用該可點擊區(qū)域鏈接到網(wǎng)頁的其他部分、文檔或新鏈接。
好吧，并不是每個人都知道<map>area>元素并在<map>元素中提及其對應(yīng)的 XY 坐標(biāo)。
下面是一個例子，你的網(wǎng)站訪問者可以在點擊世界地圖的不同大洲時了解你在全球的業(yè)務(wù)。
<h1 style="text-align:center;">World Map</h1>
<h4 style="text-align:center;">? Click on the dots in the map to get respective continent information</h4>
<map name="continents_map">
<area shape="circle" coords="70,70,10" href="https://en.wikipedia.org/wiki/North_America">
<area shape="circle" coords="133,185,10" href="https://en.wikipedia.org/wiki/South_America">
<area shape="circle" coords="270,137,10" href="https://en.wikipedia.org/wiki/Africa">
<area shape="circle" coords="292,44,10" href="https://en.wikipedia.org/wiki/Europe">
<area shape="circle" coords="469,201,10"
href="https://en.wikipedia.org/wiki/Australia">
<area shape="circle" coords="374,65,10" href="https://en.wikipedia.org/wiki/Asia">
<area shape="circle" coords="340,267,10" href="https://en.wikipedia.org/wiki/Antarctica">
</map>
<figure style="text-align:center;">
<img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />
</figure>
技巧2：Icon Adder
Icon Adder基本上是指使用圖標(biāo)代替網(wǎng)站圖標(biāo)。
你只需要在body標(biāo)簽內(nèi)的link標(biāo)簽中包含你的源圖像文件的路徑鏈接。
<!DOCTYPE html>
<html>
<head>
<title>Icon Adder</title>
<meta name="theme-color" content="green;">
<link rel="icon" href="download.jpg"
type="image/x-icon"/>
<style>
.contAIner {
text-align: left;
}
h1 {
color: darkred;
}
</style>
</head>
<body>
<div class="container">
<h1>Hi, I am NISHI KASHYAP!!</h1>
<b>You can see the icon adder above in place of the favicon.</b>
</div>
</body>
</html>
技巧3：允許用戶選擇背景顏色
使用此技巧，網(wǎng)站訪問者只需將鼠標(biāo)指針拖到書面文本的某些字母上即可更改其網(wǎng)頁的背景顏色。
例子：在這種情況下，訪問者可以通過將鼠標(biāo)指針拖到“Drag Your Mouse Over Letters To Change Colors!”的文字上來改變顏色。
<center>
<a href="" onmouseover="document.bgColor='turquoise'">D</a>
<a href="" onmouseover="document.bgColor='pink'">r</a>
<a href="" onmouseover="document.bgColor='blue'">a</a>
<a href="" onmouseover="document.bgColor='red'">g</a>
<a href="" onmouseover="document.bgColor='yellow'">Y</a>
<a href="" onmouseover="document.bgColor='green'">o</a>
<a href="" onmouseover="document.bgColor='white'">u</a>
<a href="" onmouseover="document.bgColor='teal'">r</a>
<a href="" onmouseover="document.bgColor='olivedrab'">M</a>
<a href="" onmouseover="document.bgColor='green'">o</a>
<a href="" onmouseover="document.bgColor='seagreen'">u</a>
<a href="" onmouseover="document.bgColor='magenta'">s</a>
<a href="" onmouseover="document.bgColor='fusia'">e</a>
<a href="" onmouseover="document.bgColor='purple'">O</a>
<a href="" onmouseover="document.bgColor='navy'">v</a>
<a href="" onmouseover="document.bgColor='green'">e</a>
<a href="" onmouseover="document.bgColor='white'">r</a>
<a href="" onmouseover="document.bgColor='royalblue'">L</a>
<a href="" onmouseover="document.bgColor='Skyblue'">e</a>
<a href="" onmouseover="document.bgColor='almond'">tt</a>
<a href="" onmouseover="document.bgColor='coral'">e</a>
<a href="" onmouseover="document.bgColor='brown'">r</a>
<a href="" onmouseover="document.bgColor='almond'">s</a>
<a href="" onmouseover="document.bgColor='coral'">To</a>
<a href="" onmouseover="document.bgColor='olivedrab'">C</a>
<a href="" onmouseover="document.bgColor='teal'">h</a>
<a href="" onmouseover="document.bgColor='pink'">a</a>
<a href="" onmouseover="document.bgColor='blue'">n</a>
<a href="" onmouseover="document.bgColor='red'">g</a>
<a href="" onmouseover="document.bgColor='yellow'">e</a>
<a href="" onmouseover="document.bgColor='green'">C</a>
<a href="" onmouseover="document.bgColor='olivedrab'">ol</a>
<a href="" onmouseover="document.bgColor='black'">or!</a>
</center>
輸出
技巧4：添加Title Tooltip
Tooltip是“HTML中使用的一個概念，用于顯示關(guān)于特定選定元素的一些額外信息”。
這個技巧基本上顯示了當(dāng)訪問者將鼠標(biāo)指針懸停在一個元素上時，網(wǎng)站創(chuàng)建者提供的額外信息。
語法：
<span title="Can you see this? This is the tooltip.:)">Drag Your Mouse Over Me!</span>
輸出：
技巧5：語音識別
此功能類似于您在 google 搜索文本框中看到的功能，其中語音識別功能可幫助您將句子放入輸入字段。
當(dāng)你使用語音識別輸入時，在輸入字段的邊上會有一個小的麥克風(fēng)圖標(biāo)顯示，當(dāng)訪問者點擊該語音圖標(biāo)時，他們的聲音會被記錄下來并作為用戶的輸入。
為此，您只需將 x-webkit-speech 屬性添加到輸入框。
<input type="text" x-webkit-speech />
讓我給你看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>Voice Recognition</title>
<style>
.container {
text-align: center;
}
h1 {
color: darkred;
}
</style>
</head>
<body>
<div class="container">
<h1>Voice Recognition Field</h1>
<input type="text" x-webkit-speech>
<i><br><br>The above field accepts the input as a Voice.<i>
</div>
</body>
</html>
輸出，然而，在實時服務(wù)器中，你會看到這個：
但當(dāng)你從其他瀏覽器查看時，你也會看到輸入欄中的麥克風(fēng)圖標(biāo)，用戶可以通過它輸入語音。
技巧6：隱藏字段
能夠公開查看內(nèi)部字段被Reddit士兵稱為“編程恐怖”——毫無疑問，沒有人想在自己的網(wǎng)站上體驗這種恐怖。
但是這個問題可以通過使用HTML的隱藏字段特性來解決。
一個隱藏字段可以讓web開發(fā)人員控制哪些數(shù)據(jù)可以被修改，哪些數(shù)據(jù)不能被修改，以及當(dāng)用戶提交表單時需要更新的記錄。
語法：
<input type="hidden">
它是這樣工作的：
<!DOCTYPE html>
<html>
<head>
<title>Hide Field</title>
<style>
h1 {
color: darkred;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>HIDE FIELD</h1>
<form action="#">
<input type="hidden" id="myFile" value="1234">
Name: <input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
從上面的代碼中，結(jié)果輸出將是一個訪問者無法看到的隱藏字段。
輸出：
技巧7：輸入建議
此功能基本上提供了一個預(yù)定義選項的下拉列表，使訪問者更容易找到他們正在尋找的內(nèi)容。
示例：下面的代碼讓訪問者從下拉列表中找到不同大陸的名稱，并將其用作輸入。
<!DOCTYPE html>
<html>
<head>
<title>Input Suggestions</title>
</head>
<body>
<h1>Choose the Continent</h1>
<input type="text" list="text_editors">
<datalist id="text_editors">
<option value="Africa"></option>
<option value="Asia"></option>
<option value="North America"></option>
<option value="South America"></option>
<option value="Antarctica"></option>
<option value="Europe"></option>
<option value="Australia"></option>
</datalist>
</body>
</html>
輸出：
