【前端】HTML屬性

時間 2019-11-08

標籤前端 html 屬性欄目 HTML 简体版

原文原文鏈接

介紹

HTML元素上的屬性，能夠在元素中添加附加信息。css

能夠在元素中添加附加信息
通常描述於開始標籤
老是以名稱/值對的形式出現，好比：name="value"

全局屬性

本文只介紹全局屬性，個個標籤獨有的屬性，這邊就不一一介紹了。html

id

規定元素的惟一 idjava

例經過 JavaScript 利用 id 屬性來改變一段文本工具

<h1 id="myHeader">Hello World!</h1>
複製代碼

function change_header() {
    document.getElementById("myHeader").innerHTML="Nice day!";
}
複製代碼

class

規定元素的一個或多個類名（引用樣式表中的類）。post

例在head中定義styleui

<head>
    <style type="text/css"> h1.intro {color:blue;} p.important {color:green;} </style>
</head>
複製代碼

使用this

<body>
    <h1 class="intro">Header 1</h1>
    <p>A paragraph.</p>
    <p class="important">Note that this is an important paragraph.</p>
</body>
複製代碼

class 屬性不能在如下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。spa

style

屬性規定元素的行內樣式屬性將覆蓋任何全局的樣式設定，例如在 <style> 標籤或在外部樣式表中規定的樣式。翻譯

例3d

<p style="color: #27ad9a;">段落1</p>
<p style="color: #FFF; background: #27ad9a;">段落2</p>
複製代碼

效果：

lang

規定元素內容的語言。

例

<element lang="language_code">
複製代碼

lang 屬性在如下標籤中無效：<base>, < br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

accesskey

規定激活（使元素得到焦點）元素的便捷按鍵

例經過Alt + F (或者 Shift + Alt + F)打開指定連接(mac：Control + option + F)

<a href="http://www.w3school.com.cn/css/" accesskey="f">CSS</a>
複製代碼

如下元素支持 accesskey 屬性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>

dir

規定元素內容的文本方向

rtl：從右到左
ltr：從左到右

例

<p dir="rtl">Write this text right-to-left!</p>
<p dir="ltr">Write this text left-to-right!</p>
複製代碼

dir 屬性在如下標籤中無效：<base>, < br>, <frame>, <frameset>, < hr>, <iframe>, <param> 以及 <script>

title

規定關於元素的額外信息一般會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）

例

<a href="https://www.jianshu.com/u/769d3d3a9d4b" title="個人簡書主頁">連接</a>
複製代碼

效果：

title 屬性常與 form 以及 a 元素一同使用，以提供關於輸入格式和連接目標的信息。同時它也是 abbr 和 acronym 元素的必需屬性。

tabindex

規定元素的 tab 鍵次序。

例

<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="1">連接1</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="3">連接3</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="2">連接2</a>
複製代碼

效果：

如下元素支持 tabindex屬性：<a>, <area>, <button>, <input>, <object>, <select> 以及<textarea>

HTML5中添加的全局屬性

contenteditable

規定元素內容是否可編輯，true、false

若是元素未設置 contenteditable 屬性，那麼元素會從其父元素繼承該屬性。

contextmenu

屬性規定元素的上下文菜單。當用戶右鍵點擊元素時，會出現上下文菜單

例

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>
複製代碼

data-*

用於存儲頁面或應用程序的私有自定義數據

例

<ul>
<li data-animal-type="鳥類">喜鵲</li>
<li data-animal-type="魚類">金槍魚</li> 
<li data-animal-type="蜘蛛">蠅虎</li> 
</ul>
複製代碼

draggable

規定元素是否可拖動

例

<p draggable="true">這是一個可拖動的段落。</p>
複製代碼

連接和圖像默認是可拖動的

dropzone

規定在元素上拖動數據時，是否拷貝、移動或連接被拖動數據。

例

<div dropzone="copy"></div>
複製代碼

hidden

元素隱藏

例

<p hidden>這個段落應該被隱藏。</p>
複製代碼

hidden 屬性也可用於防止用戶查看元素，直到匹配某些條件（好比選擇了某個複選框）。而後，JavaScript 能夠刪除 hidden 屬性，以使此元素可見。

spellcheck

規定是否對元素進行拼寫和語法檢查

例

<p contenteditable="true" spellcheck="true">這是一個段落。</p>
複製代碼

能夠對如下內容進行拼寫檢查

input 元素中的文本值（非密碼）
<textarea> 元素中的文本
可編輯元素中的文本

translate

規定是否應該翻譯元素內容

例

<p translate="no">請勿翻譯本段。</p>
<p>本段可被譯爲任意語言。</p>
複製代碼

Tips

一、在某些個別的狀況下，好比屬性值自己就含有雙引號，那麼您必須使用單引號，如：name='John "ShotGun" Nelson' 二、class 屬性能夠多用，中間用空格隔開，如：class="class1 class2 class3 " 三、id 屬性只能單獨設置，如：id="id1 "