博客較長，點擊右側目錄按鈕方便查看

屬性

HTML元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述於開始標籤
屬性總是以名稱/值對的形式出現，比如：name=“value”

屬性常用引用屬性值

屬性值應該始終被包括在引號內。
雙引號是最常用的，不過使用單引號也沒有問題。
在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name=‘John “ShotGun” Nelson’

使用小寫屬性

屬性和屬性值對大小寫不敏感。
不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。

全局屬性

New:HTML5 新屬性。

屬性	描述
accesskey	設置訪問元素的鍵盤快捷鍵。
class	規定元素的類名（classname）
contenteditable`New`	規定是否可編輯元素的內容。
data-*`New`	用於存儲頁面的自定義數據
dir	設置元素中內容的文本方向。
draggable`New`	指定某個元素是否可以拖動
hidden`New`	hidden 屬性規定對元素進行隱藏。
id	規定元素的唯一 id
lang	設置元素中內容的語言代碼。
style	規定元素的行內樣式（inline style）
tabindex	設置元素的 Tab 鍵控制次序。
title	規定元素的額外信息（可在工具提示中顯示）

accesskey

accesskey 屬性規定激活（使元素獲得焦點）元素的快捷鍵。

語法

<element accesskey="character">

用法

在不同操作系統中不同的瀏覽器中訪問快捷鍵的方式不同：

Browser	Windows	Linux	Mac
Internet Explorer	[Alt] + accesskey	N/A
Chrome	[Alt] + accesskey	[Alt] + accesskey	[Control] [Alt] + accesskey
Firefox	[Alt] [Shift] + accesskey	[Alt] [Shift] + accesskey	[Control] [Alt] + accesskey
Safari	[Alt] + accesskey	N/A	[Control] [Alt] + accesskey
Opera	Opera 15 or newer: [Alt] + accesskey Opera 12.1 or older: [Shift] [Esc] + accesskey	Opera 15 or newer: [Alt] + accesskey Opera 12.1 or older: [Shift] [Esc] + accesskey	Opera 15 or newer: [Alt] + accesskey Opera 12.1 or older: [Shift] [Esc] + accesskey

示例代碼

<a href="https://blog.csdn.net/qq_23934063/article/details/104150497" accesskey="h">【JQuery學習筆記day11】HTML 佈局</a><br>
<a href="https://blog.csdn.net/qq_23934063/article/details/104167844" accesskey="c">【JQuery學習筆記day12】HTML 表單</a>

class

class 屬性定義了元素的類名。

語法

<element class="classname">

用法

class 屬性通常用於指向樣式表的類。
class 屬性可以用於 JavaScript 中（通過 HTML DOM）, 來修改 HTML 元素的類名。
class 屬性如需爲一個元素規定多個類，用空格分隔類名。 <span class="left important">. HTML 元素允許使用多個類。
名稱規則：

必須以字母 A-Z 或 a-z 開頭
可以是以下字符： (A-Za-z), 數字 (0-9), 橫杆 ("-"), 和下劃線 ("_")
在 HTML 中, 類名是區分大小寫的

示例代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>橙皮雞蛋 【JQuery學習筆記day14】HTML 屬性</title>
<style>
h1.intro 
{
	color:blue;
}
p.important 
{
	color:green;
}
</style>
</head>
<body>

<h1 class="intro">標題 1</h1>
<p>段落1。</p>
<p class="important">段落2。</p>

</body>
</html>

顯示效果

contenteditable

contenteditable 屬性指定元素內容是否可編輯。
當元素中沒有設置 contenteditable 屬性時，元素將從父元素繼承。

語法

<element contenteditable="true|false">

用法

contenteditable=“true” 內容可編輯
contenteditable=“false” 內容不可編輯

示例代碼

<p contenteditable="true">這是一個段落。是可編輯的。嘗試修改文本。</p>

顯示效果

data-*

