偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

七個(gè)讓你驚嘆的HTML技巧

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

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

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

[[417995]]

技巧1. Image Maps

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

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

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

  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基本上是指使用圖標(biāo)代替網(wǎng)站圖標(biāo)。

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

  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èn)者只需將鼠標(biāo)指針拖到書面文本的某些字母上即可更改其網(wǎng)頁(yè)的背景顏色。

例子：在這種情況下，訪問(wèn)者可以通過(guò)將鼠標(biāo)指針拖到“Drag Your Mouse Over Letters To Change Colors!”的文字上來(lái)改變顏色。

  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中使用的一個(gè)概念，用于顯示關(guān)于特定選定元素的一些額外信息”。

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

語(yǔ)法：

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

輸出：

技巧5：語(yǔ)音識(shí)別

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

當(dāng)你使用語(yǔ)音識(shí)別輸入時(shí)，在輸入字段的邊上會(huì)有一個(gè)小的麥克風(fēng)圖標(biāo)顯示，當(dāng)訪問(wèn)者點(diǎn)擊該語(yǔ)音圖標(biāo)時(shí)，他們的聲音會(huì)被記錄下來(lái)并作為用戶的輸入。

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

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

讓我給你看一個(gè)例子：

  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> 

輸出，然而，在實(shí)時(shí)服務(wù)器中，你會(huì)看到這個(gè)：

但當(dāng)你從其他瀏覽器查看時(shí)，你也會(huì)看到輸入欄中的麥克風(fēng)圖標(biāo)，用戶可以通過(guò)它輸入語(yǔ)音。

技巧6：隱藏字段

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

但是這個(gè)問(wèn)題可以通過(guò)使用HTML的隱藏字段特性來(lái)解決。

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

語(yǔ)法：

  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> 

從上面的代碼中，結(jié)果輸出將是一個(gè)訪問(wèn)者無(wú)法看到的隱藏字段。

輸出：

技巧7：輸入建議

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

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

  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> 

輸出：

 

責(zé)任編輯：趙寧寧 來(lái)源： 今日頭條
HTML網(wǎng)站網(wǎng)絡(luò)
相關(guān)推薦

2015-11-30 17:12:31

Git使用技巧

2011-02-22 10:23:34

2023-08-22 10:25:19

CSS動(dòng)畫網(wǎng)頁(yè)

2023-10-04 17:41:39

編程習(xí)慣代碼

2024-03-12 10:02:31

Python內(nèi)存編程

2022-12-12 13:19:11

Vue3開發(fā)技巧

2023-03-09 15:45:36

ES6編碼技巧數(shù)組

2023-06-02 15:53:38

工具Python開發(fā)

2012-03-30 10:03:27

HTML 5

2023-03-19 16:02:33

JavaScrip技巧編程語(yǔ)言

2023-09-07 16:28:46

JavaScrip

2021-11-22 12:13:54

Linuxwget 命令

2023-05-30 09:59:38

2018-05-24 08:47:15

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

2023-11-06 11:32:46

CSS選擇器作用域

2024-05-06 08:27:00

2023-02-23 16:49:11

ES6技巧

2023-11-18 09:07:59

Go語(yǔ)言技巧

2012-03-30 09:45:07

WEBHTML5

2012-04-04 12:57:37

HTML5
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)