整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
這篇文章中，描述并演示了一些有趣的 HTML 屬性，您可能聽說過也可能沒有聽說過，并且可能會發(fā)現(xiàn)它們非常有用，可以在您的項目中親自使用。
有次和公司大佬閑余時間進行討論時，說到了一個問題：
今年你很高興學習或更深入地學習哪些語言/技術？
我的：typescript、next.js、react、graphql、solidity、node
他的答案很簡單：HTML。而且我一點也沒有諷刺或嘲弄。當然，我非常清楚在哪些情況下使用哪些標簽，以及如何使我的 HTML 大部分具有語義性和可訪問性。
但是我確信我已經(jīng)忘記了一大堆較少使用的屬性，并且可能有一大堆我甚至不知道存在的屬性。這篇文章是我學習的結(jié)果，我希望你會發(fā)現(xiàn)其中的一些對你有用，因為大部分初學者在接下來的幾個月里正在構(gòu)建 HTML 頁面。
iOS 13.7+，以及Chrome77+新支持了一個HTML屬性enterkeyhint，可以修改軟鍵盤中的enter鍵，也就是回車鍵的文案或者UI。
該HTML屬性的兼容性如下圖所示：
enterkeyhint接受七個可能值之一，這些值將確定用戶在他的“輸入”鍵上看到的內(nèi)容：
enter | 表示回車，多出現(xiàn)在<textarea>文本域等需要多行輸入的場景中。 |
go | 表示前往，, 意思是把用戶帶到他們輸入的文本的目標處。 |
next | 表示下一項，通常會移動到下一個輸入項那里。 |
previous | ‘previous’表示上一個，通常會移動到上一個輸入項那里。 |
search | ‘search’表示搜索，通常用在搜索行為中。 |
send | ‘send’表示發(fā)，通常用在文本信息的發(fā)送上。 |
done | ‘done’表示完成，表示沒有更多內(nèi)容輸入，輸入結(jié)束。 |
只是強調(diào)一下，這個屬性不接受自定義值；該值需要是上面顯示的七個之一。無法識別的值將默認為輸入鍵的設備默認文本。
這對我來說是全新的，可能是此列表中最有趣的一個。作為一些背景知識，如果您不知道，F(xiàn)irefox 有一個選項可讓您選擇查看頁面時要使用的樣式表。通常，此功能顯示兩個選項：“基本頁面樣式”和“無樣式”，如下圖所示。
這使您可以快速測試禁用樣式時頁面的外觀，還允許您使用任何備用樣式表查看頁面。
備用樣式表功能通過兩個屬性啟用：title屬性和rel=alternate應用于<link>元素，如下面的代碼所示：
<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">在這種情況下，我的“默認”樣式將自動應用，但僅當我使用 Firefox 的“頁面樣式”選項選擇它們時，備用樣式表才會應用。
<blockquote>標簽定義塊引用。
<blockquote>與</blockquote>之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。
<blockquote></blockquote>這個標簽可以將其包起來的文字，全部往右縮排。而且加一組標簽，往右縮排一單位，加兩組標簽，往右縮排兩單位，依此類推。
現(xiàn)在我們來看看長文本的引用，還有和p標簽的對比，效果如圖：
<ol>經(jīng)常使用使用該元素的有序列表。一些鮮為人知的功能允許您自定義出現(xiàn)在此類列表中的編號行為：
如您所見，使用純 HTML 的有序列表比您通常習慣的要靈活得多。
該reversed屬性是一個有趣的屬性，因為它實際上并沒有反轉(zhuǎn)列表本身的內(nèi)容；它只會反轉(zhuǎn)每個列表項旁邊的數(shù)字。
<ol reversed>
<li>List item...</li>
<li>List item...</li>
<li>List item...</li>
</ol>結(jié)果是這樣的排序
上面，我還提到了其他三個屬性。讓我們將它們合并到列表中，看看如何使用它們：
<ol reversed start="20" type="1">
<li>Typee: A Peep at Polynesian Life (1846)</li>
<li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
<li>Mardi: and a Voyage Thither (1849)</li>
<li>Redburn: His First Voyage (1849)</li>
<li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
<li>Moby-Dick; or, The Whale (1851)</li>
<li>Pierre; or, The Ambiguities (1852)</li>
<li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>請注意，已添加的type和屬性以及單個列表項上的屬性。該屬性接受表示編號類型的五個單字符值（、、、、 ）之一，效果如圖：
結(jié)果展示
<a href="/example.pdf" download>Download File</a>如果沒有值，該download屬性會強制下載鏈接頁面。或者，您可以提供一個值，瀏覽器將其用作下載資源的建議文件名。
在研究這個標簽時，這對我來說是另一篇全新的文章——而且在規(guī)范中似乎相當新。將decoding屬性添加到圖像元素可為瀏覽器提供圖像解碼提示。
<img src="/images/example.png" alt="Example" decoding="async">此屬性類似于async在腳本上使用該屬性。加載圖像所需的時間不會改變，但其“解碼”的方式（因此其內(nèi)容在視口中變得可見）由decoding屬性決定。
值為：
您可能已經(jīng)知道，圖像元素現(xiàn)在可以包含一個loading屬性，該屬性將延遲加載作為一項功能放入瀏覽器，這是我們多年來使用 JavaScript 解決方案所做的事情。但不要忘記該loading屬性也可以用于<iframe>元素：
<iframe src="/page.html" width="300" height="250" loading="lazy">與圖像一樣，該loading屬性接受eager（默認瀏覽器行為）或 的值lazy，這會延遲 iframe 內(nèi)容的加載，直到 iframe 即將進入視口。此屬性的唯一缺點是 Firefox 不支持在 iframe 上使用它（盡管 Firefox 確實支持loading圖像）。
我在處理塊引用時已經(jīng)提到cite過，但是這個屬性也可以用于用<del>and<ins>元素標記的刪除和插入。此外，兩個元素都可以包含一個datetime屬性。
<del
cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>
<ins
cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>對于每個元素，這兩個屬性代表的內(nèi)容如下：
通過 <optgroup> 標簽把相關的選項組合在一起：
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>結(jié)果展示
optgroup 元素用于組合選項。當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。
這是我在研究本文時的另一對新屬性，它們在規(guī)范中也是相對較新的。
這兩個屬性都可以與元素一起定義rel=preload，as如下<link>所示：
<link rel="preload"
as="image"
imagesrcset="images/example-480.png 480w,
images/example-800.png 800w,
images/example.png 2000w"
imagesizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1000px"
src="images/example.png"
alt="Example Image">這里的使用rel=preload通知瀏覽器我們希望指定的資源優(yōu)先加載，因此它們不會被腳本和樣式表之類的東西阻塞。該as屬性指定所請求內(nèi)容的類型。
您可以使用href屬性以及preload和預加載常規(guī)圖像as。但最重要的是，您可以使用imagesrcsetandimagesizes屬性，就像我在上面的代碼中所做的那樣。
這允許您預加載正確的圖像，具體取決于視口的大小或您在imagesizes屬性中指定的其他媒體功能。
如果您使用過本文中提到的任何屬性，或者如果您知道在您的項目中使用過的另一個 HTML 屬性，請隨時在評論中告訴我。
個開發(fā)工具插件，可以理解為 tailwindcss 的小程序版本。
weapp-tailwindcss 是一系列專門為小程序開發(fā)而生的插件，主要解決在小程序中使用 tailwindcss 的問題，提升開發(fā)效率的全方面解決方案。
weapp-tailwindcss 官網(wǎng)
本質(zhì)上它是一個轉(zhuǎn)義器，負責把 tailwindcss 中所采集的類名，以及生成的結(jié)果，轉(zhuǎn)化成小程序中可以編譯的方式。
tailwindcss 是一款原子化的樣式生成器，特點是所寫即所得，可讀性很好，能夠自動搖樹優(yōu)化沒有用到的樣式，也能通過插件和預設提煉項目公共的樣式部分，在前端領域非常受歡迎。weapp-tailwindcss 項目的作者是 sonofmagic ，他在2021 年接觸到了 tailwindcss 后非常喜歡，并且開始在很多項目中使用。
后來他發(fā)現(xiàn)在小程序中沒法直接使用像 tailwindcss 這樣的 web 庫，所以就產(chǎn)生了開發(fā) weapp-tailwindcss 的想法，發(fā)布后也很受歡迎，截止本文發(fā)文的2024年2月中旬，已經(jīng)得到了 833 Star！
weapp-tailwindcss 文檔
在國內(nèi)的各家小程序開發(fā)中，由于小程序本身有自己的一套 獨特的 技術規(guī)范標準，會導致我們無法使用 web 中很多的特性，也沒辦法直接使用像 tailwindcss 這種 for web 的工具庫。
今天向大家推薦的 weapp-tailwindcss ，就是一款能讓你在小程序開發(fā)中使用 tailwindcss 大部分特性的開發(fā)插件。目前支持所有使用 webpack 和 vite 的主流小程序框架，以及使用 webpack / gulp 的原生小程序打包方式。
簡單地說，我們可以很容易在目前市面上的各個框架，或者原生開發(fā)中集成 tailwindcss。
使用 weapp-tailwindcss 之前需要先安裝好 tailwindcss，官網(wǎng)有詳細的教程，這里不贅述了。開發(fā)支持很全面，幾乎涵蓋了所有的開發(fā)小程序的方式：
我開發(fā)小程序使用的是 HbuilderX，默認的需要配置 tailwind.config.js 文件：
// tailwind.config.js
const path = require("path");
const resolve = (p) => {
return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
// 注意此處，一定要 `path.resolve` 一下, 傳入絕對路徑
// 如果有其他目錄，比如 components，也必須在這里，添加一下
content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
// ...
corePlugins: {
preflight: false,
},
};同時配置 vite.config.js ：
import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要開啟插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;
const resolve = (p) => {
return path.resolve(__dirname, p);
};
export default defineConfig({
plugins: [uni(), uvwt({
rem2rpx: true,
disabled: WeappTailwindcssDisabled
})],
css: {
postcss: {
plugins: [
require("tailwindcss")({
// 注意此處，手動傳入 `tailwind.config.js` 的絕對路徑
config: resolve("./tailwind.config.js"),
}),
require("autoprefixer"),
],
},
},
});注意兩個配置文件都需要傳入 tailwindcss 的絕對路徑。配置完成后，就可以在頁面文件中使用 tailwindcss，最后在 uni-app 插件市場安裝「Tailwind CSS語言服務」這個插件，就可以開啟智能語法提示，可以大大提高開發(fā)效率。
視頻教程
視頻教程
作者還錄制的詳細的視頻教程，幫助大家快速上手。
weapp-tailwindcss 是一款免費開源的小程序開發(fā)插件工具，源碼基于 MIT 開源協(xié)議托管在 Github 上，我們可以免費下載來使用，也可以用在商業(yè)項目上。
↓↓點擊查看本次分享的網(wǎng)站。
weapp-tailwindcss - 在開發(fā)小程序中使用 tailwindcss 的最佳方式，免費開源，支持國內(nèi)各家主流小程序平臺｜那些免費的磚
為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
默認按鈕 CSS 按鈕
CSS 實例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按鈕顏色
GreenBlueRedGrayBlack
我們可以使用 background-color 屬性來設置按鈕顏色:
CSS 實例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
嘗試一下 ?
按鈕大小
10px12px16px20px24px
我們可以使用 font-size 屬性來設置按鈕大小:
CSS 實例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圓角按鈕
2px4px8px12px50%
我們可以使用 border-radius 屬性來設置圓角按鈕:
CSS 實例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
嘗試一下 ?
按鈕邊框顏色
綠藍紅灰黑
我們可以使用 border 屬性設置按鈕邊框顏色:
CSS 實例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
嘗試一下 ?
鼠標懸停按鈕
綠藍紅灰黑
綠藍紅灰黑
我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設置 "hover" 效果的速度:
CSS 實例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按鈕陰影
陰影按鈕鼠標懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
CSS 實例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
嘗試一下 ?
禁用按鈕
正常按鈕禁用按鈕
我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我么可以添加 cursor 屬性并設置為 "not-allowed" 來設置一個禁用的圖片:
CSS 實例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
嘗試一下 ?
按鈕寬度
250px
50%100%
默認情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設置按鈕的寬度:
提示: 如果要設置固定寬度可以使用像素 (px) 為單位，如果要設置響應式的按鈕可以設置為百分比。
CSS 實例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
嘗試一下 ?
按鈕組
ButtonButtonButtonButton
移除外邊距并添加 float:left 來設置按鈕組:
CSS 實例
.button {
float: left;
}
嘗試一下 ?
帶邊框按鈕組
ButtonButtonButtonButton
我們可以使用 border 屬性來設置帶邊框的按鈕組:
CSS 實例
.button {
float: left;
border: 1px solid green
}
嘗試一下 ?
按鈕動畫
CSS 實例
鼠標移動到按鈕上后添加箭頭標記:
Hover
嘗試一下 ?
CSS 實例
點擊時添加 "波紋" 效果:
Click
CSS 實例
點擊時添加 "壓下" 效果:
Click
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
