性是 HTML 元素提供的附加信息。
HTML 屬性
HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現,比如:name="value"。
屬性實例
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定:
實例
<a>這是一個鏈接</a>
HTML 屬性常用引用屬性值
屬性值應該始終被包括在引號內。
雙引號是最常用的,不過使用單引號也沒有問題。
提示: 在某些個別的情況下,比如屬性值本身就含有雙引號,那么您必須使用單引號,例如:name='John "ShotGun" Nelson'
HTML 提示:使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過,萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
HTML 屬性參考手冊
查看完整的HTML屬性列表: HTML 標簽參考手冊。
下面列出了適用于大多數 HTML 元素的屬性:
屬性 | 描述 |
---|---|
class | 為html元素定義一個或多個類名(classname)(類名從樣式文件引入) |
id | 定義元素的唯一id |
style | 規定元素的行內樣式(inline style) |
title | 描述了元素的額外信息 (作為工具條使用) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
在前端開發編寫html文件的時候,我們可能會很熟練的寫出常見的html元素,但是如果問到某些元素的差別時,大家不一定能說的出來,今天就給大家總結一下那些很常見但容易混淆的屬性。
html與css
css樣式文件引入的方式有兩種,分別是link標簽和@import。
link語法結構
link語法結構如下,注意rel='stylesheet'屬性要加上。
link語法結構
@import語法結構
當@import用在html中時,需要配合style標簽
@import在html中
當@import用在css文件中,直接使用@import url()即可
@import在css中
既然link與@import都可以用來引入css,那么它們的區別是什么呢?我們又該如何選擇呢?
link是XHTML標簽的一種,除了可以加載css外,還可以定義其他rel屬性,而@import只能用來加載css。
link標簽在加載css時,與頁面一同加載,而@import需要等到網頁完全加載以后才進行加載。
link是XHTML標簽,不存在兼容問題,而@import是在CSS2.1中提出的,對于低版本的瀏覽器不支持。
link標簽可以通過Javascript代碼去控制其屬性,而@import不可以。
javascript控制link
@import支持在css文件中再次引入其他css文件,方便對多個css文件的管理。
因為@import引入的文件需要在網頁完全加載后再加載,如果在網絡速度較慢的情況下,會出現頁面閃現,因此建議使用link標簽代替@import。
html元素的readonly與disabled屬性一般都是用于無法改變表單的內容,但是兩者也是有區別的。
readonly屬性只針對input(text,password)和textarea元素,而disabled適用于所有表單元素,包括select,radio,checkbox,button等。
在表單元素使用了disabled后,該元素的的值不會隨著form的action請求傳遞到服務器端,而使用readonly的元素值可以傳遞到服務器端。
以下是一些關于兩者的使用建議。
在表單中為用戶預填的唯一標識碼,不允許用戶改動,而且需要傳遞到后臺的使用readonly屬性。
用戶提交完表單元素后,等待服務器端的驗證,這個過程應該將元素設為disabled,button和submit也應該設為disabled,以防止重復提交。
title屬性
img標簽的title屬性是用來提供一些建議性的信息,在鼠標停留在上方時會顯示,它對于圖片來說只是一種注釋性的信息,重要性偏低。
alt屬性
alt屬性是為不能顯示圖像時,用來指定替換文字,需要注意的是替換文字是用來代替文字的,而不是用來注釋文字的。
屬性的使用
在做圖片為主的網頁時,考慮到網頁的SEO,應當設置圖片的alt屬性為圖片的真實內容,而給title設置一些建議性的內容。
今天這篇文章主要將了幾個html中容易混淆的屬性,你有收獲嗎?
端訓練營:1v1私教,終身輔導計劃,幫你拿到滿意的 offer。 已幫助數百位同學拿到了中大廠 offer。歡迎來撩~~~~~~~~
Hello,大家好,我是 Sunday。
說起 HTML 很多同學都會認為,這不就是小菜一碟嗎?這玩意有啥難度?你也太瞧不起我了吧!
不過看似越簡單的東西,我們越會忽略,同時它們還可以提供出令人驚艷的效果!
過去,我們經常使用本機瀏覽器窗口作為彈出框元素來顯示頂層內容(例如:常見的 dialog)。
可是這些默認的彈窗并不友好。所以后來,我們使用外部庫(Element、AntD 等)構建了頁面內的、經過CSS樣式化的彈出框,以好看的UI方式方式顯示此類內容。
不過現在,你可以使用純HTML創建彈出框,而無需編寫任何JavaScript代碼。現代Web標準通過Popover API提供了內置的彈出框支持。
看下面的源代碼:
<style>
div[popover]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
}
div[popover] {
padding: 12px;
border: none;
}
</style>
<div id="pop" popover>
我是彈出的內容
</div>
<button popovertarget="pop">展示 popover</button>
上述HTML使用了 popover 屬性來實現一個簡單的彈出框元素。
它使用 popovertarget 屬性來在不使用JavaScript的情況下顯示彈出框元素。此外,我們使用了 ::backdrop 偽元素來樣式化彈出框的背景:
你可以使用 @starting-style 為原生彈出框添加動畫,正如 MDN 文檔(https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style)中所解釋的那樣。
HTML標準提供了 autofocus 屬性,用于在頁面加載和對話框/彈出框顯示狀態下自動聚焦表單元素。
看下面的示例模態框,它在第一個輸入已經預填充的情況下自動將焦點設置到第二個文本輸入框上:
<dialog id="dlg">
<form method="dialog">
<input type="text" placeholder="Firstname" value="張" />
<div style="height: 8px"></div>
<input type="text" placeholder="Lastname" autofocus />
<div style="height: 8px"></div>
<button>保存</button>
</form>
</dialog>
<button onclick="document.getElementById('dlg').showModal()" autofocus>點我</button>
上面的HTML在兩個地方使用了 autofocus 屬性:
此外,我們還使用了 method="dialog" 屬性來設置關閉對話框而無需使用JavaScript代碼。
表單校驗是日常開發的常見需求。不過當我們脫離了 Element、AntD 這些組件庫之后,你還知道如何實現表單校驗嗎?
其實對于 HTML的 input 元素來說,它是有 pattern 屬性的
假設我們需要驗證一個產品標識符,它包含兩個英文字母和六個數字,用連字符連接,即 GR-100200。
以下HTML片段實現了上述要求的驗證功能的文本輸入框:
<form>
<label for="productID"> ID:</label>
<input type="text" id="productID" name="productID" pattern="[A-Za-z]{2}-\d{6}" title="Please enter a valid product identifier (e.g., GR-100200)" required>
<button type="submit">Submit</button>
</form>
在上面的示例中,我們使用 pattern 屬性設置了一個正則表達式,用于驗證產品標識符。此正則表達式要求兩個英文字母(不區分大小寫)后跟一個連字符,然后是六個數字。另外,我們還添加了 title 屬性,以提供關于輸入格式的說明。最后,我們將 required 屬性添加到輸入元素上,以確保用戶輸入有效的產品標識符。
這里,pattern 屬性通過顯示瀏覽器特定的驗證消息來阻止表單提交無效輸入。但是他必須要在點擊了 提交 按鈕之后才可以進行校驗。
如果我們想要進行實時校驗(根據輸入內容實時校驗)怎么辦呢?
我們可以使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證,如下所示的 HTML 代碼片段所示:
<style>
input[type=text] {
border: #000 1px solid;
border-radius: 4px;
outline: none;
padding: 6px;
}
input[type=text]:invalid {
border: red 1px solid;
+span::before {
content: '?';
display: inline;
color: red;
}
}
input[type=text]:valid {
border: green 1px solid;
+span::before {
content: '?';
display: inline;
color: green;
}
}
</style>
<input type="text" placeholder="i.e., GR-100200" pattern="[A-Z]{2}-[0-9]{6}" required />
<span></span>
上面的HTML片段使用CSS代碼根據驗證狀態設置樣式。無效輸入會將輸入框邊框設置為紅色,并顯示紅色的叉號。與此同時,有效輸入會呈現綠色邊框和綠色的勾號符號:
手機通過虛擬鍵盤進行輸入,這個鍵盤有幾種模式。
例如,它可能僅顯示數字鍵用于數字輸入元素,對于一般的字符串輸入則顯示完整的鍵盤界面。移動瀏覽器會根據輸入類型自動更改虛擬鍵盤模式,但開發人員也可以使用 input 元素的 inputmode 屬性進行自定義。
<input type="text" pattern="[0-9]{6}" inputmode="numeric" maxlength="6">
在上面的示例中,我們使用了 inputmode 屬性來指定虛擬鍵盤的模式為 numeric,以便在移動設備上只顯示數字鍵盤。同時,我們還使用了 pattern 屬性來限制輸入只能是六位數字。maxlength 屬性限制輸入的最大長度為六位。
圖片懶加載是日常開發中的常見需求。我們在實現懶加載時大多數會使用一些現成的庫或者基于 Intersection Observer API 進行處理
不過很多同學不知道的是:img 標簽的 loading 屬性可以讓你在不編寫JavaScript代碼或使用第三方庫的情況下啟用瀏覽器級別的圖片懶加載。
看下面的源代碼:
<div style="height: 2000px"></div>
<img src="https://gips3.baidu.com/it/u=45328832,131546734&fm=3039&app=3039&f=JPEG?w=1024&h=1024
" loading="lazy" />
以這種方式實現圖片懶加載的功能,當頁面往下滾動的時候,圖片動態加載:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。