CSS實現html指令式Tips文字提示

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！

前言

一個小小tips，在網頁中能有意想不到的效果，能很好的引導客戶，說明功能等等。

html代碼

<div class="container">
 <div class="top">
 <button tooltip="上左">上左</button>
 <button tooltip="上邊" placement="top">上邊</button>
 <button tooltip="上右" placement="top-right">上右</button>
 </div>
 <div class="left">
 <button tooltip="左上" placement="left-top">左上</button>
 <button tooltip="左邊" placement="left" effect="light">左邊</button>
 <button tooltip="左右" placement="left-bottom">左下</button>
 </div>
 <div class="right">
 <button tooltip="右上" placement="right-top">右上</button>
 <button tooltip="右邊" placement="right" effect="light">右邊</button>
 <button tooltip="右下" placement="right-bottom">右下</button>
 </div>
 <div class="bottom">
 <button tooltip="下左" placement="bottom-left">下左</button>
 <button tooltip="下邊" placement="bottom" effect="light">下邊</button>
 <button tooltip="下右" placement="bottom-right">下右</button>
 </div>
 </div>

css代碼

由于內容較多，只提供主要部分，詳情請點擊最下方“了解更多”

氣泡樣式

[tooltip]::after {
 display: none;
 content: attr(tooltip);
 position: absolute;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 8px 15px;
 max-width: 200px;
 border-radius: 4px;
 box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
 z-index: 100;
}

氣泡位置（示例上）

.tooltip-placement-top,
[tooltip]:not([placement])::after,
[tooltip][placement=""]::after,
[tooltip][placement="top"]::after {
 bottom: calc(100% + 10px);
 left: 50%;
 transform: translate(-50%, 0);
}
.tooltip-placement-top-right,
[tooltip][placement="top-right"]::after {
 bottom: calc(100% + 10px);
 left: 100%;
 transform: translate(-100%, 0);
}
.tooltip-placement-top-left,
[tooltip][placement="top-left"]::after {
 bottom: calc(100% + 10px);
 left: 0;
 transform: translate(0, 0);
}

氣泡動畫（示例上）

[tooltip][placement^="top"]::after,
[tooltip][placement^="top"]::before {
 animation: anime-top 300ms ease-out forwards;
}
@keyframes anime-top {
 from {
 opacity: .5;
 bottom: 150%;
 }
}

三角形樣式

[tooltip]::before {
 display: none;
 content: '';
 position: absolute;
 border: 5px solid transparent;
 border-bottom-width: 0;
 z-index: 100;
}

三角形位置（示例上）

.triangle-placement-top,
[tooltip]:not([placement])::before,
[tooltip][placement=""]::before,
[tooltip][placement="top"]::before {
 bottom: calc(100% + 5px);
 left: 50%;
 transform: translate(-50%, 0);
}
.triangle-placement-top-left,
[tooltip][placement="top-left"]::before {
 bottom: calc(100% + 5px);
 left: 10px;
}
.triangle-placement-top-right,
[tooltip][placement="top-right"]::before {
 bottom: calc(100% + 5px);
 right: 10px;
}

總結

css的功能越來越強大，是不是曾經以為這樣的效果只能用js實現了，現在用css也可以搞定了，速度上車，試試吧。

公告

喜歡小編的點擊關注，了解更多知識！

源碼和演示地址，請點擊“了解更多”！

文地址：https://markodenic.com/html-tips/

Marko 2020年4月12日

在這篇文章中，我很興奮地與您分享一些非常有用的HTML小技巧。

*文章會定期更新，假如有新的小技巧的話。

但是首先，什么是HTML？

超文本標記語言（HTML）是設計用來在瀏覽器中顯示文檔的標準標記語言。它能夠獲得諸如級聯樣式表（CSS）、JavaScript等腳本語言技術的支持。

我們開始吧

1、loading="lazy"屬性

性能小技巧，我們能夠通過使用loading=lazy屬性，去推遲圖片的加載，直到用戶滾動看到它們。

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

2、郵箱、電話和短信的鏈接：

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>

3、有序列表的"start"屬性

通過使用"start"屬性去改變有序列表的開始點。

4、meter元素

您可以使用<meter>元素來顯示數量，無需JavaScript和CSS。

5、HTML的搜索

6、Fieldset元素

您可以使用fieldset元素，在一個web表單中對幾個控件和標簽(<label>)進行分組。

7、window.open

用target="_blank"打開的新頁面，新頁面中可以訪問原始的來源window，通過window.opener。這個可能會有隱含的安全或者性能問題。使用 rel="noopener" 或者 rel="noreferrer"去阻止這種行為。

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>

8、Base元素

如果您想讓您文檔中的所有鏈接都在新的tab頁打開，您可以使用base標簽：

_self: 載入結果到當前瀏覽上下文中。（該值是元素的默認值）。
_blank: 載入結果到一個新的未命名的瀏覽上下文。
_parent: 載入結果到父級瀏覽上下文（如果當前頁是內聯框）。如果沒有父級結構，該選項的行為和_self一樣。
_top: 載入結果到頂級瀏覽上下文（該瀏覽上下文是當前上下文的最頂級上下文）。如果沒有父級，該選項的行為和_self一樣

9、破壞Favicon的緩存

為了能夠刷新你網站的favicon，你可以強制瀏覽器去下載新文件，通過給文件鏈接后面添加?v=2。

這個在生產環境特別有用，確保你的用戶使用的是最新的版本。

