整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 屬性

          性是 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引入

          css樣式文件引入的方式有兩種,分別是link標簽和@import。

          • link語法結構

          link語法結構如下,注意rel='stylesheet'屬性要加上。

          link語法結構

          • @import語法結構

          當@import用在html中時,需要配合style標簽

          @import在html中

          當@import用在css文件中,直接使用@import url()即可

          @import在css中

          link與@import的區別與選擇

          既然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。

          readonly與disabled屬性

          html元素的readonly與disabled屬性一般都是用于無法改變表單的內容,但是兩者也是有區別的。

          • readonly屬性只針對input(text,password)和textarea元素,而disabled適用于所有表單元素,包括select,radio,checkbox,button等。

          • 在表單元素使用了disabled后,該元素的的值不會隨著form的action請求傳遞到服務器端,而使用readonly的元素值可以傳遞到服務器端。

          以下是一些關于兩者的使用建議。

          • 在表單中為用戶預填的唯一標識碼,不允許用戶改動,而且需要傳遞到后臺的使用readonly屬性。

          • 用戶提交完表單元素后,等待服務器端的驗證,這個過程應該將元素設為disabled,button和submit也應該設為disabled,以防止重復提交。

          img元素的title和alt屬性

          • title屬性

          img標簽的title屬性是用來提供一些建議性的信息,在鼠標停留在上方時會顯示,它對于圖片來說只是一種注釋性的信息,重要性偏低。

          • alt屬性

          alt屬性是為不能顯示圖像時,用來指定替換文字,需要注意的是替換文字是用來代替文字的,而不是用來注釋文字的。

          • 屬性的使用

          在做圖片為主的網頁時,考慮到網頁的SEO,應當設置圖片的alt屬性為圖片的真實內容,而給title設置一些建議性的內容。

          總結

          今天這篇文章主要將了幾個html中容易混淆的屬性,你有收獲嗎?


          主站蜘蛛池模板: 亚洲A∨精品一区二区三区| 成人免费一区二区无码视频| 久久精品一区二区三区不卡| 日韩一区二区三区无码影院| 韩国福利影视一区二区三区| 无码人妻精品一区二区三区9厂| 韩国福利一区二区美女视频| 成人无号精品一区二区三区| 一区国严二区亚洲三区| 一区二区乱子伦在线播放| 一区二区视频在线观看| 久久人妻无码一区二区| 亚洲国产精品一区二区第一页免 | 3D动漫精品一区二区三区| 国产微拍精品一区二区| 亚洲视频在线一区二区| 亚洲AV午夜福利精品一区二区| 亚洲福利视频一区二区三区| 日韩精品国产一区| 国内精品无码一区二区三区| 2018高清国产一区二区三区| 日韩A无码AV一区二区三区| 无码人妻精品一区二区三区东京热 | 97精品国产福利一区二区三区| 久久一区不卡中文字幕| 冲田杏梨AV一区二区三区| 国产色情一区二区三区在线播放| 国产精品综合AV一区二区国产馆| 国产suv精品一区二区6| 日韩精品一区二区亚洲AV观看 | 一区二区三区AV高清免费波多| 无码精品人妻一区二区三区免费看| 精品无码国产一区二区三区麻豆| 国产区精品一区二区不卡中文| 国产精品福利一区| 久久久久人妻一区精品色| 国产精品女同一区二区久久 | 内射女校花一区二区三区| 韩国资源视频一区二区三区| 人妻少妇久久中文字幕一区二区 | 国产成人精品一区二区秒拍|