資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 中 id 屬性的有效值是什麼？
HTML 中的 ID 屬性稱為元素的唯一識別符號。它透過使用 CSS 樣式、指令碼目標和錨鏈接來幫助識別網頁中的某個區域。
首先讓我們看看，HTML 中 ID 屬性有什麼用 -
ID 屬性可以透過使用命令在網頁上執行不同的操作 -
ID 屬性用於指令碼引用 - 在 JavaScript 函式中，我們使用 ID 屬性來透過我們的指令碼對頁面上的精確元素進行更改。
ID 屬性用於樣式表選擇器 - 大多數人都會使用此功能，因為如果我們想為網頁上的一個專案設定樣式，大多數情況下都會使用此屬性。
ID 屬性用於連結的命名錨點 - 網頁瀏覽器只需指向 URL 末尾以雜湊標記開頭的 ID 即可轉到我們網頁文件中的特定位置。
語法
HTML 中 ID 屬性的語法或用法 -
<tag id = #values>
HTML 中的 ID 屬性規則 -
確保 ID 屬性遵循以下規則 -
ID 屬性至少應包含一個字元，起始字母應為字元 (a-z) 或 (A-Z)，其餘字母可以是任何型別，甚至可以是特殊字元。
ID 屬性不包含任何空格。
在文件中，每個 ID 必須是唯一的。
示例
以下示例顯示了 ID 屬性的值 -
<div id = "#123"> .... </div>
<tag id = "#%ADF@"> .... </tag>
<h1 id = " _H"> .... </h1>
<div id = "@"> .... </tag>
<tag id = " {}"> .... </tag>
在瞭解這些 ID 屬性值是否有效之前，嘗試瞭解類屬性以及類和 ID 屬性之間的區別，這有助於詳細瞭解 ID 屬性。
類屬性
我們可以在任何標籤的起始標籤中建立一個類。例如，如果我們想將樣式應用於該類，我們只需在樣式標籤中使用 (.) 點符號，後跟類名。
示例
讓我們看下面的例子來理解類屬性 -
<!DOCTYPE html>
<html>
<head>
<title>Class attribute</title>
<style type="text/css">
.heading {
color: green;
text-align: center;
}
#heading {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="heading">Welcome To TutorialsPoint.</h1>
<h2 id="heading">HTML5 Tutorial</h2>
</body>
</html>
當我們執行上述程式碼時，將顯示一個包含兩個標題的網頁，一個帶有類屬性 (歡迎使用 Tutorialspoint)，另一個帶有 ID 屬性 (HTML5 教程)。
ID 屬性和類屬性之間的區別
ID 和類屬性之間的區別在於，ID 屬性可用於識別一個元素，而類屬性可用於識別多個元素。
ID 屬性
每個元素只能有一個 ID。
每個頁面只能有一個具有該 ID 的元素。
當我們使用驗證時，id 必須是唯一的。
類
您可以在多個元素上使用相同的類。
您可以在同一個元素上使用多個類。
示例
某些 ID 屬性在 HTML 5 中有效，但在層疊樣式表中無效。在這種情況下，建議使用簡單輸出而不是樣式化輸出，因為我們用於 ID 的某些值在 CSS 中可能無效。
以下示例演示了使用 CSS 的簡單 ID 屬性 -
<!DOCTYPE html>
<html>
<head>
<title>Simple Id Attributes</title>
<style>
#@TP {
color: #070770;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#@TP1 {
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="@TP">TutorialsPoint Website</div>
<div id="@TP1">
Html5 Tutorials, CSS Tutorials, JavScript Tutorials
</div>
</body>
</html>
當我們執行上述程式碼時，將顯示兩個 div 元素，一個帶有 ID 屬性 (TutorialsPoint 網站)，另一個帶有其他 ID 屬性 (Html5 教程、CSS 教程、JavaScript 教程)。
示例
現在我們將更改上述示例中的 ID 值。ID 值在 HTML 5 和 CSS 中有效。因此，由於有效的 ID，我們可以獲得樣式化輸出。
以下是演示有效 ID 功能的示例 -
<!DOCTYPE html>
<html>
<head>
<title>Simple Id Attributes</title>
<style>
#TP1 {
color: #070770;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#TP2 {
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="TP1">TutorialsPoint Website</div>
<div id="TP2">
Html5 Tutorials, CSS Tutorials, JavScript Tutorials
</div>
</body>
</html>
當我們執行上述程式時，將顯示兩個帶有 ID 屬性的 div 元素，如下所示 -
示例
考慮另一個示例，它演示了“JavaScript 不支援無效 ID”的概念。
<!DOCTYPE html>
<html>
<body>
<h1 id="1TP">TutorialsPoint WEBSITE Content</h1>
<button onclick="Value()">
Display
</button>
<style>
#.1TP {
color: blue;
}
</style>
<script>
function Value() {
document.getElementById(".1TP").innerHTML = "TutorialsPoint";
}
</script>
</body>
</html>
示例
考慮另一個示例，它演示了 JavaScript 和 HTML 支援的有效 ID。
<!DOCTYPE html>
<html>
<body>
<h1 id="TP">TutorialsPoint WEBSITE Content</h1>
<button onclick="displayResult()">
Display
</button>
<style>
#TP{
color: blue;
}
</style>
<script>
function displayResult() {
document.getElementById("TP").innerHTML = "TutorialsPoint";
}
</script>
</body>
</html>
當我們執行上述程式時，將顯示一個 ID 屬性以及標有“顯示”的按鈕。
當 ID 值僅採用字元時，JavaScript 和 HTML 支援該 ID，並且當單擊“顯示”按鈕時，將開啟以下頁面。
1K+ 瀏覽量
