這篇文章中,描述并演示了一些有趣的 HTML 屬性,您可能聽說過也可能沒有聽說過,并且可能會發現它們非常有用,可以在您的項目中親自使用。
有次和公司大佬閑余時間進行討論時,說到了一個問題:
今年你很高興學習或更深入地學習哪些語言/技術?
我的:typescript、next.js、react、graphql、solidity、node
他的答案很簡單:HTML。而且我一點也沒有諷刺或嘲弄。當然,我非常清楚在哪些情況下使用哪些標簽,以及如何使我的 HTML 大部分具有語義性和可訪問性。
但是我確信我已經忘記了一大堆較少使用的屬性,并且可能有一大堆我甚至不知道存在的屬性。這篇文章是我學習的結果,我希望你會發現其中的一些對你有用,因為大部分初學者在接下來的幾個月里正在構建 HTML 頁面。
iOS 13.7+,以及Chrome77+新支持了一個HTML屬性enterkeyhint,可以修改軟鍵盤中的enter鍵,也就是回車鍵的文案或者UI。
該HTML屬性的兼容性如下圖所示:
enterkeyhint接受七個可能值之一,這些值將確定用戶在他的“輸入”鍵上看到的內容:
enter | 表示回車,多出現在<textarea>文本域等需要多行輸入的場景中。 |
go | 表示前往,, 意思是把用戶帶到他們輸入的文本的目標處。 |
next | 表示下一項,通常會移動到下一個輸入項那里。 |
previous | ‘previous’表示上一個,通常會移動到上一個輸入項那里。 |
search | ‘search’表示搜索,通常用在搜索行為中。 |
send | ‘send’表示發,通常用在文本信息的發送上。 |
done | ‘done’表示完成,表示沒有更多內容輸入,輸入結束。 |
只是強調一下,這個屬性不接受自定義值;該值需要是上面顯示的七個之一。無法識別的值將默認為輸入鍵的設備默認文本。
這對我來說是全新的,可能是此列表中最有趣的一個。作為一些背景知識,如果您不知道,Firefox 有一個選項可讓您選擇查看頁面時要使用的樣式表。通常,此功能顯示兩個選項:“基本頁面樣式”和“無樣式”,如下圖所示。
這使您可以快速測試禁用樣式時頁面的外觀,還允許您使用任何備用樣式表查看頁面。
備用樣式表功能通過兩個屬性啟用: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>之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。
<blockquote></blockquote>這個標簽可以將其包起來的文字,全部往右縮排。而且加一組標簽,往右縮排一單位,加兩組標簽,往右縮排兩單位,依此類推。
現在我們來看看長文本的引用,還有和p標簽的對比,效果如圖:
<ol>經常使用使用該元素的有序列表。一些鮮為人知的功能允許您自定義出現在此類列表中的編號行為:
如您所見,使用純 HTML 的有序列表比您通常習慣的要靈活得多。
該reversed屬性是一個有趣的屬性,因為它實際上并沒有反轉列表本身的內容;它只會反轉每個列表項旁邊的數字。
<ol reversed>
<li>List item...</li>
<li>List item...</li>
<li>List item...</li>
</ol>
結果是這樣的排序
上面,我還提到了其他三個屬性。讓我們將它們合并到列表中,看看如何使用它們:
<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和屬性以及單個列表項上的屬性。該屬性接受表示編號類型的五個單字符值(、、、、 )之一,效果如圖:
結果展示
<a href="/example.pdf" download>Download File</a>
如果沒有值,該download屬性會強制下載鏈接頁面。或者,您可以提供一個值,瀏覽器將其用作下載資源的建議文件名。
在研究這個標簽時,這對我來說是另一篇全新的文章——而且在規范中似乎相當新。將decoding屬性添加到圖像元素可為瀏覽器提供圖像解碼提示。
<img src="/images/example.png" alt="Example" decoding="async">
此屬性類似于async在腳本上使用該屬性。加載圖像所需的時間不會改變,但其“解碼”的方式(因此其內容在視口中變得可見)由decoding屬性決定。
值為:
您可能已經知道,圖像元素現在可以包含一個loading屬性,該屬性將延遲加載作為一項功能放入瀏覽器,這是我們多年來使用 JavaScript 解決方案所做的事情。但不要忘記該loading屬性也可以用于<iframe>元素:
<iframe src="/page.html" width="300" height="250" loading="lazy">
與圖像一樣,該loading屬性接受eager(默認瀏覽器行為)或 的值lazy,這會延遲 iframe 內容的加載,直到 iframe 即將進入視口。此屬性的唯一缺點是 Firefox 不支持在 iframe 上使用它(盡管 Firefox 確實支持loading圖像)。
我在處理塊引用時已經提到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>
對于每個元素,這兩個屬性代表的內容如下:
通過 <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>
結果展示
optgroup 元素用于組合選項。當您使用一個長的選項列表時,對相關的選項進行組合會使處理更加容易。
這是我在研究本文時的另一對新屬性,它們在規范中也是相對較新的。
這兩個屬性都可以與元素一起定義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通知瀏覽器我們希望指定的資源優先加載,因此它們不會被腳本和樣式表之類的東西阻塞。該as屬性指定所請求內容的類型。
您可以使用href屬性以及preload和預加載常規圖像as。但最重要的是,您可以使用imagesrcsetandimagesizes屬性,就像我在上面的代碼中所做的那樣。
這允許您預加載正確的圖像,具體取決于視口的大小或您在imagesizes屬性中指定的其他媒體功能。
如果您使用過本文中提到的任何屬性,或者如果您知道在您的項目中使用過的另一個 HTML 屬性,請隨時在評論中告訴我。
Reset 對象
在 HTML 表單中 <input type="reset"> 標簽每出現一次,一個 Reset 對象就會被創建。
當重置按鈕被點擊,包含它的表單中所有輸入元素的值都重置為它們的默認值。默認值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定。
重置按鈕在重置表單之前觸發 onclick 句柄,并且這個句柄可以通過返回 fasle 來取消。
您可以通過遍歷表單的 elements[] 數組來訪問某個重置按鈕,或者通過使用document.getElementById()。
Reset 對象屬性
W3C: W3C 標準。
屬性 | 描述 | W3C |
---|---|---|
disabled | 設置或返回重置按鈕是否應被禁用。 | Yes |
form | 返回一個對包含此重置按鈕的表單對象的引用。 | Yes |
name | 設置或返回重置按鈕的名稱。 | Yes |
type | 返回重置按鈕的表單元素類型。 | Yes |
value | 設置或返回重置按鈕上顯示的文本。 | Yes |
標準屬性和事件
Reset 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
lement的el-transfer穿梭框很好用,但是總有滿足不了業務的需求的時候,比如要修改el-transfer穿梭框的默認按鈕顏色,如下圖
一般看到這樣的需求,我首先會去element的官網看看這個el-transfer穿梭框有沒有提供相應的參數來實現,結果去看一下發現沒有,只有可以自定義按鈕文案,卻沒有自定義按鈕的顏色或樣式。怎么辦?只好自己去研究默認按鈕顏色的css和html是怎么寫,然后自己寫css進行覆蓋默認的樣式。
經過我的研究,發現倆個按鈕ccs和html一模一樣,但是我只需要修改第一個按鈕的顏色。所以想到用css的:nth-of-type(n)選擇器,這個選擇器可以匹配屬于父元素的特定類型的第 N 個子元素的每個元素。也就是我可以用:nth-of-type(1)選到第一個按鈕,然后可以寫css樣式改變顏色,具體代碼如下:
.el-transfer__button:nth-of-type(1).el-button--primary {
// 寫你覆蓋樣式
}
最終代碼如下:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。