国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

這篇具有很好參考價(jià)值的文章主要介紹了分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握前期回顧分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握??

是不是在為 API 煩惱 ?好用免費(fèi)的api接口大全呼之欲出_0.活在風(fēng)浪里的博客-CSDN博客APi、常用框架、UI、文檔—— 整理合并https://blog.csdn.net/m0_57904695/article/details/130459417?spm=1001.2014.3001.5501

?? 本文專欄:開發(fā)技巧?

目錄

??? 1、Accept

??? 2、Autofocus

??? 3、Input mode

??? 4、Pattern

??? 5、Required

??? 6、Autocomplete

??? 7、Multiple

??? 8、Download

?? 9、Contenteditable

??? 10、Readonly

??? 11、Hidden

??? 12. Spellcheck

??? 13. Translate

??? 14. Loading

??? 15、Onerror

??? 16、Poster

??? 17、Controls

??? 18、Autoplay

??? 19、Loop

??? 20、Cite

??? 21、Datetime

??? 22、Async

??? 23、Defer

?? 24、Draggable

????? ?謝謝觀看 :


分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

?HTML屬性非常多,除了一些基礎(chǔ)屬性外,還有許多有用的特別強(qiáng)大的屬性,本文將介紹24個(gè)強(qiáng)大的HTML屬性,可以使您的網(wǎng)站更具有動(dòng)態(tài)性和交互性,讓用戶感到更加舒適和愉悅。

讓我們一起來探索這24個(gè)強(qiáng)大的HTML屬性吧!

??? 1、Accept

Accept屬性用于指定瀏覽器可以處理的MIME類型列表。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • MIME類型是用于識(shí)別文檔類型的標(biāo)準(zhǔn),

  • 例如,text/html表示HTML文檔,image/jpeg表示JPEG圖像等。

