自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

七個讓你驚嘆的HTML技巧

作者：杭州程序員小張
網(wǎng)絡 通信技術
我們傾向于使用HTML與CSS、JavaScript等，使我們的網(wǎng)站或博客看起來更有吸引力。下面是一些很酷的HTML技巧，你可以用它來建立一個真正的動態(tài)網(wǎng)站。

我們傾向于使用HTML與CSS、JavaScript等，使我們的網(wǎng)站或博客看起來更有吸引力，但你知道僅HTML就有很多實用的秘密，可能會派上用場，幫助你設計一個華麗的網(wǎng)站?

下面是一些很酷的HTML技巧，你可以用它來建立一個真正的動態(tài)網(wǎng)站。

[[417995]]

技巧1. Image Maps

image map基本上是具有可點擊區(qū)域的圖像。我們可以使用該可點擊區(qū)域鏈接到網(wǎng)頁的其他部分、文檔或新鏈接。

好吧，并不是每個人都知道<map>元素可以定義用戶可以單擊的圖像區(qū)域。我們需要做的就是使用<area>元素并在<map>元素中提及其對應的 XY 坐標。

下面是一個例子，你的網(wǎng)站訪問者可以在點擊世界地圖的不同大洲時了解你在全球的業(yè)務。

  1. <h1 style="text-align:center;">World Map</h1> 
  2. <h4 style="text-align:center;">➤ Click on the dots in the map to get respective continent information</h4> 
  3. <map name="continents_map"> 
  4. <area shape="circle" coords="70,70,10" href="https://en.wikipedia.org/wiki/North_America"> 
  5. <area shape="circle" coords="133,185,10" href="https://en.wikipedia.org/wiki/South_America"> 
  6. <area shape="circle" coords="270,137,10" href="https://en.wikipedia.org/wiki/Africa"> 
  7. <area shape="circle" coords="292,44,10" href="https://en.wikipedia.org/wiki/Europe"> 
  8. <area shape="circle" coords="469,201,10" 
  9. href="https://en.wikipedia.org/wiki/Australia"> 
  10. <area shape="circle" coords="374,65,10" href="https://en.wikipedia.org/wiki/Asia"> 
  11. <area shape="circle" coords="340,267,10" href="https://en.wikipedia.org/wiki/Antarctica"> 
  12. </map> 
  13. <figure style="text-align:center;"> 
  14. <img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" /> 
  15. </figure> 

技巧2：Icon Adder

Icon Adder基本上是指使用圖標代替網(wǎng)站圖標。

你只需要在body標簽內(nèi)的link標簽中包含你的源圖像文件的路徑鏈接。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Icon Adder</title> 
  5. <meta name="theme-color" content="green;"> 
  6. <link rel="icon" href="download.jpg" 
  7. type="image/x-icon"/> 
  8. <style> 
  9. .container { 
  10. text-align: left; 
  11. } 
  12. h1 { 
  13. color: darkred; 
  14. } 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <div class="container"> 
  19. <h1>Hi, I am NISHI KASHYAP!!</h1> 
  20. <b>You can see the icon adder above in place of the favicon.</b> 
  21. </div> 
  22. </body> 
  23. </html> 

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

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

例子：在這種情況下，訪問者可以通過將鼠標指針拖到“Drag Your Mouse Over Letters To Change Colors!”的文字上來改變顏色。

  1. <center> 
  2. <a href="" onmouseover="document.bgColor='turquoise'">D</a> 
  3. <a href="" onmouseover="document.bgColor='pink'">r</a> 
  4. <a href="" onmouseover="document.bgColor='blue'">a</a> 
  5. <a href="" onmouseover="document.bgColor='red'">g</a> 
  6. <a href="" onmouseover="document.bgColor='yellow'">Y</a> 
  7. <a href="" onmouseover="document.bgColor='green'">o</a> 
  8. <a href="" onmouseover="document.bgColor='white'">u</a> 
  9. <a href="" onmouseover="document.bgColor='teal'">r</a> 
  10. <a href="" onmouseover="document.bgColor='olivedrab'">M</a> 
  11. <a href="" onmouseover="document.bgColor='green'">o</a> 
  12. <a href="" onmouseover="document.bgColor='seagreen'">u</a> 
  13. <a href="" onmouseover="document.bgColor='magenta'">s</a> 
  14. <a href="" onmouseover="document.bgColor='fusia'">e</a> 
  15. <a href="" onmouseover="document.bgColor='purple'">O</a> 
  16. <a href="" onmouseover="document.bgColor='navy'">v</a> 
  17. <a href="" onmouseover="document.bgColor='green'">e</a> 
  18. <a href="" onmouseover="document.bgColor='white'">r</a> 
  19. <a href="" onmouseover="document.bgColor='royalblue'">L</a> 
  20. <a href="" onmouseover="document.bgColor='Skyblue'">e</a> 
  21. <a href="" onmouseover="document.bgColor='almond'">tt</a> 
  22. <a href="" onmouseover="document.bgColor='coral'">e</a> 
  23. <a href="" onmouseover="document.bgColor='brown'">r</a> 
  24. <a href="" onmouseover="document.bgColor='almond'">s</a> 
  25. <a href="" onmouseover="document.bgColor='coral'">To</a> 
  26. <a href="" onmouseover="document.bgColor='olivedrab'">C</a> 
  27. <a href="" onmouseover="document.bgColor='teal'">h</a> 
  28. <a href="" onmouseover="document.bgColor='pink'">a</a> 
  29. <a href="" onmouseover="document.bgColor='blue'">n</a> 
  30. <a href="" onmouseover="document.bgColor='red'">g</a> 
  31. <a href="" onmouseover="document.bgColor='yellow'">e</a> 
  32. <a href="" onmouseover="document.bgColor='green'">C</a> 
  33. <a href="" onmouseover="document.bgColor='olivedrab'">ol</a> 
  34. <a href="" onmouseover="document.bgColor='black'">or!</a> 
  35. </center> 