data-*屬性用於存儲私有頁面後應用的自定義數據。
data-* 屬性可以在所有的 HTML 元素中嵌入數據。
自定義的數據可以讓頁面擁有更好的交互體驗（不需要使用 Ajax 或去服務端查詢數據）。
data-* 屬性由以下兩部分組成：
屬性名不要包含大寫字母，在 data- 後必須至少有一個字符。
該屬性可以是任何字符串
自定義屬性前綴 “data-” 會被客戶端忽略

語法

<element data-*="somevalue">

示例代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>【JQuery學習筆記day14】HTML 屬性</title> 
<script>
function showDetails(animal)
{
	var animalType = animal.getAttribute("data-animal-type");
	alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>物種</h1>
<p>點擊一個物種，看看它是什麼類型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

顯示效果

dir

dir 屬性規定元素內容的文本方向。

語法

<element dir="ltr|rtl|auto">

示例代碼

<p >文本方向從左到右!</p>
<p dir="ltr">文本方向從左到右!</p>
<p dir="rtl">文本方向從右到左!</p>
<p dir="auto">讓瀏覽器根據內容來判斷文本方向。僅在文本方向未知時推薦使用。</p>

顯示效果

draggable

draggable 屬性規定元素是否可拖動。
鏈接和圖像默認是可拖動的。

語法

<element draggable="true|false|auto">

用法

draggable=“true” 規定元素是可拖動的。
draggable=“false” 規定元素是不可拖動的。
draggable=“auto” 使用瀏覽器的默認特性。

示例代碼

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>【JQuery學習筆記day14】HTML 屬性</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
	ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動的段落。請把該段落拖入上面的矩形。</p>
<p id="drag2" draggable="true" >這是一段可移動的段落。需要腳本完成其他功能。</p>
<p id="drag3" ondragstart="drag(event)">這是一段不可移動的段落。</p>

</body>
</html>

顯示效果

hidden

hidden 屬性規定對元素進行隱藏。
隱藏的元素不會被顯示。
如果使用該屬性，則會隱藏元素。
可以對 hidden 屬性進行設置，使用戶在滿足某些條件時才能看到某個元素（比如選中複選框，等等）。然後，可使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。

語法

<element hidden="hidden">

示例代碼

<p hidden="hidden">這是一段隱藏的段落。</p>
<p>這是一段可見的段落。</p>

顯示效果

id

id 屬性規定 HTML 元素的唯一的 id。
id 在 HTML 文檔中必須是唯一的。
id 屬性可用作鏈接錨（link anchor），通過 JavaScript（HTML DOM）或通過 CSS 爲帶有指定 id 的元素改變或添加樣式。

語法

<element id="id">

用法

規定元素的唯一 id。
命名規則：

必須以字母 A-Z 或 a-z 開頭
其後的字符：字母(A-Za-z)、數字(0-9)、連字符("-")、下劃線("_")、冒號(":") 以及點號(".")
值對大小寫敏感

示例代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>【JQuery學習筆記day14】HTML 屬性</title> 
<script>
function displayResult()
{
	document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
</head>

<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">編輯文本</button>

</body>
</html>

顯示效果

lang

lang 屬性規定元素內容的語言。
即使設置了 lang 屬性，也可能無效，因爲 xml:lang 屬性更加優先。

對於CSS僞類:lang，如果它們的名稱不同，則兩個無效的語言名稱是不同的。比如:lang(es)匹配lang =“es-ES”和lang =“es-419”，而:lang(xyzzy)與lang =“xyzzy-Zorp！”不匹配。

語法

完整的BCP47語法足以標記極其特定的語言方言，但大多數用法都要簡單得多。
語言標記由連字符分隔的語言子標籤組成，其中每個子標籤指示該語言的特定屬性。 3個最常見的子標籤是：

語言子標籤

Required。一個2或3個字符的代碼，用於定義基本語言，通常全部用小寫編寫。例如，English的語言代碼是en，Badeshi的代碼是bdz。

腳本子標籤

該子標籤定義了用於該語言的書寫系統，並且總是4個字符長，首字母大寫。例如，French-in-Braille是fr-Brai，ja-Kana是用Katakana字母書寫的日文。如果語言是以非常典型的方式編寫的，例如拉丁字母表中的英語，則無需使用此子標籤。

地區子標籤

該子標籤定義了來自特定位置的基本語言的方言，並且是ALLCAPS中與國家代碼匹配的2個字母，或者是與非國家區域匹配的3個數字。例如，es-ES是西班牙語中的西班牙語，es-013是中美洲的西班牙語。 “國際西班牙語”就是es。
如果兩者都存在，則腳本子標籤位於區域子標籤之前 ––ru-Cyrl-BY是俄語，用白俄羅斯語中的西裏爾字母書寫。

<element lang="language_code">

示例代碼

<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>

顯示效果

style

style 全局屬性包含應用到元素的 CSS 樣式聲明。要注意樣式最好定義在單獨的文件中。這個屬性以及<style> 元素的主要目的是快速裝飾。
style 屬性規定元素的行內樣式（inline style）。
style 屬性將覆蓋任何全局的樣式設定，例如在 <style> 標籤或在外部樣式表中規定的樣式。
這個屬性不能用於傳遞語義信息。即使所有樣式都移除了，頁面也應該保留正確語義。通常它不應用於隱藏不相關的信息；這應該使用 hidden 屬性來實現。

語法

<element style="style_definitions">

用法

一個或多個由分號分隔的 CSS 屬性和值。 (例如： style=“color:blue;text-align:center”)

示例代碼

<h1 style="color:blue;text-align:center">這是一個標題</h1>
<p style="color:green">這是一個段落。</p>

顯示效果

這是一個標題

這是一個段落。

tabindex

tabindex 屬性規定當使用 “tab” 鍵進行導航時元素的順序。
它接受一個整數作爲值，具有不同的結果，具體取決於整數的值：

tabindex=負值
(通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通過鍵盤導航來訪問到該元素，用JS做頁面小組件內部鍵盤導航的時候非常有用。
tabindex=“0” ，表示元素是可聚焦的，並且可以通過鍵盤導航來聚焦到該元素，它的相對順序是當前處於的DOM結構來決定的。
tabindex=正值，表示元素是可聚焦的，並且可以通過鍵盤導航來訪問到該元素；它的相對順序按照tabindex的數值遞增而滯後獲焦。如果多個元素擁有相同的 tabindex，它們的相對順序按照他們在當前DOM中的先後順序決定。
tabindex 的最大值不應超過 32767。如果沒有指定，它的默認值爲 0。

根據鍵盤序列導航的順序，值爲 0 、非法值、或者沒有 tabindex 值的元素應該放置在 tabindex 值爲正值的元素後面。
如果我們在 <div> 上設置了 tabindex 屬性，它的子元素內容不能使用箭頭鍵來滾動，除非我們在內容上也設置 tabindex。

語法

<element tabindex="number">

示例代碼

<a href="//www.google.com/" tabindex="1">Google</a><br />
<a href="//www.microsoft.com/" tabindex="3">Microsoft</a><br />
<a href="//developer.mozilla.org/" tabindex="2">mozilla</a>

Google
Microsoft
mozilla

title

title 全局屬性包含了表示諮詢信息文本，和它屬於的元素相關。
title 屬性規定關於元素的額外信息。
這些信息通常會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。
這個信息通常存在，但絕不必要，作爲提示信息展示給用戶。一些典型用例：

鏈接：被鏈接文檔的標題或描述
媒體元素，例如圖像：描述或關聯信息
段落：腳註或者相關的評論
引用：作者信息，以及其他
如果省略了這個屬性，就意味着這個元素的最近祖先的標題仍然是相關的（並且可以用作元素的提示信息）。如果這個屬性設爲空字符串，它就明確意味着，它的最近祖先的標題是不相關的（並且不應用於這個元素的提示信息）。

額外的語義可以附加到 <link>，<abbr>，<input> 和 { HTMLElement(“menuitem”) }} 元素的 title 屬性。
title 屬性可以包含多行。

語法

<element title="text">

text 規定元素的工具提示文本（tooltip text）。

示例代碼

<p><abbr title="世界衛生組織">WHO</abbr> 成立於 1948。</p>
<p title="菜鳥教程">菜鳥教程</p>

WHO 成立於 1948。

mozilla