<link rel="icon" href="/favicon.ico?v=2" />

10、`spellcheck` 屬性

通過spellcheck屬性去定義元素是否應該檢查拼寫錯誤。

11、原生的HTML滑塊

您可以通過使用<input type="range">來創建一個滑塊

12、HTML手風琴

您可以使用details元素去創建原生的HTML手風琴

13、`mark` 標記

您可以使用<mark>標記去高亮文本。

14、`download`屬性

您可以在鏈接上使用download屬性，去下載您的文件，而不是打開鏈接。

<a href='path/to/file' download>
  Download
</a>

15、性能提示

使用圖片大小更小的.webp格式，同時提升網站性能。

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>

16、Video縮略圖

使用poster屬性指定一張在視頻下載時顯示的圖片，或者一直到用戶點擊播放按鈕。

<video poster="path/to/image">

17、input type="search"

對于你的搜索輸入框可以使用type="search",然后你將會免費獲得一個清除的按鈕。

于初學者，JavaScript 有哪些不為人知卻非常有用的技巧呢？在本文中，我們將一同為大家解密與分享。

作者 | Duomly

譯者 | 彎月，責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

數組是Javascript中最常見的概念，我們有很多辦法來處理數組中的數據。考慮到數組是Javascript中最基本的概念之一，是初學者剛剛接觸編程時就學習的概念，我想通過本文介紹一些不為人知卻非常有用的技巧。我們開始吧！

從數組中刪除重復

在有關Javascript數組的面試問題中，有一個問題很常見：怎樣從Javascript數組中提取不重復的值。我有一個快捷簡便的方法：只需使用new Set即可。實現的方法有兩種：一種使用.from，另一種使用擴展運算符（...）：

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

很容易，是不是？

替換數組中指定的值

在編程時，有時候需要替換某個特定的值，有個非常簡單的方法來實現這一點。只需使用.split(start, 要刪除的值，要添加的值)，然后設置好三個參數，指明希望從哪里修改、要修改幾個值，以及新的值是什么。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

不使用.map實現映射

大概所有人都知道數組的.map方法，但還有另一個方法，可以用同樣簡潔的方式實現類似的效果。這種方法就是.from：

var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

清空數組

如果想把一個數組清空，但不想一個個刪除其中的元素，該怎么辦？其實只需一行代碼即可：將length設置為0。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


fruits.length = 0;
console.log(fruits); // returns

將數組轉化為對象

如果有一個數組，我們希望將其數據放到一個對象中，那么最快的方式就是使用擴展運算符（...）：

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

用數據填充數組

有時候需要創建一個數組并用數據填充，或者需要一個所有值都相同的數組，此時可以使用.fill方法簡潔明快地實現：

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

合并數組

你知道怎樣可以不使用.concat來合并數組嗎？最簡單的方法只需要一行代碼。你也許猜到了，那就是擴展運算符（...），它非常適合處理數組：

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

求兩個數組的交集

這也是Javascript面試中最常遇到的問題，因為它能展示出你是否會使用數組方法，以及邏輯如何。要找出兩個數組的交集，只需要使用之前使用的技巧，首先保證數組中的值不重復，然后利用.filter和.includes方法即可。這樣就能找出同時出現在兩個數組中的元素。代碼如下：

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

從數組中刪除假值

首先我們來定義假值。在Javascript中，假值包括false、0、''、、NaN、undefined。現在可以考慮怎樣從數組中刪除假值了。只需使用.filter方法即可實現：

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

從數組中獲取隨機值

有時候需要從數組中隨機選擇一個值。簡單、快捷、簡短且干凈的方式就是在數組長度的范圍內生成一個隨機的索引。代碼如下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

反轉數組

需要反轉數組時，我們不需要使用復雜的循環和函數來重新創建數組，因為有一個簡單的數組方法可以為我們做這件事，只需一行代碼，就能反轉數組。代碼如下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse;
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

.lastIndexOf方法

Javascript中有一個有趣的方法，可以讓我們找出指定元素最后出現的位置。例如，如果數組中有重復元素，那么可以找出該元素最后出現的位置。代碼如下：

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

對數組中的所有值求和

另一個Javascript工程師面試中常見的問題就是對數組中的所有元素求和。這個完全不需要害怕，只需使用.reduce方法，一行代碼就可以實現。代碼如下：

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

總結

本文向你展示了13個編程技巧，可以保持代碼簡短整潔。同時別忘了，Javascript中還有許多不同的技巧值得探索，不僅是有關數組的技巧，也包括許多其他的數據類型。希望你喜歡本文的技巧，并能利用這些技巧改善開發流程。

原文：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

本文為 CSDN 翻譯，轉載請注明來源出處。

【END】

在線咨詢

上一篇：「原創」用Htmlhelp Workshop制作Windows 幫助文件
下一篇：10個對web開發人員有用的HTML文件上傳技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS實現html指令式Tips文字提示

前言

html代碼

css代碼

總結

公告

但是首先，什么是HTML？

我們開始吧

1、loading="lazy"屬性

2、郵箱、電話和短信的鏈接：

3、有序列表的"start"屬性

4、meter元素

5、HTML的搜索

6、Fieldset元素

7、window.open

8、Base元素

9、破壞Favicon的緩存

10、`spellcheck` 屬性

11、原生的HTML滑塊

12、HTML手風琴

13、`mark` 標記

14、`download`屬性

15、性能提示

16、Video縮略圖

17、input type="search"

您的項目需求