輸出

技巧4：添加Title Tooltip

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

這個技巧基本上顯示了當訪問者將鼠標指針懸停在一個元素上時，網(wǎng)站創(chuàng)建者提供的額外信息。

語法：

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

輸出：

技巧5：語音識別

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

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

為此，您只需將 x-webkit-speech 屬性添加到輸入框。

  1. <input type="text" x-webkit-speech /> 

讓我給你看一個例子：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Voice Recognition</title> 
  5. <style> 
  6. .container { 
  7. text-align: center; 
  8. } 
  9.  
  10. h1 { 
  11. color: darkred; 
  12. } 
  13. </style> 
  14. </head> 
  15.  
  16. <body> 
  17. <div class="container"> 
  18. <h1>Voice Recognition Field</h1> 
  19. <input type="text" x-webkit-speech> 
  20. <i><br><br>The above field  accepts the input as a Voice.<i> 
  21. </div> 
  22. </body> 
  23. </html> 

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

但當你從其他瀏覽器查看時，你也會看到輸入欄中的麥克風圖標，用戶可以通過它輸入語音。

技巧6：隱藏字段

能夠公開查看內(nèi)部字段被Reddit士兵稱為“編程恐怖”——毫無疑問，沒有人想在自己的網(wǎng)站上體驗這種恐怖。

但是這個問題可以通過使用HTML的隱藏字段特性來解決。

一個隱藏字段可以讓web開發(fā)人員控制哪些數(shù)據(jù)可以被修改，哪些數(shù)據(jù)不能被修改，以及當用戶提交表單時需要更新的記錄。

語法：

  1. <input type="hidden"> 

它是這樣工作的：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Hide Field</title> 
  5. <style> 
  6. h1 { 
  7. color: darkred; 
  8. } 
  9. body { 
  10. text-align: center; 
  11. } 
  12. </style> 
  13. </head> 
  14.  
  15. <body> 
  16. <h1>HIDE FIELD</h1> 
  17. <form action="#"> 
  18. <input type="hidden" id="myFile" value="1234"> 
  19. Name: <input type="text"> 
  20. <input type="submit" value="Submit"> 
  21. </form> 
  22. </body> 
  23. </html> 

從上面的代碼中，結果輸出將是一個訪問者無法看到的隱藏字段。

輸出：

技巧7：輸入建議

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

示例：下面的代碼讓訪問者從下拉列表中找到不同大陸的名稱，并將其用作輸入。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Input Suggestions</title> 
  5. </head> 
  6. <body> 
  7.  
  8. <h1>Choose the Continent</h1> 
  9. <input type="text" list="text_editors"> 
  10. <datalist id="text_editors"> 
  11. <option value="Africa"></option> 
  12. <option value="Asia"></option> 
  13. <option value="North America"></option> 
  14. <option value="South America"></option> 
  15. <option value="Antarctica"></option> 
  16. <option value="Europe"></option> 
  17. <option value="Australia"></option> 
  18. </datalist> 
  19. </body> 
  20. </html> 

輸出：

 

責任編輯：趙寧寧 來源： 今日頭條
HTML網(wǎng)站網(wǎng)絡
相關推薦

2015-11-30 17:12:31

Git使用技巧

2011-02-22 10:23:34

2023-08-22 10:25:19

CSS動畫網(wǎng)頁

2024-03-12 10:02:31

Python內(nèi)存編程

2023-10-04 17:41:39

編程習慣代碼

2023-03-09 15:45:36

ES6編碼技巧數(shù)組

2022-12-12 13:19:11

Vue3開發(fā)技巧

2023-03-19 16:02:33

JavaScrip技巧編程語言

2023-09-07 16:28:46

JavaScrip

2021-11-22 12:13:54

Linuxwget 命令

2012-03-30 10:03:27

HTML 5

2023-06-02 15:53:38

工具Python開發(fā)

2023-02-23 16:49:11

ES6技巧

2023-05-30 09:59:38

2018-05-24 08:47:15

數(shù)據(jù)存儲技巧

2023-11-06 11:32:46

CSS選擇器作用域

2024-06-25 15:41:41

2022-04-14 10:40:11

領導者IT團隊遠程團隊

2024-05-06 08:27:00

2023-11-18 09:07:59

Go語言技巧
點贊
收藏

51CTO技術棧公眾號