摘要：1. inputmodeinputmode 全局屬性是一個枚舉屬性，它提供了用戶在編輯元素或其內容時可能輸入的數據類型的提示。<input type="text" inputmode="tel" />該屬性可以取以下值：...
1. inputmode
inputmode 全局屬性是一個枚舉屬性，它提供了用戶在編輯元素或其內容時可能輸入的數據類型的提示。
<input type="text" inputmode="tel" />
該屬性可以取以下值：
none： 不使用虛擬鍵盤，這個時候頁面需要使用自定義的鍵盤代替
text： 默認值，會顯示標準輸入鍵盤
decimal： 小數表示鍵盤，除了數字之外可能會有小數點 . 或者千分符逗號 ,。
numeric： 顯示0-9的數字鍵盤。
tel： 手機數字鍵盤，會有星號 * 或者井號 # 鍵。
search： 提交按鈕會顯示 'search' 或者 ‘搜索’。
email： 鍵盤上會有 @ 符號鍵。
url： 鍵盤上會有斜杠 / 符號鍵。
2. pattern
Pattern屬性是用于指定文本框中輸入內容的正則表達式模式。它可以幫助瀏覽器驗證用戶輸入的內容是否符合指定的格式要求。
<input type="text" id="username" name="username" pattern="^[a-zA-Z0-9]{3,10}$" required>如果用戶輸入的內容不符合Pattern屬性指定的正則表達式模式，瀏覽器會顯示一個默認的錯誤提示信息。
Pattern屬性的值必須是一個有效的正則表達式。
Pattern屬性只能應用于文本框、文本域和密碼框等可輸入文本的元素。
Pattern屬性不會阻止用戶輸入非法字符，但會在提交表單時驗證輸入內容是否符合指定的格式要求。
Pattern屬性的錯誤提示信息可以使用title屬性自定義。
Pattern屬性通常與required屬性一起使用，以確保用戶輸入的內容符合指定的格式要求且不為空。例如，可以使用Pattern屬性來驗證用戶輸入的郵政編碼、電話號碼、電子郵件地址等等。
3. contenteditable
HTML中的contenteditable屬性是用于指定元素是否可編輯的屬性。
<div contenteditable="true">我是一段可編輯的區域</div>
Contenteditable屬性的值可以是true、false或inherit。
Contenteditable屬性的默認值為false，表示元素不可編輯。
Contenteditable屬性的值為true時，元素可編輯。
Contenteditable屬性的值為inherit時，元素的可編輯性繼承自父元素。
Contenteditable屬性不會改變元素的默認行為，例如標簽仍然可以跳轉到其他頁面。
在使用Contenteditable屬性時，需要注意安全性問題，避免XSS攻擊和惡意腳本注入。
如果一個元素設置了Contenteditable屬性，那么用戶可以在該元素中輸入文本、插入圖片、修改樣式等等。Contenteditable屬性通常應用于實現富文本編輯器、可編輯的表格等功能。
4. hidden
Hidden屬性是用于指定元素是否隱藏的屬性。
<p hidden>我是一段被隱藏的文本</p>
Hidden屬性是用于指定元素是否隱藏的屬性。
Hidden屬性的值必須是布爾值，即true或false。
Hidden屬性的默認值為false，表示元素不隱藏。
Hidden屬性的值為true時，元素隱藏。
Hidden屬性不同于CSS的display:none屬性，display:none屬性會將元素從頁面中完全移除，無法通過JavaScript等方式訪問該元素。
在使用Hidden屬性時，需要在后臺程序中對隱藏的值進行處理，例如使用隱藏域來存儲隱藏的值。
5. spellcheck
HTML中的 spellcheck屬性是用于指定元素是否啟用拼寫檢查的屬性。
<p contenteditable="true" spellcheck="true">這是可編輯的段落。請試著編輯文本。</p> First name: <input type="text" name="fname" spellcheck="true">
Spellcheck屬性的值必須是布爾值，即true或false。
Spellcheck屬性的默認值為false，表示元素不啟用拼寫檢查。
Spellcheck屬性的值為true時，元素啟用拼寫檢查。
Spellcheck屬性的支持程度因瀏覽器而異，不同瀏覽器可能會有不同的拼寫檢查算法和字典。
在使用Spellcheck屬性時，需要注意安全性問題，避免XSS攻擊和惡意腳本注入。
如果一個元素設置了Spellcheck屬性，那么用戶在該元素中輸入文本時，瀏覽器會自動檢查拼寫錯誤，并在錯誤單詞下方顯示紅色波浪線。Spellcheck屬性通常應用于文本框、文本域等元素，用于提高用戶輸入的準確性。
6. translate
HTML中的translate屬性是用于指定元素是否應該被翻譯的屬性。
<p translate="no">Don't translate this!</p> <p>This can be translated to any language.</p>
Translate屬性的值必須是布爾值，即yes或no。
Translate屬性的默認值為yes，表示元素需要翻譯。
Translate屬性的值為no時，元素不需要翻譯。
Translate屬性的支持程度因瀏覽器而異，不同瀏覽器可能會有不同的翻譯算法和字典。
在使用Translate屬性時，需要注意安全性問題，避免XSS攻擊和惡意腳本注入。
7. loading
HTML中的loading屬性是一個新的屬性，它可以用于指定瀏覽器在加載資源時的優先級。
<img src="http://www.yzmcms.com/images/1.jpg" loading="lazy">
該屬性可以應用于<img>、<iframe>、<script>、<link>和<audio>等標簽上。
lazy：表示資源應該在頁面加載后延遲加載。這是默認值。
eager：表示資源應該在頁面加載時立即加載。
auto：表示瀏覽器應該自行決定何時加載資源。
loading屬性并不是所有瀏覽器都支持的，因此在使用時需要進行兼容性檢查。
8. poster
poster是HTML5中<video>標簽的一個屬性，用于指定在視頻加載之前和播放之前顯示的圖像。
<video src="http://www.yzmcms.com/media/video.mp4" poster="image.png">
poster屬性只適用于<video>標簽，而不適用于<audio>標簽。
9. async
async是HTML中<script>標簽的一個屬性，用于指定腳本是否應該異步加載。
<script src="http://www.yzmcms.com/js/test.js" async></script>
如果將async屬性設置為async，則腳本將異步加載，不會阻止頁面的解析和渲染。
異步加載的腳本可能會在頁面的其他部分加載之前執行，因此需要謹慎使用。如果腳本依賴于頁面的其他部分，可能會導致錯誤。
10. defer
defer是HTML中<script>標簽的一個屬性，用于指定腳本是否應該延遲加載。
<!DOCTYPE html> <html> <head> <title>Defer Example</title> <script src="http://www.yzmcms.com/js/test.js" defer></script> </head> <body> <p>This is a paragraph.</p> </body> </html>
在上面的示例中，我們將defer屬性設置為defer，這將使腳本延遲加載。在這種情況下，腳本將在頁面解析完成后執行，不會阻止頁面的加載。
11. cite
cite屬性通常與<blockquote>和<q>元素一起使用，用來引用文檔、書籍、文章等的標題或者來源信息。這個屬性提供了一個引用的具體來源，通常是一個URL或者是一個指向引用文獻的鏈接。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blockquote 示例</title> </head> <body> <p>以下是愛因斯坦的一段名言：</p> <blockquote cite="https://www.yzmcms.com/einstein-quote"> 不要試圖成為一個成功的人；而是努力成為一個有價值的人。 </blockquote> <p>愛因斯坦曾經說過：<q cite="https://www.yzmcms.com/einstein-quote">不要試圖成為一個成功的人；而是努力成為一個有價值的人。</q></p> </body> </html>
cite屬性的值通常是一個URL，指向引用的來源。
如果你提供的URL不是一個有效的引用來源，瀏覽器可能不會顯示任何特殊效果或鏈接。
在實際應用中，為了可訪問性和語義清晰度，推薦在<cite>標簽內明確寫出引用的來源。
12. dir
dir屬性用于指定文本的方向性，這對于處理從右向左（RTL）的語言（如阿拉伯語或希伯來語）以及從左向右（LTR）的語言非常重要。
<!DOCTYPE html> <html dir="rtl"> <head> <meta charset="UTF-8"> <title>RTL 示例</title> </head> <body> <h1>????? ?? ?? ???? HTML ?????? ???????!</h1> <p>??? ???? ?? ??? ?????? ??? ????? ??????.</p> <div dir="ltr"> <h2>English Text</h2> <p>This text flows from left to right.</p> </div> </body> </html>
dir屬性接受三個值：
ltr (left-to-right): 文本從左向右書寫。
rtl (right-to-left): 文本從右向左書寫。
auto: 瀏覽器根據元素的第一個字符確定文本方向。如果第一個字符是RTL語言的字符，則文本方向自動設為RTL；如果是LTR語言的字符，則文本方向設為LTR。
![YzmCMS使用教程[簡單入門]](/uploads/thumbnail/20160707144637520.jpg)