通過在HTTP請求頭中包含Accept屬性,瀏覽器可以告訴服務(wù)器它可以接受哪些MIME類型的響應(yīng)?;谶@些信息,服務(wù)器可以選擇最適合的響應(yīng)類型并將其返回給瀏覽器。Accept屬性的值是逗號分隔的MIME類型列表,通配符可以用來表示MIME類型的類別,例如,text/*表示所有文本類型。

??? 2、Autofocus

Autofocus屬性用于在頁面加載時(shí)自動(dòng)將焦點(diǎn)設(shè)置到指定元素。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • Autofocus屬性可以應(yīng)用于各種HTML元素,例如文本框、按鈕、下拉列表等。

  • 在HTML5中,Autofocus屬性可以省略屬性值,表示將焦點(diǎn)設(shè)置到第一個(gè)具有Autofocus屬性的元素。

當(dāng)頁面加載時(shí),如果有一個(gè)具有Autofocus屬性的元素,瀏覽器將自動(dòng)將光標(biāo)聚焦在該元素上,使用戶可以直接與該元素交互,而無需手動(dòng)點(diǎn)擊或使用Tab鍵切換焦點(diǎn)。

??? 3、Input mode

Inputmode屬性用于指定輸入框中輸入內(nèi)容的類型。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

它可以幫助瀏覽器更好地優(yōu)化輸入體驗(yàn),例如,在移動(dòng)設(shè)備上自動(dòng)彈出適當(dāng)?shù)奶摂M鍵盤。

  • text:默認(rèn)值,表示輸入任何文本。

  • none:表示不需要輸入任何內(nèi)容。

  • tel:表示輸入電話號碼。

  • url:表示輸入U(xiǎn)RL地址。

  • email:表示輸入電子郵件地址。

  • numeric:表示輸入數(shù)字。

  • decimal:表示輸入帶小數(shù)點(diǎn)的數(shù)字。

  • search:表示輸入搜索關(guān)鍵字。

  • Inputmode屬性的支持程度在不同的瀏覽器中可能會(huì)有所不同。

因此,在使用Inputmode屬性時(shí)需要進(jìn)行兼容性測試。

??? 4、Pattern

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

Pattern屬性是一個(gè)正則表達(dá)式模式,用于指定輸入框中的輸入內(nèi)容。它可以幫助瀏覽器驗(yàn)證用戶輸入的內(nèi)容是否符合指定的格式要求。

如果用戶輸入的內(nèi)容不符合Pattern屬性指定的正則表達(dá)式模式,瀏覽器將顯示默認(rèn)的錯(cuò)誤消息。

提示:

  • Pattern屬性的值必須是一個(gè)有效的正則表達(dá)式。

  • Pattern屬性只能應(yīng)用于可以輸入文本的元素,例如文本框、文本域和密碼框。

  • Pattern屬性不會(huì)阻止用戶輸入非法字符,但會(huì)在提交表單時(shí)驗(yàn)證輸入內(nèi)容是否符合指定的格式要求。

  • 可以使用title屬性自定義Pattern屬性的錯(cuò)誤消息。

通常情況下,Pattern屬性與required屬性一起使用,以確保用戶輸入的內(nèi)容符合指定的格式要求并且不為空。例如,您可以使用Pattern屬性驗(yàn)證用戶輸入的郵政編碼、電話號碼、電子郵件地址等。

??? 5、Required

Required屬性是一個(gè)用于指定表單元素是否為必填的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果一個(gè)表單元素具有Required屬性,那么在提交表單時(shí),如果該元素的值為空,瀏覽器將阻止表單提交,并提示用戶填寫該字段。

提示:

  • Required屬性只能應(yīng)用于表單元素,而不能應(yīng)用于其他HTML元素。

  • Required屬性不會(huì)驗(yàn)證用戶輸入的內(nèi)容是否符合指定的格式要求,只驗(yàn)證元素是否為空。

  • Required屬性不會(huì)阻止用戶提交空格或空白字符,因此需要其他驗(yàn)證用戶輸入的手段。

  • Required屬性可以與Pattern屬性一起使用,以驗(yàn)證用戶輸入的內(nèi)容是否符合指定的格式要求。

  • Required屬性可以與Autofocus屬性一起使用,以確保當(dāng)用戶進(jìn)入表單頁面時(shí),焦點(diǎn)自動(dòng)在必填字段上。

Required屬性經(jīng)常與表單元素的type屬性一起使用,例如文本框、下拉列表、單選框、復(fù)選框等。

??? 6、Autocomplete

Autocomplete屬性是一個(gè)用于指定表單元素是否啟用自動(dòng)填充的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

Autocomplete屬性可以幫助用戶更快地填寫表單,并降低打字錯(cuò)誤的機(jī)會(huì)。

提示:

  • on:默認(rèn)值,表示啟用自動(dòng)填充功能。

  • off:表示禁用自動(dòng)填充功能。

  • name:表示使用表單元素的name屬性作為自動(dòng)完成的關(guān)鍵字。

  • email:表示使用用戶最近輸入的電子郵件地址作為自動(dòng)完成的關(guān)鍵字。

  • username:表示使用用戶最近輸入的用戶名作為自動(dòng)完成的關(guān)鍵字。

  • current-password:表示使用用戶最近輸入的密碼作為自動(dòng)完成的關(guān)鍵字。

  • new-password:表示使用用戶最近輸入的新密碼作為自動(dòng)完成的關(guān)鍵字。

  • tel:表示使用用戶最近輸入的電話號碼作為自動(dòng)完成的關(guān)鍵字。

  • address-level1:表示使用用戶最近輸入的國家或地區(qū)名稱作為自動(dòng)完成的關(guān)鍵字。

  • address-level2:表示使用用戶最近輸入的省或州名稱作為自動(dòng)完成的關(guān)鍵字。

  • address-level3:表示使用用戶最近輸入的城市或地區(qū)名稱作為自動(dòng)完成的關(guān)鍵字。

  • address-level4:表示使用用戶最近輸入的街道名稱作為自動(dòng)完成的關(guān)鍵字。

  • country:表示使用用戶最近輸入的國家名稱作為自動(dòng)完成的關(guān)鍵字。

Autocomplete屬性的支持程度在不同的瀏覽器中可能會(huì)有所不同。因此,在使用Autocomplete屬性時(shí)需要進(jìn)行兼容性測試。

??? 7、Multiple

Multiple屬性是一個(gè)用于指定表單元素是否允許多選的屬性。Multiple屬性通常應(yīng)用于下拉列表、文件上傳和復(fù)選框等表單元素。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

Multiple屬性通常應(yīng)用于下拉列表、文件上傳和復(fù)選框等表單元素。

提示:

  • Multiple屬性只能應(yīng)用于下拉列表、文件上傳和復(fù)選框等表單元素,不能應(yīng)用于單選框和文本框等表單元素。

  • Multiple屬性的值必須是一個(gè)布爾值,true或false。

  • Multiple屬性的默認(rèn)值為false,表示不允許多選。

  • 當(dāng)Multiple屬性的值為true時(shí),下拉列表將顯示為可多選的列表框,復(fù)選框?qū)@示為可多選的復(fù)選框列表,文件上傳將允許用戶選擇多個(gè)文件。

  • 在使用Multiple屬性時(shí),需要在后臺(tái)程序中處理多選的值,例如,使用數(shù)組來存儲(chǔ)多選的值。

如果表單元素設(shè)置了Multiple屬性,則用戶可以選擇多個(gè)選項(xiàng),而不僅僅是一個(gè)單選項(xiàng)。

??? 8、Download

Download屬性是用于在鏈接下載文件時(shí)指定文件名的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果鏈接設(shè)置了Download屬性,那么當(dāng)用戶點(diǎn)擊鏈接下載文件時(shí),瀏覽器將把文件保存到本地,并使用Download屬性指定的文件名來命名文件。

提示:

  • Download屬性的值可以是任何字符串,表示下載文件時(shí)使用的文件名。

  • Download屬性只能應(yīng)用于標(biāo)簽,不能應(yīng)用于其他HTML元素。

  • Download屬性不會(huì)更改實(shí)際文件的名稱,只是在下載時(shí)使用指定的文件名。

  • Download屬性的值可以動(dòng)態(tài)生成,例如使用JavaScript來生成文件名。

  • 在使用Download屬性時(shí),需要確保下載的文件合法,不侵犯他人的版權(quán)和隱私。

Download屬性通常用于標(biāo)簽上,用于下載PDF、圖像、音頻、視頻和其他文件。

?? 9、Contenteditable

Contenteditable屬性是HTML中用于指定元素是否可編輯的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • Contenteditable屬性的值可以為true、false或inherit。

  • Contenteditable屬性的默認(rèn)值為false,表示元素不可編輯。

  • 當(dāng)Contenteditable屬性的值為true時(shí),元素可編輯。當(dāng)Contenteditable屬性的值為inherit時(shí),元素的可編輯性繼承自父元素。

  • Contenteditable屬性不會(huì)改變元素的默認(rèn)行為,例如標(biāo)簽仍然可以跳轉(zhuǎn)到其他頁面。

  • 在使用Contenteditable屬性時(shí),需要注意安全問題,避免XSS攻擊和惡意腳本注入。

如果一個(gè)元素設(shè)置了Contenteditable屬性,那么用戶可以在元素中輸入文本、插入圖片、修改樣式等。Contenteditable屬性通常應(yīng)用于<div>和<p>等元素,用于實(shí)現(xiàn)富文本編輯器和可編輯表格等功能。

??? 10、Readonly

Readonly屬性是HTML中用于指定表單元素是否只讀的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • Readonly屬性的值必須是布爾值,即true或false。

  • Readonly屬性的默認(rèn)值是false,表示表單元素是可編輯的。

  • 當(dāng)Readonly屬性的值為true時(shí),表單元素是只讀的。Readonly屬性不能阻止用戶通過JavaScript修改表單元素的值。

  • Readonly屬性與Disabled屬性不同,Disabled屬性禁用表單元素,以使其無法提交數(shù)據(jù)。

  • 在使用Readonly屬性時(shí),需要在后臺(tái)程序中處理只讀的值,例如使用隱藏域存儲(chǔ)只讀的值。

如果一個(gè)表單元素設(shè)置了Readonly屬性,那么用戶可以看到元素的值,但不能修改元素的值。通常,Readonly屬性被應(yīng)用于表單元素,如文本框、下拉列表和日期選擇器,用于展示數(shù)據(jù)或防止用戶修改數(shù)據(jù)。

??? 11、Hidden

Hidden屬性是一個(gè)用于指定元素是否隱藏的屬性。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

<!DOCTYPE html>
<html>
  <head>
    <title>Defer Example</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <!-- 一秒后p加上 hidden -->
    <script>
      setTimeout(function () {
        document.querySelector("p").setAttribute("hidden", "");
      }, 1000);
      //   setAttribute 語法:element.setAttribute(attributename, attributevalue)
      //   attributename:必需。規(guī)定要添加的屬性的名稱。
      //   attributevalue:必需。規(guī)定要添加的屬性的值。
    </script>
  </body>
</html>

提示:

  • 隱藏屬性是一種用于指定元素是否隱藏的屬性。隱藏屬性的值必須是布爾值,即true或false。

  • 默認(rèn)情況下,隱藏屬性的值為false,表示元素未被隱藏。

  • 當(dāng)隱藏屬性的值為true時(shí),元素將被隱藏。

  • 需要注意的是,隱藏屬性與CSS的display:none屬性不同。display:none屬性會(huì)完全從頁面中刪除元素,因此無法通過JavaScript或其他方法訪問該元素。

  • 在使用隱藏屬性時(shí),需要在后臺(tái)程序中處理隱藏的值,例如使用隱藏字段來存儲(chǔ)隱藏的值。

如果一個(gè)元素設(shè)置了Hidden屬性,那么該元素將不會(huì)在頁面上顯示,但仍存在于頁面上,可以通過JavaScript等方式訪問。Hidden屬性通常應(yīng)用于表單元素、按鈕、圖像等元素,以傳遞數(shù)據(jù)或控制頁面行為,而不影響頁面布局。請注意,Hidden屬性與CSS的display:none屬性不同。display:none屬性會(huì)完全從頁面中移除元素,元素不能通過JavaScript或其他方式訪問。當(dāng)使用Hidden屬性時(shí),需要在后臺(tái)程序中處理隱藏值,例如使用隱藏字段存儲(chǔ)隱藏值。

??? 12. Spellcheck

Spellcheck 屬性是 HTML 中的一個(gè)屬性,用于指定是否啟用一個(gè)元素的拼寫檢查功能。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • 當(dāng)一個(gè)元素設(shè)置了Spellcheck屬性后,該元素可以啟用拼寫檢查功能。

  • 該屬性的取值只能是布爾值,true或false。默認(rèn)情況下,Spellcheck屬性的值為false,表示元素不啟用拼寫檢查。

  • 當(dāng)Spellcheck屬性的值為true時(shí),元素啟用拼寫檢查功能。

  • 但是,不同瀏覽器支持該屬性的程度可能會(huì)有所不同,并且不同的瀏覽器可能有不同的拼寫檢查算法和詞典。

  • 在使用Spellcheck屬性時(shí),需要注意安全問題,以避免XSS攻擊和惡意腳本注入。

如果一個(gè)元素設(shè)置了 Spellcheck 屬性,那么當(dāng)用戶在元素中輸入文本時(shí),瀏覽器會(huì)自動(dòng)檢查拼寫錯(cuò)誤,并在錯(cuò)誤單詞下方顯示紅色的波浪線。Spellcheck 屬性通常應(yīng)用于文本框和文本字段等元素,以提高用戶輸入的準(zhǔn)確性。

??? 13. Translate

如果一個(gè)元素設(shè)置了Translate屬性,那么它可以指定這個(gè)元素是否需要被翻譯。該屬性通常被應(yīng)用于網(wǎng)頁多語言的情況下,用于控制某些元素是否需要被翻譯。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

  • Translate屬性的取值必須是yes或no,表示該元素是否需要翻譯。

  • Translate屬性的默認(rèn)值是yes,表示該元素需要翻譯。

  • 當(dāng)Translate屬性的取值為no時(shí),該元素不需要翻譯。

  • 不同瀏覽器對Translate屬性的支持程度不同,可能有不同的翻譯算法和詞典。

  • 在使用Translate屬性時(shí),需要注意安全問題,以避免XSS攻擊和惡意腳本注入。

如果一個(gè)元素設(shè)置了Translate屬性,瀏覽器會(huì)根據(jù)屬性值決定是否翻譯該元素的內(nèi)容。Translate屬性通常用于多語言版本的網(wǎng)站中,以控制哪些元素需要翻譯,哪些元素不需要翻譯。

??? 14. Loading

"Loading" 是 HTML 中的一個(gè)新屬性,它可以用來指定瀏覽器加載資源時(shí)的優(yōu)先級。在加載網(wǎng)頁時(shí),瀏覽器會(huì)按照指定的優(yōu)先級加載資源,以提高網(wǎng)頁的加載速度和用戶體驗(yàn)。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

這個(gè)屬性可以應(yīng)用于諸如 <img>、<iframe>、<script>、<link> 和 <audio> 等標(biāo)簽。

提示:

  • lazy:表示資源應(yīng)該在頁面加載后延遲加載。這是默認(rèn)值。

  • eager:表示資源應(yīng)該在頁面加載時(shí)立即加載。

  • auto:表示瀏覽器應(yīng)該自行決定何時(shí)加載資源。

并非所有瀏覽器都支持 loadingAttributes,因此在使用它們時(shí)需要進(jìn)行兼容性檢查。

??? 15、Onerror

onerror是一個(gè) JavaScript 事件處理程序,用于處理 JavaScript 錯(cuò)誤。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

可以將onerror事件處理程序添加到window對象中,以全局捕獲 JavaScript 錯(cuò)誤。

提示:

  • message:錯(cuò)誤信息。

  • source:發(fā)生錯(cuò)誤的腳本的 URL。

  • lineno:發(fā)生錯(cuò)誤的行號。

  • colno:發(fā)生錯(cuò)誤的列號。

  • error:包含有關(guān)錯(cuò)誤詳細(xì)信息的 Error 對象。

onerror 事件處理程序只能捕獲其他錯(cuò)誤處理程序沒有捕獲的 JavaScript 錯(cuò)誤。因此,在代碼中最好使用 try-catch 語句來捕獲和處理 JavaScript 錯(cuò)誤。

??? 16、Poster

poster是 HTML5 <video> 標(biāo)簽的一個(gè)屬性,用于指定在視頻加載和播放之前顯示的圖像。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

提示:

poster屬性只適用于<video>標(biāo)簽,不適用于<audio>標(biāo)簽。

它通常用于提供視頻的預(yù)覽圖像或縮略圖。

??? 17、Controls

controls是 HTML5 <video>、<audio> 標(biāo)簽中的一個(gè)屬性,用于指定是否顯示媒體播放器的控件。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果將controls屬性設(shè)置為controls,則會(huì)在媒體播放器上顯示控件,例如播放/暫停按鈕、音量控制、進(jìn)度條等。

<!DOCTYPE html>
<html>
  <head>
    <title>Controls Example</title>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src="video.mp4" type="video/mp4" />
      <source src="video.ogg" type="video/ogg" />
      你的瀏覽器不支持視頻標(biāo)簽。 Your browser does not support the video tag.
    </video>
  </body>
</html>

controls屬性僅在支持HTML5的瀏覽器中可用。如果瀏覽器不支持HTML5,則不會(huì)顯示控件。

??? 18、Autoplay

autoplay是 HTML5 <video>、<audio> 標(biāo)簽中的一個(gè)屬性,用于指定媒體是否應(yīng)該在頁面加載時(shí)自動(dòng)播放。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果將autoplay屬性設(shè)置為autoplay,則視頻會(huì)在頁面加載時(shí)自動(dòng)播放。

<!DOCTYPE html>
<html>
  <head>
    <title>Autoplay Example</title>
  </head>
  <body>
    <!-- 請注意,瀏覽器禁止自動(dòng)播放音頻的,
        你可以在視頻加上 muted 屬性靜音播放。
        如果你想要自動(dòng)播放音頻,你需要用戶交互才行
        比如在用戶點(diǎn)擊某處時(shí)播放一段1s的空白音頻,用來打開瀏覽器權(quán)限,在播放其他音頻 
        就不會(huì)收限制了
    -->
    <video width="320" height="240" autoplay>
      <source src="video.mp4" type="video/mp4" />
      <source src="video.ogg" type="video/ogg" />
      Your browser does not support the video tag.
    </video>
  </body>
</html>
`

Autoplay可能會(huì)對用戶體驗(yàn)產(chǎn)生負(fù)面影響,因此請謹(jǐn)慎使用autoplay屬性。在某些情況下,瀏覽器可能會(huì)阻止自動(dòng)播放,例如在移動(dòng)設(shè)備上,用戶必須首先與頁面進(jìn)行交互以允許自動(dòng)播放。

??? 19、Loop

loop是 HTML5 <video>、<audio> 標(biāo)簽中的一個(gè)屬性,用于指定媒體在播放結(jié)束后是否應(yīng)該循環(huán)播放。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果將loop屬性設(shè)置為loop,則視頻在播放結(jié)束后將循環(huán)播放。

<!DOCTYPE html>
<html>
  <head>
    <title>Loop Example</title>
  </head>
  <body>
    <video width="320" height="240" loop>
      <source src="video.mp4" type="video/mp4" />
      <source src="video.ogg" type="video/ogg" />
      Your browser does not support the video tag.
    </video>
  </body>
</html>
`

循環(huán)播放可能會(huì)對用戶體驗(yàn)產(chǎn)生負(fù)面影響,因此請謹(jǐn)慎使用loop屬性。

??? 20、Cite

cite是 HTML 中的一個(gè)全局屬性,可用于指定引文的來源。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

cite屬性的值應(yīng)該是指向引文來源的 URL。

提示:

cite屬性可以應(yīng)用于諸如<blockquote>、<q>、<del>等標(biāo)簽。

如果引文來源不是 URL,則cite屬性的值可以設(shè)置為描述引文來源的字符串

<!DOCTYPE html>
<html>
  <head>
    <title>Cite Example</title>
  </head>
  <body>
    <blockquote cite="https://www.example.com/quote">這是一段來自外部來源的引文。</blockquote>
    <q cite="https://www.example.com/quote"> 這是一段來自外部來源的簡短引用。 </q>
    <del cite="https://www.example.com/deleted"> 本文已從外部來源刪除。 </del>
    <ins cite="https://www.example.com/inserted"> 這段文字是從外部來源插入的。 </ins>
  </body>
</html>

cite屬性不會(huì)自動(dòng)創(chuàng)建鏈接,因此如果需要?jiǎng)?chuàng)建鏈接,您需要使用<a>標(biāo)簽并將href屬性設(shè)置為cite屬性的值。

??? 21、Datetime

datetime是 HTML <time> 標(biāo)簽中的一個(gè)屬性,用于指定日期和時(shí)間。datetime屬性用于指定HTML <time>標(biāo)簽中的日期和時(shí)間。它提供了一種標(biāo)準(zhǔn)化的方法來表示時(shí)間和日期信息,并且可以幫助搜索引擎和瀏覽器理解網(wǎng)頁中的日期和時(shí)間信息。此外,datetime屬性還可以用于計(jì)算時(shí)間差,從而實(shí)現(xiàn)一些時(shí)間相關(guān)的功能。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

datetime屬性的值應(yīng)該是一個(gè)有效的日期和時(shí)間格式,例如 YYYY-MM-DDThh:mm:ss。

datetime屬性不會(huì)自動(dòng)格式化日期和時(shí)間,因此您需要使用 JavaScript 或其他工具來格式化日期和時(shí)間。

??? 22、Async

async是 HTML <script> 標(biāo)簽中的一個(gè)屬性,用于指定腳本是否應(yīng)該異步加載。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果將async屬性設(shè)置為async,則腳本將異步加載,不會(huì)阻塞頁面的解析和渲染。

異步加載的腳本可能在頁面的其他部分加載之前執(zhí)行,因此請謹(jǐn)慎使用。如果腳本依賴于頁面的其他部分,則可能會(huì)導(dǎo)致錯(cuò)誤。

??? 23、Defer

defer是 HTML <script> 標(biāo)簽中的一個(gè)屬性,用于指定腳本是否應(yīng)該延遲加載。

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

如果將defer屬性設(shè)置為defer,則腳本將在頁面解析完成后延遲加載,直到執(zhí)行它。

<!DOCTYPE html>
<html>
  <head>
    <title>Defer Example</title>
    <script defer src="script.js"></script>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

在上面的例子中,我們將defer屬性設(shè)置為defer,這將導(dǎo)致腳本被延遲加載。在這種情況下,腳本將在頁面解析完成后執(zhí)行,不會(huì)阻止頁面的加載。

?? 24、Draggable

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

Draggable Draggable是 HTML5 中的一個(gè)屬性,允許用戶通過拖動(dòng)元素來移動(dòng)它們。當(dāng)元素設(shè)置為draggable時(shí),用戶可以使用鼠標(biāo)或觸摸屏拖動(dòng)元素。在拖動(dòng)元素時(shí),將觸發(fā)一系列事件,例如dragstart、drag、dragenter、dragleave、dragover和dragend,這些事件可以用于實(shí)現(xiàn)拖放功能。

????? ?謝謝觀看 :

小伙伴們五一熬夜整理,值不值得你的一個(gè)小小收藏咯,五一倒數(shù)第二天,

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握

分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握文章來源地址http://www.zghlxwxcb.cn/news/detail-432427.html


到了這里,關(guān)于分享24個(gè)強(qiáng)大的HTML屬性 —— 建議每位前端工程師都應(yīng)該掌握的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包