性是 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,我們一起飛!
多時候對有前端工程師來講,頁面效果直接會轉嫁個CSS或JS,對HTML的一些屬性了解的并不充分,接下來介紹一些有意思的HTML屬性。
1)Multiple
顧名思義就是在一個輸入標簽或選擇標簽中可以輸入多個值
<input type="file" multiple>
2)Accept
在<input>包含接受屬性,允許用戶傷上傳指定的文件類型。我們在設置的過程中,需要設置指定的文件格式。并用逗號分開即可。傳遞文件類型包含圖片、音頻、視頻、文檔,等自定義文件類型。
<input type="file" accept=".png, .jpg">
3)Contenteditable
這個屬性比較有意思,允許用戶在前端HTML頁面進行對文本的編輯,只對DOM的可見部分進行編輯。
<div contenteditable="true">我可以隨意編輯!</div>
4)Spellcheck
進行拼寫檢查的可編輯段落:
<p contenteditable="true" spellcheck="true">這是一個段落。</p>
5) Translate
Translate告訴瀏覽器是否應該翻譯內容。例如,您可以使用它來防止Google Translate自動嘗試翻譯您的公司或品牌名稱。
<footer><p translate="no">Mark</p></footer>
6) Poster
帶有預覽圖(海報圖片)的視頻播放器:
注釋:Internet Explorer 8 以及更早的版本不支持 <video> 標簽。
<video controls poster="/images/mark.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
7) Download
download 屬性規定被下載的超鏈接目標。
在 <a> 標簽中必須設置 href 屬性。
該屬性也可以設置一個值來規定下載文件的名稱。所允許的值沒有限制,瀏覽器將自動檢測正確的文件擴展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
在前端開發編寫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中容易混淆的屬性,你有收獲嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。