導讀	我們傾向於使用HTML與CSS、JavaScript等，使我們的網站或部落格看起來更有吸引力。下面是一些很酷的HTML技巧，你可以用它來建立一個真正的動態網站。

下面是一些很酷的HTML技巧，你可以用它來建立一個真正的動態網站。

技巧1. Image Maps

image map基本上是具有可點選區域的影像。我們可以使用該可點選區域連結到網頁的其他部分、文件或新連結。好吧，並不是每個人都知道。元素可以定義使用者可以單擊的影像區域。我們需要做的就是使用。元素並在元素中提及其對應的 XY 座標。
下面是一個例子，你的網站訪問者可以在點選世界地圖的不同大洲時瞭解你在全球的業務。

<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="
<area shape="circle" coords="133,185,10" href="
<area shape="circle" coords="270,137,10" href="
<area shape="circle" coords="292,44,10" href="
<area shape="circle" coords="469,201,10" 
href="
<area shape="circle" coords="374,65,10" href="
<area shape="circle" coords="340,267,10" href="
</map> 
<figure style="text-align:center;"> 
<img usemap="#continents_map" src=
</figure>

7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧

技巧2：Icon Adder

Icon Adder基本上是指使用圖示代替網站圖示。

你只需要在body標籤內的link標籤中包含你的源影像檔案的路徑連結。

<!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>

7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧

技巧3：允許使用者選擇背景顏色

使用此技巧，網站訪問者只需將滑鼠指標拖到書面文字的某些字母上即可更改其網頁的背景顏色。

例子：在這種情況下，訪問者可以透過將滑鼠指標拖到“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>

輸出：
7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧

技巧4：新增Title Tooltip

Tooltip是“HTML中使用的一個概念，用於顯示關於特定選定元素的一些額外資訊”。

這個技巧基本上顯示了當訪問者將滑鼠指標懸停在一個元素上時，網站建立者提供的額外資訊。

語法：

<span title="Can you see this? This is the tooltip.:)">Drag Your Mouse Over Me!</span>

輸出：
7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧

技巧5：語音識別

此功能類似於您在 Google 搜尋文字框中看到的功能，其中語音識別功能可幫助您將句子放入輸入欄位。

當你使用語音識別輸入時，在輸入欄位的邊上會有一個小的麥克風圖示顯示，當訪問者點選該語音圖示時，他們的聲音會被記錄下來並作為使用者的輸入。

為此，您只需將 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>

輸出，然而，在實時伺服器中，你會看到這個：

7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧
但當你從其他瀏覽器檢視時，你也會看到輸入欄中的麥克風圖示，使用者可以透過它輸入語音。

技巧6：隱藏欄位

能夠公開檢視內部欄位被Reddit士兵稱為“程式設計恐怖”——毫無疑問，沒有人想在自己的網站上體驗這種恐怖。

但是這個問題可以透過使用HTML的隱藏欄位特性來解決。

一個隱藏欄位可以讓web開發人員控制哪些資料可以被修改，哪些資料不能被修改，以及當使用者提交表單時需要更新的記錄。

它是這樣工作的：

 
 <!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>

從上面的程式碼中，結果輸出將是一個訪問者無法看到的隱藏欄位。

輸出：

<!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>

技巧7：輸入建議

此功能基本上提供了一個預定義選項的下拉選單，使訪問者更容易找到他們正在尋找的內容。

示例：下面的程式碼讓訪問者從下拉選單中找到不同大陸的名稱，並將其用作輸入。

<!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>

輸出：

7個讓你驚歎的HTML技巧7個讓你驚歎的HTML技巧

原文來自：

7個讓你驚歎的HTML技巧

相關文章